Welcome to the LimeSurvey Community Forum

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

Create Dual Scale Array with condition ( disable radio of sub-question )

  • Maverick87Shaka
  • Maverick87Shaka's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 10 months ago #135894 by Maverick87Shaka
Hi to all,
I'm pretty new on the Limesurvey project, but I really love it, and all it's potential.
I'm pretty sure it's possible do something like I need, but I have really no idea how to do it!
Taking as example a question ( like the one in the image attached ) that has a three sub-question and a dual scale "score"

What I need is make a "constraint logic" that works like this:
If the user select a score of one scale ( for example score "5" of First Scale) for one sub-question, the logic should "disable" for all the other sub-qeustions the "First Scale"
The same happens when selecting on other sub-question a score of a "Second Scale" ( select 2 or 3 disable all the radio 2/3 on the other sub-questions )
At the same time what i need is constraint the user to select only one score for each sub-question. The basic logic of limesurvey dual scale array allow the "multiple selection", one answer for each scale, I need only one answer for both scale.

Considering that I have only two scale and three sub-question, with this logic we force the user to leave one sub-question unscored, and it's exactly what I need.

As plus, but this is really a "minor" feature, I would like to edit the style of the question array to match the layout like this:




Thanks for any suggestion :P
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
7 years 10 months ago #135901 by Mazi
The validation logic is probably something that has to be custom coded using some rather complex JavaScript.

The requested design adjustment should be doable by creating a copy of the template and editing the main template.css file.

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
  • Maverick87Shaka
  • Maverick87Shaka's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 10 months ago #135916 by Maverick87Shaka
Thanks for reply,
leaving the customization of template for a second phase, there is some example code of javascripting that I can follow to achieve my needs?
Or there is someone can help to wirte the code of this question?
Actually I'm total new on Limesurvey, any help will be much appreciated.

Thanks
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 10 months ago #135926 by tpartner
I don't think you can get there with radio array questions - once a radio in a series is clicked you cannot un-click the series, so if they make a mistake with the un-scored sub-question, they cannot fix it.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Maverick87Shaka
  • Maverick87Shaka's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 10 months ago #135977 by Maverick87Shaka
This is a good observation, and could be really a problem.
really I don't know how is managed in "Other" popular survey, but I'm pretty sure there is something to allow user to "change" the score given.

Could be resolved in a "simple" way using a "reset button" at the end of the three sub-question for example?

The best way probably is to "disable" the radio buttons, but if a user try to click on it, the javascript allow selection of the new score and removing the score of the same scale from the other sub-question.

Really I don't know if it's possible, but i really need help, to start code something to achieve this structure.

The Dual scale it's not really a "Must", we can use the "classic" array question type, using a custom template css style to add a "label" upper the 2/3 and 4/5 score.

Thanks for any help!
The topic has been locked.
  • Maverick87Shaka
  • Maverick87Shaka's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 10 months ago #136034 by Maverick87Shaka
I found helpful topic to add the reset button, so we can use this "workaround" to avoid any issues if the user want change an answer.

So, now i really need a help to get the "disable" radio logic working, any idea?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 10 months ago #136058 by tpartner
I'm still not convinced this is the best design but you could do something like this:

Code:
<script type="text/javascript" charset="utf-8">  
 
  $(document).ready(function(){  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
      var scale = 1;
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1)+' scale-'+scale+'');
        $(this).attr('data-column', i+1);
        $(this).attr('data-scale', scale);
        if(i == 1) {
          scale++
        }
      });
    });
 
    // Listener on the radios
    $('input.radio', thisQuestion).on('click', function(e){
      $('input.radio', thisQuestion).prop('disabled', false);
      $('input.radio:checked', thisQuestion).each(function(e) {
        var thisCell = $(this).closest('td.answer-item');
        var thisScale = $(thisCell).attr('data-scale');
        $('td[data-scale="'+thisScale+'"]', thisQuestion).not(thisCell).find('input.radio').prop('disabled', true);
      });
    });
 
    // Insert scale headers and separator
    $('colgroup', thisQuestion).remove();
    $('.scale-1.column-1', thisQuestion).before('<td class="inserted-scale-separator"></td>');
    $('.scale-1.column-2', thisQuestion).after('<td class="inserted-scale-separator"></td>');
    $('table.subquestion-list thead', thisQuestion).prepend('<tr class="scale-headers">\
                                  <td></td>\
                                  <td class="inserted-scale-separator"></td>\
                                  <th class="text-center scale-1" data-scale="1" colspan="2">Scale 1</th>\
                                  <td class="inserted-scale-separator"></td>\
                                  <th class="text-center scale-2" data-scale="2" colspan="2">Scale 2</th>\
                                </tr>');
 
    // Some styles (could be done in template.css)
    $('.inserted-scale-separator', thisQuestion).css({
      'width': '5px',
      'background-color': '#FFFFFF'
    });
    $('thead .scale-1', thisQuestion).css({
      'background-color': '#8da6c1',
      'font-weight': 'bold'
    });
    $('thead .scale-2', thisQuestion).css({
      'background-color': '#a7bacf',
      'font-weight': 'bold'
    });
    $('tbody .scale-1', thisQuestion).css({
      'background-color': '#c0cedd',
      'font-weight': 'bold'
    });
    $('tbody .scale-2', thisQuestion).css({
      'background-color': '#dae2eb',
      'font-weight': 'bold'
    });
 
    // Insert a "Reset" button
    $('table.subquestion-list', thisQuestion).after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />');
 
    $('.resetQuestionButton', thisQuestion).click(function(e){
      $('input.radio', thisQuestion).prop('checked', false);
      $('input.radio', thisQuestion).prop('disabled', false);
    });
  });
</script>




Sample survey attached:

File Attachment:

File Name: limesurvey...9829.lss
File Size:18 KB

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: michaelji, Maverick87Shaka
The topic has been locked.
  • Maverick87Shaka
  • Maverick87Shaka's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 10 months ago #136098 by Maverick87Shaka
It's works! The code do what I need for our survey at all! I know probably it's not the bast way to do that but for the moment we have a solid base to start the survey.
Now I have to work to "style" the question, because I have multiple question with the same "structure", and at the moment with this code the table is "responsive", and I would like to "lock" the width of score column to make all the question with the same layout size, even if I have different sub-question sentence length.

From a "coding" prospective, there is a way to insert this javascript "structure" as a function, and "recall" this function on each question needed with a sample code like:
Code:
<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
       customArrayScale('{QID}');
   });
</script>
It's not really a "must", it's just to "concentrate" in one point the code of the function, to easy improve or edit all the question at the same time.
Should be better also from a performance prospective, I suppose!

Again thanks!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 10 months ago - 7 years 10 months ago #136129 by tpartner

From a "coding" prospective, there is a way to insert this javascript "structure" as a function, and "recall" this function on each question needed with a sample code like:

Yes, place this in template.js and then call it as above.

Code:
function customArrayScale(qID) {
 
  // Identify this question
  var thisQuestion = $('#question'+qID);
 
  // Assign column-specific classes
  $('table.subquestion-list tr', thisQuestion).each(function(i) {
 
    var scale = 1;
    $('> *:gt(0)', this).each(function(i){
      $(this).addClass('column-'+(i+1)+' scale-'+scale+'');
      $(this).attr('data-column', i+1);
      $(this).attr('data-scale', scale);
      if(i == 1) {
        scale++
      }
    });
  });
 
  // Listener on the radios
  $('input.radio', thisQuestion).on('click', function(e){
    $('input.radio', thisQuestion).prop('disabled', false);
    $('input.radio:checked', thisQuestion).each(function(e) {
      var thisCell = $(this).closest('td.answer-item');
      var thisScale = $(thisCell).attr('data-scale');
      $('td[data-scale="'+thisScale+'"]', thisQuestion).not(thisCell).find('input.radio').prop('disabled', true);
    });
  });
 
  // Insert scale headers and separator
  $('colgroup', thisQuestion).remove();
  $('.scale-1.column-1', thisQuestion).before('<td class="inserted-scale-separator"></td>');
  $('.scale-1.column-2', thisQuestion).after('<td class="inserted-scale-separator"></td>');
  $('table.subquestion-list thead', thisQuestion).prepend('<tr class="scale-headers">\
                                <td></td>\
                                <td class="inserted-scale-separator"></td>\
                                <th class="text-center scale-1" data-scale="1" colspan="2">Scale 1</th>\
                                <td class="inserted-scale-separator"></td>\
                                <th class="text-center scale-2" data-scale="2" colspan="2">Scale 2</th>\
                              </tr>');
 
  // Some styles (could be done in template.css)
  $('.inserted-scale-separator', thisQuestion).css({
    'width': '5px',
    'background-color': '#FFFFFF'
  });
  $('thead .scale-1', thisQuestion).css({
    'background-color': '#8da6c1',
    'font-weight': 'bold'
  });
  $('thead .scale-2', thisQuestion).css({
    'background-color': '#a7bacf',
    'font-weight': 'bold'
  });
  $('tbody .scale-1', thisQuestion).css({
    'background-color': '#c0cedd',
    'font-weight': 'bold'
  });
  $('tbody .scale-2', thisQuestion).css({
    'background-color': '#dae2eb',
    'font-weight': 'bold'
  });
 
  // Insert a "Reset" button
  $('table.subquestion-list', thisQuestion).after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />');
 
  $('.resetQuestionButton', thisQuestion).click(function(e){
    $('input.radio', thisQuestion).prop('checked', false);
    $('input.radio', thisQuestion).prop('disabled', false);
  });
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 10 months ago by tpartner.
The following user(s) said Thank You: Maverick87Shaka
The topic has been locked.
More
7 years 9 months ago #136502 by michaelji
This works to solve our problem. I posed this in a different thread, thanks for the solution.

I do have s tweak question for this design: As a user when I open/see this question for the first time, I have to press the Reset button in order to answer the question. Is there a way to have the questions pre-reset, when I first goto the question?
The topic has been locked.
  • Maverick87Shaka
  • Maverick87Shaka's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
7 years 9 months ago #136503 by Maverick87Shaka
This is really strange, with the same code when I load the survey first time I see all the question without any-selection done yet, so you can choose any answer without press reset button.
The topic has been locked.
More
7 years 9 months ago #136504 by michaelji
Is there or was there a different version of the export file? May I have an older version.

This is what It does for me :
limesurvey.itmisc.us/limesurvey/index.php/969829?lang=en
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose