Javascript：仅当尚未查看 Qualtrics 页面时才单击“下一步”

Question

背景

我已经使用在这篇文章中找到的 Javascript 和 CSS 在 Qualtrics 中实现了（下面的代码）一个倒数计时器： http ://codejaxy.com/q/55868/javascript-timer-qualtrics-qualtrics-progress-to-next-block- when-time-is-up#在下面的“当前代码”部分中可以找到我生成的确切代码（它只是实现了该帖子中提出的解决方案）。

倒数计时器的代码自动单击下一步并在时间到时前进到新屏幕。 它前进到哪个屏幕是基于每个问题在当前屏幕上的显示逻辑（参见“当前代码”中的第 3 和第 4 项）。

问题

虽然这可以成功地将某人移动到调查的计时部分的末尾（即，一旦时间到了，您就会从计时部分移到另一个未计时的后续问题集），但它也会导致屏幕前进即使完成了计时部分。 换句话说，如果意图是在 Z 时间过去后将一个人从定时问题集合 X 中的任何问题移动到不定时问题集合 Y 中的第一个问题，如果一个人在Z 时间过去之前回答了 X 中的所有问题通过，一个人将从 Y 中的一个问题转移到 Y 中的下一个问题。本质上，一个人最终可能会跳过一个你希望别人回答的问题，而不是跳过计时部分的其余部分。

题

有没有办法让代码只有在没有查看某个问题时才单击“下一步”？ 或者也许到达调查的某个点会导致 blockTimeFlag = 0 并且在时间用完时不会改变？

换句话说，我的目标是不让参与者无法回答不定时的问题块中的问题，因为屏幕会根据计时器自动前进，指示时间到了，而参与者已经完成了该部分。

当前代码

(1) 在调查外观中添加了以下自定义 CSS：

 .header-cont {  
   width:100%;  
   position:fixed;  
   top:0px;  
   z-index:1000;  
 }  
 .header {  
   height:75px;  
   background:#FFFFFF;  
   width:100%;  
   margin:0px auto;  
 }  
 .timer{   
   margin: auto;  
   text-align: center;  
   vertical-align: middle;        
   font-size: 200%;
    font-family: Arial;
 }

(2) 创建了一个“计时”问题，并在 Javascript 中包含以下内容（注意：这包含了该帖子中提供的解决方案）：

Qualtrics.SurveyEngine.addOnload(function()
{
    var headerCont = document.createElement("div");  
 headerCont.className = "header-cont";  
 headerCont.id = "header_container";  
 var header = document.createElement("div");  
 header.className = "header"  
 header.id = "header_1";  
 var timer = document.createElement("div");  
 timer.className = "timer";  
 timer.id = "timer_1";  
 timer.innerHTML = "Time Remaining: <span id='time'>00:10</span>";  
 headerCont.appendChild(header);  
 header.appendChild(timer);  
 document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {  
  var timer = duration, minutes, seconds;  
  var myTimer = setInterval(function() {  
   minutes = parseInt(timer / 60, 10)  
   seconds = parseInt(timer % 60, 10);  
   minutes = minutes < 10 ? "0" + minutes : minutes;  
   seconds = seconds < 10 ? "0" + seconds : seconds;  
   var text = ('innerText' in display)? 'innerText' : 'textContent';
   display[text] = minutes + ":" + seconds;  
   if (--timer < 0) {  
    clearInterval(myTimer);  
    timeOver();  
   }  
  }, 1000);  
 }  
 var timerSeconds = 5,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 var timeOver = function() {  
     document.getElementById("timer_1").innerHTML = "Time is up.";
     Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");    
     $('NextButton').click();}



});

(3) 在包含 blockTimeFlag = 0 的计时器之前在调查流中创建一个嵌入数据字段。

(4) 根据blockTimeFlag = 0设置items的显示逻辑（即如果blockTimeFlag = 1——时间到了——则跳过item0

Answer 1

我假设您的 JavaScript 位于调查页眉或页脚中。 如果是这种情况，您可以将代码放在检查嵌入变量值的 if 语句中。 这将允许您通过设置嵌入变量的值逐块打开或关闭计时器。

Qualtrics.SurveyEngine.addOnload(function()
{
if("${e://Field/timerOnOff}" == "on"} {    
  var headerCont = document.createElement("div");
  /* the rest of your code here... */
}
}); 

Answer 2

这感觉它有两个解决方案。 一种是重新思考代码的架构，使其成为一个更容易解决的问题，但我将发布我目前想到的快速而肮脏的解决方案。

据我所知，一旦定时器到了，用户就会进步，即使他们已经超过了定时部分，一旦设置好，你就不能干涉定时器本身。 因此，我能想到的最简单的解决方案是：

一旦用户点击了你调用的 Y 部分的第一个问题，改变函数 timeOver()。 让它做任何事情，只要小心不要将它设置为 null，因为它仍然会被调用，然后会抛出一个错误。

如果你想要一个更......结构化的解决方案，我建议你让你的计时器全局可用（或者更确切地说，就我所知，全局状态并不是一件好事）。 然后，您可以在用户进入 Y 部分的第一个问题后立即调用 clearInterval()。