ICS4U Test 1 - 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/t1/
That folder already contains html.html, js.html, php.php
(all empty) and robot.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 robot.jpg.
Things the picture cannot show you:
- The three links at the top (About, Meeting Schedule, Contact) 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 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 Join must call a function you write.
Try the demo several times 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 the text of one element on the page.
- Level 3 - Level 2, plus the heading uses the name typed in the box, and the status changes its text and colour.
- Level 4 - Level 3, plus the member 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.
-
Store the members in an array, in this order:
Avery, Ben, Chloe, Dev, Emma, Farid
- Each member's ID is a random number made with
rand(100,999).
- An ID of 500 or higher is on Team A. Any other ID is on Team B.
- Level 1 - The club name and supervisor are stored in variables and shown on the page.
- Level 2 - Level 1, plus the members are stored in an array and a loop prints every member.
- Level 3 - Level 2, plus the output is a table and each row has a random ID.
- Level 4 - Level 3, plus an
if statement assigns the teams and highlights Team A rows, and the team totals are correct.
