Back to limesurvey.org

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

More
5 years 7 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.
Partner Banner
More
5 years 7 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.
More
5 years 7 months ago - 5 years 7 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: 5 years 7 months ago by blocka.
The topic has been locked.
More
5 years 7 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.
More
5 years 7 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.
More
5 years 7 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.
More
5 years 7 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.
More
5 years 7 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:21.96 KB
The topic has been locked.
More
5 years 7 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.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

Legal

About Us

Open Source