index.html

<div class="container-tight mt-5 mb-4">
        <div class="card card-md">
          <div class="card-body">
            <h1 class="text-center mb-3">Speedy Math</h1>
            <label for="question"></label>

            <input class="form-control col-12 ml-2" type="number" placeholder="(generate)" id="question" readonly></input><h4 class="text-center mt-2 mr-2 ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></h4>
            <input class="form-control col-12" type="number" id="question1" placeholder="(generate)" readonly></input></center>
            <p for="answer" class="h2 text-center mt-3">Answer <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/310/beaming-face-with-smiling-eyes_1f601.png" alt="" width="25px"></p>
                <input class="form-control text-center col-12" type="number" id="answer" placeholder="(punch in your answer)"></input>
                <button class="btn btn-danger col-12 mt-2" onclick="q123()">Generate Question</button>
                <button class="btn btn-success col-12 mt-2" onclick="A123()">Submit</button><p class="text-center mt-2">Also Try: <a href="division.html" class="badge badge-primary">Division</a> <a href="index.html" class="badge badge-primary">Addition</a> <a href="subtraction.html" class="badge badge-primary">Subtraction</a></p>
            </div>
        </div>
    </div>
</div><div class="modal modal-blur fade" id="correct" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-status bg-success"></div>
          <div class="modal-body text-center py-4">
            <!-- Download SVG icon from http://tabler-icons.io/i/circle-check -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><path d="M9 12l2 2l4 -4" /></svg>
            <h3>Payment succedeed</h3>
            <div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
          </div>
          <div class="modal-footer">
            <div class="w-100">
              <div class="row">
                <div class="col"><a href="#" class="btn btn-white w-100" data-bs-dismiss="modal">
                    Go to dashboard
                  </a></div>
                <div class="col"><a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">
                    View invoice
                  </a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<script>
function q123()
{
document.getElementById("question").value =
Math.floor(Math.random() * 250) ;

document.getElementById("question1").value =
Math.floor(Math.random() * 15) ;
}
function A123()
{
no1 = parseInt(document.getElementById("question").value)
no2 = parseInt(document.getElementById("question1").value)
subRes = parseInt(document.getElementById("answer").value)

res = no1*no2
alert("Great, we've recorded your response. Click `OK` for answer.")
alert(res)
if ( res != subRes)
    alert("Oops, Your Answer Was Incorrect ❌!")
else 
$('#correct').modal({ show: true });
answer = document.getElementById("answer").value

document.getElementById("question").value =""
document.getElementById("question1").value =""
document.getElementById("answer").value =""
}
</script>