How to make a multiple fill in the blank quiz

HOW TO MAKE A MULTIPLE FILL IN THE BLANK QUIZ USING HTML, JAVASCRIPT, AND CSS

This code will be somewhat similar to the fill-in-the-blank quiz that I have on my website, but with more questions in it and a message at the end of the quiz if all questions are answered correctly.

This code will show the capitals and a paragraph with 5 blanks. The player is to put the correct answer in the blank. If the player gets an incorrect answer, he/she can still try again until all answers are correct.

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 Topics:

Crosswords- General Area
Human Body Facts
Binary Digits