(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).
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.
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.
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.
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.
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.
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.