Write a simple quiz app in JavaScript
A very simple, yet fully functional, quiz app in JS
By: Ajdin Imsirovic 10 November 2019
Note: to download the completed simple quiz app code in JavaScript, scroll to the bottom of the article.
Image by codingexercises
What we’ll be building
We’ll begin this tutorial by building the very basics of a quiz app, using:
- variable assignment
promptfunctionswitchstatement
I’ve also recorded a video of the process, you can see it below:
In the first video, we built the following tiny app:
1
2
3
4
5
6
7
8
9
var firstQuestion = prompt("What's the capital of Italy?");
switch (firstQuestion) {
case "Rome":
confirm("You are right!");
break;
default:
confirm("You are wrong");
break;
}
On the first line of the above code, we’re prompting the user to give us an answer to the question: What’s the capital of Italy?
Whatever was our user’s response, we assign it to the variable named firstQuestion.
Then we use a switch statement to check if the value stored in the firstQuestion variable is Rome. If that’s the case, we run the first case statement - case "Rome" - and then we break out of the switch statement.
Otherwise, we run our switch statement’s default case, notifying the user that their answer was wrong.
Improving the quiz code with additional switch statements
The second part of the tutorial further improves our JavaScript quiz app:
Here’s the extended code of our app:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var score = 15;
while (score > 0 && score < 30) {
var firstQuestion = prompt("What's the capital of Italy?");
switch (firstQuestion) {
case "Rome":
score = score + 5;
confirm("You are right!");
console.log("Your score is: " + score);
break;
default:
score = score - 5;
confirm("You are wrong");
console.log("Your score is: " + score);
break;
}
var secondQuestion = prompt("What's the capital of France?");
switch (secondQuestion) {
case "Paris":
score = score + 5;
confirm("You are right!");
console.log("Your score is: " + score);
break;
default:
score = score - 5;
confirm("You are wrong");
console.log("Your score is: " + score);
break;
}
var thirdQuestion = prompt("What's the capital of Spain?");
switch (thirdQuestion) {
case "Madrid":
score = score + 5;
confirm("You are right!");
console.log("Your score is: " + score);
break;
default:
score = score - 5;
confirm("You are wrong");
console.log("Your score is: " + score);
break;
}
if (score == 0) {
alert("You lose!");
} else if (score == 30) {
alert("You win!");
} else {
alert("Something went wrong!");
}
}
In this iteration of our quiz app development, we introduced a scoring system.
A player starts with 15 points, and based on their answers, either win the quiz by answering questions correctly and getting to 30 points, with 5 points for each correct answer.
Alternatively, if a player fails to answer any question correctly, they’ll lose the quiz by reaching 0 points.
We’ve also introduced a while statement that runs as long as the player’s score is in between 0 and 30 points. Once either of these conditions is satisfied, we notify the user that they’ve either won or lost, and we exit the quiz.
Changing the way our JavaScript quiz works by replacing the switch statements with ifs and vice-versa
The third part of the tutorial shows how to change switch statements into if statements in JavaScript:
Here’s the full code of this update:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var score = 15;
while (score > 0 && score < 30) {
var firstQuestion = prompt("What's the capital of Italy?");
if (firstQuestion == "Rome") {
score = score + 5;
confirm("You are right!");
console.log("Your score is: " + score);
} else {
score = score - 5;
confirm("You are wrong");
console.log("Your score is: " + score);
}
var secondQuestion = prompt("What's the capital of France?");
if (secondQuestion == "Paris") {
score = score + 5;
confirm("You are right!");
console.log("Your score is: " + score);
} else {
score = score - 5;
confirm("You are wrong");
console.log("Your score is: " + score);
}
var thirdQuestion = prompt("What's the capital of Spain?");
if (thirdQuestion == "Madrid") {
score = score + 5;
confirm("You are right!");
console.log("Your score is: " + score);
} else {
score = score - 5;
confirm("You are wrong");
console.log("Your score is: " + score);
}
/*
if (score == 0) {
alert("You lose!");
} else if (score == 30) {
alert("You win!");
} else {
alert("Something went wrong!");
}
*/
switch (score) {
case 0:
alert("You lose!");
break;
case 30:
alert("You win!");
break;
default:
alert("Something went wrong!");
break;
}
}
Downloadable code of the quiz app
Now that we’ve seen all the apps, we can download them from here:
- The first version of the quiz app
- The second version of the quiz app
- The third version of the quiz app
