Question

我正在使用Java脚本设计定性实验。对于研究中的每个问题，参与者都需要猜测正确的答案，输入正确的答案，然后按空格键。一旦他们按下空格键，逻辑就会检查他们的答案是否正确。如果答案正确，则应播放声音1.2秒钟，背景颜色应变为红色一秒钟，然后变为白色，最后，实验应自动转到下一个问题。

到目前为止，我已经弄清楚了正确的命令顺序。但是，似乎我没有正确使用setTimeout逻辑。无论我使用哪种超时值组合，在屏幕移至下一个问题之前，都无法让它播放所有中间步骤，包括音频播放和红色背景闪烁。

在这里，我分享了我的代码。非常感谢您的帮助。

Qualtrics.SurveyEngine.addOnload(function()
    {
        /*Place your JavaScript here to run when the page loads*/  
    });

    Qualtrics.SurveyEngine.addOnReady(function()
    {
        /*Place your JavaScript here to run when the page is fully displayed*/

        var qid = this.questionId;
        var changepage = null;

        /*focus on the box*/
        jQuery("#"+qid+" .InputText").select().focus();

        document.onkeydown = function(event) {
            console.log('keydown',event);
             if (event.which == 32) { //hit the space button
                event.preventDefault();
                 //read the input
                input = jQuery("#"+qid+" .InputText").val();
                console.log(input);

                 if (input.trim().toLowerCase() == "cat") {

                     //alert(input.trim().toLowerCase());
                    document.getElementById("correct").play(); //play the correct sound which is 1.2seconds long

                    setTimeout(jQuery("body").css("background-color","red"), 3000); // change the background color

                     setTimeout( jQuery('#NextButton').click(), 2000) //move on to the next question

                 } //end of if       
             } // end of if 32  
        }  //end of down button

    });

    Qualtrics.SurveyEngine.addOnUnload(function()
    {  
        jQuery("body").css("background-color","white");                 
    });

Answer 1

setTimeout是异步的。如果要以固定的顺序执行多个setTimeout，则必须增加时间。因此，您的NextButton计时应为5000ms（3000ms + 2000ms）。

另外，你可以把Next按钮点击背景颜色变化setTimeout函数里面。要补充的，你能不能把两者你的音频的“结束”事件中。

Answer 2

 if (input.trim().toLowerCase() == "cat") {

                 //alert(input.trim().toLowerCase());
                 //play the correct sound which is 1.2seconds long


                 vid.play();

                 vid.onended = function() 
                 { 
                     jQuery(".skirt").css("background-color","red");
                     jQuery('#NextButton').click();
                 };

             } //end of if

如何确保命令顺序按顺序运行（jQuery中的超时问题-Qualtrics）

2 个答案: