Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Render a style background colour based on previous question response

blocka
Topic Author
Offline
Platinum Member

More

4 years 3 months ago #212860 by blocka

Render a style background colour based on previous question response was created by blocka

I have a survey with a question that results in the need to show a table cell in a subsequent question with one of 3 different background colors.

So, let's say I have:

Question Code "Status" has answer codes Yes, No, Maybe
And then in Q2, I want to render a table with a cell that has a background colour that is Green for Yes, Red for No, and Yellow for maybe.

I figure I should be able to code this:

Code:

<td style="background-color: {if(Status=="Yes", "#C5E0B3",if(Status=="Maybe","#FFFF99","#FF908A"))}; text-align: center;">

When I do that, I get this HTML rendered:

Code:

<td style="background-color: #<span id='LEMtailor_Q_13539_2'>FF908A</span>; text-align: center;">

Am I doing something wrong, or is what I want to do not possible (or is there a better way to do it)?

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

4 years 3 months ago #212862 by Joffm

Replied by Joffm on topic Render a style background colour based on previous question response

You have nested double quotes.

Try<td style="background-color: {if(Status=='Yes', '#C5E0B3',if(Status=='Maybe','#FFFF99','#FF908A'))}; text-align: center;">

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: DenisChenu

The topic has been locked.

blocka
Topic Author
Offline
Platinum Member

More

4 years 3 months ago - 4 years 3 months ago #212863 by blocka

Replied by blocka on topic Render a style background colour based on previous question response

Thanks for quick response. Alas, still seems not to work :-(

I decided to test by creating an equation question that just stores the colour code, and then reference that question code in the TD tag, like this:

Code:

<td style="background-color: {ColorCode}; text-align: center;">

To verify the colour code is being set correctly, I display the Equation question text, and verify it is correct.,

But when I toggle my radio buttons, the string rendered in the TD tag is still:

Code:

#<span id='LEMtailor_Q_13539_2'>FF908A</span>

Here's a short screen movie... Note how the colour value doesn't change in the HTML tag:

www.dropbox.com/s/e6m06xjav96zrkw/2021-03-03_15-37-31.MP4?dl=0

And here's what I'm using in the Equation question:

Last edit: 4 years 3 months ago by blocka.

The topic has been locked.

blocka
Topic Author
Offline
Platinum Member

More

4 years 3 months ago #212866 by blocka

Replied by blocka on topic Render a style background colour based on previous question response

Still struggling with this... Thought maybe some javascript might do the trick:

Code:

<table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
    <tbody>
        <tr>
            <td id="notice" style="background-color: red; text-align: center;">
            <p> </p>
 
            <p> </p>
 
            <h1><strong>{if(Q62=="G","Contact is FIT for Travel",if(Q62=="Y","Additional Information Required","Contact is UNFIT for Travel"))}</strong></h1>
<p> </p>
 
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
var colr = {Q62};
if(colr = "G") {
document.getElementById('notice').style.backgroundColor= '#00FF00';
};
</script>

But when I view the HTML page source, I see that my script still has the LEMtailor text:

Code:

var colr = [b]<span id='LEMtailor_Q_13539_6'></span>[/b];
if(colr = "G") {
document.getElementById('notice').style.backgroundColor= '#00FF00';
};

There's gotta be a way to change the background color tag, but boy, it is eluding me today...

The topic has been locked.

blocka
Topic Author
Offline
Platinum Member

More

4 years 3 months ago #212868 by blocka

Replied by blocka on topic Render a style background colour based on previous question response

Ah ha -- it appears one cannot do this if the two questions are displayed on the same page. If I put the two questions in separate question groups, and display Group by Group (or if I use Question by question) then both my approaches will work.

So it appears that LEMtailor is a warning that probably whatever you are trying to do, cannot be done if both questions are displayed on the same page....

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

4 years 3 months ago #212871 by DenisChenu

Replied by DenisChenu on topic Render a style background colour based on previous question response

Yes … if you need update color : you need javascript action …

Not possible.

You can do something like this

{if(TEST,"<p class='text-danger'>danger</p>","<p class='text-success'>OK</p>")}

but with td : it's surely break

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 3 months ago #212885 by tpartner

Replied by tpartner on topic Render a style background colour based on previous question response

If you need the questions on the same page, attach a small sample survey (.lss) file and I'll give a short example of a JavaScript listener.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The following user(s) said Thank You: blocka

The topic has been locked.

blocka
Topic Author
Offline
Platinum Member

More

4 years 3 months ago #212920 by blocka

Replied by blocka on topic Render a style background colour based on previous question response

That would be neat to see! I've attached sample survey with the two question.

File Attachment:

File Name: survey_752936.lss
File Size:22 KB

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 3 months ago #212923 by tpartner

Replied by tpartner on topic Render a style background colour based on previous question response

This script in the source of the list-radio question will modify classnames of the #notice element as the radios are clicked. In this example, I have used Bootstrap coloring classes .

Code:

<script type="text/javascript" data-author="Tony Partner">    
    $(document).on('ready pjax:scriptcomplete',function(){
        
        // Listener on the radios
        $('#question{QID} :radio').on('click', function(e) {
            // Reset the class names
            $('#notice').removeClass('bg-success bg-warning bg-danger');
            
            // Assign a class name to the #notice element
            if($(this).val() == 'G') {
                $('#notice').addClass('bg-success');
            }
            else if($(this).val() == 'Y') {
                $('#notice').addClass('bg-warning');
            }
            else {
                $('#notice').addClass('bg-danger');
            }
        });
    });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...2936.lss
File Size:16 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Render a style background colour based on previous question response

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source