Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Filling multiple gaps in a sentence using text boxes?

More
5 years 7 months ago #212517 by confusedeconomist
Filling multiple gaps in a sentence using text boxes? was created by confusedeconomist
Hi everyone,

I want to make a question which asks my survey participants to fill in the gaps in the following sentences (using numbers to report hours and minutes):

Over the past WEEK: I have spent ___ hours and ___ minutes doing this activity.
Over the past MONTH: I have spent ___ hours and ___ minutes doing this activity.
Over the past YEAR: I have spent ___ hours and ___ minutes doing this activity.

I have tried to do this via the "multiple short text" question type, the result is attached as a picture.

To do so, I set "Over the past XXX:" as my subquestions, "I have spent" as my prefix, and "doing this activity" as my suffix.

However, it doesn't seem possible to add a second box for participants to fill in the "minutes" in the same line. Does anyone know how to do this please?

I tried some different ways too, like using an array with two columns (one for hours one for minutes) but this doesn't allow for prefix/suffix, and doesn't look as nice.

I have never tried to change source codes or used Javascript before, but I would be super grateful for any advice on how to do so, if you think it can solve my problem above!

Best wishes,
Lucie

 
The topic has been locked.
Partner Banner
More
5 years 7 months ago #212520 by Joffm
Replied by Joffm on topic Filling multiple gaps in a sentence using text boxes?
Hi, Lucie,
have a look here
[url] forums.limesurvey.org/forum/can-i-do-thi...down-box-within-text [/url]

It's for dropdowns, but
in your case you may use drop-downs (0 - 24 hours), (0 to 60 minutes)

Or you change the javascript and the question type from checkbox to "short text" or "numeric input"
Code:
<script type="text/javascript" charset="utf-8">         $(document).on('ready',function(){         var thisSelect = $('#question{QID} input[id^="answer"]:eq(0)');         var secondSelect = $('#question{QID}').nextAll('[id^="question"]:eq(0)').find('input[id^="answer"]:eq(0)');                  // Move the first dropdown         $('#question{QID} .inserted-dropdown:eq(0)').append(thisSelect);         // Move the second dropdown         $('#question{QID} .inserted-dropdown:eq(1)').append(secondSelect );                  // Hide the next question         $('#question{QID}').nextAll('[id^="question"]:eq(0)').hide();     }); </script> <style type="text/css">#question{QID} select {         margin: 0 0 0 -0.25em;     } </style> <style type="text/css">#question{QID} input {         display: inline-block;         margin: 0 0 0 -0.25em;         width: 50px;         height: auto;         padding: 0;     }       #question{QID} .answer-container{         display: none;     } </style>

 


Or a - in my opinion - better way is to use an array(numbers)
 

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: confusedeconomist
The topic has been locked.
More
5 years 7 months ago #212525 by confusedeconomist
Replied by confusedeconomist on topic Filling multiple gaps in a sentence using text boxes?
Hi Joffm,

Thank you so much for your answer!

I hadn't considered the "array" format for this question before, but I think you're right, this makes a lot more sense. I have no experience with Javascript (or with coding in general) so it might also be the safest option for me since I don't have to touch the source code!

Best wishes,
Lucie
The topic has been locked.
More
5 years 7 months ago #212736 by confusedeconomist
Replied by confusedeconomist on topic Filling multiple gaps in a sentence using text boxes?
Hi Joffm,

Apologies for going back to you, but I find myself in a bind again.

Basically after testing the question with a few people, I've concluded that it's too confusing for them to be asked about all three time periods. Instead, I want to give them a choice of answering the question using the timescale they prefer (weekly, monthly, or yearly).

Hence the ideal question would be:

"On an average (dropdown: week / month / year), I spend about (dropdown: 0-250) hours and (dropdown: 0-59) minutes doing this task."

This means I need 3 dropdowns in my question, instead of 2 as in the code you linked me to.

I'm not a programmer and I don't know Javascript at all but I can see that I likely need to change 3 lines in the code:
- the line that defines "thirdSelect"
- the line that appends the third question's dropdown
- the line that hides the third question

If you have a bit of time, I'd really appreciate advice on how to add these three lines. I did my own googling but I am stuck (as I don't know Javascript). For example I don't know how to refer to "the question two questions from now" in the code so I can't create thirdSelect.

Thanks a million in advance for any help!
The topic has been locked.
More
5 years 7 months ago #212742 by Joffm
Replied by Joffm on topic Filling multiple gaps in a sentence using text boxes?
Yes, you can do that
 

You see how the "secondSelect" is defined and how the "eq(x)" is used.


BUT: Do you really thing it is advisable to have a drop-down from 0-250? 
Meaning, who remembers the exact number? Was it 130 or 150? And minutes in a year?
Instead of this all, you may use a simple array with a drop-down in the first column and two text fields to enter hours and minutes
Like this
 

This you do by inserting this javascript snippet into the question code (you see I coded the x-axis "X001", "X002", "X003")
Code:
<script type="text/javascript" charset="utf-8">   $(document).on('ready pjax:scriptcomplete',function(){     var thisQuestion = $('#question{QID}');     // Add a question class     thisQuestion.addClass('custom-array');       // Column-specific classes     $('table.subquestion-list tr', thisQuestion).each(function(i) {       $('th, td', this).each(function(i) {         $(this).addClass('column-'+i);       });     });         // Insert selects     $('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\   <option value="">...</option>\   <option value="1">week</option>\   <option value="2">month</option>\   <option value="3">year</option>\ </select>');       // Listeners     $('.inserted-select', thisQuestion).on('change', function(i) {       if($(this).val() != '') {         $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');       }       else {         $(this).closest('.answer-item').find('input:text').val('').trigger('change');       }     });     // Returning to page     $('.with-select input:text', thisQuestion).each(function(i) {       var thisCell = $(this).closest('.answer-item');       var inputText = $.trim($(this).val());       $('select.inserted-select', thisCell).val(inputText);     });       // Clean-up styles     $('select.inserted-select', thisQuestion).css({       'max-width': '100%'     });     $('.with-select input:text', thisQuestion).css({       'position': 'absolute',       'left': '-9999em'     });   }); </script>

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: confusedeconomist
The topic has been locked.
More
5 years 7 months ago #212747 by confusedeconomist
Replied by confusedeconomist on topic Filling multiple gaps in a sentence using text boxes?
Hi Joffm,

Thank you so much for your quick and thorough answer - I can't express how grateful I am, as I am completely lost when it comes to coding!

You see how the "secondSelect" is defined and how the "eq(x)" is used.


How can I see the secondselect and eq(x) you mention above? When I look at your message I just see the screenshot of the working survey but no code/sample survey. 

Instead of this all, you may use a simple array with a drop-down in the first column and two text fields to enter hours and minutes


I think that's a fair suggestion, and I want to try out both versions on some participants to see what they find easier to understand/answer. I copied your code into a new "array - text" style question, and added the relevant x-axis and y-axis subquestions. However when I preview the question it's as if the extra code wasn't there (the array just displays "normally" with three text boxes). Did you mean that I should replace the x001, x002, x003 with the name of my subquestions instead? Otherwise I'm not sure why I can't get the code to work.

Best wishes,
Lucie
The topic has been locked.
More
5 years 7 months ago - 5 years 7 months ago #212752 by Joffm
Replied by Joffm on topic Filling multiple gaps in a sentence using text boxes?

How can I see the secondselect and eq(x) you mention above?

This you find in my very first posting.
There you find the javascript of the inserted drop-downs.

Did you mean that I should replace the x001, x002, x003

By default LimeSurvey offers the codes of both the y-axis and x-axis as "SQ001", "SQ002"
In my opinion it is less confusing to code the y.axis as "Y001", "Y002",... and the x-axis as "X001", "X002".
In your dataset you do not find something like "Q23_SQ002_SQ003" (what was the x-axis, what the y-axis?) but "Q23_Y002_X003".

Therefore the javascript depends on an x-axis code of "X001", "X002", "X003".

Joffm

Now start creating your survey.
If there are more questions, please provide your work as lss export.

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 5 years 7 months ago by Joffm.
The following user(s) said Thank You: confusedeconomist
The topic has been locked.
More
5 years 7 months ago #212761 by confusedeconomist
Replied by confusedeconomist on topic Filling multiple gaps in a sentence using text boxes?
Ah I see, thank you very much for clarifying! Appreciate all the help :-) I'll implement this in my survey now.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source