我将首先解释我要做的是什么:)
我的应用程序是使用PHP(Zend框架)和Javascript实现的。我想为我的申请做一份问卷,到目前为止我已经做了以下工作:
我的页面由一系列<div class='question #'>
元素组成,其中#表示特定问题的索引。例如,我的HTML看起来像这样:
<div class="question 1 active">
</div>
<div class="question 2">
</div>
<div class="question 3">
</div>
.
.
.
etc.
现在,用户应该在预先选择的特定时间内看到每个问题,直到问题变成可能的答案,用户应该单击"是"或"否",这取决于他是否认为答案是正确的。一次只有一个<div class="question #">
-元素处于活动状态,其他元素具有display:none;
。将问题更改为下一个问题后,将从当前问题中删除active
-属性,并将其设置为下一问题,以便用户循环浏览所有问题。
对于每个question/possible answer
-对,我都关联了两个整数,它们指定用户有多长时间看到问题,以及用户有多久时间回答问题。让我举一个例子:
用户看到(或多或少):
QUESTION 1/10
The name of the President of U.S.? -------------- 5 sec
..
The name of the President of U.S.? -------------- 4 sec
..
The name of the President of U.S.? -------------- 3 sec
..
etc. THE TIME ENDS and the question changes to answer mode(buttons YES/NO appear also in this part):
Bruce Wayne? ------------------------------7 sec
[YES] [NO]
...
Bruce Wayne? ------------------------------6 sec
[YES] [NO]
...
Bruce Wayne? ------------------------------5 sec
[YES] [NO]
...
etc.
当回答阶段的时间用完,或者用户单击"是/否"按钮时,jQuery从当前问题中删除ACTIVE
,并将其设置为下一个问题。用户单击的值也存储在隐藏元素中。这一过程应在整个调查表中重复进行。
现在是问答阶段的计时器。它们不是固定的,而是为每个问题指定的。例如,question1
可能具有问题/回答时间(以秒为单位)5/10
等等。
现在我的问题是…如何在javascript端实现这一点???当我在数组中循环使用javascript时,我的问题就出现了,数组包含了关于问题的所有信息(PHP在服务器中设置)。。。我应该能够迭代客户端中的所有question/answer
-对,然后在每次迭代中停止迭代,直到用户点击答案或时间用完。但问题是,据我所知,我无法在jQuery中的for循环或in.each中睡觉。。。你看到我的问题了吗?:)
任何关于实施的建议都将不胜感激:)
将for循环更改为通过setTimeout 调用的递归函数
var timeLeft = 10,
countdown = function(){
$('#mySpan').html('The name of the President of U.S.? -------------- ' + timeLeft + ' sec');
timeLeft -= 1;
if (timeLeft) {
setTimeout(countdown, 1000);
}
};
countdown();
采用该逻辑,您可以将其扩展为在X秒后更改问题,依此类推,然后您可以通过输入maxTime
、questionText
和questionType
等参数来缩放它,以显示输入字段或一组单选按钮。
快速演示:http://jsfiddle.net/AlienWebguy/aW9mH/
这里有一个我最近一直在尝试的古怪方法。我没有必要建议你在没有信心理解的情况下做这样的事情,但这很好。
function countdown(loops, pause, id) {
(function setup(timer, el, text) {
(function loop(invalid) {
(function check(stop) {
return stop || !loops-- || timer(loop, pause);
})(invalid || !loops, el[text] = loops);
})(!loops || !pause);
})(setTimeout, document.getElementById(id) || {}, 'innerHTML');
}
countdown(10, 1000, 'timer');
http://jsfiddle.net/userdude/ghN3m/1
它看起来有点奇怪,但试验起来很有趣。
Javascript的作用是使网站成为被动的NOT主动的。
所以它不应该只是死了。
如果它真的死了,你的客户就会走出家门