Web Game Designer

Lesson 28: Parallel Arrays

In this lesson, you will start developing an IQ Test that will eventually give users 10 random questions and score them based on the number they answer correctly and the time it takes to complete the test.

1. Download the project files.

In the HTML, notice there is a link to the iq.css and iq.js files. The page consists of a Question, an image for a graphic, and four buttons that run the code in the respond() function.

The JavaScript includes a variable to keep track of the number of the current problem. There are also 5 Arrays defined and values assigned to each of the Arrays for 10 index values (0 to 9).

These Arrays are called parallel arrays because they are the same length and the values of any index value are related. For instance, at index value 0 (problem #1), the values of question[0], answer1[0], answer2[0], answer3[0], answer4[0] are all related; they are components of the same problem.

Also, answer1 is used to store all the correct answers while answer2, answer3, and answer4 are used to store all the incorrect answers.

The respond() function is after all the Array assignments. Currently, the respond function simply displays the first question.

1. Open index.html in a web browser and press one of the buttons to ensure everything is working as expected.

2. Add an Intro Screen with some instructions and a button for starting the test.

3. Update the CSS so that #introScreen has the same styles as #testScreen, except that #introScreen is in front of everything else.

4. Add a start() function to hide the Intro Screen when the Start button is pressed.

5. Add a newProblem() function that will be executed every time you want to display a new problem, including the moment the page loads.

For now, the code in newProblem() increases the value of currentProblem and then displays that value along with the first question in the question div.