4 It’s alive! Making a JavaScript quiz

Learning Objectives

  • Experiment making dynamic, interactive websites with javascript

Learning Outcomes

Must Understand the importance of JavaScript in website design.  Study the structure of a simple html/css/js site, identifying the three technologies (Developing/Level 5)

Should Add working JavaScript to a page, and make a working quiz question. (Meeting/Level 6)

Could expand quiz, and show mastery of the three technologies, using them simultaneously to add new content to site.  . (Exceeding/Level 7&8)

Keywords

Words to learn: Javascript, Java, Interactive, Dynamic, Static

Starter – Analyse 3 websites

You will have to answer simple questions about these three websites if you want to see the html/css live, you can just hit [ctrl]+[shift]+[I].  Click on code in the right hand box, and you’ll see which bit it draws/controls:

Try to spot the odd one out…

Main

  1. Copy the Monster_Website folder from the studentShared(Q): drive to your area.
  2. Open Notepad++ by going to the Start Menu -> All Programs -> Programming -> Notepad++
  3. Go to the File menu and choose Open Folder.  Browse to the Monster_Website folder and click Select Folder.
  4. On the left hand side you will see several HTML files and a CSS file.  Have a quick look through and see what you recognise from previous lessons.
  5. Your teacher will ask you some questions about this mini website.

Like the others you made, the site is pretty normal.   And dull.  But wait!  There’s a quiz…

We’re going to make a page which asks questions about the movie monsters on the site.

Now have a look at the quiz.html page.  It has a script added to it.  For now, this won’t actually work, but think about where it is… (what do we divide an html page into?)

There is also a little odd code towards the bottom of the page but don’t worry about that.

Scroll half-way down, and we’ll add a question.  Find this code:

js1

Here, we’ll type some simple html to create a multi choice question with radio buttons to choose from:

js2

View this in a web browser, and you’ll see that it makes a question, but unfortunately, it doesn’t respond to us.  It still isn’t interactive…

Now find this code (the beginning of the JavaScript):

js3

For now we won’t worry too much about the main code (although you’ll see they’re just Python-like loops), and we’ll give values to some variables, saying how many questions there are,  how many choices there are for each question, and what the correct answer is.  Make sure this is IDENTICAL to your html above (no extra spaces or characters).

js4

Run this, and, voila!

We’ve adapted some code and created a simple quiz question. It should look something like this:

js5

Tasks:

  1. Add four more questions using information and trivia from the monster site (follow the steps above, but make sure you keep testing the questions one at a time…)
  2. What if we actually wanted four choices instead of three for each question?
  3. It would be better if the choices were printed smaller.  Can you do this? (clue: the <li> could be added to the stylesheet…)
  4. Only 3 Monsters?  No good at all.  Add the original “Mummy”.   We’ll need a new page adding, the menus (of each page) altering, and a couple of images adding.
    Of course, you’ll also want to add another quiz question.
  5. Can you change the background?

Finally:

Could you adapt this code (think – everything inside the <script> tags in the head, and the <form> tags in the body,  and add them to your own site?

Live Helpdesk

Plenary

Homework