How to make a true or false quiz

HOW TO MAKE A TRUE OR FALSE QUIZ USING HTML, JAVASCRIPT, AND CSS

This code is going to be almost similar to the other quizzes codes, but with some changes. Some of these changes may be easier for the programmer to use. The quiz has 10 questions.

The true or false quiz is going to be only 2 options for each question. The differences are in the functions. The first code is going to show you how you can use only 2 functions for "Correct" and "Incorrect". That is, if you don't want to add any details for each correct or incorrect answer, which "Correct" and "Incorrect" will work for all questions. Remember, for both codes you can still change the letter "c" and "i" in the functions "q1c" and "q1i", but make sure you write the correct answer for the "c" and incorrect answer for "i".

If you want to watch the video and see how it is done, you can check it out below.

The following code is the same as the one above, but the changes made were for the "correct" and "incorrect" answers if you want to add a detailed message to each answer. The code will be longer and some changes have to be made as well. This time instead of having "q1c" and "q1i" for all answers, they must change to "q1c", "q2c", "q3c", etc. And "q1i", "q2i", "q3i", etc. Functions are going to be added as well. I colored the changes in a light brown color, and green for the detailed messages.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>True or False Quiz</title>
</head>
<body>
    <style>
        #frame001 {
            border-radius: 5px;
            background-color: white;
            border: 2px solid black;
            height: 350px;
            width: 400px;
        }

        .buttons001 {
            background-color: dodgerblue;
            color: white;
            width: 70px;
            height: 30px;
            border-radius: 5px;
        }

        .buttons002 {
            background-color: blue;
            color: white;
            width: 70px;
            height: 30px;
            border-radius: 5px;
        }

        #font001 {
            text-align: center;
            font-size: large;
            color: black;
        }
    </style>
    <div id="frame001">
        <div id="font001">
            <h2>True Or False Quiz</h2><text>Question: <text id="number001">0</text></text><br />
            <text>Score: <text id="score001">0</text></text>
            <hr />
            <div id="disappear001">
                <button class="buttons002" onclick="begin001()">Begin</button>
            </div>
            <p id="message001"></p>
            <p id="message002"></p>
            <p id="message003"></p>
            <p id="message004"></p>
        </div>
    </div>
    <script>
        var question001 = ["There are 9 continents in the world.",
            "There is no islands on Earth.",
            "Blue whales are mammals.",
            "Tomatoes are vegetables.",
            "The Blue Whale feeds on Tuna fish.",
            "Fifa World Cup tournaments are played every 4 years.",
            "The north side of the Equator Line has more countries than the south side.",
            "Madagascar is the largest island in the world.",
            "Helium is the lightest gas element out of all gas elements.",
            "The hottest planet in the solar system is Mercury."
        ];

        var options001 = ["<button class=buttons001 onclick=q1i()>True</button><br /><br /><button class=buttons001 onclick=q1c()>False</button>"];
        var options002 = ["<button class=buttons001 onclick=q2c()>False</button><br /><br /><button class=buttons001 onclick=q2i()>True</button>"];
        var options003 = ["<button class=buttons001 onclick=q3c()>True</button><br /><br /><button class=buttons001 onclick=q3i()>False</button>"];
        var options004 = ["<button class=buttons001 onclick=q4i()>True</button><br /><br /><button class=buttons001 onclick=q4c()>False</button>"];
        var options005 = ["<button class=buttons001 onclick=q5c()>False</button><br /><br /><button class=buttons001 onclick=q5i()>True</button>"];
        var options006 = ["<button class=buttons001 onclick=q6i()>False</button><br /><br /><button class=buttons001 onclick=q6c()>True</button>"];
        var options007 = ["<button class=buttons001 onclick=q7c()>True</button><br /><br /><button class=buttons001 onclick=q7i()>False</button>"];
        var options008 = ["<button class=buttons001 onclick=q8c()>False</button><br /><br /><button class=buttons001 onclick=q8i()>True</button>"];
        var options009 = ["<button class=buttons001 onclick=q9c()>True</button><br /><br /><button class=buttons001 onclick=q9i()>False</button>"];
        var options010 = ["<button class=buttons001 onclick=q10i()>True</button><br /><br /><button class=buttons001 onclick=q10c()>False</button>"];

        var a = 0;
        a++;
        var b = 0;
        b++;

        function begin001() {
            disappear001.innerHTML = "";
            message001.innerHTML = question001[0];
            message002.innerHTML = options001;
            number001.innerHTML = a++;
        }

        function q1c() {
            message003.innerHTML = "Correct. There are 7 continents in the world.";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q1i() {
            message003.innerHTML = "Incorrect. There are 7 continents in the world.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q2c() {
            message003.innerHTML = "Correct. There is a lot of islands on Earth.";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q2i() {
            message003.innerHTML = "Incorrect. There is a lot of islands on Earth.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q3c() {
            message003.innerHTML = "Correct";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q3i() {
            message003.innerHTML = "Incorrect. Blue whales are mammals.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q4c() {
            message003.innerHTML = "Correct. Tomatoes are classified under fruits.";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q4i() {
            message003.innerHTML = "Incorrect. Tomatoes are classified under fruits.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q5c() {
            message003.innerHTML = "Correct. The blue whale feeds on small shrimp-like fish called Krills.";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q5i() {
            message003.innerHTML = "Incorrect. The Blue Whale feeds on small shrimp-like fish called Krills.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q6c() {
            message003.innerHTML = "Correct";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q6i() {
            message003.innerHTML = "Incorrect. Fifa World Cup tournaments are played every 4 years.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q7c() {
            message003.innerHTML = "Correct";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q7i() {
            message003.innerHTML = "Incorrect. More countries on the north side than there are on the south side.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q8c() {
            message003.innerHTML = "Correct. Greenland is the largest island in the world.";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q8i() {
            message003.innerHTML = "Incorrect. Greenland is the largest island in the world.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q9c() {
            message003.innerHTML = "Correct";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q9i() {
            message003.innerHTML = "Incorrect. Helium is the lightest gas of all gas elements.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q10c() {
            message003.innerHTML = "Correct. Venus is the hottest planet. That is because its atmosphere contains 95% of Carbon dioxide.";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q10i() {
            message003.innerHTML = "Incorrect. Venus is the hottest planet. That is because its atmosphere contains 95% of Carbon dioxide.";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function next001() {
            if (a == "2") {
                message001.innerHTML = question001[1];
                message002.innerHTML = options002;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "3") {
                message001.innerHTML = question001[2];
                message002.innerHTML = options003;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "4") {
                message001.innerHTML = question001[3];
                message002.innerHTML = options004;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "5") {
                message001.innerHTML = question001[4];
                message002.innerHTML = options005;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "6") {
                message001.innerHTML = question001[5];
                message002.innerHTML = options006;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "7") {
                message001.innerHTML = question001[6];
                message002.innerHTML = options007;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "8") {
                message001.innerHTML = question001[7];
                message002.innerHTML = options008;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "9") {
                message001.innerHTML = question001[8];
                message002.innerHTML = options009;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "10") {
                message001.innerHTML = question001[9];
                message002.innerHTML = options010;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            } else {
                message001.innerHTML = "End of Quiz";
                message002.innerHTML = "";
                message003.innerHTML = "";
                message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Repeat</button>";
            }
        }

        function repeat001() {
            location.reload();
        }
    </script>
</body>
</html>

Other Topics:

General Facts
Nutritions Facts
Sports Facts