javascript - Taking var with JS prompt - how can I make it through HTML form? -
i've been learning html/css/javascript couple of weeks now, , practicing on mini project, consists of letting people answer math questions, , validating answers.
my current progress can seen @ http://dany.faceflow.com
i know not using best strategy develop mini game, advice useful on that. right now, problem taking user answer variable through js prompt, , want via html form (less annoying).
in source code can see line within function:
var userinput = prompt(numb1 + symbol + numb2); then, still in same function, have if/else structure compare user's answer right answer. code works, don't know how make prompt html-based instead. i've tried html form id , in js using getelementbyid, document.write , other stuff never got work part.
(here's js)
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 math question in html bubble document.getelementbyid('bubble').innerhtml = numb1 + symbol + numb2; // prompts user give answer. change 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; } (the html)
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> <script src="js/script.js"></script> <title>improve 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> thank you
you can use input tag instead of prompt. change html in dinesh's answer;
<div id="bubble"></div> <div id="inp" style="display: none;"> <input type="text" id="ans"></input> <button id="subbtn">submit</button> </div> <div id="feedback"></div> now, javascript, there few things consider. firstly, have
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; } both functions same thing; don't need 2 separate functions 2 separate random numbers. so, 1 function suffice.
var number = function() { return math.floor(math.random() * 41) + 10; }; secondly, have 2 functions. useranswer post new question when 'play now!' clicked and, say, evalanswer evaluate answer written in input field when 'submit' clicked.
in useranswer, generate 2 new random numbers , figure out operation conducted on them. @ point, can evaluate answer , store in global variable. makes things easier when evaluate answer, need simple comparison.
other that, update innerhtml bubble , display div inp.
in evalanswer, value ans , compare computed value of current answer, , accordingly update feedback.innerhtml.
here's code;
//variable maintain current answer var curans = 0; //here, domelements use var playbtn = document.getelementbyid('playbtn'); var bubble = document.getelementbyid('bubble'); var inp = document.getelementbyid('inp'); var ans = document.getelementbyid('ans'); var subbtn = document.getelementbyid('subbtn'); var feedback = document.getelementbyid('feedback'); //i add event listeners //this equivalent using 'onclick' //in html, , doing way //my personal preference playbtn.addeventlistener('click', function() {useranswer();}, false); subbtn.addeventlistener('click', function() {evalanswer();}, false); //function random number var number = function() { return math.floor(math.random() * 41) + 10; }; //this function executed when 'play now!' clicked. var useranswer = function() { //get 2 separate random numbers in //numb1 , numb2 var numb1 = number(); var numb2 = number(); var symbol = ''; var randomsymbol = math.random(); //determine operation used //and compute corresponding correct answer current //question if (randomsymbol > 0.5) { symbol = "+"; curans = numb1+numb2; } else { symbol = "-"; curans = numb1-numb2; } //add math question bubble bubble.innerhtml = 'what ' + numb1 + ' ' + symbol + ' ' + numb2 + '?'; feedback.innerhtml = ''; //make inp div visible inp.style.display = 'block'; //reset input value '' ans.value = ''; }; //this function executed when 'submit' clicked var evalanswer = function() { //simply compare input value computed //answer , update feedback if(parseint(ans.value) !== curans) { feedback.innerhtml = 'wrong answer, try again!'; } else { feedback.innerhtml = 'you got right, congratulations!'; } }; hope helped!
Comments
Post a Comment