added deselect for matrices

JavaScript Files/Add header row to a matrix table.js

@@ -0,0 +1,12 @@
+Qualtrics.SurveyEngine.addOnReady(function()
+{
+    choice_table = this.getChoiceContainer();
+    //Numbering starts from 0. So the header is the 0th row, the first statement row 1 etc. 
+    //This will create an empty row above statement 4. YOu can change it accordingly. 
+    new_row = choice_table.insertRow(4);
+
+    //rows[0] refersto the header. 
+    // So this takes the header row fills up the empty row just created. 
+	new_row.innerHTML = choice_table.rows[0].innerHTML;
+
+});

JavaScript Files/Deselect Choices.js

@@ -1,10 +1,14 @@
 // This is JS to allow participants to deselect their choices on the single answer type questions
 // Courtesy mattyb513 Ref: https://www.qualtrics.com/community/discussion/1387/deselecting-a-radio-button
 
-// You'll need to first create a Deselct Button. 
+// You'll need to first create a Deselect Button. 
 
 
-// Add this to your Question Text
+// This for a single question. For Matrix type, find below
+
+// Add this to your Question Text. For styling. you can skip this if you want
+// If you just want a normal button with text, add some text at this location
+//  <button id="Deselect1"> ADD TEXT HERE </button> 
 <style> 
     #Deselect1 { 
         background-image: url("/Images/deselect_line.png");/* Add link to your image here */ 
@@ -32,3 +36,30 @@ Qualtrics.SurveyEngine.addOnload(function () {
 			});
 	});
 });
+
+
+
+
+// For Matrices
+
+Qualtrics.SurveyEngine.addOnload(function(){
+    qid = this.questionId;
+    scale_points = Object.keys(Qualtrics.SurveyEngine.QuestionInfo[qid].Answers).length;
+
+    // Get the location of the Deselect Button
+    choices = Qualtrics.SurveyEngine.QuestionInfo[qid].Choices;
+    deselect_position=[];
+    Object.keys(choices).forEach((item)=>{
+        if(choices[item].Text.includes("Deselect1")) deselect_position.push(item);
+    });
+    deselect_position = parseInt(deselect_position);
+
+    // Clear the choices
+    jQuery("#Deselect1").click(function () {
+        for(i=1;i<=scale_points;i++){
+            console.log(i);
+            console.log(deselect_position);
+            Qualtrics.SurveyEngine.registry[qid].setChoiceValue(deselect_position,i,false);
+        }
+    });
+});

JavaScript Files/Highlight Selected Choices.js

@@ -0,0 +1,40 @@
+Qualtrics.SurveyEngine.addOnReady(function () {
+
+    const qid = this.questionId;
+    const all_choices = Qualtrics.SurveyEngine.registry[qid].getChoices();
+    const base_colours = [
+        "rgba(238, 50, 70, 0.3)",
+        "rgba(245, 150, 30, 0.3)",
+        "rgba(255, 203, 8, 0.3)",
+        "rgba(178, 210, 53, 0.3",
+        "rgba(0, 165, 81, 0.3)",
+    ];
+
+    // Sets the desired colours initially
+    all_choices.forEach((item,index) => {
+        document.querySelector("#" + qid + "-" + item + "-label").style.background = base_colours[index];
+        document.querySelector("#" + qid + "-" + item + "-label").style.color = "#525252";
+        });
+
+
+    // Check if anyone clicks on the question
+    this.questionclick = function(){
+            // Get the currently selected choices
+            var selected_choices = this.getSelectedChoices();
+
+            // Restore all the colours to their original state
+            // This is done, so that the options appear the same in case someone unselects a choice 
+            all_choices.forEach((item,index) => {
+                document.querySelector("#" + qid + "-" + item + "-label").style.background = base_colours[index];
+                document.querySelector("#" + qid + "-" + item + "-label").style.color = "#525252";
+            });
+
+            // Give a different colour to the selected choices
+            // background is for the Box and color is for the text
+            // Change as desired
+            selected_choices.forEach((item) => {
+                document.querySelector("#" + qid + "-" + item + "-label").style.background = "DarkBlue";
+                document.querySelector("#" + qid + "-" + item + "-label").style.color = "Yellow";
+            });    
+    }
+});