Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Editing colour of specific borders in specific table cells

  • Mattias_F
  • Mattias_F's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 5 days ago - 3 years 5 days ago #227547 by Mattias_F
Editing colour of specific borders in specific table cells was created by Mattias_F
I am using:
LimeSurvey version: 3.28.5
Own server
Survey theme/template: Vanilla theme (vanilla)
==================

Hi all,

I am new to both this forum and Limesurvey, so please feel free to suggest how I can improve this question.
I am designing an experiment where participants choose between two options. After they have done so, they are directed to a question where they have to state their preference strength for the chosen option. See "Image 1" attached for what it looks like now.

I have constructed the "boxes" for the options by inserting a 3x3 table with no borders, grey background in the first and third column, and no background in the middle column. I want to edit my table so that the outer borders of the selected "box" (which consists of three cells) are highlighted in green. Basically, I want it to look like "Image 2" (which has been edited in word) attached to this question.

The responses I have found to other similar questions have all involved editing the theme. I want to edit my source code for each individual question. Does anyone know how to do this? Thanks in advance.

My source code:

<h1 style="text-align:center;"><span style="font-family:'Times New Roman', Times, serif;">In the previous question, you selected <strong>option 1</strong>.</span></h1>

<p> </p>

<table align="center" border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <td bgcolor="#DCDCDC" style="text-align:center;" width="40%">
            <p><span style="font-size:26px;"><span style="font-family:'Times New Roman', Times, serif;"><strong>Option 1</strong></span></span></p>
            </td>
            <td style="text-align:center;" width="0%">
            <p> </p>
            </td>
            <td bgcolor="#DCDCDC" style="text-align:center;" width="40%">
            <p><s><span style="font-size:26px;"><span style="font-family:'Times New Roman', Times, serif;"><strong>Option 2</strong></span></span></s></p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#DCDCDC" style="text-align:center;">
            <p> </p>

            <div><font face="Times New Roman, Times, serif"><span style="font-size:20px;"><b>    Reward: $2.90    </b></span></font></div>

            <p> </p>
            </td>
            <td style="text-align:center;" width="0%">                                                </td>
            <td bgcolor="#DCDCDC" style="text-align:center;"><font face="Times New Roman, Times, serif"><span style="font-size:20px;"><b> <s>   Reward: $3.50   </s> </b></span></font></td>
        </tr>
        <tr>
            <td bgcolor="#DCDCDC" style="text-align:center;">
            <p><span style="font-family:'Times New Roman', Times, serif;"><span style="font-size:20px;"><b>Approval rate: 100%</b></span></span><br /> </p>
            </td>
            <td style="text-align:center;" width="0%"> </td>
            <td bgcolor="#DCDCDC">
            <p style="text-align:center;"><s><span style="font-family:'Times New Roman', Times, serif;"><span style="font-size:20px;"><b>Approval rate: 90%</b></span></span></s><br /> </p>
            </td>
        </tr>
    </tbody>
</table>

<p> </p>

<h1 style="text-align:center;"><span style="font-family:'Times New Roman', Times, serif;">How much do you prefer this option over the alternative you did not select?</span></h1>
 
Attachments:
Last edit: 3 years 5 days ago by Mattias_F.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 5 days ago #227548 by Joffm
Replied by Joffm on topic Editing colour of specific borders in specific table cells
Hi,
A very rough idea
Create a wrapping table with three columns and one row.
Inside the first and third column create your table with the options.

Now you can use Expression Manager to colour the border of the selected one
Like:
Code:
<td style="width: 45%; border:{if(Q1==1,'4px solid blue','4px solid transparent')}; background-color:yellow;">      
 
And - always better - send these questions as lss export.

Joffm

P.S. There is a button in the editor to insert code. So it is better readable.
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Mattias_F

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 5 days ago #227549 by tpartner
Replied by tpartner on topic Editing colour of specific borders in specific table cells
Can you attach a small sample survey export (.lss file) containing only the relevant questions?
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: Mattias_F

Please Log in to join the conversation.

  • Mattias_F
  • Mattias_F's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 days ago #227566 by Mattias_F
Replied by Mattias_F on topic Editing colour of specific borders in specific table cells
Hi,

Thank you both for responding and for the tips on how to improve my question.

I exported an .lss file but struggled to identify what part of that corresponded to the question I am editing (I have a long survey where I pipe participants to different questions and am afraid to mess up the piping, so I plan to edit one question until I get the structure right and then copy and paste that to all other questions).

I therefore tried exporting an .lsq file instead. I have tried importing that file and it looks like it should (except for the background colour). I have also inserted my source code below properly, as suggested.

Best regards,
Mattias
Code:
<h1 style="text-align:center;"><span style="font-family:'Times New Roman', Times, serif;">In the previous question, you selected <strong>option 1</strong>.</span></h1>
 
<p> </p>
 
<table align="center" border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <td bgcolor="#DCDCDC" style="text-align:center;" width="40%">
            <p><span style="font-size:26px;"><span style="font-family:'Times New Roman', Times, serif;"><strong>Option 1</strong></span></span></p>
            </td>
            <td style="text-align:center;" width="0%">
            <p> </p>
            </td>
            <td bgcolor="#DCDCDC" style="text-align:center;" width="40%">
            <p><s><span style="font-size:26px;"><span style="font-family:'Times New Roman', Times, serif;"><strong>Option 2</strong></span></span></s></p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#DCDCDC" style="text-align:center;">
            <p> </p>
 
            <div><font face="Times New Roman, Times, serif"><span style="font-size:20px;"><b>    Reward: $2.90    </b></span></font></div>
 
            <p> </p>
            </td>
            <td style="text-align:center;" width="0%">                                                </td>
            <td bgcolor="#DCDCDC" style="text-align:center;"><font face="Times New Roman, Times, serif"><span style="font-size:20px;"><b> <s>   Reward: $3.50   </s> </b></span></font></td>
        </tr>
        <tr>
            <td bgcolor="#DCDCDC" style="text-align:center;">
            <p><span style="font-family:'Times New Roman', Times, serif;"><span style="font-size:20px;"><b>Approval rate: 100%</b></span></span><br /> </p>
            </td>
            <td style="text-align:center;" width="0%"> </td>
            <td bgcolor="#DCDCDC">
            <p style="text-align:center;"><s><span style="font-family:'Times New Roman', Times, serif;"><span style="font-size:20px;"><b>Approval rate: 90%</b></span></span></s><br /> </p>
            </td>
        </tr>
    </tbody>
</table>
 
<p> </p>
 
<h1 style="text-align:center;"><span style="font-family:'Times New Roman', Times, serif;">How much do you prefer this option over the alternative you did not select?</span></h1>
Attachments:

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 days ago - 3 years 4 days ago #227574 by Joffm
Replied by Joffm on topic Editing colour of specific borders in specific table cells
To do a lss export only of the relevant questions  you
  • copy the survey
  • remove all not relevant questions/groups
  • send this as lss export

Meaning: the question on which your coloring depends and the table question.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 4 days ago by Joffm.

Please Log in to join the conversation.

  • Mattias_F
  • Mattias_F's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 4 days ago #227612 by Mattias_F
Replied by Mattias_F on topic Editing colour of specific borders in specific table cells
Hi,

Thank you for your patience. I have attached an .lss file that contains a stripped version of my survey. The only question group consists of four questions:

1. An invisible equation that randomises participants into one of two groups. In this example I only retain questions for the first of the two.
2. A question where participants choose option 1 or option 2.
3. Two questions where they state how strongly they prefer the option they chose. They are directed to the corresponding question using a condition.

Best regards,
Mattias
Attachments:

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 3 days ago #227630 by Joffm
Replied by Joffm on topic Editing colour of specific borders in specific table cells
Hi,
I did not use your table solution but two bootstrap panels.
Then I did not split the second question into two.
I use only one doing all the stryling with Expression Manager.

 

The styling and the structure  have to be improved; but you see the idea.
Code:
<div class="row">
  <div class="col-sm-4  col-sm-offset-1">
    {if(Q0_SQ001==1,"<div class='panel panel-primary'> ","<div class='panel panel-default'>")}
      <div class="panel-heading" style="font-size:26px;font-family:'Times New Roman', Times, serif;text-align:center">
        {if(Q0_SQ001==2,"<span style='text-decoration: line-through'>",'')}Option 1</span>
      </div>
      <div class="panel-body" style="font-weight:bold;font-family:'Times New Roman', Times, serif;background-color:#DCDCDC; text-align:center">
        <div style="height:40px;font-size:20px">{if(Q0_SQ001==2,"<span style='text-decoration: line-through'>",'')}Reward: $2.90</span></div>
        <div style="height:40px;font-size:20px">{if(Q0_SQ001==2,"<span style='text-decoration: line-through'>",'')}Approval rate: 100%</span></div>
      </div>
    </div>
  </div>
 
  <div class="col-sm-4  col-sm-offset-2">
    {if(Q0_SQ001==2,"<div class='panel panel-primary'> ","<div class='panel panel-default'>")}
      <div class="panel-heading" style="font-size:26px;font-family:'Times New Roman', Times, serif;text-align:center">
        {if(Q0_SQ001==1,"<span style='text-decoration: line-through'>",'')}Option 2</span>
      </div>
      <div class="panel-body" style="font-weight:bold;font-family:'Times New Roman', Times, serif;background-color:#DCDCDC; text-align:center">
        <div style="height:40px;font-size:20px">{if(Q0_SQ001==1,"<span style='text-decoration: line-through'>",'')}Reward: $3.50</span></div>
        <div style="height:40px;font-size:20px">{if(Q0_SQ001==1,"<span style='text-decoration: line-through'>",'')}Approval rate: 90%</span></div>
      </div>
    </div>
  </div>
</div>

You should not use the WYSIWYG- Editor but the source code editor.
 

 

File Attachment:

File Name: limesurvey...5583.lss
File Size:27 KB


Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Mattias_F

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 2 days ago #227632 by Joffm
Replied by Joffm on topic Editing colour of specific borders in specific table cells
Hi,
I improved a bit.
   



with this css in an extended theme (based on vanilla).
Code:
.panel {
    font-family:'Times New Roman', Times, serif;
    font-weight:bold;
}    
.panel-heading {
    font-size: 26px;
}
.panel-body {
    font-size: 20px;
    background-color:#DCDCDC;
}
p.line-through {
    line-height:40px;
    text-decoration: line-through;
}
p.line-normal {
    line-height:40px;
    text-decoration: none;
}

 

File Attachment:

File Name: limesurvey...5583.lss
File Size:30 KB


Joffm

Please, read the bootstrap documentation about everything to customize this.
[url] getbootstrap.com/docs/3.4/css/ [/url]
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Mattias_F

Please Log in to join the conversation.

  • Mattias_F
  • Mattias_F's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 11 months ago #227890 by Mattias_F
Replied by Mattias_F on topic Editing colour of specific borders in specific table cells
Hi,

Thank you very much Joffm for helping me with this, and thank you for the general tips on how to work with Limesurvey! I am really greatful.

Best regards,
Mattias

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source