Web Design

This is an informal assessment. You will complete it individually or with a partner. You have 60 minutes to complete as much as you can.

Before we start, create a new folder on your computer. Name it Informal-1. We will upload this to the cloud later.

Part A - Follow these instructions:

  1. Click this link to download a zipped folder.
    • save it in your informal-1 folder
    • right click on it
    • extract the files
  2. Check that there is an html file and an image (.svg format).
  3. Open the webpage called focus2.html with a text editor eg Notepad++. Make sure there is a head seaction with a style section in it and a body section with a script section in it. If any of these sections is missing, include them.
  4. Change the css affecting the image so that the border is red and the opacity is 80%.
  5. Create the following css for h2 elements: The font color must be orange. The font size will be 36px. The font family will be Courier New.
  6. Write some javascript that will ask for Santa's weight in kilograms and height in cms. It will then display Santa's Body Mass Index (BMI) in the h2 element which you can find in the body section of the webpage.

Part B - Adapt your program

To complete Part B, you should know how to create a javascript function. This time we will activate some javascript by clicking the image.

  1. Create a new webpage called informal-1-click.html in your informal-1 folder. You can copy and paste your work from Part A there.
  2. Adapt your code so that nothing happens until Santa is clicked. Then, the computer asks the user for height and weight as before and the bmi is displayed in the h2 element.

Part C - Final Adaptation

To complete Part C, you should know how to use if/else statements in javascript to allow appropriate output to be displayed.

  1. Create a new webpage called informal-1-ifelse.html in your informal-1 folder. You can copy and paste your work from Part B there.
  2. Adapt your code so that if the calculated bmi is greater than 25, a message "Alert! Start exercising!" is displayed, else a message "You're fine." is displayed. This message is displayed in a new element on the webpage. The bmi number is still displayed in the h2 element.