ICS4U Test 1 (Alternate) - HTML / JS / PHP

This test has three tasks. It is due at the end of the period.

All of your work will be stored in the folder:

/students/studentFolder/XXXXXX/t1alt/

That folder already contains html.html, js.html, php.php (all empty) and camera.jpg. Put your work in those files.

Task	File	Weight
1 - HTML	html.html	50%
2 - JavaScript	js.html	25%
3 - PHP	php.php	25%

Each task is marked on its own Level 1 to 4 scale based on what works. Code commenting, formatting and variable/function naming will move the mark up or down.

Task 1 - HTML (50%)

Page to replicate (picture)

Rebuild the page in the picture as closely as you can in html.html. The image is camera.jpg.

Things the picture cannot show you:

The three links at the top (About, Photo Walks, What to Bring) each jump to their section on the same page.
Every "Back to top" link jumps back to the top of the page.

Level 1 - All headings and text are present, the list is present and the image displays.
Level 2 - Level 1, plus the table is correct: rows, columns, header row and borders.
Level 3 - Level 2, plus all of the links that jump within the page work.
Level 4 - Level 3, plus the styling matches the picture: colours, font, alignment and image size.

Task 2 - JavaScript (25%)

Page to replicate (working demo)

Rebuild the demo in js.html. Clicking Resize must call a function you write. Try the demo several times with different numbers to see everything it does.

Level 1 - All page elements are present and the button calls a function.
Level 2 - Level 1, plus the function changes one element on the page.
Level 3 - Level 2, plus the image width becomes the number typed in the box, and the status changes its text and colour.
Level 4 - Level 3, plus the "Times resized" count goes up by one every time the button is clicked.

Task 3 - PHP (25%)

Page to replicate (working demo)

Rebuild the demo in php.php. Reload the demo a few times and watch what changes.

Store the club name and the supervisor's name in variables.
Copy this array into your PHP exactly as it is:

$equipment = [
    ["Tripod", rand(0, 3)],
    ["Camera bag", rand(0, 3)],
    ["Zoom lens", rand(0, 3)],
    ["Flash", rand(0, 3)],
    ["Memory card", rand(0, 3)],
    ["Light reflector", rand(0, 3)]
];

Reminder: print_r($equipment); prints the whole array so you can see what is inside it.

Level 1 - The club name and supervisor are stored in variables and shown on the page.
Level 2 - Level 1, plus a loop prints the name of every item in the array.
Level 3 - Level 2, plus the output is a table showing all of the information for every item.
Level 4 - Level 3, plus an if statement makes the row green for every item with a quantity above 0, and the three totals are correct.