Search code examples
javascripthtmlcssqualtrics

Qualtrics Table Conditional Formatting

In my Qualtrics survey, one question (descriptive text) is a two-column table that is populated with randomly-chosen embedded data for two different countries (the v2elsuffrage_ord variables below). Both of these variables are numbers 0-4. What I want to do is conditionally format these cells, so whichever score is bigger (score1 or score2), that cell is green.

Here's an example of my table: 

<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>

Is this something that is even possible in Qualtrics? I found an example of just normal conditional formatting in HTML and tried to modify it for Qualtrics, but it didn't work. This is what I did as my 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');
    }
});

Then for CSS, I added this code under the Advanced section of Look & Feel (colors just randomly chosen right now to see if it will work):

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

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

.same {
    background-color: #060;
}

I know I'm definitely doing this incorrectly, but I've never really worked in HTML/CSS (and like I said, I don't even know if this is possible). Any ideas or guidance would be great, even if it's just a workaround.

Solution

  • There are a bunch of errors in your JavaScript:

    1. $(this) is wrong
    2. text() is a jQuery function, not a prototypejs or native JavaScript function
    3. score1 = score2 is an invalid comparison
    4. addClass isn't a valid function

    Also, the style assignment logic and CSS doesn't make sense. You only need one style. Since that is the case, it's simpler to add the style to the element. No need for separate CSS.

    Try this JavaScript instead...

    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";
}
});