How to do a simple dropdown quiz

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

HOW TO DO A SIMPLE DROPDOWN QUIZ USING JS AND HTML

In this lesson, you will learn how to make a simple dropdown quiz. It is similar to multiple choice quiz, but this one will have a a list of options instead of buttons.

Code:
_______________________________________________________________
<!DOCTYPE html>

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

        <div id="font001">
        <p>Score: <text id="number001"></text></p>
        <p id="message001"></p>
        <p id="message002"></p>
        <p id="message003"></p>

        </div>

        <script>
        var animals001 = ["The largest living bird.<br /><br /><select><option>Animals</option><option onclick=choice001()>Ostrich</option><option onclick=choice002()>Blue Whale</option><option onclick=choice002()>Cheetah</option><option onclick=choice002()>Whale Shark</option><option onclick=choice002()>Elephant</option></select>",
                  "The largest living creature.<br /><br /><select><option>Animals</option><option onclick=choice002()>Ostrich</option><option onclick=choice001()>Blue Whale</option><option onclick=choice002()>Cheetah</option><option onclick=choice002()>Whale Shark</option><option onclick=choice002()>Elephant</option></select>",
                  "The fastest land animal.<br /><br /><select><option>Animals</option><option onclick=choice002()>Ostrich</option><option onclick=choice002()>Blue Whale</option><option onclick=choice001()>Cheetah</option><option onclick=choice002()>Whale Shark</option><option onclick=choice002()>Elephant</option></select>",
                  "The largest living fish.<br /><br /><select><option>Animals</option><option onclick=choice002()>Ostrich</option><option onclick=choice002()>Blue Whale</option><option onclick=choice002()>Cheetah</option><option onclick=choice001()>Whale Shark</option><option onclick=choice002()>Elephant</option></select>",
                  "The largest living land animal.<br /><br /><select><option>Animals</option><option onclick=choice002()>Ostrich</option><option onclick=choice002()>Blue Whale</option><option onclick=choice002()>Cheetah</option><option onclick=choice002()>Whale Shark</option><option onclick=choice001()>Elephant</option></select>"];

        var counter1 = 0;
        counter1++;

        var score1 = 0;
        score1++;

        function shuffle(items1) {
        var elements = items1.length, items2, items3
        while (elements > 0) {
        items3 = Math.floor(Math.random() * elements);
         elements--;
        items2 = items1[elements];
        items1[elements] = items1[items3];
        items1[items3] = items2;
        }

        return items1;
            }

           shuffle(animals001);

        message001.innerHTML = animals001.shift();

        function next001() {
        counter1++;
        message001.innerHTML = animals001.shift();
        message002.innerHTML = "";
        message003.innerHTML = "";
        if (counter1 > 5) {
        message002.innerHTML = "Game Over";
        message001.innerHTML = "";
        message003.innerHTML = "";
        }
        }

        function choice001() {
        number001.innerHTML = score1++;
        message001.innerHTML = "";
        message002.innerHTML = "Correct.";
        message003.innerHTML = "<button onclick=next001()>NEXT</button>";
        }

        function choice002() {
        message001.innerHTML = "";
        message002.innerHTML = "Incorrect.";
        message003.innerHTML = "<button onclick=next001()>NEXT</button>";
        }
    </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
Health Tips
Sports Facts