HOW TO MAKE BUTTON STYLES IN A QUIZ USING HTML, JAVASCRIPT, AND CSS

In this lesson, you will learn how to make styles for the buttons in a quiz. For example, for the correct answer the button will change to green color, and for the incorrect answer the button will change to red color.



I have added some images in this lesson to make it easier to understand how the code works. There will be two codes: One for a quiz with two options for each question, and one for a quiz with four options for each question. You can find the images at the bottom of the codes.



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: auto;
            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;
        }

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

        .buttons004 {
            background-color: red;
            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>
        <br />
            <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 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 green001 = ["<button class=buttons001>True</button><br /><br /><button class=buttons003>False</button>"];
    var red001 = ["<button class=buttons004>True</button><br /><br /><button class=buttons003>False</button>"];

    var options002 = ["<button class=buttons001 onclick=q2i()>True</button><br /><br /><button class=buttons001 onclick=q2c()>False</button>"];
    var green002 = ["<button class=buttons001>True</button><br /><br /><button class=buttons003>False</button>"];
    var red002 = ["<button class=buttons004>True</button><br /><br /><button class=buttons003>False</button>"];
        
    var options003 = ["<button class=buttons001 onclick=q3c()>True</button><br /><br /><button class=buttons001 onclick=q3i()>False</button>"];
    var green003 = ["<button class=buttons003>True</button><br /><br /><button class=buttons001>False</button>"];
    var red003 = ["<button class=buttons003>True</button><br /><br /><button class=buttons004>False</button>"];
       
    var options004 = ["<button class=buttons001 onclick=q4i()>True</button><br /><br /><button class=buttons001 onclick=q4c()>False</button>"];
    var green004 = ["<button class=buttons001>True</button><br /><br /><button class=buttons003>False</button>"];
    var red004 = ["<button class=buttons004>True</button><br /><br /><button class=buttons003>False</button>"];
            
    var options005 = ["<button class=buttons001 onclick=q5i()>True</button><br /><br /><button class=buttons001 onclick=q5c()>False</button>"];
    var green005 = ["<button class=buttons001>True</button><br /><br /><button class=buttons003>False</button>"];
    var red005 = ["<button class=buttons004>True</button><br /><br /><button class=buttons003>False</button>"];        

    var options006 = ["<button class=buttons001 onclick=q6c()>True</button><br /><br /><button class=buttons001 onclick=q6i()>False</button>"];
    var green006 = ["<button class=buttons003>True</button><br /><br /><button class=buttons001>False</button>"];
    var red006 = ["<button class=buttons003>True</button><br /><br /><button class=buttons004>False</button>"];

    var options007 = ["<button class=buttons001 onclick=q7c()>True</button><br /><br /><button class=buttons001 onclick=q7i()>False</button>"];
    var green007 = ["<button class=buttons003>True</button><br /><br /><button class=buttons001>False</button>"];
    var red007 = ["<button class=buttons003>True</button><br /><br /><button class=buttons004>False</button>"];       
        
    var options008 = ["<button class=buttons001 onclick=q8i()>True</button><br /><br /><button class=buttons001 onclick=q8c()>False</button>"];
    var green008 = ["<button class=buttons001>True</button><br /><br /><button class=buttons003>False</button>"];
    var red008 = ["<button class=buttons004>True</button><br /><br /><button class=buttons003>False</button>"];       
        
    var options009 = ["<button class=buttons001 onclick=q9c()>True</button><br /><br /><button class=buttons001 onclick=q9i()>False</button>"];
     var green009 = ["<button class=buttons003>True</button><br /><br /><button class=buttons001>False</button>"];
    var red009 = ["<button class=buttons003>True</button><br /><br /><button class=buttons004>False</button>"];       

    var options010 = ["<button class=buttons001 onclick=q10i()>True</button><br /><br /><button class=buttons001 onclick=q10c()>False</button>"];
    var green010 = ["<button class=buttons001>True</button><br /><br /><button class=buttons003>False</button>"];
    var red010 = ["<button class=buttons004>True</button><br /><br /><button class=buttons003>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() {
            message002.innerHTML = green001;
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q1i() {
            message002.innerHTML = red001;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q2i() {
            message002.innerHTML = red002;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q3i() {
            message002.innerHTML = red003;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q4i() {
            message002.innerHTML = red004;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q5i() {
            message002.innerHTML = red005;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q6i() {
            message002.innerHTML = red006;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q7i() {
            message002.innerHTML = red007;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q8i() {
            message002.innerHTML = red008;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q9i() {
            message002.innerHTML = red009;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q10i() {
            message002.innerHTML = red010;
            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>



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



This code is for the quiz with four options for each question.



Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Math Quiz</title>
</head>
<body>
    <style>
        #frame001 {
            border-radius: 5px;
            background-color: white;
            border: 2px solid black;
            height: auto;
            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;
        }

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

    .buttons004 {
            background-color: red;
            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>Math 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>
        <br />
            <p id="message004"></p>
        </div>
    </div>
    <script>
        var question001 = ["What is 1 + 1?",
            "What is 2 + 2?",
            "What is 3 + 3?",
            "What is 4 + 4?",
            "What is 5 + 5?",
            "What is 6 + 6?",
            "What is 7 + 7?",
            "What is 8 + 8?",
            "What is 9 + 9?",
            "What is 10 + 10?"
        ];

        var options001 = ["<button class=buttons001 onclick=q1b()>1</button><br /><br /><button class=buttons001 onclick=q1a()>2</button><br /><br /><button class=buttons001 onclick=q1c()>3</button><br /><br /><button class=buttons001 onclick=q1d()>4</button>"];
        var red101 = ["<button class=buttons004>1</button><br /><br /><button class=buttons003>2</button><br /><br /><button class=buttons001>3</button><br /><br /><button class=buttons001>4</button>"];
    var green101 = ["<button class=buttons001>1</button><br /><br /><button class=buttons003>2</button><br /><br /><button class=buttons001>3</button><br /><br /><button class=buttons001>4</button>"];
    var red201 = ["<button class=buttons001>1</button><br /><br /><button class=buttons003>2</button><br /><br /><button class=buttons004>3</button><br /><br /><button class=buttons001>4</button>"];    
    var red301 = ["<button class=buttons001>1</button><br /><br /><button class=buttons003>2</button><br /><br /><button class=buttons001>3</button><br /><br /><button class=buttons004>4</button>"];

    var options002 = ["<button class=buttons001 onclick=q2a()>4</button><br /><br /><button class=buttons001 onclick=q2b()>3</button><br /><br /><button class=buttons001 onclick=q2c()>8</button><br /><br /><button class=buttons001 onclick=q2d()>6</button>"];
        var green102 = ["<button class=buttons003>4</button><br /><br /><button class=buttons001>3</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons001>6</button>"];
    var red102 = ["<button class=buttons003>4</button><br /><br /><button class=buttons004>3</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons001>6</button>"];
    var red202= ["<button class=buttons003>4</button><br /><br /><button class=buttons001>3</button><br /><br /><button class=buttons004>8</button><br /><br /><button class=buttons001>6</button>"];
    var red302 = ["<button class=buttons003>4</button><br /><br /><button class=buttons001>3</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons004>6</button>"];

    var options003 = ["<button class=buttons001 onclick=q3b()>5</button><br /><br /><button class=buttons001 onclick=q3a()>6</button><br /><br /><button class=buttons001 onclick=q3c()>9</button><br /><br /><button class=buttons001 onclick=q3d()>5</button>"];
        var red103 = ["<button class=buttons004>5</button><br /><br /><button class=buttons003>6</button><br /><br /><button class=buttons001>9</button><br /><br /><button class=buttons001>5</button>"];
    var green103 = ["<button class=buttons001>5</button><br /><br /><button class=buttons003>6</button><br /><br /><button class=buttons001>9</button><br /><br /><button class=buttons001>5</button>"];
    var red203 = ["<button class=buttons001>5</button><br /><br /><button class=buttons003>6</button><br /><br /><button class=buttons004>9</button><br /><br /><button class=buttons001>5</button>"];
    var red303 = ["<button class=buttons001>5</button><br /><br /><button class=buttons003>6</button><br /><br /><button class=buttons001>9</button><br /><br /><button class=buttons004>5</button>"];

    var options004 = ["<button class=buttons001 onclick=q4b()>10</button><br /><br /><button class=buttons001 onclick=q4c()>12</button><br /><br /><button class=buttons001 onclick=q4d()>7</button><br /><br /><button class=buttons001 onclick=q4a()>8</button>"];
        var red104 = ["<button class=buttons004>10</button><br /><br /><button class=buttons001>12</button><br /><br /><button class=buttons001>7</button><br /><br /><button class=buttons003>8</button>"];
    var red204 = ["<button class=buttons001>10</button><br /><br /><button class=buttons004>12</button><br /><br /><button class=buttons001>7</button><br /><br /><button class=buttons003>8</button>"];
    var red304 = ["<button class=buttons001>10</button><br /><br /><button class=buttons001>12</button><br /><br /><button class=buttons004>7</button><br /><br /><button class=buttons003>8</button>"];
    var green104 = ["<button class=buttons001>10</button><br /><br /><button class=buttons001>12</button><br /><br /><button class=buttons001>7</button><br /><br /><button class=buttons003>8</button>"];

    var options005 = ["<button class=buttons001 onclick=q5b()>3</button><br /><br /><button class=buttons001 onclick=q5c()>8</button><br /><br /><button class=buttons001 onclick=q5a()>10</button><br /><br /><button class=buttons001 onclick=q5d()>12</button>"];
        var red105 = ["<button class=buttons004>3</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons003>10</button><br /><br /><button class=buttons001>12</button>"];
    var red205 = ["<button class=buttons001>3</button><br /><br /><button class=buttons004>8</button><br /><br /><button class=buttons003>10</button><br /><br /><button class=buttons001>12</button>"];
    var green105 = ["<button class=buttons001>3</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons003>10</button><br /><br /><button class=buttons001>12</button>"];
    var red305 = ["<button class=buttons001>3</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons003>10</button><br /><br /><button class=buttons004>12</button>"];
    
    var options006 = ["<button class=buttons001 onclick=q6b()>10</button><br /><br /><button class=buttons001 onclick=q6c()>11</button><br /><br /><button class=buttons001 onclick=q6d()>17</button><br /><br /><button class=buttons001 onclick=q6a()>12</button>"];
        var red106 = ["<button class=buttons004>10</button><br /><br /><button class=buttons001>11</button><br /><br /><button class=buttons001>17</button><br /><br /><button class=buttons003>12</button>"];
    var red206 = ["<button class=buttons001>10</button><br /><br /><button class=buttons004>11</button><br /><br /><button class=buttons001>17</button><br /><br /><button class=buttons003>12</button>"];
    var red306 = ["<button class=buttons001>10</button><br /><br /><button class=buttons001>11</button><br /><br /><button class=buttons004>17</button><br /><br /><button class=buttons003>12</button>"];
    var green106 = ["<button class=buttons001>10</button><br /><br /><button class=buttons001>11</button><br /><br /><button class=buttons001>17</button><br /><br /><button class=buttons003>12</button>"];

    var options007 = ["<button class=buttons001 onclick=q7b()>15</button><br /><br /><button class=buttons001 onclick=q7a()>14</button><br /><br /><button class=buttons001 onclick=q7c()>9</button><br /><br /><button class=buttons001 onclick=q7d()>13</button>"];
        var red107 = ["<button class=buttons004>15</button><br /><br /><button class=buttons003>14</button><br /><br /><button class=buttons001>9</button><br /><br /><button class=buttons001>13</button>"];
    var green107 = ["<button class=buttons001>15</button><br /><br /><button class=buttons003>14</button><br /><br /><button class=buttons001>9</button><br /><br /><button class=buttons001>13</button>"];
    var red207 = ["<button class=buttons001>15</button><br /><br /><button class=buttons003>14</button><br /><br /><button class=buttons004>9</button><br /><br /><button class=buttons001>13</button>"];
    var red307 = ["<button class=buttons001>15</button><br /><br /><button class=buttons003>14</button><br /><br /><button class=buttons001>9</button><br /><br /><button class=buttons004>13</button>"];

    var options008 = ["<button class=buttons001 onclick=q8b()>13</button><br /><br /><button class=buttons001 onclick=q8c()>18</button><br /><br /><button class=buttons001 onclick=q8a()>16</button><br /><br /><button class=buttons001 onclick=q8d()>12</button>"];
        var red108 = ["<button class=buttons004>13</button><br /><br /><button class=buttons001>18</button><br /><br /><button class=buttons003>16</button><br /><br /><button class=buttons001>12</button>"];
    var red208 = ["<button class=buttons001>13</button><br /><br /><button class=buttons004>18</button><br /><br /><button class=buttons003>16</button><br /><br /><button class=buttons001>12</button>"];
    var green108 = ["<button class=buttons001>13</button><br /><br /><button class=buttons001>18</button><br /><br /><button class=buttons003>16</button><br /><br /><button class=buttons001>12</button>"];
    var red308 = ["<button class=buttons001>13</button><br /><br /><button class=buttons001>18</button><br /><br /><button class=buttons003>16</button><br /><br /><button class=buttons004>12</button>"];
        
    var options009 = ["<button class=buttons001 onclick=q9b()>19</button><br /><br /><button class=buttons001 onclick=q9a()>18</button><br /><br /><button class=buttons001 onclick=q9c()>21</button><br /><br /><button class=buttons001 onclick=q9d()>13</button>"];
        var red109 = ["<button class=buttons004>19</button><br /><br /><button class=buttons003>18</button><br /><br /><button class=buttons001>21</button><br /><br /><button class=buttons001>13</button>"];
    var green109 = ["<button class=buttons001>19</button><br /><br /><button class=buttons003>18</button><br /><br /><button class=buttons001>21</button><br /><br /><button class=buttons001>13</button>"];
    var red209 = ["<button class=buttons001>19</button><br /><br /><button class=buttons003>18</button><br /><br /><button class=buttons004>21</button><br /><br /><button class=buttons001>13</button>"];
    var red309 = ["<button class=buttons001>19</button><br /><br /><button class=buttons003>18</button><br /><br /><button class=buttons001>21</button><br /><br /><button class=buttons004>13</button>"];

    var options010 = ["<button class=buttons001 onclick=q10a()>20</button><br /><br /><button class=buttons001 onclick=q10b()>22</button><br /><br /><button class=buttons001 onclick=q10c()>8</button><br /><br /><button class=buttons001 onclick=q10d()>16</button>"];
        var green110 = ["<button class=buttons003>20</button><br /><br /><button class=buttons001>22</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons001>16</button>"];
    var red110 = ["<button class=buttons003>20</button><br /><br /><button class=buttons004>22</button><br /><br /><button class=buttons001>8</button><br /><br /><button class=buttons001>16</button>"];
    var red210 = ["<button class=buttons003>20</button><br /><br /><button class=buttons001>22</button><br /><br /><button class=buttons004>8</button><br /><br /><button class=buttons001>16</button>"];
    var red310 = ["<button class=buttons003>20</button><br /><br /><button class=buttons001>22</button><br /><br /><button class=buttons001>21</button><br /><br /><button class=buttons004>16</button>"];
        
    var a = 0;
        a++;
        var b = 0;
        b++;

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

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

        function q1b() {
            message002.innerHTML = red101;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q1c() {
            message002.innerHTML = red201;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q1d() {
            message002.innerHTML = red301;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q2b() {
            message002.innerHTML = red102;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q2c() {
            message002.innerHTML = red202;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q2d() {
            message002.innerHTML = red302;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q3b() {
            message002.innerHTML = red103;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q3c() {
            message002.innerHTML = red203;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q3d() {
            message002.innerHTML = red303;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q4b() {
            message002.innerHTML = red104;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q4c() {
            message002.innerHTML = red204;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q4d() {
            message002.innerHTML = red304;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q5b() {
            message002.innerHTML = red105;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q5c() {
            message002.innerHTML = red205;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q5d() {
            message002.innerHTML = red305;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q6b() {
            message002.innerHTML = red106;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q6c() {
            message002.innerHTML = red206;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q6d() {
            message002.innerHTML = red306;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q7b() {
            message002.innerHTML = red107;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q7c() {
            message002.innerHTML = red207;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q7d() {
            message002.innerHTML = red307;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q8b() {
            message002.innerHTML = red108;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q8c() {
            message002.innerHTML = red208;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q8d() {
            message002.innerHTML = red308;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q9b() {
            message002.innerHTML = red109;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q9c() {
            message002.innerHTML = red209;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q9d() {
            message002.innerHTML = red309;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

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

        function q10b() {
            message002.innerHTML = red110;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

    function q10c() {
            message002.innerHTML = red210;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q10d() {
            message002.innerHTML = red310;
            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 RELATED PAGES:


Learn how to make a quiz

Learn how to make a drop and drag game

Learn how to add an image in a quiz

Learn how to add a timer in a quiz

Learn how to make a scrolling text using html and css
Other Topics:

Islamic Holidays
Health Tips
Sports Facts

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