- Posts: 7
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Using Mobile: Likert Scale and screen fit
- MichaelG01
- Topic Author
- Offline
- New Member
Less
More
9 years 1 month ago - 9 years 1 month ago #117691
by MichaelG01
Using Mobile: Likert Scale and screen fit was created by MichaelG01
Attachments:
Last edit: 9 years 1 month ago by MichaelG01. Reason: Image
The topic has been locked.
- holch
- Away
- LimeSurvey Community Team
Less
More
- Posts: 11658
- Thank you received: 2742
9 years 1 month ago #117696
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Using Mobile: Likert Scale and screen fit
You either need to get a template that takes care of this or separate the subquestions into 1 questions and align the scale items vertically.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- MichaelG01
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 0
9 years 1 month ago #118266
by MichaelG01
Replied by MichaelG01 on topic Using Mobile: Likert Scale and screen fit
Sorry for my late reply.
I am using an template that should manage this. Mh.... but I don't know why it has this problem.
Best regards.
I am using an template that should manage this. Mh.... but I don't know why it has this problem.
Best regards.
The topic has been locked.
- holch
- Away
- LimeSurvey Community Team
Less
More
- Posts: 11658
- Thank you received: 2742
9 years 1 month ago #118273
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Using Mobile: Likert Scale and screen fit
Then I would get in touch with who did this template. They probably did not think of it. However, it might be actually quite difficult to do this with a responsive design.
As a solution I would use various single choice questions and align vertically.
As a solution I would use various single choice questions and align vertically.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
9 years 1 month ago #118283
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Using Mobile: Likert Scale and screen fit
Here's a little jQuery plugin I put together that converts arrays to drop-downs on smaller screens.
Add this to template.js:
Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):
A couple of screenshots when applied to Denis' Skeletonquest template:
Add this to template.js:
Code:
$(document).ready(function(){ $('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray(); }); /***** A plugin to insert drop-downs into arrays for small screens Copyright (C) 2014 - Tony Partner (http://partnersurveys.com) Licensed MIT, GPL Version - 1.0 Create date - 09/06/14 *****/ (function( $ ){ $.fn.responsiveArray = function(options) { return this.each(function() { var thisQuestion = $(this); var thisQID = $(thisQuestion).attr('id').split('question')[1]; // Some classes $(thisQuestion).addClass('responsive-array'); $('table.questions-list tr', thisQuestion).each(function(i){ $('> *', this).each(function(i){ $(this).addClass('col-'+i); if(i != 0) { $(this).addClass('expanded'); } }); }); // Insert a column $('.col-0', thisQuestion).after('<td class="dropdown-cell" />'); // Insert dropdowns $('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />'); $('table.questions-list thead th.expanded', thisQuestion).each(function(i){ $('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>'); }); $('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone()); $('tr.radio-list', thisQuestion).each(function(i){ var thisRow = $(this); $('input.radio', this).each(function(i){ $('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id')); }); $('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id')); }); $('.responsive-select-'+thisQID+'', thisQuestion).show(); // Listeners on radios $('input.radio', thisQuestion).click(function(event) { var thisRow = $(this).closest('tr'); var thisID = $(this).attr('id'); //$('option[value="'+thisID+'"]').attr('selected', 'selected'); $('.responsive-select', thisRow).val(thisID); }); // Listeners on dropdowns $('.responsive-select-'+thisQID+'').change(function() { $('#'+$(this).val()+'').click(); }); }); }; })( jQuery );
Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):
Code:
/***** Styles for the responsiveArray plugin Copyright (C) 2014 - Tony Partner (http://partnersurveys.com) Licensed MIT, GPL Version - 1.0 Create date - 09/06/14 *****/ .responsive-array .dropdown-cell { display: none; text-align: left; padding-left: 8px; } .responsive-array .dropdown-cell select { max-width: none; } @media screen and (max-width: 640px) { .responsive-array table.question { table-layout: auto; } .responsive-array table.question .col-0, .responsive-array table.question .dropdown-cell { width: 50%; } .responsive-array .dropdown-cell { display: table-cell; } .responsive-array th.expanded, .responsive-array td.expanded { display: none; } }
A couple of screenshots when applied to Denis' Skeletonquest template:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Bigred01
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
9 years 2 weeks ago #119036
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Using Mobile: Likert Scale and screen fit
Updated version of the plugin here -
manual.limesurvey.org/Workarounds:_Manip...s_on_smaller_screens
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.