0

我将首先解释我正在尝试做什么:)

我的应用程序是使用 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-pair,我关联了两个整数,它们指定用户有多长时间查看问题以及用户有多长时间来回答问题。让我举个例子:

用户看到这个(或多或少):

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. 

当 ANSWER 阶段的时间用完或用户单击任一按钮 YES/NO 时,jQueryACTIVE从当前问题中删除并将其设置为下一个问题。用户单击的值也存储在隐藏元素中。这个过程应该在整个问卷调查过程中一直重复。

现在关于问答阶段的计时器。它们不是固定的,而是为每个问题指定的。例如,question1可能有问答时间(以秒为单位)5/10等等。

现在我的问题是......如何在 javascript 端实现这个???当我在 javascript 中循环遍历包含有关问题的所有信息(PHP 在服务器中设置)的数组时,我的问题就出现了......我应该能够遍历question/answer客户端中的所有 -pairs,然后在每次迭代停止时从移动到下一个(下一个问题)的迭代,直到用户单击答案或时间用完。但问题是,据我所知,我不能在 for-loop 或 jQuery 的 .each 中睡觉......你看到我的问题了吗?:)

任何有关实施的建议表示赞赏:)

4

3 回答 3

5

将 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,显示输入字段或单选按钮集。questionTextquestionType

快速演示:http: //jsfiddle.net/AlienWebguy/aW9mH/

于 2012-09-12T22:50:58.493 回答
1

这是我最近一直在尝试的一种古怪的方法。我没有必要建议您在没有信心自己理解的情况下做这样的事情,但是玩起来很整洁。

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

这看起来有点奇怪,但尝试起来很有趣。

于 2012-09-13T05:56:04.573 回答
1

Javascript 可以使网站反应性而不是主动性。

所以它不应该只是死了。

如果它真的死了,你的客户就出门了

于 2012-09-14T23:27:13.077 回答