How to make a quiz by typing the correct option

HOW TO MAKE A MULTIPLE CHOICE QUIZ BY TYPING THE CORRECT OPTION USING HTML, JAVASCRIPT AND CSS

This lesson will be about learning how to make a multiple choice quiz. But it will be a little different. It will have a question, four options and you will be choosing the correct answer by typing the correct number in the input area. Question and Score counters are included in the quiz, as well as ratings for your score at the end of the quiz

This code below will show you all the 10 questions. The REPEAT button will refresh the page to the beginning of the quiz.

If you want to copy and paste my code, all you have to do is make some changes. Leave all the ID's and functions as shown.

All you have to do is follow the words that are highlighted with different colors. Each color represents the same question. I will highlight only 2 examples to give you an idea.

You can also change the ratings at the bottom, where it says "Excellent", "Very good" to whatever messages you want.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Multiple Choice Quiz</title>
</head>
<body>
    <style>
        #table001 {
            color: black;
            font-size: large;
            text-align: left;
        }

        #font001 {
            color: green;
        }

        #font002 {
            color: red;
        }

        .blue001 {
            background-color: deepskyblue;
            border-radius: 8px;
        }
    </style>
    <div id="table001">
        Question: <text id="number001">0</text><br />
        Score: <text id="score001">0</text><br /><br />

    </div>
    <p id="message001"></p>
        <p id="typings001"></p>
        <p id="typings002"></p>
        <p id="typings003"></p>
        <p id="typings004"></p>
    <p id="message002"></p>
    <p id="answer001"></p>
    <p id="next001"></p>
    <div id="disappear001">
        <button class=blue001 onclick="begin001()">Begin</button>
    </div>

    <script>
        var words001 = ["Question 01", "Question 02", "Question 03", "Question 04", "Question 05", "Question 06", "Question 07", "Question 08", "Question 09", "Question 10"];
        var words002 = ["1", "2", "3", "4", "4", "3", "2", "1", "2", "1"];
        var choice001 = ["option001", "option001", "option001", "option001", "chice001", "option001", "option001", "option001", "option001", "option001"];
        var choice002 = ["option002", "option002", "option002", "option002", "chice002", "option002", "option002", "option002", "option002", "option002"];
        var choice003 = ["option003", "option003", "option003", "option003", "chice003", "option003", "option003", "option003", "option003", "option003"];
        var choice004 = ["option004", "option004", "option004", "option004", "chice004", "option004", "option004", "option004", "option004", "option004"];
        var correct001 = ["Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct"];
        var incorrect001 = ["Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect"];

        var e = 0;
        e++;
        var z = 0;
        z++;

        function begin001() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[0];
            typings001.innerHTML = choice001[0];
            typings002.innerHTML = choice002[0];
            typings003.innerHTML = choice003[0];
            typings004.innerHTML = choice004[0];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit001()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit001() {
            var b = input001.value;
            if (b == words002[0]) {
                answer001.innerHTML = "<div id=font001>" + correct001[0] + "<br />" + "<br /> " + "<button class=blue001 onclick=new002()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[0]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[0] + "<br />" + "<br /> " + "<button class=blue001 onclick=new002()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new002() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[1];
            typings001.innerHTML = choice001[1];
            typings002.innerHTML = choice002[1];
            typings003.innerHTML = choice003[1];
            typings004.innerHTML = choice004[1];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit002()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit002() {
            var b = input001.value;
            if (b == words002[1]) {
                answer001.innerHTML = "<div id=font001>" + correct001[1] + "<br />" + "<br /> " + "<button class=blue001 onclick=new003()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[1]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[1] + "<br />" + "<br /> " + "<button class=blue001 onclick=new003()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new003() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[2];
            typings001.innerHTML = choice001[2];
            typings002.innerHTML = choice002[2];
            typings003.innerHTML = choice003[2];
            typings004.innerHTML = choice004[2];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit003()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit003() {
                    var b = input001.value;
                    if (b == words002[2]) {
                        answer001.innerHTML = "<div id=font001>" + correct001[2] + "<br />" + "<br /> " + "<button class=blue001 onclick=new004()>Next</button>" + "</div>";
                        disappear001.innerHTML = ""; score001.innerHTML = e++;
                        typings001.innerHTML = "";
                        typings002.innerHTML = "";
                        typings003.innerHTML = "";
                        typings004.innerHTML = "";
                    } if (b !== words002[2]) {
                        answer001.innerHTML = "<div id=font002>" + incorrect001[2] + "<br />" + "<br /> " + "<button class=blue001 onclick=new004()>Next</button>" + "</div>";
                        disappear001.innerHTML = "";
                        typings001.innerHTML = "";
                        typings002.innerHTML = "";
                        typings003.innerHTML = "";
                        typings004.innerHTML = "";
                    }
        }

        function new004() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[3];
            typings001.innerHTML = choice001[3];
            typings002.innerHTML = choice002[3];
            typings003.innerHTML = choice003[3];
            typings004.innerHTML = choice004[3];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit004()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit004() {
            var b = input001.value;
            if (b == words002[3]) {
                answer001.innerHTML = "<div id=font001>" + correct001[3] + "<br />" + "<br /> " + "<button class=blue001 onclick=new005()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[3]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[3] + "<br />" + "<br /> " + "<button class=blue001 onclick=new005()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new005() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[4];
            typings001.innerHTML = choice001[4];
            typings002.innerHTML = choice002[4];
            typings003.innerHTML = choice003[4];
            typings004.innerHTML = choice004[4];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit005()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit005() {
            var b = input001.value;
            if (b == words002[4]) {
                answer001.innerHTML = "<div id=font001>" + correct001[4] + "<br />" + "<br /> " + "<button class=blue001 onclick=new006()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[4]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[1] + "<br />" + "<br /> " + "<button class=blue001 onclick=new006()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new006() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[5];
            typings001.innerHTML = choice001[5];
            typings002.innerHTML = choice002[5];
            typings003.innerHTML = choice003[5];
            typings004.innerHTML = choice004[5];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit006()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit006() {
            var b = input001.value;
            if (b == words002[5]) {
                answer001.innerHTML = "<div id=font001>" + correct001[5] + "<br />" + "<br /> " + "<button class=blue001 onclick=new007()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[5]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[5] + "<br />" + "<br /> " + "<button class=blue001 onclick=new007()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new007() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[6];
            typings001.innerHTML = choice001[6];
            typings002.innerHTML = choice002[6];
            typings003.innerHTML = choice003[6];
            typings004.innerHTML = choice004[6];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit007()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit007() {
            var b = input001.value;
            if (b == words002[6]) {
                answer001.innerHTML = "<div id=font001>" + correct001[6] + "<br />" + "<br /> " + "<button class=blue001 onclick=new008()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[6]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[6] + "<br />" + "<br /> " + "<button class=blue001 onclick=new008()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new008() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[7];
            typings001.innerHTML = choice001[7];
            typings002.innerHTML = choice002[7];
            typings003.innerHTML = choice003[7];
            typings004.innerHTML = choice004[7];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit008()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit008() {
            var b = input001.value;
            if (b == words002[7]) {
                answer001.innerHTML = "<div id=font001>" + correct001[7] + "<br />" + "<br /> " + "<button class=blue001 onclick=new009()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[7]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[7] + "<br />" + "<br /> " + "<button class=blue001 onclick=new009()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new009() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[8];
            typings001.innerHTML = choice001[8];
            typings002.innerHTML = choice002[8];
            typings003.innerHTML = choice003[8];
            typings004.innerHTML = choice004[8];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit009()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit009() {
            var b = input001.value;
            if (b == words002[8]) {
                answer001.innerHTML = "<div id=font001>" + correct001[8] + "<br />" + "<br /> " + "<button class=blue001 onclick=new010()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[8]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[8] + "<br />" + "<br /> " + "<button class=blue001 onclick=new010()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new010() {
            number001.innerHTML = z++;
            message001.innerHTML = words001[9];
            typings001.innerHTML = choice001[9];
            typings002.innerHTML = choice002[9];
            typings003.innerHTML = choice003[9];
            typings004.innerHTML = choice004[9];
            disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit010()>Submit</button>";
            answer001.innerHTML = "";
        }

        function submit010() {
            var b = input001.value;
            if (b == words002[9]) {
                answer001.innerHTML = "<div id=font001>" + correct001[9] + "<br />" + "<br /> " + "<button class=blue001 onclick=new011()>Next</button>" + "</div>";
                disappear001.innerHTML = ""; score001.innerHTML = e++;
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            } if (b !== words002[9]) {
                answer001.innerHTML = "<div id=font002>" + incorrect001[9] + "<br />" + "<br /> " + "<button class=blue001 onclick=new011()>Next</button>" + "</div>";
                disappear001.innerHTML = "";
                typings001.innerHTML = "";
                typings002.innerHTML = "";
                typings003.innerHTML = "";
                typings004.innerHTML = "";
            }
        }

        function new011() {
                    if (e > 10) {
                        message001.innerHTML = "Excellent! You are a genius." + "<br />" + "<br />" + "End of Quiz";
                    } else if (e > 9) {
                        message001.innerHTML = "Very good! Almost there." + "<br />" + "<br />" + "End of Quiz";
                    } else if (e > 7) {
                        message001.innerHTML = "Good! Try to do better next time." + "<br />" + "<br />" + "End of Quiz";
                    } else if (e > 5) {
                        message001.innerHTML = "Ok. But not at your best." + "<br />" + "<br />" + "End of Quiz";
                    } else {
                        message001.innerHTML = "No comments." + "<br />" + "<br />" + "End of Quiz";
                    }
                    answer001.innerHTML = "";
                    next001.innerHTML = "";
                    message002.innerHTML = "<button class=blue001 onclick=repeat001()>Repeat</button>";
                }

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

Here is a video of the above code.

Other Topics:

Islamic Holidays
World Countries
Wars Facts