Javascript:仅在未查看 Qualtrics 页面时单击 'Next'

标签 javascript html css timer qualtrics

背景

我已经使用这篇文章中的 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 中的第一个问题,如果一个人在 之前回答了 X 中的所有问题 Z 时间过去了,一个人将从 Y 中的一个问题转移到 Y 中的一个后续问题。从本质上讲,一个人可能最终会跳过一个你希望别人回答的问题,而不是跳过计时部分的其余部分。

问题

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

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

当前代码

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

最佳答案

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

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

关于Javascript:仅在未查看 Qualtrics 页面时单击 'Next',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46950822/

相关文章:

javascript - 如何通过 headless chrome 管理登录 session ?

html - 皇家 slider 不同颜色的缩略图

javascript - 在两个不相关的 Web 应用程序之间拖放

javascript - 如何使 div 充当滚动条句柄

html - Angular Material 垫选项选择值突出显示

html - 将CSS样式应用于父类的子元素

jquery - 将三个背景图像放在同一位置

html - div 中有一个表格不滚动

javascript - 按 id 下拉多个 div

javascript - 删除文件,文件属性无法读取未定义