@@ -11,18 +11,41 @@ This starter project includes:
Make sure you read the entire Readme through before doing anything.
## How do I get started
Download the repository, and run `npm install` to install everything that is needed (Cypress)
*Handy hint*: to open the page in a browser, put this project in your public_html directory on the student server. Or if you are on your own computer and have Python3 installed, this will often serve the current directory to http://localhost:8000/ :
If you want to run Cypress, you will need to run `npx cypress open`
```sh
python3 -m http.server
```
If you open the page, you will see there are several buttons. Buttons 0 and 1 are implemented for you. You then have 10 tasks, each of which will be marked on a "0, 0.5, or 1 mark" scale depending on how well you do.
The first 8 tasks are behaviours that we want when buttons 2, 3, 4, 5, 6, 7, 8, and 9 are clicked. The 9th and 10th tasks are to write Cypress tests for Buttons 0 and 1.
*Handy hint*: The behaviour of the buttons always involves setting something up with in the `#renderhere` element in the page.
*Handy hint*: `cypress.json` contains the "base URL" that Cypress will be testing. At the moment **it points to the lecturer's home directory** (you'll want to change it so you can test your own code)
Some of the buttons you will be implementing already have cypress tests (giving you plenty of examples). Others do not, and will be marked by hand.
## What you I need to work on this?
If you are working on turing, all the software is already installed.
If you are working on your own computer, you will need nodejs and npm (version 5 or newer). Remember, we can't debug your own computer - turing is your fallback option. I recommend Visual Studio Code as an editor.
## How do I get started?
Clone the repository (or unzip the project zip), and from within the project directory run `npm install` to install everything that is needed (Cypress)
To launch Cypress, run `npx cypress open`
## What is Cypress?
[Cypress](https://www.cypress.io/) is a testing and validation framework. It's a very fast way of checking that a web page does exactly what is expected of it.
You should [check out the docs](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file) if you are ever lost, or check out the code we provided.
Button 3's check is the closest to the solutions you will need, followed by button 4, with buttons 2 and 8 being much more than you need (recusive function calls to check the game states)
Cypress does things in an asynchronous manner - you could think of each call to `cy` going into a FIFO of commands, which are called after the FIFO has been produced.
Button 3's check is the closest to the solutions you will need, followed by button 4, with buttons 2 and 8 being much more than you need (recusive function calls to check the game states)
## What has been built?
...
...
@@ -37,11 +60,9 @@ This displays a simple form for the user to fill in their email address and name
It also displays a custom message if the email address is submitted but empty
### Button 2 through 9
Show that nothing has been written!
### Cypress
All the cypress tests for buttons 2 through 9 have been written! In all cases, Cypress will be looking inside the `#renderhere` element. If it is looking for something specific, it will be listed below.
Cypress tests for many buttons have already been written, to provide you with examples! In all cases, Cypress will be looking inside the `#renderhere` element. If it is looking for something specific, it will be listed below.
## How am I being marked?
...
...
@@ -122,10 +143,31 @@ Cypress will be searching for:
### Button 5:
Your code should
* Render a `canvas` element within the `#renderhere` tag, at least 300px high and wide.
* Make the canvas work like a whiteboard - if the mouse button is held down and the mouse dragged on the canvas, it should paint on the canvas in black
* Please put a CSS border around the canvas so we can see where it is! (We'll need to test this one manually)
### Button 6:
Your code should:
* Render an `svg` element with the `#renderhere` tag, at least 300px high and wide.
* The SVG should show the graph of `sin(x)`. The full height of the SVG should be used to show the curve -- sin(x) varies between -1 and 1, but we'd like that to cover the full 300px height. We would like values of x from 0 to `2 * Math.PI` across the width of the SVG
### Button 7:
Your code should:
* Render an `svg` element with the `#renderhere` tag, at least 300px high and wide.
* The SVG should show the graph of `sin(k * x + t)`.
* The value `k` should come from an input box on the page. It is a number, and editing the number should change the chart
* The value `t` is the time, taken from `(new Date()).getTime()`
* The chart should update at least 30 times per second. Use the `setInterval()` function for this: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
### Button 8: Mastermind
You will be building a game of [Mastermind](https://en.wikipedia.org/wiki/Mastermind_(board_game).
...
...
@@ -174,4 +216,4 @@ In the index.html file we have specified a global variable called `grocery_shop`
* The check-out page should allow users to cancel their order for an item.
* This shouldn't get confused if I order e.g. "3 apples" and "5 apples" separately and cancel the "3 apples" - I still want "5 apples"!
We will be using a different `grocery_shop` value that follows the same structure for marking.
We might use a different `grocery_shop` value that follows the same structure for marking.
