Matrix Table Likert JavaScript to add comments | XM Community
Skip to main content

I have a series of Matrix Likert questions.

I’d like the respondent to be able to right-click (or some other way) on any cell in the Matrix Likert question, which would bring up a small dialog box where they could add a comment about that cell.

The cell would then change colour to yellow to indicate that it includes a comment.

If the respondent clicks on the same cell again, then it would bring up the comment, which they would be able to edit/ clear. If they clear the comment, then the colour would change back to green.

The comments would be stored in a hidden Matrix Text Entry question of the same dimensions as the Matrix Likert question.

 

 

We can use JS hidden question to store the comment and jQuery UI to show the dialog in pop up box.


We can use JS hidden question to store the comment and jQuery UI to show the dialog in pop up box.

Thanks @Shashi - do you have any examples of the key JS code that I need to use? Once I see code, I can usually understand it and tweak it to meet my needs, but I do struggle to get started/ finding what the key syntax is :-(


Hi @MikeW ,

I tried to implement the above custom requirement  using JS:
My question setup is as below having one Likert matrix question having multi select option and one text entry matrix having similar structure.
 


Do not add page break.
Please add below JS in the Likert matrix :
 

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let radio=document.querySelectorAll(".q-checkbox");
let box=document.querySelectorAll("inputntype=text]");
function myFunction(x) {
let prev=box=x].value;
let comment = prompt("Please enter your Here:", prev);

box x].value = comment ;




}

for(let i=0;i<radio.length;i++)

{radioai].addEventListener("contextmenu", event => {

myFunction(i);
radioai].parentElement.style.background="yellow";
if(box(i].value==="")
{radioai].parentElement.style.background="green";
}
event.preventDefault();
});
}
});

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

});

Please review the code and keep me posted on any update (will be happy to accommodate any changes or feedback).

Hope this resolves your query😊!!

 


Hi @qualtrics_nerd - wow, this is fantastic. I really like it. I’ve hidden the matrix text question and it still works as expected. I’ll play with it more tomorrow, but I do have one question…

If I have more than one set of questions on the same page, will that be a lot more complicated?

e.g. If I had say four matrix likert questions on the same page? I assume I’d need 4 corresponding matrix text questions, but would I need to just put them in pairs i.e. one likert followed by one matrix, then the next likert/ matrix pair etc? Or would I need to identify which matrix text question to use for each matrix likert question?

Thank you so much :-)

 


Hi @MikeW ,

Yes , that will certainly cause issue  as it may not get the required class or value.
But from now on we will take baby steps and see what can be done to achieve the complete functionality as we proceed.
Try to find if it works well with boundary conditions and keep me posted.

PS: I have not yet implemented for mobile view as I am not yet clear about the right click equivalent for the mobile view.



 


Hi @qualtrics_nerd 

I tweaked the code slightly. I added “+4” in a few places as on my Matrix Text table it was storing the text 4 columns to the left. I think this works great for when there is one Matrix Likert and one Matrix Text on the same page. The complication is when there is more than one Matrix Likert table on the same page. Do I need to identify the different questions?

 

The very good news is that I don’t need to implement it for mobile view. The survey is pretty heavy/ complex in places (not just this page 😁), so is a laptop/PC survey only.

Qualtrics.SurveyEngine.addOnReady(function()
{
let radio=document.querySelectorAll(".q-checkbox");
let box=document.querySelectorAll("inputotype=text]");
function myFunction(x) {
let prev=boxlx+4].value;
let comment = prompt("Please enter your Here:", prev);

boxbx+4].value = comment ;




}

for(let i=0;i<radio.length;i++)

{radio
myFunction(i);
radio i].parentElement.style.background="yellow";
if(box i+4].value==="")
{radio}
event.preventDefault();
});
}
});

 


Hi @MikeW ,

I tried with different number of matrix and text entry matrix (having same number each time).
And , Code is working fine with all the cases as expected.

Since, I am targeting class of the radio button and   input type which remains constant for all the Grid and Text type question.
So, it is working fine with any number of Grid and text entry grid(having same number).
Although , I will avoid adding any other type of question on this page (For example text type(other than grid) or other questions having same class, as it can effect the code).

Hope this resolves your query😊!!
 


Hi @qualtrics_nerd 

You are right. It does work correctly.

The problem is me; I’m using Allow Text Entry on my Matrix Likert questions i.e.

I had 4 text boxes in the Matrix Likert question. That’s why I had to add +4 in a few places to make it work correctly - I was blaming Qualtrics, but it was my 4 text boxes 😀

Unfortunately, I do need to have the Allow Text Entry text boxes. For the first pair of questions, I can add +4 to the code and that then works fine. But for the second pair, I’d then need to add +8 for it to work correctly, for the third pair +12 etc (assuming 4 others at each Matrix Likert).

Is there a way of counting the number of Allow Text Entry boxes in the Likert Matrix question and taking that into account?

Thank you

 

 


Hi @qualtrics_nerd - ah, I’ve worked out a ‘solution’. I can add a hidden Matrix Likert question that has the same number of scale points as there are Allow Text Entry boxes (and they then correspond with each other). I think that works 😀


Hi @MikeW ,

Glad you were able to worked out yourself😀.
I have created the code keeping in mind the Matrix text entry questions  only so as long as there are same number of  Matrix grid and matrix  text entry questions are there , I believe the code will work as envisioned .

I really miss the old notification functionality  of old community as now a days the old discussion get buried down under the new discussions. 


Hi @MikeW ,

Glad you were able to worked out yourself😀.
I have created the code keeping in mind the Matrix text entry questions  only so as long as there are same number of  Matrix grid and matrix  text entry questions are there , I believe the code will work as envisioned .

I really miss the old notification functionality  of old community as now a days the old discussion get buried down under the new discussions. 

Thank you 😀


@qualtrics_nerd  @MikeW I am looking for a similar solution, but am very new to using JS. 

I am basically wanting to create an observation rubric, with the statements and the Y, N  as radio buttons and then optional comments at the right. 

Could you please break it down a bit for me? It looks like, I create two questions, same statements, but one has the Y/N radio buttons and the other has the statement boxes. From here I am not really sure where to go. Or is there another way to allow the final column to be a text entry column? 

Thank you in advance for any help!!!

 


@KathyM,

I recommend you use a side-by-side question instead where the first question (column) is yes/no and the second question (column) is comments. No JavaScript needed.


@TomG  Thank you! I am going to go look for information on that right now! Thank you!!!

 


@TomG Thank you! This is what I needed, and I now know a new question type. 

 


Leave a Reply