Tutorial 8: Multiple Choice Quiz

You can make a multiple choice game in AppFurnace using the Layout tab and some simple JavaScript, but if you’re interested in making a large quiz, or adding one to your app as part of a game, this tutorial will help you do it quickly - and make it easy to add and edit questions too.

In this tutorial, we’ll create an app with only four pages, but using JavaScript, we’ll pull in as many questions as you like and update the page dynamically. Don’t worry, this is easier than it might sound if you’re not familiar with JavaScript yet.

Step 1

1. In the Layout tab, add a label widget for your title page (e.g. “Multiple Choice Quiz”), and add a button widget as a “Start” button. Give the button a tapped function property of “startGame”

Step 2

Create a second page called “Question”

1. Add a label widget at the top, with the code name of “ui.question”. This is where your questions will appear, based on the Code we’ll add in later

2. Add four button widgets below this, with the code names “ui.answer0”, “ui.answer1”, “ui.answer2”, “ui.answer3” respectively. These will be the four options

3. It doesn’t matter what the text properties for any of these widgets are, as we’ll be dynamically updating them - but it may be handy to label them so that it’s obvious what they are at a glance, in case you edit this app in future

 

Step 3

Create a page called “Feedback”

1. Add a label widget at the top with the code name “ui.feedbackTitle”. This will display either “Correct” or “Wrong”, based on your user’s answers

2. Add a second label with the text “Your score is”, below the title

3. Add a label with the code name “ui.feedbackScore”. This will display a running total of your user’s score after each question they answer

4. Add a button at the bottom with the text “Continue” and the tapped function “nextQuestion”

Step 4

Add a final “End” page, which will display the final score

1. Add a label widget at the top with the text “The End”

2. Add a label with the text “Your score is”, below the title

3. Add a label with the code name “ui.finalScore”. This will display a final score

4. Add a button at the bottom with the text “Restart”, and set the “Go To Page” to the Home page

Step 5

In the Code tab, copy & paste the following:

/////////////////////////////////////////////////////////////////////////////////////
//
// INITIALIZE
//
/////////////////////////////////////////////////////////////////////////////////////
var score; // Total score
var current; // Current question

/////////////////////////////////////////////////////////////////////////////////////
//
// FUNCTIONS
//
/////////////////////////////////////////////////////////////////////////////////////
function startGame() {
 log("startGame");
 score = 0;
 current = -1; 
 
 nextQuestion();
}
/*
* Go to the next question
*/
function nextQuestion() {
 
 current ++; // Add 1 to current
 
 // Check whether there are any more questions
 if (current >= data.length) {
 
 // If not, go to the end
 end();
 
 } else {
 
 // Else, get the data for the next question
 var q = data[current];
 
 // update question
 ui.question.text(q.text);
 
 // Update answer labels
 ui.answer0.text(q.options[0]);
 ui.answer1.text(q.options[1]);
 ui.answer2.text(q.options[2]);
 ui.answer3.text(q.options[3]);
 
 // Update button functions: if the button is correct
 // (and marked as "answer" in the data), it will run
 // correct(), otherwise run wrong()
 ui.answer0.tapFunction(q.answer === 0 ? correct : wrong);
 ui.answer1.tapFunction(q.answer === 1 ? correct : wrong);
 ui.answer2.tapFunction(q.answer === 2 ? correct : wrong);
 ui.answer3.tapFunction(q.answer === 3 ? correct : wrong);
 
 // Go to the question page
 navigate.to("Question");
 }
}

/*
* Run when the answer is correct
*/
function correct() {
 score ++;
 ui.feedbackTitle.text("Correct!");
 ui.feedbackScore.text(score);
 navigate.to("Feedback");
}

/*
* Run when the answer is wrong
*/
function wrong() {
 ui.feedbackTitle.text("Wrong!");
 ui.feedbackScore.text(score);
 navigate.to("Feedback");
}

/*
* Run when there are no more questions
*/
function end() {
 ui.finalScore.text(score);
 navigate.to("End");
}

/////////////////////////////////////////////////////////////////////////////////////
//
// DATA
//
/////////////////////////////////////////////////////////////////////////////////////
/*
* Add your own questions and answer sets to extend this.
* NOTE: Answers are numbered starting from 0, so:
* - first answer in the list = 0
* - fourth answer in the list = 3
*/
var data = [
 
 {
 text:"What is the capital city of France?",
 options:[
 "Tokyo",
 "Berlin",
 "Helsinki",
 "Paris"
 ],
 answer:3
 },
 {
 text:"What is 2 + 2?",
 options:[
 "3",
 "4",
 "5",
 "6"
 ],
 answer:1
 },
 {
 text:"How many grams are in a kilogram?",
 options:[
 "10",
 "100",
 "1,000",
 "10,000"
 ],
 answer:2
 }
];

Step 6

At this stage, you can preview your app, and play through the three questions to get a feel for how it all works

Taking it Further

Of course, the main thing you’ll want to do is update the questions and answers, so I’ll explain that piece of the code a bit more.

• All the questions are stored in an array called “data” at the bottom of the code

• Each question is a JavaScript object, separated by commas in the array

• Within each question there are properties:

• “text” is the question

• “options” is an array of four strings (pieces of text)

• “answer” is the index (position) of the correct answer in the “options” list
  NOTE: When coding, all numbering systems start at 0. So here, the first answer in the list would be 0, the second 1, the third 2, and the fourth 3

So, to add a new question, you’d copy & paste the last question and edit each section as needed. Make sure that each of the objects (surrounded by curly brackets) is separated with a comma - but there should be no comma after the last object in the array.

Once you’re comfortable with that, you could include this quiz as part of a bigger app, or extend it in all sorts of other ways.