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元素以外的任何内容或颜色选择窗口，则突出显示将丢失。在用户为该元素选择新颜色之前，我需要做什么才能使#e6ffff突出显示持续存在？

Answer 1

而不是使用JavaScript，在Look＆amp;感觉/高级/添加自定义CSS，添加：

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

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

Answer 2

你走在正确的轨道上。

很多时候，在mouseover，mouseout和click上改变颜色的元素都有css类，这些类适用于每个事件。

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

由于我无法访问代码，因此我建议您找到此类并为其添加自己的css类。最好使用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";
    } 
});

您所要做的就是找到合适的班级来替换“某些班级”。并创建一个新类来替换＆newClass＆＃39;。

以下是创建css类的一些帮助 - css tricks 您可以右键单击要添加类的元素，然后单击＆＃34;检查元素＆＃34;。这将显示查找该元素的现有类名所需的所有详细信息。有关开发人员工具的更多帮助，请尝试this链接。

希望能给你一个良好的开端。

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

由于

伞兵

在Qualtrics“突出显示”项目类型中指示目标词

2 个答案: