Welcome, Guest
Username: Password: Remember me

TOPIC: Display some questions "grouped" together inside a Group

Display some questions "grouped" together inside a Group 1 year 3 months ago #95085

  • Qat
  • Qat's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
Hi everyone,

I'm designing a survey with several groups. Those groups are fairly large, and the survey would be easier to read if some questions could be displayed together (let's say inside a frame). The result would still be one group per page, but the page would be subdivided in "subgroups" (see exemple below).

I found this workaround that allows me to modify the questions layouts, with javascipt. But I can't make it work (I use v2.00+)

How can I achieve this ?



Exemple : let's say one of the groups is "Background information". This group contains info about the person and his school history.
Q1 : Name
Q2 : Surname
Q3 : Date of birth
Q4 : Sex
Q5 : Primary school Name
Q6 : Primary school Place
Q7 : Primary school Date in
Q8 : Secondary school Name
Q9 : Secondary school Place
Q10 : Secondary school Date in

I'd like to keep them all in the same backend group, but displayed like that

---Personal Data----
Q1 : Name
Q2 : Surname
Q3 : Date of birth
Q4 : Sex
---Primary school----
Q5 : Name
Q6 : Place
Q7 : Date in
---Secondary school---
Q8 : Name
Q9 : Place
Q10 : Date in
The administrator has disabled public write access.

[SOLVED] Display some questions "grouped" together inside a Group 1 year 3 months ago #95100

  • Qat
  • Qat's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 14
  • Karma: 0
OK, I found a solution with javascript. Here's a walkthrough for reference.

In short : my questions are inside a "box". To group them, I have to remove the spacing between the boxes, remove the bottom border of the 1st question, the top and bottom borders of the middle questions, and the top border of the last question.

In detail :
1. Allow javascript to be inserted in questions : In the global settings of your Limesurvey install, make sure that the option "Filter HTML against XSS" is set to NO.

2. Open your template.css file and find the name of the style for your questions. Mine was 'survey-question'

3. Note the settings for your borders ans spacing : those are the settings you want to "neutralize".

4. When you create a question, switch the editor to "source" mode and insert the following code

For top question (ID = 396 in this case + those are the settings for my template. You'll need to adapt):
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
  $('#question396 .survey-question').css({
    'border-bottom':'0px',
    'margin-bottom':'-10px'
   }); 
 });
</script>

For a middle question (ID = 397 in this case + those are the settings for my template. You'll need to adapt):
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
  $('#question397 .survey-question').css({
    'border-top':'0px',
    'border-bottom':'0px',
    'margin-bottom':'-10px'
   }); 
 });
</script>

For the bottom question (ID = 398 in this case + those are the settings for my template. You'll need to adapt):
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
  $('#question398 .survey-question').css({[i][/i]
    'border-top':'0px',
   }); 
 });
</script>
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.249 seconds
Donation Image