如何在不显示页面计数的情况下将页面散焦事件的数量从JavaScript记录到Qualtrics

时间:2017-11-24 19:04:59

标签: javascript qualtrics

我是新手(StackOverflow和非统计编码),所以如果我把这个问题搞砸了,我很抱歉。

问题/目标:

我让参与者进行在线实验(使用Qualtrics,一个调查平台),我要求他们观看视频。我需要他们观看视频而不只是听它,因为我操纵的是视频中人的非语言行为。

作为一个质量检查,我想计算它们是否与浏览器页面中的视频散焦(即切换到另一个窗口或标签)。我找到了code on Github that counts page defocus and refocus events。但是,代码似乎不是为Qualtrics集成(记录数据)设计的,而是在屏幕上显示页面焦点数据。

我能够修改代码以使其记录到Qualtrics中的嵌入数据,但它仅在显示PageFocus计数器时有效。我希望有关如何在仍然记录数据的同时使计数器不可见的任何建议。

tl; dr - 我想计算当被要求在Qualtrics中观看视频时参与者切换到另一个标签/窗口的频率。我找到了将计算页面散焦事件的代码,但数据仅在计数器在屏幕上可见时记录。我可以让计数器不可见但仍记录数据吗?

(修改过的)PageFocus代码:

    <!DOCTYPE html>
<html>

<head>
<title>PageFocus Demo</title>


<style type="text/css">
  body {
    font-family: sans-serif;
  }
  .numeric_input {
    text-align: right;
  }
  .footnote {
    font-size: 0.8em;
  }
  #popup_warning {
    display: none;
    width: 500px;
    height: 180px;
    position: absolute;
    background-color: #fff;
    z-index: 255;
    text-align: center;
    padding: 0 20px 20px;
    border: 5px solid red;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -90px;
  }
  #popup_warning .ok_button {
    margin-top: 20px;
  }
  #popup_warning .ok_button button {
    width: 100px;
    height: 30px;
  }
  #disabled {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #707070;
    filter:alpha(opacity=75);
    opacity: 0.75;
    z-index: 253;
  }
</style>

</head>

<body>

<p><label>Page defocusing (D) and refocusing events (R):
<input type="text" id="events_input" name="events_input" size="80" readonly></label></p>

<p><label>Number of page defocusing events: <input class="numeric_input" type="text" id="defocus_count_input" name="defocus_count_input" size="4" value="0" readonly></label></p>

<p><label>Number of page refocusing events:
<input class="numeric_input" type="text" id="refocus_count_input" name="refocus_count_input" size="4" value="0" readonly></label></p>

<p><label>Duration between last page defocusing and last refocusing event (Duration of last absence):
<input class="numeric_input" type="text" id="last_duration_input" name="last_duration_input" size="10" value="0" readonly> seconds</label></p>

<p><label>Sum of all durations between page defocusing and refocusing events (Sum of all absence durations):

<input class="numeric_input" type="text" id="duration_sum_input" name="duration_sum_input" size="10" value="0" readonly> seconds</label></p>


<p></p>


<div id="popup_warning">
  <h3>PageFocus warning</h3>
  <p>You have just left this window which is not allowed while participating on the test. Please return to the test by confirming this message, and do not leave the test page again.</p>
  <div class="ok_button"><button onclick='toggle_popup_warning("none"); regained_focus(); return false;'>OK</button></div>
</div>
<div id="disabled"></div>

<script type="text/javascript">

// PageFocus version 1.3-1 demo
var focus_data;  // all page defocusing and refocusing events as one string
var defocusing_count;  // number of page defocusing events
var refocusing_count;  // number of page refocusing events
var last_duration;  // duration between the last page defocusing and refocusing events
var duration_sum;  // sum of all durations between page defocusing and refocusing events
var defocus_timestamp;  // timestamp of last page defocusing event
var refocus_timestamp;  // timestamp of last page refocusing event
var pagefocus = true;  // does the current page have the focus?
var popup_visible = false;  // is the popup currently being shown?
// input elements
var popup_checkbox = document.getElementById("popup_warning_checkbox");
var events_input = document.getElementById("events_input");
var defocus_count_input = document.getElementById("defocus_count_input");
var refocus_count_input = document.getElementById("refocus_count_input");
var last_duration_input = document.getElementById("last_duration_input");
var duration_sum_input = document.getElementById("duration_sum_input");
reset()
record_timestamp = function(type, timestamp) {
  focus_data = focus_data + type + timestamp + ";";  // add new page focusing event to the data record
  events_input.value = focus_data;
  events_input.scrollLeft = events_input.scrollWidth;  // scroll input field to the right
}
function lost_focus() {  // page defocusing event detected
  if(!popup_visible) {
    pagefocus = false;
    defocus_timestamp = new Date().getTime();
    record_timestamp("D", defocus_timestamp);
    defocusing_count++;  // count the number of defocusing events
    defocus_count_input.value = defocusing_count;
    if(popup_checkbox.checked) toggle_popup_warning("block");
  }
}
function regained_focus() {  // page refocusing event detected
  if(!pagefocus && !popup_visible) {
    pagefocus = true;
    refocus_timestamp = new Date().getTime();
    record_timestamp("R", refocus_timestamp);
    refocusing_count++;  // count the number of refocusing events
    refocus_count_input.value = refocusing_count;
    last_duration = refocus_timestamp - defocus_timestamp; // calculate the duration between the last page defocusing and refocusing events
    duration_sum += last_duration; // sum durations between page defocusing and refocusing events
    last_duration_input.value = last_duration/1000;
    duration_sum_input.value = duration_sum/1000;
  }
}
function onfocusout() {  // workaround for Internet Explorer < version 11
  clearTimeout(timer);
  timer = setTimeout(lost_focus,100);
}
function onfocusin() {  // workaround for Internet Explorer < version 11
  clearTimeout(timer);
  regained_focus();
}
function reset() {  // reset captured data
  events_input.value = focus_data = '';
  defocus_count_input.value = defocusing_count = 0;
  refocus_count_input.value = refocusing_count = 0;
  last_duration_input.value = last_duration = 0;
  duration_sum_input.value = duration_sum = 0;
}
function toggle_popup_warning(state) {  // show/hide popup warning
  document.getElementById("popup_warning").style.display = state;
  document.getElementById("disabled").style.display = state;
  popup_visible = state == "block";
}
if("onfocusin" in document) {  // check for Internet Explorer version < 11
  var timer;
  document.onfocusin = onfocusin;
  document.onfocusout = onfocusout;
} else if("onpageshow" in window) {
  // use onpageshow and onpagehide for mobile Safari
  window.onfocus = window.onpageshow = regained_focus;
  window.onblur = window.onpagehide = lost_focus;
}
</script>

</body>
</html>

将嵌入数据记录到Qualtrics的JavaScript:

this StackOverflow帖子修改。

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

$('NextButton').onclick = function (event) {
Qualtrics.SurveyEngine.setEmbeddedData("duration_sum", duration_sum);
Qualtrics.SurveyEngine.setEmbeddedData("focus_data", focus_data);
Qualtrics.SurveyEngine.setEmbeddedData("defocusing_count", defocusing_count);
Qualtrics.SurveyEngine.setEmbeddedData("refocusing_count", refocusing_count);
Qualtrics.SurveyEngine.setEmbeddedData("last_duration", last_duration);
Qualtrics.SurveyEngine.setEmbeddedData("defocus_timestamp", defocus_timestamp);
Qualtrics.SurveyEngine.setEmbeddedData("refocus_timestamp", refocus_timestamp);

// and now run the event that the normal next button is supposed to do
        Qualtrics.SurveyEngine.navClick(event, 'NextButton')
}
});

上面的代码成功地将PageFocus代码中的对象/变量记录到Qualtrics嵌入数据中,但只有当我不删除下面的PageFocus代码的这一部分时(这对我来说似乎很奇怪,因为我觉得这个部分只是显示页面上的内容,但我可能错了):

    <p><label>Page defocusing (D) and refocusing events (R):
<input type="text" id="events_input" name="events_input" size="80" readonly></label></p>

<p><label>Number of page defocusing events: <input class="numeric_input" type="text" id="defocus_count_input" name="defocus_count_input" size="4" value="0" readonly></label></p>

<p><label>Number of page refocusing events:
<input class="numeric_input" type="text" id="refocus_count_input" name="refocus_count_input" size="4" value="0" readonly></label></p>

<p><label>Duration between last page defocusing and last refocusing event (Duration of last absence):
<input class="numeric_input" type="text" id="last_duration_input" name="last_duration_input" size="10" value="0" readonly> seconds</label></p>

<p><label>Sum of all durations between page defocusing and refocusing events (Sum of all absence durations):

<input class="numeric_input" type="text" id="duration_sum_input" name="duration_sum_input" size="10" value="0" readonly> seconds</label></p>


<p></p>

我很感激任何建议。谢谢!

1 个答案:

答案 0 :(得分:1)

你只需要更改record_timestamp功能来进行Qualtrics调用,并删除所有UI内容(它产生的弹出窗口 - 我不知道是否需要它但我不认为)

下面record_timestamp函数的最后一行会抛出错误。您需要找到用于将所有嵌入数据发送到质量的最佳触发方法,因为Qualtrics.SurveyEngine.navClick可能不是正确的。

&#13;
&#13;
// put all the data variables into a separate object
var fd = {};

function reset() {  // reset captured data
  fd.focus_data = '';
  fd.defocusing_count = 0;
  fd.refocusing_count = 0;
  fd.last_duration = 0;
  fd.duration_sum = 0;
  fd.pagefocus = true;
}

reset();

record_timestamp = function(type, timestamp) {
  fd.focus_data += type + timestamp + ";";  // add new page focusing event to the data record
  
  console.log(fd);
  
  
  // send collected data
  /* this will break on SO snippet so commented out */
  /*
  Qualtrics.SurveyEngine.setEmbeddedData("duration_sum", fd.duration_sum);
  Qualtrics.SurveyEngine.setEmbeddedData("focus_data", fd.focus_data);
  Qualtrics.SurveyEngine.setEmbeddedData("defocusing_count", fd.defocusing_count);
  Qualtrics.SurveyEngine.setEmbeddedData("refocusing_count", fd.refocusing_count);
  Qualtrics.SurveyEngine.setEmbeddedData("last_duration", fd.last_duration);
  if (type == "D")
    Qualtrics.SurveyEngine.setEmbeddedData("defocus_timestamp", timestamp);
  else if (type == "R")
    Qualtrics.SurveyEngine.setEmbeddedData("refocus_timestamp", timestamp);

  Qualtrics.SurveyEngine.navClick(event, 'NextButton')  
  */
}
function lost_focus() {  // page defocusing event detected
  fd.pagefocus = false;
  fd.defocusing_count++;  // count the number of defocusing events
  fd.defocus_timestamp = new Date().getTime();
  record_timestamp("D", fd.defocus_timestamp);
}
function regained_focus() {  // page refocusing event detected
  if(!fd.pagefocus) {
    fd.pagefocus = true;
    fd.refocus_timestamp = new Date().getTime();
    fd.refocusing_count++;  // count the number of refocusing events
    fd.last_duration = fd.refocus_timestamp - fd.defocus_timestamp; // calculate the duration between the last page defocusing and refocusing events
    fd.duration_sum += fd.last_duration; // sum durations between page defocusing and refocusing events
    record_timestamp("R", fd.refocus_timestamp);
  }
}
function onfocusout() {  // workaround for Internet Explorer < version 11
  clearTimeout(timer);
  timer = setTimeout(lost_focus,100);
}
function onfocusin() {  // workaround for Internet Explorer < version 11
  clearTimeout(timer);
  regained_focus();
}

if("onfocusin" in document) {  // check for Internet Explorer version < 11
  var timer;
  document.onfocusin = onfocusin;
  document.onfocusout = onfocusout;
} else if("onpageshow" in window) {
  // use onpageshow and onpagehide for mobile Safari
  window.onfocus = window.onpageshow = regained_focus;
  window.onblur = window.onpagehide = lost_focus;
}
&#13;
&#13;
&#13;