HOW TO MAKE A MULTIPLE CHOICE QUIZ BY TYPING THE CORRECT OPTION USING HTML, JAVASCRIPT AND CSS
Code: _______________________________________________________________ <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Multiple Choice Quiz</title> </head> <body> <style> #table001 { color: black; font-size: large; text-align: left; } #font001 { color: green; } #font002 { color: red; } .blue001 { background-color: deepskyblue; border-radius: 8px; } </style> <div id="table001"> Question: <text id="number001">0</text><br /> Score: <text id="score001">0</text><br /><br /> </div> <p id="message001"></p> <p id="typings001"></p> <p id="typings002"></p> <p id="typings003"></p> <p id="typings004"></p> <p id="message002"></p> <p id="answer001"></p> <p id="next001"></p> <div id="disappear001"> <button class=blue001 onclick="begin001()">Begin</button> </div> <script> var words001 = ["Question 01", "Question 02", "Question 03", "Question 04", "Question 05", "Question 06", "Question 07", "Question 08", "Question 09", "Question 10"]; var words002 = ["1", "2", "3", "4", "4", "3", "2", "1", "2", "1"]; var choice001 = ["option001", "option001", "option001", "option001", "chice001", "option001", "option001", "option001", "option001", "option001"]; var choice002 = ["option002", "option002", "option002", "option002", "chice002", "option002", "option002", "option002", "option002", "option002"]; var choice003 = ["option003", "option003", "option003", "option003", "chice003", "option003", "option003", "option003", "option003", "option003"]; var choice004 = ["option004", "option004", "option004", "option004", "chice004", "option004", "option004", "option004", "option004", "option004"]; var correct001 = ["Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct"]; var incorrect001 = ["Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect"]; var e = 0; e++; var z = 0; z++; function begin001() { number001.innerHTML = z++; message001.innerHTML = words001[0]; typings001.innerHTML = choice001[0]; typings002.innerHTML = choice002[0]; typings003.innerHTML = choice003[0]; typings004.innerHTML = choice004[0]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit001()>Submit</button>"; answer001.innerHTML = ""; } function submit001() { var b = input001.value; if (b == words002[0]) { answer001.innerHTML = "<div id=font001>" + correct001[0] + "<br />" + "<br /> " + "<button class=blue001 onclick=new002()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[0]) { answer001.innerHTML = "<div id=font002>" + incorrect001[0] + "<br />" + "<br /> " + "<button class=blue001 onclick=new002()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new002() { number001.innerHTML = z++; message001.innerHTML = words001[1]; typings001.innerHTML = choice001[1]; typings002.innerHTML = choice002[1]; typings003.innerHTML = choice003[1]; typings004.innerHTML = choice004[1]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit002()>Submit</button>"; answer001.innerHTML = ""; } function submit002() { var b = input001.value; if (b == words002[1]) { answer001.innerHTML = "<div id=font001>" + correct001[1] + "<br />" + "<br /> " + "<button class=blue001 onclick=new003()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[1]) { answer001.innerHTML = "<div id=font002>" + incorrect001[1] + "<br />" + "<br /> " + "<button class=blue001 onclick=new003()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new003() { number001.innerHTML = z++; message001.innerHTML = words001[2]; typings001.innerHTML = choice001[2]; typings002.innerHTML = choice002[2]; typings003.innerHTML = choice003[2]; typings004.innerHTML = choice004[2]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit003()>Submit</button>"; answer001.innerHTML = ""; } function submit003() { var b = input001.value; if (b == words002[2]) { answer001.innerHTML = "<div id=font001>" + correct001[2] + "<br />" + "<br /> " + "<button class=blue001 onclick=new004()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[2]) { answer001.innerHTML = "<div id=font002>" + incorrect001[2] + "<br />" + "<br /> " + "<button class=blue001 onclick=new004()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new004() { number001.innerHTML = z++; message001.innerHTML = words001[3]; typings001.innerHTML = choice001[3]; typings002.innerHTML = choice002[3]; typings003.innerHTML = choice003[3]; typings004.innerHTML = choice004[3]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit004()>Submit</button>"; answer001.innerHTML = ""; } function submit004() { var b = input001.value; if (b == words002[3]) { answer001.innerHTML = "<div id=font001>" + correct001[3] + "<br />" + "<br /> " + "<button class=blue001 onclick=new005()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[3]) { answer001.innerHTML = "<div id=font002>" + incorrect001[3] + "<br />" + "<br /> " + "<button class=blue001 onclick=new005()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new005() { number001.innerHTML = z++; message001.innerHTML = words001[4]; typings001.innerHTML = choice001[4]; typings002.innerHTML = choice002[4]; typings003.innerHTML = choice003[4]; typings004.innerHTML = choice004[4]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit005()>Submit</button>"; answer001.innerHTML = ""; } function submit005() { var b = input001.value; if (b == words002[4]) { answer001.innerHTML = "<div id=font001>" + correct001[4] + "<br />" + "<br /> " + "<button class=blue001 onclick=new006()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[4]) { answer001.innerHTML = "<div id=font002>" + incorrect001[1] + "<br />" + "<br /> " + "<button class=blue001 onclick=new006()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new006() { number001.innerHTML = z++; message001.innerHTML = words001[5]; typings001.innerHTML = choice001[5]; typings002.innerHTML = choice002[5]; typings003.innerHTML = choice003[5]; typings004.innerHTML = choice004[5]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit006()>Submit</button>"; answer001.innerHTML = ""; } function submit006() { var b = input001.value; if (b == words002[5]) { answer001.innerHTML = "<div id=font001>" + correct001[5] + "<br />" + "<br /> " + "<button class=blue001 onclick=new007()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[5]) { answer001.innerHTML = "<div id=font002>" + incorrect001[5] + "<br />" + "<br /> " + "<button class=blue001 onclick=new007()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new007() { number001.innerHTML = z++; message001.innerHTML = words001[6]; typings001.innerHTML = choice001[6]; typings002.innerHTML = choice002[6]; typings003.innerHTML = choice003[6]; typings004.innerHTML = choice004[6]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit007()>Submit</button>"; answer001.innerHTML = ""; } function submit007() { var b = input001.value; if (b == words002[6]) { answer001.innerHTML = "<div id=font001>" + correct001[6] + "<br />" + "<br /> " + "<button class=blue001 onclick=new008()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[6]) { answer001.innerHTML = "<div id=font002>" + incorrect001[6] + "<br />" + "<br /> " + "<button class=blue001 onclick=new008()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new008() { number001.innerHTML = z++; message001.innerHTML = words001[7]; typings001.innerHTML = choice001[7]; typings002.innerHTML = choice002[7]; typings003.innerHTML = choice003[7]; typings004.innerHTML = choice004[7]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit008()>Submit</button>"; answer001.innerHTML = ""; } function submit008() { var b = input001.value; if (b == words002[7]) { answer001.innerHTML = "<div id=font001>" + correct001[7] + "<br />" + "<br /> " + "<button class=blue001 onclick=new009()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[7]) { answer001.innerHTML = "<div id=font002>" + incorrect001[7] + "<br />" + "<br /> " + "<button class=blue001 onclick=new009()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new009() { number001.innerHTML = z++; message001.innerHTML = words001[8]; typings001.innerHTML = choice001[8]; typings002.innerHTML = choice002[8]; typings003.innerHTML = choice003[8]; typings004.innerHTML = choice004[8]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit009()>Submit</button>"; answer001.innerHTML = ""; } function submit009() { var b = input001.value; if (b == words002[8]) { answer001.innerHTML = "<div id=font001>" + correct001[8] + "<br />" + "<br /> " + "<button class=blue001 onclick=new010()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[8]) { answer001.innerHTML = "<div id=font002>" + incorrect001[8] + "<br />" + "<br /> " + "<button class=blue001 onclick=new010()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new010() { number001.innerHTML = z++; message001.innerHTML = words001[9]; typings001.innerHTML = choice001[9]; typings002.innerHTML = choice002[9]; typings003.innerHTML = choice003[9]; typings004.innerHTML = choice004[9]; disappear001.innerHTML = "<input type=text id=input001 size=1 maxlength=1 /><button class=blue001 onclick=submit010()>Submit</button>"; answer001.innerHTML = ""; } function submit010() { var b = input001.value; if (b == words002[9]) { answer001.innerHTML = "<div id=font001>" + correct001[9] + "<br />" + "<br /> " + "<button class=blue001 onclick=new011()>Next</button>" + "</div>"; disappear001.innerHTML = ""; score001.innerHTML = e++; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } if (b !== words002[9]) { answer001.innerHTML = "<div id=font002>" + incorrect001[9] + "<br />" + "<br /> " + "<button class=blue001 onclick=new011()>Next</button>" + "</div>"; disappear001.innerHTML = ""; typings001.innerHTML = ""; typings002.innerHTML = ""; typings003.innerHTML = ""; typings004.innerHTML = ""; } } function new011() { if (e > 10) { message001.innerHTML = "Excellent! You are a genius." + "<br />" + "<br />" + "End of Quiz"; } else if (e > 9) { message001.innerHTML = "Very good! Almost there." + "<br />" + "<br />" + "End of Quiz"; } else if (e > 7) { message001.innerHTML = "Good! Try to do better next time." + "<br />" + "<br />" + "End of Quiz"; } else if (e > 5) { message001.innerHTML = "Ok. But not at your best." + "<br />" + "<br />" + "End of Quiz"; } else { message001.innerHTML = "No comments." + "<br />" + "<br />" + "End of Quiz"; } answer001.innerHTML = ""; next001.innerHTML = ""; message002.innerHTML = "<button class=blue001 onclick=repeat001()>Repeat</button>"; } function repeat001() { location.reload(); } </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 in a quiz Learn how to create a link for your website Learn how to add a timer in a quiz Learn how to create an input box using html and javascript |