Javascript：只有在未查看 Qualtrics 页面时才单击 'Next'

Question

背景

我已经在 Qualtrics 中使用 Javascript 和 CSS 在 post 中实现了（下面的代码）倒数计时器： http://codejaxy.com/q/55868/javascript-timer-qualtrics-qualtrics-progress-to-next-block-when-time-is-up# 我生成的确切代码（它简单地实现了 post 中提出的解决方案）在下面的 'Current Code' 部分中找到。

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

问题

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

问题

有什么方法可以让代码只在某个问题没有被查看时点击"Next"？或者可能达到调查的某个点导致 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) 创建了一个 'Timing' 问题并在 Javascript 中包含以下内容（注意：这包含 post 中提供的解决方案）：

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 设置项目的显示逻辑（即如果 blockTimeFlag = 1 - 时间到时发生 - 然后项目被跳过0

Answer 1

感觉好像有两种解法。一个是重新考虑代码的架构，使这个问题更容易解决，但我会 post 我现在想到的快速而肮脏的解决方案。

据我了解，一旦定时器启动，用户就会提前，即使他们已经超过了定时部分，并且一旦设置了定时器，您就无法对其本身进行干预。因此，我能想到的最简单的解决方案是：

一旦用户按您所说的那样点击 Y 部分的第一个问题，更改函数 timeOver()。让它做任何事情，注意不要将它设置为 null，因为它仍然会被调用，然后会抛出错误。

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

Answer 2

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

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

Javascript：只有在未查看 Qualtrics 页面时才单击 'Next'

Javascript: Click 'Next' only if a Qualtrics page has not been viewed

html

javascript

css

timer

qualtrics

背景

问题

问题

当前代码