A Responsive LimeSurvey Template Based On Bootstrap
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
mofog Added jQuery events 'ready' and 'show' to '.bflsMainContent'; Removed…
… i-icon for text in 'text displays', i.e., 'boilerplate' questions.
Latest commit fcb002a Mar 23, 2018
Permalink
Failed to load latest commit information.
bootstrap Various minor improvements. Jan 28, 2014
images Fixed: Progressbar hidden behind navbar. Fixed: Navbar buttons width … Feb 11, 2016
GPL.txt Fixed static SID. Jan 6, 2014
README.md Added jQuery events 'ready' and 'show' to '.bflsMainContent'; Removed… Mar 23, 2018
assessment.pstpl Fixed static SID. Jan 6, 2014
clearall.pstpl Fixed static SID. Jan 6, 2014
completed.pstpl Fixed static SID. Jan 6, 2014
endgroup.pstpl Fixed static SID. Jan 6, 2014
endpage.pstpl Fixed static SID. Jan 6, 2014
groupdescription.pstpl Fixed static SID. Jan 6, 2014
load.pstpl Fixed static SID. Jan 6, 2014
navigator.pstpl Fixed: Progressbar hidden behind navbar. Fixed: Navbar buttons width … Feb 11, 2016
preview.png Fixed static SID. Jan 6, 2014
print_group.pstpl Fixed static SID. Jan 6, 2014
print_img_checkbox.png Fixed static SID. Jan 6, 2014
print_img_radio.png Fixed static SID. Jan 6, 2014
print_question.pstpl Fixed static SID. Jan 6, 2014
print_survey.pstpl Fixed static SID. Jan 6, 2014
printanswers.pstpl Fixed static SID. Jan 6, 2014
privacy.pstpl Fixed static SID. Jan 6, 2014
question.pstpl Fixed and improved handling of mandatory questions. Jan 14, 2014
register.pstpl Fixed static SID. Jan 6, 2014
save.pstpl Fixed static SID. Jan 6, 2014
startgroup.pstpl Fixed static SID. Jan 6, 2014
startpage.pstpl Fixed: Static URL for NASA-TLX background image. Updated Readme with… Feb 11, 2016
survey.pstpl Fixed static SID. Jan 6, 2014
surveylist.pstpl Fixed static SID. Jan 6, 2014
template.css Added jQuery events 'ready' and 'show' to '.bflsMainContent'; Removed… Mar 23, 2018
template.js Added jQuery events 'ready' and 'show' to '.bflsMainContent'; Removed… Mar 23, 2018
welcome.pstpl Fix: Made logo on welcome page responsive. Fix: Body padding on welco… Feb 29, 2016

README.md

BootstrapForLimeSurvey

A Responsive LimeSurvey Template Based On Bootstrap

(c) 2013-2018 mofog (http://mofog.github.io/BootstrapForLimeSurvey) This is a survey template for LimeSurvey that has been verified on Version 2.06+ Build 160129. It is not designed for newer LimeSurvey version, e.g., 3.x. This software is licensed under the GPL (GNU GENERAL PUBLIC LICENSE, see attached file).

Events

The class .bflsMainContent provides two events you can listen to: 'ready' and 'show'. The first one is fired after all changes to the DOM have been applied, but the page is not visible yet. The latter is fired after the visibility of the page has been set.

<script type="text/javascript">	
  bfls('.bflsMainContent').on('ready', function() {
    bfls('div.numeric-multi div.col-md-4').addClass('col-md-12');
    bfls('div.numeric-multi div.col-md-4').removeClass('col-md-4');
  });
</script>

The example above changes the width of multiple numeric inputs so that one numeric input is displayed per row instead of three.

Code Sample for Semantic Differentials

Step 1: Add JS code to your question (either in the field "Question" or "Help"):

<script type="text/javascript">	
  bfls(document).ready(function(){ 
   bfls('#question{QID}').addClass('semanticDifferential');
  });
</script>

Step 2: Set question type to "Array".
Step 3: Add the answer options, e.g., 5 or 7, but leave the texts blank.
Step 4: Add subquestions according to your needs, e.g., "confusing|clearly structured".
Step 5: Done.

Code Sample for Likert scales

Step 1: Add JS code to your question (either in the field "Question" or "Help"):

<script type="text/javascript">	
  bfls(document).ready(function(){ 
   bfls('#question{QID}').addClass('likert');
  });
</script>

Step 2: Set question type to "List (radio)".
Step 3: Add the answer options, e.g.,

Code Answer option
A1 (1) Strongly disagree
A2 (2)
A3 (3)
A5 (4)
A5 (5)
A6 (6)
A7 (7) Strongly agree

Step 4: Done.

Code Sample for NASA-TLX scales

Step 1: Add JS code to your question (either in the field "Question" or "Help"):

<script type="text/javascript">	
  bfls(document).ready(function(){ 
   bfls('#question{QID}').addClass('nasa-tlx');
  });
</script>

Step 2: Set question type to "Multiple numerical input".
Step 3: Define question as mandatory.
Step 4: "Show advanced settings".
Step 5: In the group "Slider", set "Use slider layout" to yes.
Step 6: Set the "Slider minimum value" to 1, and the "Slider maximum value" to 21.
Step 7: Set "Slider left/right text separator" to "|".
Step 8: Edit subquestions. Add one subquestion for each NASA-TLX question, i.e. six.
Step 9: Set each "Subquestion" accordingly, for example: "Mental Demands|Very low|Very high", and then "Save changes".
Step 10: Done.

Code Sample for SAM (Self-Assessment Manikin) scales

Step 1: Add JS code to your question (either in the field "Question" or "Help"):

<script type="text/javascript">	
  bfls(document).ready(function(){ 
   bfls('#question{QID}').addClass('sam');
  });
</script>

Step 2: Set question type to "Array".
Step 3: Define question as mandatory.
Step 4: Edit subquestions, but don't add any, just hit "Save changes" so that LimeSurvey is happy.
Step 5: Edit answer options.
Substep 1: Click the pencil to "start the HTML editor in a popup window".
Substep 2: In the popup window, click on the button to add an image.
Substep 3: Click on "browse server".
Substep 4: Upload all your SAM images.
Substep 5: Select one of the uploaded images by double clicking.
Substep 6: Copy the URL of the image to your clipboard.
Substep 7: Hit "Cancel" in the "Image properties" window.
Substep 8: Close the HTML editor popup window.
Substep 9: Set the "Answer option" for the first SAM image to

<img src="(INSERT CLIPBOARD CONTENT HERE)" />
Example:
<img src="/upload/surveys/921666/images/sam-a-1.png" />

Substep 10: Add the remaining SAM images to your liking and adapt the URL accordingly, for example:

<img src="/upload/surveys/921666/images/sam-a-2.png" />

Step 6: Done.

Code Sample for numeric text input fields on iOS devices

Step 1: Add JS code to your question (either in the field "Question" or "Help"):

<script type="text/javascript"> 
  bfls(document).ready(function(){ 
   bfls('#question{QID}').find('input[type="text"]').attr('type', 'tel');
  });
</script>

Step 2: Set question type to "Array (text)".
Step 3: Done.