JSFiddle - React, Tailwind, and code Playground

by Ashish

HTML

<form id="mathForm" name="mathForm" action="" method="post">
                        Step 1: Do you want to Add, Substract or Multiply?<br>
                        <input type="radio" id = "add" name="mathQ" value="+">Answer a question on Addition<br>
                        <input type="radio" id = "subt" name="mathQ" value="-">Answer a question on subtraction<br>
                        <input type="radio" id = "mul" name="mathQ" value="*">Answer a question on multiplication<br>
                        <input type="button" onclick="setQuestion()" id = "genQues" name="generateQuestion" value="          Step 2:Generate Question Item!          "><br><br>
                        Here's your Question:<br>
                        <input type="text" id="quest" name="quest" size="45"><br><br>
                        Step 3:Type your answer here:<br>
                        <input type="text" id="answer" name="answer" size="45"><br><br>
                        <input type="button" name="checkAnswer" value="          Step 4:See if you are right!          " onclick="checkAnswer1()"><br><br>
        </form>

JavaScript

function setQuestion()
{            
        var radios = document.querySelector('input[name="mathQ"]:checked').value;
                   
        var num1 = (Math.random()*10^17)%19;
        var num2 = (Math.random()*10^17)%19;

        var txt = num1 + radios + num2;
       document.getElementById('quest').value = txt;        

}
function checkAnswer1()
{
    var quest = document.getElementById('quest').value;
    var answr = document.getElementById('answer').value; 
    var v1 = eval(quest);
    if(v1 == answr)
    { alert("PASS"); }
    else
    { alert("FAIL"); }
}