Qualtrics：使用 javascript 实现骰子任务

Question

我正在实施一项关于 Qualtrics 的调查，并且我正在尝试使用“简单的 javascript”来实现以下目标：

1. ppl 点击几个骰子的图像
2. 随机生成的数字出现在屏幕上并注册在数据集的一列上。同样的事情发生在两个不同的区块中
3. 骰子图像和 javascript 之间的链接是通过 HTML 脚本实现的

实现问题上的骰子图像的 HTML 代码

<title></title>
<div class="container">
<p id="instruction">This is a trial task.<br>
 INSTRUCTION HERE NOT WRITTEN FOR SAKE OF BREVITY </p>

<div><button id="diceButton"><img width="150" style="height: 150px; width: 150px;" src="https://uniapsico.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_Rp12uTWTqk2W7a8" height="150" alt="Dadi"></button>

<p id="result">&nbsp;</p>
</div>

Javascript代码：掷骰子，在屏幕上返回一个数字，将该数字记录在最终数据集的一列上

Qualtrics.SurveyEngine.addOnReady(function() {
    var diceButton = document.getElementById('diceButton');
    var resultField = document.getElementById('result');
    var instructionText = document.getElementById('instruction'); // reference to instruction 

    // Style
    var style = document.createElement('style');
    style.innerHTML = `
        #result {
            font-size: 30px; /* Dimension of written text */
        }

        #result .number {
            font-weight: bold; /* Number made in bold*/
            font-size: 34px; /* Text size*/
            color: black; /* Color of the text */
        }
    `;
    document.head.appendChild(style);

    diceButton.addEventListener('click', function() {
        const result = Math.floor(Math.random() * 9) + 4; // Generate a random integer between 4 and 12
        resultField.innerHTML = `You rolled a <span class="number">${result}</span>!`;

        // Save the result in a column on the final dataset 
        Qualtrics.SurveyEngine.setEmbeddedData('Risultato_trial', result);
    });
});

相同的代码在调查中出现两次，略有修改。其中一个是存储结果的名称列。

似乎当我预览问题时，一切正常。但是，如果我预览该块，则不会，并且如果我发布调查，也会发生同样的情况，而且它不会在数据集上的某个新列上记录假定的启动。

有人有线索吗？ Qualtrics 服务台无法帮助我，也无法帮助社区。 非常感谢你

Answer 1

在这种情况下，同一页面上存在超过 1 个问题会导致该问题。将会有一些骰子具有相同的

id

并且以下行将无法按预期工作。

var diceButton = document.getElementById('diceButton');

正确做法： 属性

id

必须是唯一的。请改用 CSS 类。使用

document.getElementById

代替

HTMLElement.querySelectorAll

，它将返回一个可以迭代的

NodeList

。

示例：

var resultField = document.getElementById("result")

document.querySelectorAll(".diceButton").forEach(function(diceButton) {

  // do something with each button

  diceButton.addEventListener('click', function() {
    const result = Math.floor(Math.random() * 9) + 4; // Generate a random integer between 4 and 12
    resultField.innerHTML = `You rolled a <span class="number">${result}</span>!`;

    // Save the result in a column on the final dataset 
    // Qualtrics.SurveyEngine.setEmbeddedData('Risultato_trial', result);
  });
})

<div><button class="diceButton"><img width="150" style="height: 150px; width: 150px;" src="https://uniapsico.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_Rp12uTWTqk2W7a8" height="150" alt="Dadi"></button>
</div>
<div><button class="diceButton"><img width="150" style="height: 150px; width: 150px;" src="https://uniapsico.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_Rp12uTWTqk2W7a8" height="150" alt="Dadi"></button>
</div>

<div><button class="diceButton"><img width="150" style="height: 150px; width: 150px;" src="https://uniapsico.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_Rp12uTWTqk2W7a8" height="150" alt="Dadi"></button>
</div>


<p id="result">&nbsp;</p>

请注意，如果每个问题都有一个

.result

（很可能就是这种情况），那么您需要为您的

.result

获取匹配的

.diceButton

，这可以使用 DOM 来实现，因为知道它们必须有一个共同的祖先，即问题。根据需要更改课程。

var result = diceButton.closest('.question').querySelector('.result')