Welcome to the LimeSurvey Community Forum

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

Randomized Background Colours

MW1234
Topic Author
Offline
New Member

More

5 years 4 months ago #177453 by MW1234

Randomized Background Colours was created by MW1234

Hi,
so, in the last hour, I've been trying to get a piece of code (I have no idea how PHP works btw) to work.
The idea is that at the start of every survey an equation question runs that randomises the background and text colour for everyone who takes the survey. The chances of red or blue are 40% each, and the chances for green should be 20%.

What I've ended up with is this:

Code:

$num = rand(0,99);
if($num > 0 &amp;&amp; $num < 40) {
 echo '<body style="background-color:red">';
}
elseif($num > 41 &amp;&amp; $num < 80) {
 echo '<body style="background-color:blue">';
}
else { 
 echo '<body style="background-color:green">';
}

Now, I don't know how blatantly obvious my horrible programming skills are, but in the end, this won't work. Instead of changing the background colour of the survey it changes the background colour of the text box when creating the equation question. It also deletes all code between two 's. So p.e. when I try to edit the question again, the background will be red (always) and "<body style="background-color:green">" and all the others will be gone.

I hope I managed to portrait my case enough for others to understand it...
If anyone has the slightest idea how to make my concept work, I'd be incredibly grateful if you would share your wisdom with me.

(I put the code into the Logic tab now so that it doesn't always delete the body style stuff)

Thanks up ahead,
MW

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

5 years 4 months ago #177467 by tpartner

Replied by tpartner on topic Randomized Background Colours

Where are you inserting this code? You cannot use PHP within the survey editor.

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

The topic has been locked.

MW1234
Topic Author
Offline
New Member

More

5 years 4 months ago #177479 by MW1234

Replied by MW1234 on topic Randomized Background Colours

I used it in both the "Question" field and under "Logic" in the "Equation" field

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team

More

5 years 4 months ago - 5 years 4 months ago #177484 by DenisChenu

Replied by DenisChenu on topic Randomized Background Colours

This can be done but ONLY via twig (and expression manager for random number)

extend vanilla theme (for example)
At line github.com/LimeSurvey/LimeSurvey/blob/df...yout_global.twig#L75

Put something like this

Code:

{% set bodyStyle = ''  %}
{% set randNumber = processString("{rand(1,99)}") %}
{% if randNumber < 40 %}
    {% set bodyStyle = 'background-color:red'  %}
{% endif %}
{% if randNumber >= 40 and randNumber < 80 %}
    {% set bodyStyle = 'background-color:blue'  %}
{% endif %}
{% if randNumber >= 80 %}
    {% set bodyStyle = 'background-color:blue'  %}
{% endif %}
<body style="{{ bodyStyle }}" class=" {{ aSurveyInfo.class.body }} font-{{  aSurveyInfo.options.font }} lang-{{aSurveyInfo.languagecode}} {{aSurveyInfo.surveyformat}} {% if( aSurveyInfo.options.brandlogo == "on") %}brand-logo{%endif%}" {{ aSurveyInfo.attr.body }} >

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.

Last edit: 5 years 4 months ago by DenisChenu.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

5 years 4 months ago - 5 years 4 months ago #177488 by tpartner

Replied by tpartner on topic Randomized Background Colours

If you want it in a single survey or question, you can do it with JavaScript. Add something like this to an equation question (in this example, with question code "Q1"):

Code:

{if(is_empty(Q1), rand(0, 99), Q1)}
 
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){  
 
    var num = "{Q1}";
    if(num.indexOf('<span') >= 0) {
      num = num.split('>')[1].split('<')[0];
    }
    var bodyColor;
 
    if (num < 40) {
      bodyColor = 'red';
    } else if (num < 80) {
      bodyColor = 'blue';
    } else {
      bodyColor = 'green';
    }    
 
    $('body').css({
      'background-color': bodyColor
    });
  });  
</script>

Sample survey attached:

File Attachment:

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

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

Attachments:

limesurvey...8721.lss

Last edit: 5 years 4 months ago by tpartner.

The following user(s) said Thank You: DenisChenu, MW1234

The topic has been locked.

MW1234
Topic Author
Offline
New Member

More

5 years 4 months ago - 5 years 4 months ago #177661 by MW1234

Replied by MW1234 on topic Randomized Background Colours

I'm currently trying to understand how everything works that you just did, but the fact that it works is blowing my mind...
Thank you so much! I'll get the hang of this someday

Now that I've been working with this for a while:
Can I make the Equation still run while hiding it from the participant?
I made it mandatory, then checked "Always Hide this Question," but that prevents the code from running.

Last edit: 5 years 4 months ago by MW1234.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

5 years 4 months ago - 5 years 4 months ago #177668 by tpartner

Replied by tpartner on topic Randomized Background Colours

Do not use the "Always Hide this Question" setting, that is more for preloaded and panel-pass-through questions.

In Question settings --> Display, assign a CSS class "hidden".

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

Last edit: 5 years 4 months ago by tpartner.

The following user(s) said Thank You: MW1234

The topic has been locked.

MW1234
Topic Author
Offline
New Member

More

5 years 4 months ago - 5 years 4 months ago #177826 by MW1234

Replied by MW1234 on topic Randomized Background Colours

I was about to write something apologetic. The fact is I have no idea what I'm doing...
I came across another issue:
I managed to randomise the background colour and change the text colour accordingly. The problem I'm facing now is that I'm using white as a text colour.
This means that within the Question+Answers Container the writing is invisible since those containers are white as well.
I found some white colours under <style> that would probably fit the white I want to change, but I realised I, first of all, don't know HOW to change it and if I changed it what colour I'd change it to since it should be the same as the background colour.
So here I am again, begging for advice:
How do I remove the colouring of the question+answers container so that the question and choosable answers are on the same background as p.e. the Question Group Name?

P.S.: I might as well add this: I'm working with the List (radio) question type and would love to be able to put one answer on the left of the page and the other on the right. I looked at the theme editor and decided to throw away my nerves. At this point, I could write a scientific paper on my struggles trying in trying to create this survey.
I cannot possibly express how much I appreciate your help.

Last edit: 5 years 4 months ago by MW1234.

The topic has been locked.

holch
Offline
LimeSurvey Community Team

More

5 years 4 months ago #177829 by holch

Replied by holch on topic Randomized Background Colours

I might as well add this: I'm working with the List (radio) question type and would love to be able to put one answer on the left of the page and the other on the right.

Hmm, not sure what you want to do. This is a list, it is always one below the other. Can you show an image of what you are trying to achieve? Because the way you describe it, it is not very clear.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.

MW1234
Topic Author
Offline
New Member

More

5 years 4 months ago #177830 by MW1234

Replied by MW1234 on topic Randomized Background Colours

I would like to have a Single Choice Question with the two answers separate on the screen, meaning that one is on the left the other on the right.
I just quickly drew made something on Paint

Attachments:

...outConcept.png

The topic has been locked.

holch
Offline
LimeSurvey Community Team

More

5 years 4 months ago #177835 by holch

Replied by holch on topic Randomized Background Colours

To have the answers not vertically aligned, but horizontally you can create 2 columns in the settings of the question. This will not necessarily align one totally to the left and the other one totally to the right, but they would be aligned horizontally.

To do what you want to do you will have to align and style them via CSS, I guess.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The following user(s) said Thank You: MW1234

The topic has been locked.

MW1234
Topic Author
Offline
New Member

More

5 years 4 months ago #178046 by MW1234

Replied by MW1234 on topic Randomized Background Colours

I'm coming up on my deadline, so I'll have to push this post ^^

I managed to randomise the background colour and change the text colour accordingly. The problem I'm facing now is that I'm using white as a text colour.
This means that within the Question+Answers Container the writing is invisible since those containers are white as well.
I found some white colours under <style> that would probably fit the white I want to change, but I realised I, first of all, don't know HOW to change it and if I changed it what colour I'd change it to since it should be the same as the background colour.

How do I remove the colouring of the question+answers container so that the question and choosable answers are on the same background as p.e. the Question Group Name? Or can I somehow incorporate the Question+Answer Container into the code so that it changes based on the same Random Number that defines the background colour?

For reference, here is the entire code I'm currently using:

Code:

{if(is_empty(Q1), rand(0, 99), Q1)} <script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){  
 
    var num = "{Q1}";
    if(num.indexOf('<span') >= 0) {
      num = num.split('>')[1].split('<')[0];
    }
        document.body.style.color = "white";
    var bodyColor;
 
    if (num < 40) {
      bodyColor = 'darkred';
    } else if (num < 80) {
      bodyColor = 'darkblue';
    } else {
      bodyColor = 'darkgreen';
    }    
 
    $('body').css({
      'background-color': bodyColor
    });
  });  
</script>

The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Randomized Background Colours

File Attachment:

Lime-years ahead

Legal

About Us

Open Source