Disable Corresponding Row Option - Array by Column

More
1 month 3 weeks ago #183893 by teracomp
In migrating from a version 2.x installation to 3.x, I've lost a critical function for our DISC survey using an Array by Column question type.

There are two screenshots attached: "not working" is from my current installation (v3.x). "working" is from my previous installation (v2.x).

The user is supposed to select an item which "Most" and "Least" represents them. Obviously, they are mutually exclusive, so the JavaScript code is supposed to disable the corresponding "Least" when a "Most" answer is selected and vice versa.

There are also two lss files attached.
> limesurvey_survey_186194.lss is not working (Version 3.16.0+190225)
> limesurvey_survey_451344.lss is working (Version 2.72.3+171020)

As a bonus, the rows are shuffled with another piece of JavaScript. This portion is definitely working, so I am completely confident that the JavaScript code is deployed and firing. (To make sure, I temporarily added a console.log statement after the var thisQuestion declaration.)

Here's the JavaScript that is part of the theme's custom.js:
/******************************************
 * Begin DISC manipulation script
 ******************************************/
function shuffleArray(array) {
	for (var i = array.length - 1; i > 0; i--) {
		var j = Math.floor(Math.random() * (i + 1));
		var temp = array[i];
		array[i] = array[j];
		array[j] = temp;
	}
	return array;
}
 
$(document).on('ready pjax:complete',function() {
	// Identify this question
    var thisQuestion = $('.array-flexible-column:eq(0)'); 
 
	var elements = $('tr.answers-list', thisQuestion).detach().toArray();
	shuffleArray(elements);
	$('tr.answers-list', thisQuestion).remove();
	$.each(elements, function(i, el) {
		$('table.subquestion-list tbody:eq(0)', thisQuestion).append(el);
	});
});
 
 
$(document).ready(function() {    
 
// Identify the questions -- FOR DISC
  var thisQuestion = $('[id^=question]');
 
  // Listener on the radios
  $('input.radio', thisQuestion).on('click', function(e) {
    $('input[type="radio"]', thisQuestion).prop('disabled', false);
    $('input.radio:checked', thisQuestion).each(function(i) {
      $(this).closest('tr.answers-list').find('input[type="radio"]').not(this).prop('disabled', true);
    });
  });
 
   // Initial settings
  $('input.radio:checked', thisQuestion).each(function(i) {
    $(this).closest('tr.answers-list').find('input[type="radio"]').not(this).prop('disabled', true);
  });
});
/******************************************
 * End DISC manipulation script
 ******************************************/

In debugging this, my observation is that
$('input.radio', thisQuestion).on('click', function(e) {
is not appended to the [input:radio] buttons on the new server instance. As far as I can see, the old version does nothing to append this event and I've not been able to make that happen in code.

When I dug in deeper, I noticed the event "checkconditions" is not present in the new version:
Old:
<input class="radio" type="radio" name="451344X410X7685SM" value="D1" id="answer451344X410X7685SM-D1" 
onclick="checkconditions(this.value, this.name, this.type)">
New:
<input type="radio" name="186194X76X854SM" value="S1" id="answer186194X76X854SM-S1">

My question is this: did something change between versions?

Dave Phillips
Attachments:

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
1 month 3 weeks ago #183910 by holch
The template system has completely changed from 2.x to 3.x, so it is no surprise that the solution from 2.x doesn't work in 3.x.

I assume that you are running something like MaxDiff?
manual.limesurvey.org/Workarounds:_Quest...Versions_2.5_and_3.x

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
1 month 3 weeks ago #183922 by teracomp
I downloaded and tested the code with no success.

The MaxDiff code looks familiar but indicates it was tested on version 2.06. Is there a MaxDiff solution for version 3.x?

I appreciate the reference, but it looks like the same issue prevents this solution from working in version 3.x. The [input:radio] does not have an event attached to it, so corresponding radio buttons can be clicked.

$('input.radio', thisQuestion).on('click', function () {

Dave Phillips

Please Log in or Create an account to join the conversation.

More
1 month 3 weeks ago #183924 by holch
Did you follow my link? Even the link says specifically for 2.5 and 3.x.

And it says tested on 2.5. The link should jump directly there. But if not, scroll down a little bit further to the version for 2.5 and 3.x. Not sure if this solves your problem, but...

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
1 month 3 weeks ago #183926 by teracomp
Yes, I followed your link and downloaded the template and lss files then tested them. Unfortunately, this doesn't work.

Dave Phillips

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #183947 by tpartner
This will work in 3.x:

$(document).on('ready pjax:complete',function() {    
 
	// Identify the questions -- FOR DISC
	var thisQuestion = $('.array-flexible-column:eq(0)');
 
	function handleRadios() {
		$('input:radio', thisQuestion).prop('disabled', false);
		$('.disabled-item', thisQuestion).removeClass('disabled-item');
		$('input:radio:checked', thisQuestion).each(function(i) {
			var thisRow = $(this).closest('tr.answers-list');
			var otherRadios = $('input:radio', thisRow).not(this);
			$(otherRadios).prop('disabled', true);
			$(otherRadios).closest('td').addClass('disabled-item');
		});
	}
 
	// Listener on the radios
	$('input:radio', thisQuestion).on('click', function(e) {
		handleRadios();
	});
 
	// Initial settings
	handleRadios();
});

And, maybe something like tis in custom.css:

.disabled-item {
	cursor:not-allowed !important;
}

Working survey attached:

File Attachment:

File Name: limesurvey...1941.lss
File Size:22 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
The following user(s) said Thank You: holch, teracomp

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #183949 by teracomp
You are amazing! Thank you, sir!
Works perfectly!

Dave Phillips

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!