HOW TO REMOVE DUPLICATES IN A RANDOM QUIZ USING HTML, JAVASCRIPT, AND CSS
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 RELATED PAGES: |