In this article, we’ll write a simple todo app in JavaScript.

How to write a simple quiz app in JavaScript Image by codingexercises

What we’ll be building

We’ll begin this tutorial by building the very basics of a quiz app, using:

  1. variable assignment
  2. prompt function
  3. switch statement

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 with additional switch statements

The second part of the tutorial further improves our 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 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:

  1. The first version of the quiz app
  2. The second version of the quiz app
  3. The third version of the quiz app