The data model is very important to get right: this is how we'll store our questions, the answers to those questions, and which answer is the correct answer for each of the questions. We'll also define how we should interact with the model, that is, how do we get a question, ask it if the answer is correct, and so forth.
Let's get out our pencil and paper again, or if you'd prefer, a diagramming tool that you're comfortable with. What we're really trying to do in this step is to come up with the properties the model needs in order to store the questions, and the interactions it will need in order to properly do everything we're asking of it.
We'll essentially have two data models: a single question, and a collection of questions. Let's start with what the question model should do:
Store the actual question
Have a list of all the possible answers
Know the correct answer
Set the question when created
Return the question when asked
Add an answer to its list of answers
Return the list of answers when asked (in a random order)
Set the correct answer
Give the correct answer when asked
Return a specific answer in the list when asked
Check if a given answer is correct
Return the number of answers
We can indicate this by creating a simple diagram as follows:
Our collection of questions should:
Have a list of all the questions
Be able to add a question to that list
Return the total number of questions in the list
Return a random question from the list
The diagram covering these points would look like the following screenshot:
Having both of the models defined, let's come up with the questions we're going to ask, as well as the answers that will go along with them (for the full list of questions, see chapter1/www/models/quizQuestions.js in the download for this book):
|
# |
English |
Spanish |
|---|---|---|
|
|
What is the color of the Sun? |
¿Cuál es el color del Sol? |
|
Green |
Verde | |
|
White |
Blanco | |
|
Yellow (correct) |
Amarillo (correct) | |
|
|
What is the name of the fourth planet? |
¿Cuál es el nombre del cuarto planeta? |
|
Mars (correct) |
Marzo (correct) | |
|
Venus |
Venus | |
|
Mercury |
Mercurio |
With the design of our model complete, and the questions we're going to ask, this task is complete. Next we'll write the code to implement the model.