أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار تطبيقات وكتب

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 RELATED PAGES:
Other Topics:

Islamic Holidays
World Countries
Wars Facts

الصفحة الرئيسية         عن الموقع         شروط الاستخدام         المصادر         استفسارات
إختبرني 2013 - 2022