Countries and Capitals Quiz
- Uses JSON to load the data for the quiz
- Allows you to flip questions with answers
- Allows you to define the amount of multiple choices
- Tracks time, score, and progress
- Shuffles the questions and options on each play
- Uses CSS transition to animate colors in the UI
Let’s walk through the code. We start with defining a few variables or options: totalSeconds (set to 0 so timer starts with 0, but can be used later to show final time or take an action based on time), time (used later as pause in between loading next questions and stopping the game in the end), score (set to 0 and used to keep track of the player score), count (set to 0 and used to keep track of questions asked), subset (used to define how many possible choices or answers you want to present to the player), all (an array that keeps track of all possible options or answers and is used to show a random subset of these options to the player), and flip (set to false and used to switch questions and answers).
Next, we define the data which runs the game in a JSON object. For simplicity, I have used an inline JSON string but you could load the JSON from an external file with an additional Ajax or XHR function. The structure of the JSON is an object (whose name is used in the title of the game) which contains an array of items. We have been talking about these items as questions and answers but it’s more of a relationship or a match. You can flip the flash cards around and then you answers are your questions. So, trying to use a better naming convention, each item has two objects, a name and an alt (alternative). The values of these objects are strings but you don’t have to think of words or sentences, it could be a link to external media or even inline image data.
We parse the JSON object with JSON.parse function, pull out the title, and depending on the flip flag, we store all the options or possible answers in the all array. Next, we shuffle and clone that array to a new array called questions, which is used to keep track of the questions asked during game play. We render the title and score to the page/DOM, initiate the timer, and call our play function to being the game.
This function uses a regex match to disregard any clicks that do not occur on the possible choices. If the player clicked on a choice, we first check the class and update the score variable if the class attribute of the choice element is green (meaning, it is correct, more on that below). Next, we show the score and append a class to the parent element of all possible choices (this animates background colors using CSS transition). We also remove the event listener so that the player cannot click multiple times until the new question is loaded. We allow the animation to finish by using a window.setTimeout function which calls the play function after the CSS animation is done.
Next, I loop through all the choices and create the html elements that will be rendered on the page. I check for the question and give that element a green class while the other elements get a red class. All these elements are rendered to the screen and this is the complete quiz framework. I know this has been a long description but I wanted to explain exactly how and why the code works the way it works. The framework or script, however, is really small (4kb) and easy to modify to your requirements.
Here is the index cards with options quiz on countries and capitals. Just download the source to get the framework and change the JSON.