You might want to add a script element and maybe a blank function to your HTML template.
Copy the folder containing the three CSS practise pages (csspractise) and rename the copy to jspractise. Download this file and save it in the same folder.
These are the changes the client wants for the pages:
Page 1 - index.html
Change the displayed image from the existing one to the smaller one you just downloaded.
Add an event trigger and an id to the small image so that when the user clicks on the small image it is replaced by the larger one. One line of code in a function should do it.
Page 3 - address.html
In the form element add an onsubmit event trigger. The value should be:
alert('Thank you for your message');
Page 4 - game.html
The probable steps are:
- create a new page called game.html
- download the two new images for Julia and George
- put a suitable h2 heading and a paragraph or two explaining what the user needs to do
- for each user put the same as explained here for Julia:
- a heading for her name (give the h2 an id which has the value julia)
- an image of Julia inside a div
- a paragraph which includes three span elements containing the choice of ages
- in those span elements have onmouseup event triggers which call a function called checkJulia()
- inside the brackets of the three function calls (inside the span elements) put the ages which are being guessed (as parameters)
- create a function called checkJulia() which receives the parameter and uses a == comparison operator to see if it matches her actual age of 45
- if the age is correct it should change the background colour of the heading (Julia) to green
- if not change it to red
There are many possible improvements you could make once you have the basic thing working. Do so if you want to.