Added Sticky Video

Functions/Add Social Media Link .md

@@ -0,0 +1,21 @@
+// This code allows you to add a hyperlink to an image in a Qualtrics survey.
+// My primary use case has been to create sharing buttons for social media platforms at the end of the survey.
+
+// ##### IMP ####
+// You'll have to use a URL shortner, if Qualtrics detects a social media site, it won't allow the image to load.
+// I've gotten it to work for ONLY Graphic Questions. Though they can be on the same page. If you find a way for other question types, please let me know.
+// I've also not been able to get the mouse pointed to change. Qualtrics' system settings keep overriding any CSS I add.
+
+// BOTH attributes need to added
+// "href" refers to the URL where you want the participants to go
+// "target : _blank" opens the link a new window. If you don't add this, the link opens in the same window and Qualtrics doesn't allow social media sites to load.
+
+Qualtrics.SurveyEngine.addOnReady(function () { // Didn't work on Qualtrics.SurveyEngine.addOnload
+	let QuestionId = "#" + this.questionId; // Get the Question ID
+	jQuery(QuestionId).wrap(
+		jQuery("<a>").attr({ 
+			href: "your-url-goes-here", 
+			target: "_blank", 
+		})
+	);
+});

Functions/Change Question Text.md

@@ -0,0 +1,26 @@
+// This script allows you to change the Question Text based on the choice made.
+// There were three choices in the qurestion, and I wanted to change the text of the question, based on what they clicked.
+
+Qualtrics.SurveyEngine.addOnload(function()
+{
+
+    this.questionclick = function(event,element){
+    //for a single answer multiple choice question, the element type will be radio
+    if (element.type == 'radio')
+    {
+        var choiceNum = element.id.split('~')[2];
+		if (choiceNum == 1) {
+			jQuery("#"+this.questionId+" .QuestionText").html("Please continue and click next when you are done."); // Changes the question text
+
+		} else if (choiceNum == 2) {
+			jQuery("#"+this.questionId+" .QuestionText").html("Please click next to exit or select the other choice if you would like to");
+
+        } else if (choiceNum == 3) {
+			jQuery("#"+this.questionId+" .QuestionText").html("Looking for alternate methods....");
+		};
+    };
+}
+
+
+
+});

Functions/Character Limit Reminder.md

@@ -0,0 +1,31 @@
+Qualtrics.SurveyEngine.addOnload(function()
+{
+    //Create a placeholder to display the reminder message
+    char_rem = document.createElement("p");
+    char_rem.setAttribute("id", "char_reminder");
+    char_rem.setAttribute("style", "color:LightGray;");
+	this.getChoiceContainer().parentNode.appendChild(char_rem);
+
+});
+
+Qualtrics.SurveyEngine.addOnReady(function()
+{
+	const qid = this.questionId;
+	document.querySelector("#QR\\~" + qid).oninput = function () {limited();};
+
+	function limited(){
+		curr_len = document.querySelector("#QR\\~" + qid).value.length; 
+
+        //Set the max_len as an embedded data field equal to maximum length in validation options 
+        max_len = "${e://Field/max_len}";
+        //Nothing will be displayed if the characters are less than 10
+        //If you want to always have the reminder, then delete the statement below and remove the if condition
+        reminder = "";
+		if(curr_len>10){
+			rem_len = max_len - curr_len;
+			reminder = rem_len + "/20 characters remaining";
+		}
+		document.querySelector("#char_reminder").innerText = reminder;
+	}
+
+});

Functions/Check sum dynamically via JS.md

@@ -0,0 +1,62 @@
+Qualtrics.SurveyEngine.addOnload(function () {
+	//Diables the next button at the start
+	// You can delete this if you are fine with the sum as being zero
+	this.disableNextButton();
+});
+
+Qualtrics.SurveyEngine.addOnReady(function () {
+	//Get the Question Id
+	const qid = this.questionId;
+	// Get the number of choices
+    n_choices = Qualtrics.SurveyEngine.registry[qid].getChoices();
+
+    const base_msg = jQuery("#"+qid+" .QuestionText").html(); 
+
+	// Detect a change in any of the choices
+	n_choices.forEach((item) => {
+		console.log("input detected");
+		document.querySelector("#QR\\~" + qid + "\\~" + item).oninput = function () {chk_sum();};
+	});
+
+	that = this;
+	function chk_sum() {
+		var max_sum = parseInt("${e://Field/max_sum}");
+		var current_sum = 0;
+		
+        padding_pre =  '<br> <a style="color:red;">';
+        padding_post = '</a>';
+        err_msg = "The total should be more than zero and less than " + max_sum + " to proceed";
+        
+		//Iterate over each of choices
+		n_choices.forEach((item) => {
+            curr_val = parseInt(document.querySelector("#QR\\~" + qid + "\\~" + item).value);
+            // Check for empty blocks
+			if (isNaN(curr_val)) {
+                if (document.querySelector("#QR\\~" + qid + "\\~" + item).value == "") {
+                    curr_val = 0;
+				} else {
+
+					err_msg = "Please enter only valid integer numbers.";
+				}
+            }
+            //Check for invalid characters
+            if (document.querySelector("#QR\\~" + qid + "\\~" + item).value.search(/\D/) != -1){
+                err_msg = "Please enter only valid integer numbers.";
+                curr_val = max_sum + 1;
+
+            }
+			current_sum += curr_val;
+		});
+        err_msg = base_msg + padding_pre + err_msg + padding_post;
+        
+		//Checks for zero and the value being more than zero and less than the max_sum
+		// If you are fine with zero then delete "current_sum >0 &&"
+		if (current_sum > 0 && current_sum <= max_sum) {
+			that.enableNextButton();
+			jQuery("#"+qid+" .QuestionText").html(base_msg);
+		} else {
+			that.disableNextButton();
+			jQuery("#"+qid+" .QuestionText").html(err_msg);
+		}
+	}
+});

Functions/Clear Text Entry Box.md

@@ -0,0 +1,17 @@
+Qualtrics.SurveyEngine.addOnReady(function(){
+
+    const qid = this.questionId;
+    n_choices = Qualtrics.SurveyEngine.registry[qid].getChoices().length;
+    // Set this according to where you are placing your text entry box
+    //This refers to the last choice, -1 to the second last choice etc....
+    text_choice = n_choices;
+
+    this.questionclick = function(event,element){
+        var selected_choice = element.id.split('~')[2];
+        if(selected_choice !=text_choice)
+        {
+            document.querySelector("#QR\\~" + qid + "\\~" + text_choice + "\\~TEXT").value = "";
+        }
+    }
+
+});

Functions/Complex Display Logic.md

@@ -0,0 +1,34 @@
+Qualtrics.SurveyEngine.addOnload(function () {
+	// Hide the question as soon as the page loads
+	this.getQuestionContainer().hide();
+
+	//Variable to decide whether to show the question or not. Initially false
+	show_answer = false;
+
+	//Create an embedded variable with all the valid choices using a seperator
+	// In this a comma "," is used
+	var valid_choices = "${e://Field/valid_choices}";
+	valid_choices = valid_choices.split(",");
+
+	//Get your entered choice. This is showning an embedded variable
+	// Which you can set based on your question type.
+	const entered_choice = "${e://Field/entered_choice}";
+
+	// Check if the entered choice is equal to any of the valid choices
+	valid_choices.forEach((item) => {
+		if (item.trim() == entered_choice) {
+			show_answer = true;
+		}
+	});
+
+	//Show the question, if the condition is met
+	if (show_answer == true) {
+		this.getQuestionContainer().show();
+	}
+
+	//Optionally you can add a condition to click the next button
+	// If you only have that one question on the page
+	if (show_answer == false) {
+		this.clickNextButton();
+	}
+});

Functions/Constant Sum Allow only integers.md

@@ -0,0 +1,22 @@
+Qualtrics.SurveyEngine.addOnReady(function () {
+	//Get the Question Id
+	const qid = this.questionId;
+	// Get the number of choices
+	n_choices = Qualtrics.SurveyEngine.registry[qid].getChoices();
+
+	const base_msg = jQuery("#" + qid + " .QuestionText").html();
+	padding_pre = '<br> <a style="color:red;">';
+	padding_post = "</a>";
+	err_msg = base_msg + padding_pre + "Please enter only valid integer numbers." + padding_post;
+
+	// Detect a change in any of the choices
+	n_choices.forEach((item) => {
+        document.querySelector("#QR\\~" + qid + "\\~" + item).oninput = function () {
+			if (document.querySelector("#QR\\~" + qid + "\\~" + item).value.search(/\D/) != -1) {
+				jQuery("#" + qid + " .QuestionText").html(err_msg);
+			} else {
+				jQuery("#" + qid + " .QuestionText").html(base_msg);
+			}
+		};
+	});
+});

Functions/Deselect Choices.md

@@ -0,0 +1,55 @@
+// 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
+// Working Demo: https://iima.au1.qualtrics.com/jfe/form/SV_3mJczLmUFE9c7L7
+
+
+// You'll need to first create a Deselect Button. 
+// If you have multiple such buttons on the same page, you'll need to change their ids
+
+
+
+// This for a single question. For Matrix type, find below
+
+<div>
+    <b>Click on the button to deselect your choices.</b><button id="Deselect1">Deselect Choices</button>
+</div>
+
+
+
+// Question JS
+Qualtrics.SurveyEngine.addOnReady(function () {
+	var qid_mchoice = this.questionId; //Get the Question Id
+	// Get the choices. This is needed as sometimes Qualtrics just goes crazy with choice numbers
+	all_choices = Qualtrics.SurveyEngine.registry[qid_mchoice].getChoices();
+
+	jQuery("#Deselect1").click(function () {
+		all_choices.forEach((item) => {
+			Qualtrics.SurveyEngine.registry[qid_mchoice].setChoiceValue(item,false);
+			});
+	});
+});
+
+
+
+
+// For Matrices
+// Add the button above as one of the statements
+Qualtrics.SurveyEngine.addOnReady(function(){
+    qid_matrix = this.questionId;
+    scale_points = Object.keys(Qualtrics.SurveyEngine.QuestionInfo[qid_matrix].Answers).length;
+
+    // Get the location of the Deselect Button
+    choices = Qualtrics.SurveyEngine.QuestionInfo[qid_matrix].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++){
+            Qualtrics.SurveyEngine.registry[qid_matrix].setChoiceValue(deselect_position,i,false);
+        }
+    });
+});

Functions/Hide Next Button for a short while.md

@@ -0,0 +1,18 @@
+// Hides the Next Button for pre-defined amount of time and then displays it.
+
+Qualtrics.SurveyEngine.addOnload(function()
+{
+
+    this.hideNextButton(); //Hide the question as soon as the page loads
+
+});
+
+Qualtrics.SurveyEngine.addOnReady(function()
+{
+
+	var delayTime = 6000 //This is the time of delay
+    var that = this;
+    setTimeout(function(){that.showNextButton();}, delayTime); // Function to show the next button
+
+
+});

Functions/Hide Question for a short while.md

@@ -0,0 +1,17 @@
+// Hides the Question and Choices for pre-defined amount of time and then displays it.
+
+Qualtrics.SurveyEngine.addOnload(function()
+{
+    this.getQuestionContainer().hide(); // Hide the question as soon as the page loads
+
+});
+
+Qualtrics.SurveyEngine.addOnReady(function()
+{
+
+	var delayTime = 6000 //This is the time of delay
+    var that = this;
+    setTimeout(function(){that.getQuestionContainer().show()}, delayTime); // Function to show the question
+
+
+});

Functions/Highlight Selected Choices.md

@@ -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";
+            });    
+    }
+});