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
Topic Author
Offline
New Member

More

1 year 11 months ago - 1 year 11 months 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;">In the previous question, you selected option 1.</h1>

 

<table align="center" border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
 <tbody>
 <tr>
 <td bgcolor="#DCDCDC" style="text-align:center;" width="40%">
 Option 1
 </td>
 <td style="text-align:center;" width="0%">
 
 </td>
 <td bgcolor="#DCDCDC" style="text-align:center;" width="40%">
 <s>Option 2</s>
 </td>
 </tr>
 <tr>
 <td bgcolor="#DCDCDC" style="text-align:center;">
 

 <div> Reward: $2.90 </div>

 
 </td>
 <td style="text-align:center;" width="0%"> </td>
 <td bgcolor="#DCDCDC" style="text-align:center;"> <s> Reward: $3.50 </s> </td>
 </tr>
 <tr>
 <td bgcolor="#DCDCDC" style="text-align:center;">
 Approval rate: 100% 
 </td>
 <td style="text-align:center;" width="0%"> </td>
 <td bgcolor="#DCDCDC">
 <s>Approval rate: 90%</s> 
 </td>
 </tr>
 </tbody>
</table>

 

<h1 style="text-align:center;">How much do you prefer this option over the alternative you did not select?</h1>

Attachments:

Last edit: 1 year 11 months ago by Mattias_F.

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

1 year 11 months 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
Offline
LimeSurvey Community Team

More

1 year 11 months 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
Topic Author
Offline
New Member

More

1 year 11 months 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:

...ng_borders.lsq

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

1 year 11 months ago - 1 year 11 months 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: 1 year 11 months ago by Joffm.

Please Log in to join the conversation.

Mattias_F
Topic Author
Offline
New Member

More

1 year 11 months 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:

Mattias_F.lss

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

1 year 11 months 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
Offline
LimeSurvey Community Team

More

1 year 11 months 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
Topic Author
Offline
New Member

More

1 year 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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Editing colour of specific borders in specific table cells

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source