Custom Code for Matrix question custom validation for set number of items for each individual column | XM Community
Solved

Custom Code for Matrix question custom validation for set number of items for each individual column

K

Can anyone help me write a custom code for the following matrix question (I am a complete novice at write Java codes)?
There are 186 items in the rows, and three choices. I would like respondents to only pick 10 items for each of the 3 different columns. Everytime they choose more or less than 10, I want an error message to pop up that directs them to the exact column that needs their attention (and ambitiously lets them know if they need to pick more items or less to get to the 10).
Currently the custom validation (image attached) that I can set up only allows for one generic error message for all three columns together - which means the participants will have to manually go back and count each of the three columns to detect which one has more or less than 10 items selected.
Screen Shot 2020-06-24 at 12.54.39 PM.pngScreen Shot 2020-06-24 at 12.57.07 PM.png

icon

Best answer by rondev 25 June 2020, 22:57

View original

10 replies

SurajK
Rank
Userlevel 5
Badge +4

You cannot highlight individual column and display error for the respected column, instead you can combine the error message which will consider the text for all the columns or you will have to write the JS function to validate and display the error message for the respected column.

K

That's exactly what I am looking to do - write the JS function, but I do not know how to go about it since I do not know how to write one :(

rondev
Rank
Userlevel 7
Badge +22

In order to show the selection count of each column, you can follow below solution:
Paste the below HTML in the question HTML view at the end:


Column 1 selected count:0

Column 2 selected count:0

Column 3 selected count:0


Now, paste the below code in the Javascript of the matrix question:
var QID = this.questionId ;
 jQuery('#chkcount1').text(jQuery("#" + QID + " td.c4 input[type='checkbox']:checked").length);
  jQuery('#chkcount2').text(jQuery("#" + QID + " td.c5 input[type='checkbox']:checked").length);
  jQuery('#chkcount3').text(jQuery("#" + QID + " td.c6 input[type='checkbox']:checked").length);
   jQuery("#" + QID + " input[type='checkbox']").on("click", function() {

   jQuery('#chkcount1').text(jQuery("#" + QID + " td.c4 input[type='checkbox']:checked").length);
 jQuery('#chkcount2').text(jQuery("#" + QID + " td.c5 input[type='checkbox']:checked").length);
 jQuery('#chkcount3').text(jQuery("#" + QID + " td.c6 input[type='checkbox']:checked").length);

});

Ron Dev (DM for any request. Freelancer, surveysolution.in)
K

Oh wow! Thanks.
So just to be clear (since I am likely to mess this up if I fiddle with it), I just copy and paste and I do not need to add anything to this code for it to work for my matrix question?
Oh, and where in the JavaScript box should this particular code go (OnReady function or OnUnload function)?

rondev
Rank
Userlevel 7
Badge +22

https://www.qualtrics.com/community/discussion/comment/27148#Comment_27148You can just copy and paste as instructed above. But, if needed you can change the text "Column 1 selected count:", as per your requirement.

Ron Dev (DM for any request. Freelancer, surveysolution.in)
K

I am afraid it isn't working for me.
I have copied and pasted the HTML code in the end of the HTML question window, and then copied and pasted the JS as is in the JS window. However, it didn't do anything. So I am wondering:

  1. Do I have to change the "Column n" in the HTML to match the actual heading of the columns? - Tried that and still no change

  2. Should I keep the original custom validation that restricts the count to 10 for each category?

rondev
Rank
Userlevel 7
Badge +22

https://www.qualtrics.com/community/discussion/comment/27153#Comment_27153Can you post the screenshots of how/ where you have pasted the codes?

Ron Dev (DM for any request. Freelancer, surveysolution.in)
K

Screen Shot 2020-06-25 at 3.47.44 PM.pngScreen Shot 2020-06-25 at 3.46.43 PM.pngScreen Shot 2020-06-25 at 3.46.59 PM.pngHere they are. I have tried the HTML code both as is, and with the word "Column 1" replaced with the actual column wording. Didn't work. I do not have any custom validation set for this question since I felt the JS code is already taking care of it.

Really appreciate all your help!

rondev
Rank
Userlevel 7
Badge +22

Javascript is pasted incorrectly.
So now just replace everything in the javascript window with below code
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var QID = this.questionId ;
jQuery('#chkcount1').text(jQuery("#" + QID + " td.c4 input[type='checkbox']:checked").length);
 jQuery('#chkcount2').text(jQuery("#" + QID + " td.c5 input[type='checkbox']:checked").length);
 jQuery('#chkcount3').text(jQuery("#" + QID + " td.c6 input[type='checkbox']:checked").length);
   jQuery("#" + QID + " input[type='checkbox']").on("click", function() {

   jQuery('#chkcount1').text(jQuery("#" + QID + " td.c4 input[type='checkbox']:checked").length);
 jQuery('#chkcount2').text(jQuery("#" + QID + " td.c5 input[type='checkbox']:checked").length);
 jQuery('#chkcount3').text(jQuery("#" + QID + " td.c6 input[type='checkbox']:checked").length);

});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});
Here is the screenshot, how it should look:
image.png

Ron Dev (DM for any request. Freelancer, surveysolution.in)
K

It worked it worked! thank you so much!


Leave a Reply


Terms & Conditions