If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers
document.location.reload(index.php)
, causing the entire page to refresh.
What I aim for is to have only the content refresh with a new set of numbers (run just the JavaScript).
I hope I'm clear in my explanation, and any assistance would be greatly appreciated. Feel free to provide critiques as well, as I may be making numerous errors that I haven't noticed yet. Thanks!
Code:
<!DOCTYPE html>
MathMap
<div data-role="page" id="page1">
<div data-theme="e" data-role="header">
<a id="score" data-role="button" data-transition="none" href="#page1" data-icon="star"
data-iconpos="left" class="ui-btn-right">
Score
</a>
<h1>
MathMap™
</h1>
</div>
<div align="center" data-role="content">
<div align="center"><h1 id="equal">
</h1></div>
<div id="main" align="center" style="top: 150px;">
<a id="a" data-role="button" data-theme="e" href="#page1" data-inline="true">
</a>
<a id="b" data-role="button" data-theme="e" href="#page1" data-inline="true">
</a>
<a id="c" data-role="button" data-theme="e" href="#page1" data-inline="true">
</a>
<a id="d" data-role="button" data-theme="e" href="#page1" data-inline="true">
</a></div>
<script>
$(document).ready(function(){
$("#main").hide().fadeIn(1000);
});
var x = Math.floor(Math.random()* 50);
var y = Math.floor(Math.random()* 50);
var a = Math.floor(Math.random()* 10);
var b = Math.floor(Math.random()* 10);
var c = Math.floor(Math.random()* 10);
var d = Math.floor(Math.random()* 10);
var divide =" \u00F7 "
var problems = new Array();
problems[0]=x+y;
problems[1]=x-y;
problems[2]=x*y;
problems[3]=x/y;
var split = new Array();
split[0]=$("#a");
split[1]=$("#b");
split[2]=$("#c");
split[3]=$("#d");
var formula = new Array();
formula[0] = x +" + "+ y +" = ";
formula[1] = x +" - "+ y +" = ";
formula[2] = x +" x "+ y +" = ";
formula[3] = x + divide + y +" = ";
var formrand = formula[Math.floor(Math.random()*formula.length)];
var prorand = problems[Math.floor(Math.random()*problems.length)];
var rand = split[Math.floor(Math.random()*split.length)];
$("#equal").text(function myCalculation(){
if ((formrand) == (formula[0])){
$("#equal").text(formula[0]);
$("#a").text(problems[0]+a);
$("#b").text(problems[0]+b);
$("#c").text(problems[0]+c);
$("#d").text(problems[0]+d);
$(rand).text(problems[0]);
$("#a,#b,#c,#d").not(rand).click(function(){
$(this).transition({ opacity: 0.2, scale: 0.5});
});
$(rand).click(function(){
$("#equal").text(formrand+problems[0]);
$(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
$("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
window.location.reload("index.php");
});
});
}
if ((formrand) == (formula[1])){
$("#equal").text(formula[1]);
$("#a").text(problems[1]+a);
$("#b").text(problems[1]+b);
$("#c").text(problems[1]+c);
$("#d").text(problems[1]+d);
$(rand).text(problems[1]);
$("#a,#b,#c,#d").not(rand).click(function(){
$(this).transition({ opacity: 0.2, scale: 0.5});
});
$(rand).click(function(){
$("#equal").text(formrand+problems[1]);
$(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
$("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
window.location.reload("index.php");
});
});
}
if ((formrand) == (formula[2])){
$("#equal").text(formula[2]);
$("#a").text(problems[2]+a);
$("#b").text(problems[2]+b);
$("#c").text(problems[2]+c);
$("#d").text(problems[2]+d);
$(rand).text(problems[2]);
$("#a,#b,#c,#d").not(rand).click(function(){
$(this).transition({ opacity: 0.2, scale: 0.5});
});
$(rand).click(function(){
$("#equal").text(formrand+problems[2]);
$(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
$("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
window.location.reload("index.php");
});
});
}
if ((formrand) == (formula[3])){
$("#equal").text(formula[3]);
$("#a").text(Math.round(problems[3]+a));
$("#b").text(Math.round(problems[3]+b));
$("#c").text(Math.round(problems[3]+c));
$("#d").text(Math.round(problems[3]+d));
$(rand).text(Math.round(problems[3]));
$("#a,#b,#c,#d").not(rand).click(function(){
$(this).transition({ opacity: 0.2, scale: 0.5});
});
$(rand).click(function(){
$("#equal").text(formrand+Math.round(problems[3]));
$(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000);
$("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){
window.location.reload("index.php");
});
});
}
});
</script>
</div>
<div data-theme="e" data-role="footer" data-position="fixed" data-inline="true">
<h5>
MathMap Learning
</h5>
</div>
</body>