如果你看看greenb.byethost12.com,你会看到我到目前为止所开发的内容。截至目前,当您点击正确答案时,document.location.reload(index.php)
整个页面刷新。
我想要的是只使用一组新数字刷新内容(仅运行JavaScript)。
不确定我是否清楚自己,但很高兴能得到任何帮助。此外,任何批评都是受欢迎的,因为我可能正在制作我尚未见过的TON错误。干杯!
代码:
<!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>
答案 0 :(得分:0)
你应该将一个函数绑定到&#34;正确答案&#34;的onClick事件。
$('#idOfYourAnswer').on('click', function(){
//Do something here
});
答案 1 :(得分:0)
尝试使用callbacks或者您可以使用功能循环,在事件发生后最终再次调用相同的功能,如时尚建议您可以使用点击事件。
start();
end();
$('button').click(function () {
start();
end();
});
因此问题将在第一次自动创建,然后应用程序将等待事件以创建新问题..或者无论您使用它是什么。
答案 2 :(得分:0)
您可以使用setInterval()来设置函数的超时, 或者,您可以将函数绑定到按钮的单击事件。