Qualtrics 使用 JavaScript 显示基于先前答案的问题

Question

我是 JavaScript 的新手，我曾尝试找到解决问题的方法，但没有成功。

我有一个问题 (Q4)，只有当 Q3 的答案为“是”时才应显示该问题。如果我使用显示逻辑，Qualtrics 会将 Q4 放在单独的页面上，因为它是一个“幻灯片”问题（In Page 选项不可用）。因为我希望第 4 季度与第 3 季度在同一页面上弹出，所以我想我需要使用 JavaScript 选项。

如何根据 Q3 的答案来判断 Q4？请参阅下面我所做的（不成功的）尝试示例。通过使用 .hide() 和 .show() 我可以隐藏和显示问题但是 if("${QID3" == 1) 部分不起作用。

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

    $(this.questionId).hide();
    
        // Show Q if condition is met
    if("${QID3" == 1)
        this.questionID().show();    

});

更新 1：所以我查找了事件处理程序并想出了这个，但仍然不起作用：

("$[id='QR~QID4]").hide();
    this.questionclick = function(event, element) {
        var selectedChoice = this.getSelectedChoices()
        console.log(selectedChoice) 
        if (selectedChoice == "1") {
            ("$[id='QR~QID4]").show();
        }

更新 2：

我现在差不多解决了。我有错误的问题 ID（但右键单击浏览器并单击“检查元素”找到它）并四处搜索以寻找正确的方法来引用另一个问题。

设法解决了！我有错误的问题 ID（通过在浏览器中右键单击并选择“检查元素”来修复）并四处搜索以根据其 ID 找到正确的问题调用。

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
    // hide next question from start
    jQuery("#QID10").hide();
    
    // when current question is clicked
    this.questionclick = function(event, element) {
        
        // create variabe with clicked answer and check
        var selectedChoice = this.getSelectedChoices()
        console.log(selectedChoice) 
        
        // show next question if condition is met
        if (selectedChoice == "1") {
            jQuery("#QID10").show();}
        
        // in case answer is switched, hide again
            else{
                jQuery("#QID10").hide();
        }}
    
});

此解决方案按预期隐藏和显示问题 - 但是，它弄乱了滑块，因此无法再回答问题（见下图，无法拖动滑块和“栏” “消失了）。更奇怪的是，如果我在页面上缩放 in/out，滑块会重新出现，并保持 visible/clickable 即使我缩放回默认值 - 所以我猜滑块的显示方式发生了一些变化，但我有不知道怎么解决。

screenshot of how it looks

有人知道为什么会发生这种情况以及如何解决吗？

Answer 1

"${QID3" 不是有效的管道。即使是这样，您也无法在同一页面上通过管道传输问题的答案，因为在将页面发送到浏览器之前管道已在服务器上解析。

您应该将脚本附加到 Q3，遍历页面以找到并隐藏 Q4，并添加一个事件处理程序以在回答 Q3 时显示 Q4。

Answer 2

设法解决了！添加了 class 问题，使滑块保持原位。

   Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
    // hide next question from start
    jQuery("#QID10").hide('.slider');
    // when current question is clicked
    this.questionclick = function(event, element) { 
        // create variabe with clicked answer and check
        var selectedChoice = this.getSelectedChoices()
        console.log(selectedChoice) 
        // show next question if condition is met
        if (selectedChoice == "1") {
            jQuery("#QID10").show('.slider');
        }   
        // in case answer is switched, hide again
            else {
                jQuery("#QID10").hide('.slider');
        }}
});

Qualtrics 使用 JavaScript 显示基于先前答案的问题

Qualtrics show question based on previous answer using JavaScript

javascript

if-statement

survey

conditional-statements

qualtrics