JavaScript Index Cards Quiz Framework
Today, I wanted to create a really simple JavaScript framework for an index cards quiz with multiple choice options. To clarify, it is a matching game or a multiple choice question quiz but build from a 1 to 1, question and answer type relationship. Consider a list of countries and capitals. Normal index cards would show a country and ask you to speak or write the capital. My quiz shows you a country, provides a random list of capitals, and asks you to select or match the correct capital to the country. It can also flip the question and answer, so that you are provided a capital and the quiz gives you country options to match with the capital. So this JavaScript quiz framework turns a list of items into a multiple choice matching game. Here are my requirements:
- Pure JavaScript and very simple
- 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
Before I started this project, I explored some other scripts, plugins, and libraries for making JavaScript quizzes. These are some good ones:
But, after looking at these quiz libraries, I still felt that I needed to start from scratch and design this myself. Considering the requirements, we need 4 important functions. We need a simple JavaScript array shuffling function that randomizes the order of options and questions. We need a simple JavaScript count-up timer function that keeps track of minutes and seconds and renders this timer in the DOM. We need a play function that starts the game and can be called again when the next index card, or question, needs to be shown. And finally, we need a function to handle the user selection or player clicks. Initially, I have thought about setting up multiple elements with addEventListener, but it made much more sense to use JavaScript Event Delegation.
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.
Since the play function is used to start the game and load the next question, we need to first check if there are any questions left. I check the length of the questions array and if it is not greater than 0, we end the game by stopping the timer and updating the DOM with some notification. If the questions array is greater than 0, we update the count, clear any previous choices from the page, retrieve and remove a question from the questions array using the JavaScript pop function, and setup event delegation by forwarding any click on the page to our clickHandler function.
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.
Since the game only matches the proper object from the JSON (either question to answer or answer to question), I check the flip flag and use the JavaScript filter function to retrieve the appropriate answer for the question or question for the answer (alt of requested name, or name of requested alt). This is only used to update the page with the actual question. In terms of the choices, we shuffle the all array and pull out a subset of that array according to the subset variable (how many multiple choice options should we show to the player). Since the array is shuffled and I pull a subset using the array.slice function of all the choices, I need to check if my question is included in the possible answer choices. I use the array.indexOf function to make that check and if the answer is not included, I insert it into the array in a random spot.
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.
