Log in

View Full Version : Need Help: Javascript Multiplication Test


leafeater
11-10-2010, 04:17 AM
Hello,

I am trying to write a javascript page that shuffles an array of questions ( 1x1 , 1x2, 1x3 - 1x12), prints them, then has the user type in the answer, then checks them to make sure the user answer is correct.
I have looked up a lot of source code for javascript "quiz" but they all are multiple choice answers and the questions are not shuffled. This is as far as I have gotten, but now I am not sure how to take the user input text and compare them to the answer / question array to make sure to check.



<html>
<head>
<title> Slick Math </title>
<script type="text/javascript">

var quest = new Array;
var ans = new Array;
var questprint = new Array;

quest[0] = "1 x 1 ";
quest[1] = "1 x 2 ";
quest[2] = "1 x 3 ";
quest[3] = "1 x 4 ";
quest[4] = "1 x 5 ";
quest[5] = "1 x 6 ";
quest[6] = "1 x 7 ";
quest[7] = "1 x 8 ";
quest[8] = "1 x 9 ";
quest[9] = "1 x 10 ";
quest[10] = "1 x 11 ";
quest[11] = "1 x 12 ";

questprint[0] = quest[0]+"<input type='text' name='q0'></input><br/>";
questprint[1] = quest[1]+"<input type='text' name='q1'></input><br/>";
questprint[2] = quest[2]+"<input type='text' name='q2'></input><br/>";
questprint[3] = quest[3]+"<input type='text' name='q3'></input><br/>";
questprint[4] = quest[4]+"<input type='text' name='q4'></input><br/>";
questprint[5] = quest[5]+"<input type='text' name='q5'></input><br/>";
questprint[6] = quest[6]+"<input type='text' name='q6'></input><br/>";
questprint[7] = quest[7]+"<input type='text' name='q7'></input><br/>";
questprint[8] = quest[8]+"<input type='text' name='q8'></input><br/>";
questprint[9] = quest[9]+"<input type='text' name='q9'></input><br/>";
questprint[10] = quest[10]+"<input type='text' name='q10'></input><br/>";
questprint[11] = quest[11]+"<input type='text' name='q11'></input><br/>";


var score = 0;
ans[0] = 1;
ans[1] = 2;
ans[2] = 3;
ans[3] = 4;
ans[4] = 5;
ans[5] = 6;
ans[6] = 7;
ans[7] = 8;
ans[8] = 9;
ans[9] = 10;
ans[10] = 11;
ans[11] = 12;

function shuffle() {
return (Math.round(Math.random())-.5);
}

questprint.sort(shuffle);

</script>
</head>
<body>
<h1>Slick Math</h1>
<form name="form">
<script type="text/javascript">
document.write(questprint[0]);
document.write(questprint[1]);
document.write(questprint[2]);
document.write(questprint[3]);
document.write(questprint[4]);
document.write(questprint[5]);
document.write(questprint[6]);
document.write(questprint[7]);
document.write(questprint[8]);
document.write(questprint[9]);
document.write(questprint[10]);
document.write(questprint[11]);

</script>
</form>
</body>
</html>


Thanks =]
[Nicolas]
11-10-2010, 04:32 AM
Would it be ok if this sent the person to different links?
Or would you like it to be on the same page?
And, are you wanting to use that code (edited) or a new code?
leafeater
11-10-2010, 04:35 AM
Well the html page should be a single page were one can take the "test" and get their results calculated. That code or new code if im far off, im not picky just looking to learn. =x
[Nicolas]
11-10-2010, 04:40 AM
I think I can whip something up for you real quick. Be Back Soon :P
[Nicolas]
11-11-2010, 07:36 PM
I've attached all I could do with Javascript. You probably won't like it though.
traq
11-12-2010, 03:45 AM
you don't need to define individual questions and answers. javascript knows how to do math. just let it choose random numbers and create the questions itself:

<div id="q" style="height: 50px;"></div>
<input type='button' id='check' value='Check Answer' onclick="check();">
<input type='button' id='newq' value='New Question' onclick="newQ();">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function newQ(){
var num1 = Math.floor(Math.random()*11);
var num2 = Math.floor(Math.random()*11);
var ans = num1 * num2;
$("#q").html(num1 + " x " + num2 + " = ?<input type='text' id='ans' size='3'><input type='hidden' id='num1' value='" + num1 + "'><input type='hidden' id='num2' value='" + num2 + "'>");
}
function check(){
var num1 = $("#num1").attr("value");
var num2 = $("#num2").attr("value");
var ans = $("#ans").val();
if( num1 * num2 == ans ){ alert("Correct!"); }
else{ alert(num1 + " x " + num2 + " = " + num1 * num2 + ". Please Try Again!"); }
newQ();
}
$(document).ready(function(){ newQ(); });
</script>
working example here (http://www.custom-anything.com/sand/multiplier.html).



Modified to allow submission via [enter] key - replace original document.ready function with this:

$(document).ready(function(){
newQ();
$("#ans").keypress(function(event){
if( event.keyCode == 13 ){ check(); }
});
});




Actually, this is better:
$(document).ready(function(){
newQ();
$("#ans").live('keypress', function(e){ if( e.keyCode == 13 ){ check(); } });
});
and I added this to the end of the check() function (just for usability):
$("#ans").focus();