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
-
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”
-
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
-
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
-
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”
-
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
-
Add a second label with the text “Your score is”, below the title
-
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
-
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
-
Add a label widget at the top with the text “The End”
-
Add a label with the text “Your score is”, below the title
-
Add a label with the code name “ui.finalScore”. This will display a final score
-
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.
Comments
28 comments
Hi Everyone,
This is my first post so please be gentle. I have followed all of the instructions above, and when I run the application it does not do anything (preview online)
I have copied and pasted the code into the code section at the top of the user interface. The only other place I can see to put code is in under the code tab under properties of a widget for example, but it says here API, I dont think it goes here. When I looked in there the documentation talks about how to code widgets etc...
I would greatly appreciate if anyone could advise me on how to get this working please. Has anyone else managed to get this quiz to work successfully? Kieron if you read this message I would really value your help right now on this.
I look forward to your responses.
K
Hi Kay,
You are right that the code here should be pasted into the main "Code" tab at the top of the interface. The "code name" text fields on the right-hand side are where you should put all the relevant "ui.___" values mentioned in Steps 1-4.
When you say it doesn't do anything, can you be more specific? For example, when you tap the Start button, is it not starting the game? If you are able to, a screenshot might help us figure out the issue.
Thanks
Hi Kieron
Many thanks for the quick response, I have attached a file which demonstrate the screen I am stuck on.
In short the app starts, I then click on start and am taken to the screen attached. No question is displayed and if you click on any of the options nothing happens. I am very greatful for your support on this.
Kind regards
K
2nd screen.jpg
Hi Kay,
Just a few things to check first:
If none of these are working, could you let me know your App Number (number at the end of the address bar when editing your app), and I'll take a look.
Thanks
Hi Kieron
Thanks for your reply. I have got it working now, thanks to you. Point 1 and 2 were the issue in addition to me not naming the functions in buttons correctly. I went through it very quickly when putting it all together. Thanks for your very quick replies, it is very much appreciated.
BTW if I wanted to learn how to make more advanced apps, could you point me in the right direction please. I have used MIT appinventor and do not like it, it is very buggy indeed.
Thanks in advance
K
That's no problem - glad it's working now.
In terms of more advanced apps, it depends what you're looking to achieve really. We're working on new tutorials and blog posts exploring how you can add different functionality to your apps, though if you had specific ideas you wanted to try, it's probably best to post questions in the forum - and we do base our new content on discussions held here too.
Hope that helps
hi kieron when i run preview online and click start button, it says "ui.question.text is not a function, error on line 40". Can you please help
thanks in advance
Hi Ajay,
That suggests that the label for your question (in Step 2) doesn't have the correct codename. It should be "ui.question" (no quote marks). The name needs to be exact for the code to work.
Hope that helps, if not - let me know the app number (number at the end of the address bar when editing your app), and I'll take a look.
Hi kieron
Thanks for the reply... ya I had made that mistake, thanks for pointing it out.. Its working fine now
Hi, Kieron,
if i want to change the problem part in the multiple quiz to picture rather than text, what change should I change in the code?
Hi,
This is an example of how to change the above code to use all image questions, instead of text, follow these steps:
Hope that helps
Thank you so much, it really helps.
Hi Seth,
It sounds like you already have a widget with the code name "ui.question", and as all code names must be unique, the system is auto-updating it to make sure there isn't a duplicate.
For the error, what is the app number (number at the end of the URL when editing)? I can take a look at the code then, to help diagnose it.
Thanks
I got it. I accidentally gave the page a code name. The problem is always 15" away from the screen lol. Thanks for responding!
Hi Seth,
Glad it's working now!
Hi,
When I tap the start button, I get the same error as Seth did:
JavaScript error TypeError: null is not an object (evaluating 'l.length') (file:///var/containers/Bundle/Application/AB3E03C1-AAEB-4870-8E5E-5F6AA5C31AB8/afplayer.app/engine/js/internal/Utils.js?_cache=1465400958851, Line 240)
What was described wasn't the problem I think, I checked both the options. Also, i don't have a 240th line in my code..
Has anyone an idea what could be the problem?
Hi Marleen,
These errors usually come from an incorrect codename on one of the widgets or pages. The first thing is to check all the widgets you've added have the relevant codename specified above. If that's not working, let me know the app number (number at the end of the editing URL), and I'll take a look.
Also, to answer your question about 240th line, when the apps run, they're actually running other code that isn't accessible from the Code tab, which handles the logic that isn't specific to your app (e.g. page navigation, location) - and errors in the Code tab can flow through to this.
Hope that helps.
Thanks for the fast response! I couldn't find an error, so I deleted everything and followed the tutorial again, and that worked.
Now i have another issue: if I tap the correct answer, i still get 'Wrong!'. Any ideas? Thanks!
Hi Marleen,
I'd check that the data structure (at the end of the Code) contains the right "answer" attribute, and that the buttons have the relevant codenames too.
If that doesn't solve it, let me know the app number and I can take a look.
Thanks
Got it! Thank you!
Hi,
I just have a quick question. I want to add more questions to my quiz but i don't understand which code i have to copy and edit to add more questions.
Can you help me?
Thanks in advance!
Hi,
No problem, I'll try and explain the structure of the data, so you can extend it as much as you like.
This snippet contains the variable declaration, as well as the start & end square brackets of an array:
In this particular array, we're storing a single Object (seen by the { and } characters). This object contains various data, that relates to the questions:
Adding a new question is a case of copying & pasting the object, making sure that all objects are separated by a comma, like this:
Then, you can edit the data in each question to update the quiz. It may help to add extra empty lines between questions, and to index the sections properly, to make it easier to read.
This kind of format is called JSON, which is talked about here, for reference: http://www.w3schools.com/json/
Hope that helps
Hi,
My code is exactly the same, but the if i click on the button for the next question, nothing happens. Do i have to add a blank page, or will the code make a new page? Because right now, it won't work...
Hi,
It's worth checking that you have all the widget codenames entered correctly, as in the tutorial, as these can be more difficult to spot than code errors.
If it's still not working, let me know the app number (number at the end of the URL when editing), and I'll take a look.
Thanks
Hi,
My quiz worked fine for a couple of days. But this morning he suddenly gives a error 'Null is not an object (evaluating l.length)' Error on line 240'.
I don't even have a line 240
This code use to work perfectly, so now im wondering if it's a bug or if it's something in my own code?
Schermafbeelding 2016-06-10 om 11.05.53.png
Hi Aniek,
I've responded to your question in your other post: https://appfurnace.zendesk.com/entries/109923866--Null-is-not-an-object-evaluating-l-length-Error-on-line-240-
Thanks
Yesterday everything worked out fine but now i get the same error message everytime i want to test my quiz. I can't find out why. My app number is 40412
Thanks!
Hi,
It looks like you have two variables called "data", and the last one in the code overwrites the first one.
If you rename the second data variable to something else (e.g. "data_quiz"), and then in the other places where you do want to use that variable, that should solve the issue.
Please sign in to leave a comment.