How to create a simple random quiz

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

HOW TO CREATE A SIMPLE RANDOM QUIZ WITH JAVASCRIPT AND HTML

In this lesson you will be able to create a simple random quiz, where you type the answer and you get a correct or incorrect answer.

Note that the questions in this quiz may repeat. It has 4 questions and 4 answers. The more questions and answers you want, the more you add the strings in the arrays, as well as under the function submit001() {

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Random Questions</title>
</head>
<body>
    <p id="message001">This country's capital is <text id="name001"></text>.</p>
    <div id="disappear001">
    <input type="text" id="input001" /><button onclick="submit001()">Submit</button>
        </div>
    <p id="answer001"></p>
    <p id="button001"></p>

    <script>
        var capitals001 = ["Jerusalem", "London", "Washington DC", "Addis Ababa"];
        var countries001 = ["Palestine", "UK", "USA", "Ethiopia"];
        var random001 = Math.floor(Math.random() * capitals001.length);

        function submit001() {
            var b = input001.value;
            if (random001 == 0 && b == countries001[0]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";

            } else if (random001 == 1 && b == countries001[1]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";

            } else if (random001 == 2 && b == countries001[2]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";

            } else if (random001 == 3 && b == countries001[3]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
document.getElementById("disappear001").innerHTML = "";
            }

            else {
                document.getElementById("answer001").innerHTML = "Incorrect..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";
            }
        }

        document.getElementById("name001").innerHTML = capitals001[random001];

        function btn001() {
            random001 = Math.floor(Math.random() * capitals001.length);
            document.getElementById("name001").innerHTML = capitals001[random001];
            document.getElementById("button001").innerHTML = "";
            document.getElementById("disappear001").innerHTML = "<input type=text id=input001 /><button onclick=submit001()>Submit</button>";
            document.getElementById("answer001").innerHTML = "";
        }
    </script>
</body>
</html>

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

OTHER RELATED PAGES:

Other Topics:

Islamic Holidays
Human Body Facts
Wars Facts