HOW TO MAKE A MULTIPLE FILL IN THE BLANK 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>Name It Quiz</title> </head> <body> <style> #frame001 { background-color: white; border: 2px solid black; border-radius: 10px; width: auto; height: auto; padding: 5px; } #color001 { color: black; font-size: large; text-align: left; } #center001 { text-align: center; } .button001 { background-color: blue; color: white; border-radius: 10px; padding: 5px; cursor: pointer; } .button002 { width: 10px; height: 10px; } </style> <div id="frame001"> <div id="color001"> <div id="center001"> <h2><strong>Name It Quiz</strong></h2> <p><strong>Word Bank:</strong> Amman - Ottawa - Jerusalem - London - Brasilia</p></div><br /> <p>The capital of Palestine is <input type="text" class="check003" id="input001" size="15" /><text class="button002" id="check001"></text>, and the capital of Jordan is <input id="input002" size="15" /><text class="button002" id="check002"></text>, and the capital of England is <input id="input003" size="15" /> <text class="button002" id="check003"></text> and the capital of Brazil is <input id="input004" size="15" /><text class="button002" id="check004"></text>, and the capital of Canada is <input id="input005" size="15" /><text class="button002" id="check005"></text>.</p> <div id="disappear001"><div id="center001"><button class="button001" onclick="submit001()">Submit</button></div></div><br /> <div id="center001"><p id="message001"></p><p id="reload001"></p></div> <br /> <br /> </div> </div> <script> var g; var h; var i; var j; var k; function submit001() { b = input001.value; c = input002.value; d = input003.value; e = input004.value; f = input005.value; if (b == "Jerusalem" || b == "jerusalem") { g = 1; input001.value = b; check001.innerHTML = "<text class=button002>" + "✔" + "</text>"; } else { input001.value = b; check001.innerHTML = "<text class=button002>" + "✖" + "</text>"; } if (c == "Amman" || c == "amman") { h = 1 input002.value = c; check002.innerHTML = "<text class=button002>" + "✔" + "</text>"; } else { input002.value = c; check002.innerHTML = "<text class=button002>" + "✖" + "</text>"; } if (d == "London" || d == "london") { i = 1; input003.value = d; check003.innerHTML = "<text class=button002>" + "✔" + "</text>"; } else { input003.value = d; check003.innerHTML = "<text class=button002>" + "✖" + "</text>"; } if (e == "Brasilia" || e == "brasilia") { j = 1; input004.value = e; check004.innerHTML = "<text class=button002>" + "✔" + "</text>"; } else { input004.value = e; check004.innerHTML = "<text class=button002>" + "✖" + "</text>"; } if (f == "Ottawa" || f == "ottawa") { k = 1; input005.value = f; check005.innerHTML = "<text class=button002>" + "✔" + "</text>"; } else { input005.value = f; check005.innerHTML = "<text class=button002>" + "✖" + "</text>"; } if (g == 1 && h == 1 && i == 1 && j == 1 && k == 1) { message001.innerHTML = "Congratulation! You have successfully finished this quiz."; disappear001.innerHTML = ""; reload001.innerHTML = "<div id=center001><button class=button001 onclick=repeat001()>Repeat</button></div>"; } } 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 from your pc to your website Learn how to make an object move in a canvas Learn how to make an object move Learn how to create an input box using html and javascript Learn how to create a crossword puzzle using html, javascript and css |