Условное форматирование таблицы Qualtrics

В моем опросе Qualtrics один вопрос (описательный текст) представляет собой таблицу из двух столбцов, заполненную случайно выбранными встроенными данными для двух разных стран (переменные v2elsuffrage_ord ниже). Обе эти переменные являются числами 0-4. Что я хочу сделать, так это условно отформатировать эти ячейки, так что какая бы оценка больше (оценка1 или оценка2), эта ячейка была зеленой.

Вот пример моей таблицы:

<table class="UserTable">
    <colgroup>
        <col id="score1" />
        <col id="score2" />
    </colgroup>
    <tbody>
        <tr>
            <th>Country A</th>
            <th>Country B</th>
        </tr>
        <tr>
            <td>${e://Field/v2elsuffrage_ord}</td>
            <td>${e://Field/v2elsuffrage2_ord}</td>
        </tr>
    </tbody>
</table>

Возможно ли это вообще в Qualtrics? Я нашел пример обычного условного форматирования в HTML и попытался изменить его для Qualtrics, но это не сработало. Вот что я сделал в качестве своего Javascript:

Qualtrics.SurveyEngine.addOnload(function()
{

    var score1 = $(this).text();
    var score2 = $(this).text();

    if (score1 > score2) {
        $(this).addClass('more1');
    }
    else if (score1 < score2) {
        $(this).addClass('more2');
    }
    else if (score1 = score2) {
        $(this).addClass('same');
    }
});

Затем для CSS я добавил этот код в разделе «Дополнительно» Look & Feel (цвета просто выбраны случайным образом прямо сейчас, чтобы посмотреть, будет ли это работать):

.more1 {
    background-color: #0f0;
}

.more2 {
    background-color: #0c0;
}

.same {
    background-color: #060;
}

Я знаю, что определенно делаю это неправильно, но я никогда не работал с HTML/CSS (и, как я уже сказал, я даже не знаю, возможно ли это). Любые идеи или рекомендации были бы замечательными, даже если это просто обходной путь.


javascript html css qualtrics
person peo965    schedule 15.08.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В вашем JavaScript есть куча ошибок:

  1. $(это) неправильно
  2. text() - это функция jQuery, а не функция прототипа или встроенная функция JavaScript.
  3. оценка1 = оценка2 является недопустимым сравнением
  4. addClass не является допустимой функцией

Кроме того, логика назначения стилей и CSS не имеют смысла. Вам нужен только один стиль. Поскольку это так, проще добавить стиль к элементу. Нет необходимости в отдельном CSS.

Вместо этого попробуйте этот JavaScript...

Qualtrics.SurveyEngine.addOnload(function()
{

var score1 = parseInt("${e://Field/v2elsuffrage_ord}");
var score2 = parseInt("${e://Field/v2elsuffrage2_ord}");

if (score1 > score2) {
    $('score1').style.backgroundColor = "#0f0";
}
else if (score1 < score2) {
    $('score2').style.backgroundColor = "#0f0";
}
});
person T. Gibbons    schedule 15.08.2017
comment
Спасибо за вашу помощь. К сожалению, я ввел рекомендованный вами JavaScript (и избавился от своего старого JS/CSS), но когда я проходил опрос, условного форматирования не было (оценка 1 была 50, а оценка 2 — 100, но оценка 2 не была зеленой). - person peo965; 15.08.2017
comment
У меня отлично работает, если я точно скопирую ваш html и свой JavaScript и назначу v2elsuffrage_ord и v2elsuffrage2_ord в потоке опроса перед блоком. Вы, должно быть, что-то не так поняли. - person T. Gibbons; 15.08.2017
comment
Спасибо, Т. Гиббонс, я разобрался, и теперь это работает. Мой последний вопрос: если бы я просто хотел выделить конкретную ячейку, а не весь столбец (например, если бы у меня было несколько строк), как бы я это адаптировал? - person peo965; 16.08.2017
comment
Вы должны добавить стиль фона к тегу ‹td› вместо тега ‹col›. Пожалуйста, примите ответ. - person T. Gibbons; 16.08.2017