Search code examples
htmlif-statementqualtrics

HTML - if else with conditional "if selection contains X, do Y"


sorry for the basic question. I just don't use HTML at all so I can't really just parse this out on my own.

The basic bit is I have a qualtrics question programmed to loop-and-merge, but I need to color code the text based on what data is pulled in from the loop-and-merge.

The basic example is say I have these three pairs of fields:

Field 1 Field 2
50% up   50% up
50% down 50% up
50% up   No change

I need the text that populates in the question to be green if the pulled data is "up," red if "down," and yellow if "no change."

So, the question text looks like this:

Imagine a new economic policy was proposed that was projected to:

  • result in a ${lm://Field/1} of the wealth of the country's poor
  • result in a ${lm://Field/2} of the wealth of the country's rich

Would you vote for this policy?

Where the fields are being pulled in random pairs. How can I edit the HTML here to be something along the lines of 'if Field 1 contains the word [up/down/no change], color the text [green/red/yellow];if Field 2 contains the word [up/down/no change], color the text [green/red/yellow]?

For reference, here is the HTML as it already exists in the question:

Imagine a new economic policy was proposed that was projected to:
<div><br>
- result in a<span style="color: rgb(39, 174, 96);">&nbsp;</span><strong>${lm://Field/1}&nbsp;</strong>of the wealth of the country's&nbsp;<span style="font-weight: 700;">poor</span>&nbsp;<br>
- result in a&nbsp;<strong>${lm://Field/2}</strong>&nbsp;of the wealth of the country's&nbsp;<span style="font-weight: 700;">rich</span>&nbsp;</div>

<div><br>
Would you vote for this policy?</div>

Any guidance would be appreciated!


Solution

  • You need to include the colors as loop & merge fields. To minimize changes, let's say field3 is the color for field1 and field4 is the color for field2.

    Your loop & merge fields would be:

    Field 1  Field 2    Field 3    Field4
    50% up   50% up     green      green
    50% down 50% up     red        green
    50% up   No change  green      yellow
    

    (you could also use hex or rgb color codes if you want)

    Then your html would be something like:

    Imagine a new economic policy was proposed that was projected to:
    <ul>
    <li>result in a <span style="color:${lm://Field/3};font-weight:bold">${lm://Field/1}</span> of the wealth of the country' s poor</li>
    <li>result in a <span style="color:${lm://Field/4};font-weight:bold">${lm://Field/2}</span> of the wealth of the country's rich</li>
    </ul>
    Would you vote for this policy?