javascript - 在 Qualtrics 中使用运行时数据实时执行简单的数学运算

Question

我在 Qualtrics 的一项调查中有一个 slider ，需要在 slider 上显示“两端”的值(因此，如果受访者将 handle 放在值 55 处，我需要一个带有“55"和 "45"显示在 slider 下方，因为最大值为 100，即 100-55=45)。

我已经设法通过文本问题中的以下 HTML 片段显示带有用户输入(在上例中为“55”)的 slider 的值，它在页面某处放置了一个框，其中包含 slider 的值:

<input class="SumInput InputText QID29 QWatchTimer" data-runtime-value="runtime.Choices.1.Value" id="QID29" name="QID29" type="text" value="" />

但是，我无法得到另一个框，它基本上显示 100 减去 runtime.Choices.1.Value 起作用的值(“45”)。我试过简单的“100-runtime.Choices.1.Value”、“100”-“runtime.Choices.1.Value”，没有任何引号，几乎所有可能的 CSS/HTML 数学函数。我知道从技术上讲 HTML 只显示并且不会真正进行这种运行时计算(我是新手所以这是我所知道的)，所以如果有任何 Javascript 片段或其他一些代码将实时 100 减去用户将 slider 上的 handle 移动到的位置，这太棒了。我假设有某种 addOnClick 函数，但不知道如何引用 slider 上的任何内容来执行此操作。

这是一项如此简单的任务，但出于某种原因，到目前为止却花费了相当多的时间。任何帮助表示赞赏；谢谢!

Answer 1

我已经设法针对 slider 的特定示例解决了这个问题，尽管我认为以下 Javascript 应该适用于可能的许多问题类型，前提是使用正确的 getChoiceValue(即将“1”更改为对应的数字您要获取其答案值的页面上的元素):

Qualtrics.SurveyEngine.addOnload(function() {
/*Place your JavaScript here to run when the page loads*/
var result=0;
var otherend= 0;

this.questionclick = function(event,element){
    result = this.getChoiceValue(1);
    endupdate();
    document.getElementById("otherend").innerHTML=otherend;
    document.getElementById("result").innerHTML=result;
}

function endupdate() {
    otherend=100-result;
}
});

然后我在问题文本的 HTML 中添加了以下内容，无论我希望它显示在什么地方(我亲自将它放在一个表格中，这样我就可以在页面上很好地居中放置一些内容，以及一些解释性文本):

<span id="result">0</span>

<span id="otherend">0</span>

希望这能为其他人节省一些时间和精力!