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>
 

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

Can you attach a small sample survey export (.lss file) containing only the relevant questions?

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

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

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

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.
You should not use the WYSIWYG- Editor but the source code editor.
 

 

Joffm

Hi,
I improved a bit.
   



with this css in an extended theme (based on vanilla).
 

Joffm

Please, read the bootstrap documentation about everything to customize this.
[url] getbootstrap.com/docs/3.4/css/ [/url]

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