Back to limesurvey.org

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 )

More
10 years 4 months ago #135894 by Maverick87Shaka
Create Dual Scale Array with condition ( disable radio of sub-question ) was created 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.
Partner Banner
More
10 years 4 months ago #135901 by Mazi
Replied by Mazi on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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
survey-consulting.com
offlinesurveys.com
Feel free to contact me by email for professional LimeSurvey support!
The topic has been locked.
More
10 years 4 months ago #135916 by Maverick87Shaka
Replied by Maverick87Shaka on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago #135926 by tpartner
Replied by tpartner on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago #135977 by Maverick87Shaka
Replied by Maverick87Shaka on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago #136034 by Maverick87Shaka
Replied by Maverick87Shaka on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago #136058 by tpartner
Replied by tpartner on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.48 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.
More
10 years 4 months ago #136098 by Maverick87Shaka
Replied by Maverick87Shaka on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago - 10 years 4 months ago #136129 by tpartner
Replied by tpartner on topic Create Dual Scale Array with condition ( disable radio of sub-question )

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: 10 years 4 months ago by tpartner.
The following user(s) said Thank You: Maverick87Shaka
The topic has been locked.
More
10 years 4 months ago #136502 by michaelji
Replied by michaelji on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago #136503 by Maverick87Shaka
Replied by Maverick87Shaka on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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
10 years 4 months ago #136504 by michaelji
Replied by michaelji on topic Create Dual Scale Array with condition ( disable radio of sub-question )
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.
More
10 years 4 months ago #136505 by michaelji
Replied by michaelji on topic Create Dual Scale Array with condition ( disable radio of sub-question )
I tried it again in Chrome, and it let me select one answer, but then it locks out the entire question and I cannot make the second selection. I then have to reset to answer both questions, if that helps.
The topic has been locked.
More
10 years 4 months ago - 10 years 4 months ago #136521 by Maverick87Shaka
Replied by Maverick87Shaka on topic Create Dual Scale Array with condition ( disable radio of sub-question )

michaelji wrote: I tried it again in Chrome, and it let me select one answer, but then it locks out the entire question and I cannot make the second selection. I then have to reset to answer both questions, if that helps.

You're using the "function" way or you are writing the code inside each question?
( actually I've tested only with code inside each questions, I haven't try yet the "function" way to do this! )
Last edit: 10 years 4 months ago by Maverick87Shaka.
The topic has been locked.
More
10 years 4 months ago #136543 by michaelji
Replied by michaelji on topic Create Dual Scale Array with condition ( disable radio of sub-question )
I am using the code inside the question.
Additional information: I found out that if I select and answer from the second column, I can then answer the first column, but if I choose an answer from the first column, then I cannot answer the second column without reset answer and then the group can be answered.

Also, is there a way to not use or hide the extra column "No Answer"? It will be distracting to the test takers.
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