xSrchasstx
New Member
I've been learning HTML/CSS/JavaScript for a couple of weeks now, and I am currently practicing on a mini project, which consists of letting people answer math questions, and validating their answers.My current progress can be seen at http://dany.faceflow.comI know I am probably not using the best strategy to develop this mini game, so any advice would be useful on that. However right now, the problem is that I am taking the user answer with a variable through JS prompt, and I want to do it via an HTML form (less annoying).In my source code you can see this line within the function:\[code\]var userInput = prompt(numb1 + symbol + numb2);\[/code\]Then, still in the same function, I have an if/else structure to compare the user's answer with the right answer. The code works, I just don't know how to make the prompt HTML-based instead. I've tried an html form with an ID and in the JS using getElementById, document.write and some other stuff but I never got it to work for that part.(Here's all the JS)\[code\]var number1 = function() { var numb1 = Math.floor(Math.random() * 41) + 10; return numb1;}var number2 = function() { var numb2 = Math.floor(Math.random() * 41) + 10; return numb2;}var userAnswer = function() { var numb1 = number1(); var numb2 = number2(); var randomSymbol = Math.random(); if (randomSymbol > 0.5) { var symbol = "+"; } else { var symbol = "-"; } // add the math question in the html bubble document.getElementById('bubble').innerHTML = numb1 + symbol + numb2; // Prompts the user to give an answer. Change this to HTML. var userInput = prompt(numb1 + symbol + numb2); //var userInput = document.getElementById('tw').value; if (symbol == "+" && userInput == (numb1 + numb2)) { document.getElementById('feedback').innerHTML = "Congratulations!"; } else if (symbol == "+" && userInput !== (numb1 + numb2)) { document.getElementById('feedback').innerHTML = "Wrong!"; } else if (symbol == "-" && userInput == (numb1 - numb2)) { document.getElementById('feedback').innerHTML = "Congratulations!"; } else if (symbol == "-" && userInput !== (numb1 - numb2)) { document.getElementById('feedback').innerHTML = "Wrong!"; } else { alert("Something wrong happened. Try again."); } return userInput;}\[/code\](The HTML)\[code\]<!DOCTYPE html><html> <head> <link type="text/css" rel="stylesheet" href="http://stackoverflow.com/questions/15848832/css/stylesheet.css" /> <script src="http://stackoverflow.com/questions/15848832/js/script.js"></script> <title>Improve Your Math Skills!</title> </head> <body> <center> <button onclick="userAnswer()">PLAY NOW!</button> <div id="bubble"></div> <div id="feedback"></div> <!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> --> </center> </body> </html>\[/code\]Thank you