Welcome to the LimeSurvey Community Forum

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

Insert heading between radio buttons

mafo
Topic Author
Offline
Junior Member

More

9 years 7 months ago #124867 by mafo

Insert heading between radio buttons was created by mafo

Hi,
I'd like to insert some kind of heading between two radio buttons of the question type "list (radio)".
It should look like this:

This is the text of the question

heading no. 1
response option 1
response option 2
response option 3

heading no. 2
response option 4
response option 5
response option 6

All response option are those typical radio buttons.
Does anybody know how to do this? I use limesurvey 2.05+ and the default template.

Cheers,

mafo

The topic has been locked.

holch
Offline
LimeSurvey Community Team

More

9 years 7 months ago #124871 by holch

Replied by holch on topic Insert heading between radio buttons

Currently this is only possible with some workarounds via CSS I guess. There is no such feature as headings in LS at the moment for this question type.

As this is clearly no "Installation & update issue" I will move this to the respective forum.

Help us to help you!

Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
Always provide a LSS file (not LSQ or LSG).

Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 7 months ago - 9 years 7 months ago #124904 by tpartner

Replied by tpartner on topic Insert heading between radio buttons

Set up your survey to use JavaScript and place something like this in the source of the question:

Code:

<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Insert sub-headers
    $('li.answer-item:eq(3)', thisQuestion).before('<li class="sub-heading">Heading #2</li>');
    $('li.answer-item:eq(0)', thisQuestion).before('<li class="sub-heading">Heading #1</li>');
  });
</script>

Then you can add something like this to template.css:

Code:

li.sub-heading {
  font-weight: bold;
  padding-top: 1em;
}

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

Last edit: 9 years 7 months ago by tpartner.

The following user(s) said Thank You: mafo

The topic has been locked.

mafo
Topic Author
Offline
Junior Member

More

9 years 7 months ago #125587 by mafo

Replied by mafo on topic Insert heading between radio buttons

Thank you! Your solution works perfectly.
I just found out that I can also underline the headings by adding the line
"text-decoration: underline" within the brackets of "li.sub-heading".

The topic has been locked.

tammo
Offline
Official LimeSurvey Partner

More

8 years 6 months ago #142887 by tammo

Replied by tammo on topic Insert heading between radio buttons

TPartner, I always love your solutions. But how can I make this work in version 2.54? I added the code, XSS filtering is off, but nothing appears...

Thanks in advance,

Tammo

Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl

The topic has been locked.

tammo
Offline
Official LimeSurvey Partner

More

8 years 6 months ago #142893 by tammo

Replied by tammo on topic Insert heading between radio buttons

Found out: due to change of HTML the code should be:

Code:

<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Insert sub-headers
    $('div.answer-item:eq(3)', thisQuestion).before('<div class="sub-heading">Heading #2</li>');
    $('div.answer-item:eq(0)', thisQuestion).before('<div class="sub-heading">Heading #1</li>');
  });
</script>

Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl

The topic has been locked.

tammo
Offline
Official LimeSurvey Partner

More

8 years 6 months ago #142895 by tammo

Replied by tammo on topic Insert heading between radio buttons

But: be aware: HTML of 2.5x may still change... I know that in version 3.0 thing may be reverted again...

Tammo

Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl

The topic has been locked.

tammo
Offline
Official LimeSurvey Partner

More

8 years 6 months ago #142896 by tammo

Replied by tammo on topic Insert heading between radio buttons

Just to be complete: in order to make this work in 2.54, also change the .css code to be added to template.css to:

Code:

div.sub-heading {
  font-weight: bold;
  padding-top: 1em;
}

Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl

The topic has been locked.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Insert heading between radio buttons

Lime-years ahead

Legal

About Us

Open Source