Ok, so my project is to make a math quiz site. I have to have 2 numbers randomly generated and the user needs to fill in the number. The user needs to also needs to be able to choose their operation. Now my problem is under my second function I am trying to go by each operation and have the computed answer compared to the user input. As of right now my code either turns positive for all operations or depending on how many = I use it says sorry. I have tried adding another condition of if the add button is checked.
`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1><b>Pirate Math</b></h1>
<p id= "bubble"><b>Ahoy Matey!</b> Can you help me practice my math?</p>
<img id = "g1" src = "images/g1_t.png" alt= "Pirate Girl" height="200 px" width = "150px"/>
<ul>
<li><p id = "num1"></p></li>
<li><p id = "opBox"></p></li>
<li><p id = "num2"></p></li>
</ul>
<input type="number" id = "answerBox">
<br>
<br>
<button id= "checkAns">Check Answer</button>
<br>
<br>
<br>
<fieldset>
<h3>Choose your <br> operation!</h3>
<input type="radio" id="op1" name="op" value="add">
<label for="op1"> + </label>
<br>
<input type="radio" id="op2" name="op" value="sub">
<label for="op2"> - </label>
<br>
<input type="radio" id="op3" name="op" value="mult">
<label for="op3"> x </label>
<br>
<input type="radio" id="op4" name="op" value="divide">
<label for="op4"> ÷ </label>
<br>
<button id= "opPick">Click to pick!</button>
</fieldset>
<br>
<p div class="copyright"><em><small>© 2021 Ashley Kohn</small></em></div>
<script>
//button on click op choose
document.getElementById("opPick").addEventListener("click", function operation(){
var op1 = document.getElementById("op1");
var op2 = document.getElementById("op2");
var op3 = document.getElementById("op3");
var op4 = document.getElementById("op4");
console.log("op1 " + op1.checked);
console.log("op2 " + op2.checked);
console.log("op3 " + op3.checked);
console.log("op4 " + op4.checked);
//Addition
if ( op1.checked){
var addNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var addNum2 = Math.floor(Math.random() * (20 - 1 + 1));
console.log("this is with " + (Math.floor(addNum1) + 1));
document.getElementById("num1").innerHTML = addNum1;
document.getElementById("num2").innerHTML = addNum2;
document.getElementById("opBox").innerHTML = "+";
var sum=0;
sum=Number(addNum1)+Number(addNum2);
console.log("SUM is: " + sum);
}
//subtraction
if ( op2.checked){
var subNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var subNum2 = Math.floor(Math.random() * (20 - 1 + 1));
console.log("this is sub " + (Math.floor(subNum1) + 1));
document.getElementById("num1").innerHTML = subNum1;
document.getElementById("num2").innerHTML = subNum2;
document.getElementById("opBox").innerHTML = "−";
var dif=0;
dif=Number(subNum1)-Number(subNum2);
console.log("DIF is: " + dif);
}
//multipulcation
if ( op3.checked){
var multNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var multNum2 = Math.floor(Math.random() * (20 - 1 + 1));
console.log("this is with " + (Math.floor(multNum1) + 1));
document.getElementById("num1").innerHTML = multNum1;
document.getElementById("num2").innerHTML = multNum2;
document.getElementById("opBox").innerHTML = "×";
var prod =0;
prod=Number(multNum1)* Number(multNum2);
console.log("PROd is: " + prod);
}
//division
if ( op4.checked){
var divideNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var divideNum2 = Math.floor(Math.random() * (20 - 1 + 1));
console.log("this is with divide " + (Math.floor(divideNum1) + 1));
document.getElementById("num1").innerHTML = divideNum1;
document.getElementById("num2").innerHTML = divideNum2;
document.getElementById("opBox").innerHTML = "÷";
var divi=0;
divi=Number(divideNum1)/ Number(divideNum2);
console.log("DIVI is: " + divi);
} // closing if
}); // closing function 1
document.getElementById("checkAns").addEventListener("click", function math(){ // supposed to solve the addition
var userNum = document.getElementById("answerBox").value;
var addNum1 = document.getElementById("num1");
var addNum2 = document.getElementById("num2");
var sum = Number(addNum1) + Number(addNum2);
var subNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var subNum2 = Math.floor(Math.random() * (20 - 1 + 1));
var dif = Number(subNum1)-Number(subNum2);
var multNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var multNum2 = Math.floor(Math.random() * (20 - 1 + 1));
var prod = Number(multNum1)* Number(multNum2);
var divideNum1 = Math.floor(Math.random() * (20 - 1 + 1));
var divideNum2 = Math.floor(Math.random() * (20 - 1 + 1));
var divi = Number(divideNum1)/ Number(divideNum2);
if (Number(sum) == Number(userNum)){
console.log("yay!");
}//if statement closed
/*else if (dif = Number(userNum) && op2.checked){
console.log("yay!");
}//if statement closed
else if (prod = Number(userNum) && op3.checked){
console.log("yay!");
}//if statement closed
else if (divi = Number(userNum)&& op4.checked){
console.log("yay!");
}//if statement closed */
else{
console.log("sorry!");
}
})//closing function 2`
Aucun commentaire:
Enregistrer un commentaire