HOW TO DO A RADIO BUTTON QUIZ WITH ANSWERS COMPARISON USING JS AND HTML
Code: _______________________________________________________________ <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Quiz</title> </head> <body> <p id="message001"></p> <p id="comments001"></p> <p id="click001"></p> <script> var a; var b; var c; var d; var e; var f; var z; var question001 = ["What is 1 + 1?<br /><br /><input onclick=option001() name=button001 type=radio />2<br /><br /><input onclick=option002() name=button001 type=radio />4<br /><br /><input onclick=option003() name=button001 type=radio />6<br /><br />What is 2 + 2?<br /><br /><input onclick=option004() name=button002 type=radio />3<br /><br /><input onclick=option005() name=button002 type=radio />4<br /><br /><input onclick=option006() name=button002 type=radio />8<br /><br />What is 3 + 3?<br /><br /><input onclick=option007() name=button003 type=radio />4<br /><br /><input onclick=option008() name=button003 type=radio />7<br /><br /><input onclick=option009() name=button003 type=radio />6<br /><br />"]; window.onload = function () { a = 0; b = 0; c = 0; message001.innerHTML = question001; click001.innerHTML = "<button onclick=submit001()>Submit</button>"; } function option001() { a = 1; d = 2; } function option002() { a = 0; d = 4; } function option003() { a = 0; d = 6; } function option004() { b = 0; e = 3; } function option005() { b = 1; e = 4; } function option006() { b = 0; e = 8; } function option007() { c = 0; f = 4; } function option008() { c = 0; f = 7; } function option009() { c = 1; f = 6; } function submit001() { z = a + b + c; message001.innerHTML = "End of Quiz"; comments001.innerHTML = "Your score is " + z + "<br /><br />" + "What is 1 + 1? Your answer is " + d + ". The correct answer is 2" + "<br /><br />" + "What is 2 + 2? Your answer is " + e + ". The correct answer is 4" + "<br /><br />" + "What is 3 + 3? Your answer is " + f + ". The correct answer is 6"; click001.innerHTML = "<button 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. |
OTHER RELATED PAGES: |