How to remove duplicates in a random quiz

HOW TO REMOVE DUPLICATES IN A RANDOM QUIZ USING HTML, JAVASCRIPT, AND CSS

Updated in: Sha'ban 1441 / April 2020

In this lesson, you will learn how to remove duplicates in a quiz.

You will be able to add as many questions as you want where they will not repeat with less coding.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Random Quiz</title>
</head>
<body>
    <style>
        .frame1 {
            background-color: white;
            border: 2px solid black;
            color: black;
            border-radius: 2px;
            width: 300px;
            text-align: center;
        }

        #green1 {
            color: green;
        }

        #red1 {
            color: red;
        }

        .blue_button {
            background-color: blue;
            color: white;
            margin: 3px;
        }
    </style>
    <div class="frame1">
        <h2>Random Quiz</h2>
        Question: <text id="question1">0</text><br />
        Score: <text id="score1">0</text>
        <hr />

        <p id="message1"></p>
        <p id="message2"></p>
        <p id="result1"></p>
        <p id="next1"></p>
        <div id="disappear">
            <p id="message3">Begin</p>
            <button class="blue_button" onclick="btn()">Click Here</button><br /><br />
        </div>
    </div>

    <script>

        var numbers = ["What is 1 + 1?<br /><button class=blue_button id=hide1 onclick=ans1()>2</button><br /><button class=blue_button id=hide2 onclick=ans2()>4</button><br />",

        "What is 2 + 2?<br /><button class=blue_button id=hide1 onclick=ans1()>4</button><br /><button class=blue_button id=hide2 onclick=ans2()>3</button><br />",

        "What is 3 + 3?<br /><button class=blue_button id=hide2 onclick=ans2()>5</button><br /><button class=blue_button id=hide1 onclick=ans1()>6</button><br />",

        "What is 4 + 4?<br /><button class=blue_button id=hide1 onclick=ans1()>8</button><br /><button class=blue_button id=hide2 onclick=ans2()>7</button><br />",

        "What is 5 + 5?<br /><button class=blue_button id=hide2 onclick=ans2()>9</button><br /><button class=blue_button id=hide1 onclick=ans1()>10</button><br />",

        "What is 6 + 6?<br /><button class=blue_button id=hide1 onclick=ans1()>12</button><br /><button class=blue_button id=hide2 onclick=ans2()>14</button><br />",

        "What is 7 + 7?<br /><button class=blue_button id=hide1 onclick=ans1()>14</button><br /><button class=blue_button id=hide2 onclick=ans2()>13</button><br />",

        "What is 8 + 8?<br /><button class=blue_button id=hide2 onclick=ans2()>15</button><br /><button class=blue_button id=hide1 onclick=ans1()>16</button><br />",

        "What is 9 + 9?<br /><button class=blue_button id=hide2 onclick=ans2()>17</button><br /><button class=blue_button id=hide1 onclick=ans1()>18</button><br />",

        "What is 10 + 10?<br /><button class=blue_button id=hide2 onclick=ans2()>9</button><br /><button class=blue_button id=hide1 onclick=ans1()>20</button><br />"];

        var x = 0;
        x++;

        var y = 0;
        y++;

        var z = 0;
        z++;

        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(numbers);

        function btn() {
            x++;
            question1.innerHTML = y++;
            disappear.innerHTML = "";
            message2.innerHTML = numbers.shift();
            next1.innerHTML = "";
        }

        function ans1() {
            score1.innerHTML = z++;
            result1.innerHTML = "<div id=green1>" + "Correct" + "</div>";
            hide1.style.background = "green";
            hide1.disabled = true;
            hide2.disabled = true;
            next1.innerHTML = "<button class=blue_button onclick=new1()>Next</button>";
        }

        function ans2() {
            result1.innerHTML = "<div id=red1>" + "Incorrect" + "</div>";
            hide1.style.background = "green";
            hide2.style.background = "red";
            hide1.disabled = true;
            hide2.disabled = true;
            next1.innerHTML = "<button class=blue_button onclick=new1()>Next</button>";
        }

        function new1() {
            next1.innerHTML = "";
            x++;
            question1.innerHTML = y++;
            message2.innerHTML = numbers.shift();
            result1.innerHTML = "";
            if (x > 11) {
                message2.innerHTML = "End of Quiz";
                question1.innerHTML = (y - 2);
                next1.innerHTML = "<button class=blue_button onclick=repeat1()>Repeat</button>";
            }
        }

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

Here is a video of the above code. It is four parts, you will find the other parts on my channel or from the suggested videos.

Other Topics:

Scrambled Letters
World Countries
Ramadan Q & A