在 Qualtrics "Highlight" 项目类型中指明目标词

Question

我想创建 Highlight 问题类型的调查项目，其中句子中只有几个词需要回答。例如，在句子中...

Once upon a time there was a young foo who barred / bart his way out of many pickles.

...我只想收到 barred 和 bart 的回复。具体来说，我希望受访者指出哪个词是最正确的，剩下的词是可能的还是不可能的。我的问题是内置界面不指示可以单击哪些单词（除非您将鼠标悬停在上方，在这种情况下背景颜色变为灰色）。这意味着我的受访者将不得不努力寻找哪些词需要回应。

我想使用 javascript 自动更改 HLTextWord 元素的背景颜色，无需任何用户交互。我尝试了以下方法，取得了预期的效果，但有一个错误。

Qualtrics.SurveyEngine.addOnload(function()
{
    var elems = document.getElementsByClassName('HLTextWord');
    for(var i = 0; i < elems.length; i++) {
        elems[i].style.backgroundColor = '#e6ffff';
    }
});

此代码最初有效，但如果我单击 HLTextWord 元素或颜色选择 window 以外的任何内容，则突出显示会丢失。我需要做什么才能使 #e6ffff 突出显示持续到用户为该元素选择新颜色？

Answer 1

不使用 JavaScript，而是在 Look & Feel/Advanced/Add Custom CSS 下添加：

span.HLTextWord {
    background-color:#e6ffff;
}

顺便说一句，如果它很重要，我们最近在一项调查中使用了突出显示问题，发现它不适用于使用 Android/Chrome v44 的人（基本上，任何最近的三星 Android用户尚未升级浏览器的设备）。

Answer 2

你走在正确的轨道上。

很多时候，在鼠标悬停、鼠标移出和单击时改变颜色的元素都有 css class 应用于这些事件中的每一个。

这些元素通常还有一个 class，无论用户与该元素的交互如何。

由于我无权访问代码，我建议您找到此 class 并向其中添加您自己的 css class。最好使用 rgba 格式的背景颜色，以便可以使其透明。这将确保现有的用户体验不会改变（太多），但你也让他们更容易发现这些词。

您可以使用 firefox 中可用的开发人员工具或 google chrome 来确定元素。这两个浏览器是我使用的。所以你的代码看起来像下面这样：

Qualtrics.SurveyEngine.addOnload(function()
{
    var elems = document.getElementsByClassName('someClass');
    for(var i = 0; i < elems.length; i++) {
        elems[i].className +=" newClass";
    } 
});

你所要做的就是找到正确的class来替换'someClass'并创建一个新的class来替换'newClass'。

这是创建 css class - css tricks 的一些帮助您可以右键单击要添加 class 的元素，然后单击 "inspect element"。这将向您显示查找现有 class 名称该元素所需的所有详细信息。如需有关开发人员工具的更多帮助，请尝试 this link.

希望这能给您一个好的开始。

这有助于将您的问题分解成更小的部分，并在论坛上搜索有关如何解决这些部分的答案，或者在没有任何帮助时提出问题。

谢谢

第

在 Qualtrics "Highlight" 项目类型中指明目标词

Indicate target words in Qualtrics "Highlight" item type

javascript

qualtrics