HOW TO MAKE A QUIZ WITH MULTIPLE TYPES IN IT USING HTML, JAVASCRIPT, AND CSS
Code: _______________________________________________________________ <html> <body> <style> #frame001 { background-color: white; border: 2px solid black; text-align: center; } #font001 { font-color: black; font-size: large; } </style> <div id="frame001"> <h2>Quiz</h2> <div id="font001"> Question: <text id="number01">0</text> / 5 Score: <text id="number02">0</text> / 5<br /><hr /> <p id="hide01"> <button onclick="begin001()">Begin</button> </p> <p id="message001"></p> <p id="message002"></p> <p id="message003"></p> <p id="nextPage"></p> </div> </div> <script> var question01 = ["What is 1 + 1?"]; var question02 = ["2 + 3 = <input type=text id=box01 size=3>"]; var question03 = ["3 + 3 = 5."]; var question04 = ["What is 4 + 4?"]; var question05 = ["10 + 3 = <input type=text id=box02 size=3>"]; var options01 = ["<br /><br /><button onclick=answer01()>2</button><br /><br /><button onclick=answer02()>3</button><br /><br /><button onclick=answer02()>4</button>"]; var options02 = ["<button onclick=submit01()>Submit</button>"]; var options03 = ["<br /><br /><button onclick=true01()>False</button><br /><br /><button onclick=false01()>True</button>"]; var options04 = ["<br /><br /><button onclick=choice02()>5</button><br /><br /><button onclick=choice01()>8</button><br /><br /><button onclick=choice2()>12</button>"]; var options05 = ["<button onclick=submit02()>Submit</button>"]; var a; var b; var q = 0; q++; var s = 0; s++; function begin001() { number01.innerHTML = q++; hide01.innerHTML = ""; message001.innerHTML = question01; message002.innerHTML = options01; } function answer01() { number02.innerHTML = s++; message002.innerHTML = ""; message003.innerHTML = "Correct"; nextPage.innerHTML = "<button onclick=next002()>Next</button>"; } function answer02() { message002.innerHTML = ""; message003.innerHTML = "Incorrect"; nextPage.innerHTML = "<button onclick=next002()>Next</button>"; } function next002() { number01.innerHTML = q++; nextPage.innerHTML = ""; message003.innerHTML = ""; message001.innerHTML = question02; message002.innerHTML = options02; } function submit01() { var a = box01.value; if (a == 5) { number02.innerHTML = s++; message002.innerHTML = ""; message003.innerHTML = "Correct"; nextPage.innerHTML = "<button onclick=next003()>Next</button>"; } else { message002.innerHTML = ""; message003.innerHTML = "Incorrect"; nextPage.innerHTML = "<button onclick=next003()>Next</button>"; } } function next003() { number01.innerHTML = q++; nextPage.innerHTML = ""; message003.innerHTML = ""; message001.innerHTML = question03; message002.innerHTML = options03; } function true01() { number02.innerHTML = s++; message002.innerHTML = ""; message003.innerHTML = "Correct"; nextPage.innerHTML = "<button onclick=next004()>Next</button>"; } function false01() { message002.innerHTML = ""; message003.innerHTML = "Incorrect"; nextPage.innerHTML = "<button onclick=next004()>Next</button>"; } function next004() { number01.innerHTML = q++; nextPage.innerHTML = ""; message003.innerHTML = ""; message001.innerHTML = question04; message002.innerHTML = options04; } function choice01() { number02.innerHTML = s++; message002.innerHTML = ""; message003.innerHTML = "Correct"; nextPage.innerHTML = "<button onclick=next005()>Next</button>"; } function choice02() { message002.innerHTML = ""; message003.innerHTML = "Incorrect"; nextPage.innerHTML = "<button onclick=next005()>Next</button>"; } function next005() { number01.innerHTML = q++; nextPage.innerHTML = ""; message003.innerHTML = ""; message001.innerHTML = question05; message002.innerHTML = options05; } function submit02() { var b = box02.value; if (b == 13) { number02.innerHTML = s++; message002.innerHTML = ""; message003.innerHTML = "Correct"; nextPage.innerHTML = "<button onclick=end001()>End of Quiz</button>"; } else { message002.innerHTML = ""; message003.innerHTML = "Incorrect"; nextPage.innerHTML = "<button onclick=end001()>End of Quiz</button>"; } } function end001() { q - 1 nextPage.innerHTML = ""; message003.innerHTML = ""; message001.innerHTML = "End of Quiz. Thanks for taking this quiz."; message002.innerHTML = ""; } </script> </body> </html> Here is a video of the above code. |
OTHER RELATED PAGES: Learn how to make a quiz Learn how to add an image from your pc to your website Learn how to make an object move in a canvas Learn how to create an input box using html and javascript Learn how to create a crossword puzzle using html, javascript and css |