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
  • MichaelG01's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
9 years 3 weeks ago - 9 years 3 weeks ago #117691 by MichaelG01
Using Mobile: Likert Scale and screen fit was created by MichaelG01
Hello,

I have the following problem. When using a scale, for instance an 5 point likert scale, on an mobile phone, in my case iphone 6, the scale doesn't fit the phones screen size.

Is there a possibility to change this?

Best regards,

Michael




Last edit: 9 years 3 weeks ago by MichaelG01. Reason: Image
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 3 weeks ago #117696 by holch
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
  • MichaelG01's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
9 years 5 days 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.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 5 days ago #118273 by holch
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.

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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 5 days ago #118283 by tpartner
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:
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.
The following user(s) said Thank You: Bigred01
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 11 months ago #119036 by tpartner
Replied by tpartner on topic Using Mobile: Likert Scale and screen fit

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose