Custom Code | XM Community

Custom Code

Discuss custom code (HTML, CSS, JavaScript, etc.) solutions, best practices, & more.

  • 7,132 Topics
  • 22,342 Replies

7132 Topics

C
Level 2 ●●
CarolinedaviesLevel 2 ●●
asked in Custom Code

Custom Validation for Matrix Constant Sum

Hello,  I need validation so that the sum of the percentages is 100% or “Don’t Know” is selected. I don’t see an option for summing the percentages in custom validation, so I think I need custom JavaScript but I am not a coder! Could someone please assist?  Thank you in advance! Caroline

6
A
Level 2 ●●
10 days ago
courtrc
Level 3 ●●●
courtrcLevel 3 ●●●
asked in Custom Code

Flatpickr date not storing data with survey

As a follow up to my last post:I got it to display beautifully, but the question doesn’t seem to be storing the date value after completing the survey. I’m not sure if somehow it has to do with using the Simple Layout option for a Theme or what…  I even commented out some stuff in case that was the reason, but it doesn’t seem to make a difference in whether it gets stored or not.I even tried to store it as embedded data prior to submitting the survey and that didn’t make a difference either.I don’t know how else to troubleshoot the data value not getting saved/stored with the survey response…. Please send help.

18
courtrc
Level 3 ●●●
11 days ago
T
Level 3 ●●●
Tata CLevel 3 ●●●
asked in Custom Code

Add an "NA" option to star rating question

Hello everyone, I hope you are doing good :)Does anyone know how can I add a “N/A” option to a 5 star rating question :   Thanks in advance for your help !

28
M
11 days ago
T
tamirlab
asked in Custom Code

Using loop & merge for video clips

Hi everyone! I’m trying to create a survey where i ask the same question for 40+ different video clips. I tried using the loop & merge option after uploading the clips to my qualtrics library (videos are MP4), but for some reason the video doesn’t play. it appears like this:Here is the loop & merge menu:and this is the question’s HTML:  I’ve also tried to remove the source tag from the video link but it didn’t help.. Any suggestions? help would be very appreciated!

2
A
Level 7 ●●●●●●●
12 days ago
G
Level 1 ●
GlennDMLevel 1 ●
asked in Custom Code

using space to advance, autoadvance problem

Hi!For my survey in Qualtrics, I have the following design:A word is shown on the screen (text/graphic question) at a certain point, participants need press “space” to advance to the next question (text entry), the advance button is hidden. Upon the same space press, the reaction time is registered (the time the word was shown on the screen until space was pressed) On the next page, the normal advance button is used instead of the space bar (so space shouldn’t work) On the next page, the cycle restarts and a new word is shown on the screenI have tried the following code for the spacebar press (advancing) and the reaction times:Qualtrics.SurveyEngine.addOnload(function () {     let timeOnLoad = new Date().getTime(); var that = this; Event.observe(document, 'keydown', function keydownCallback(e) {  var choiceID = e.keyCode;  if (choiceID) {   let RT = new Date().getTime() - timeOnLoad;    Qualtrics.SurveyEngine.setEmbeddedData("RT1", RT);   console.log(RT);   Event.stopObserving(document

1
G
Level 1 ●
14 days ago
G
Level 1 ●
GlennDMLevel 1 ●
asked in Custom Code

using space to advance - autoadvance problem

Hi!For my survey in Qualtrics, I have the following design:A word is shown on the screen (text/graphic question) at a certain point, participants need press “space” to advance to the next question (text entry), the advance button is hidden. Upon the same space press, the reaction time is registered (the time the word was shown on the screen until space was pressed) On the next page, the normal advance button is used instead of the space bar (so space shouldn’t work) On the next page, the cycle restarts and a new word is shown on the screenI have tried the following code for the spacebar press (advancing) and the reaction times:Qualtrics.SurveyEngine.addOnload(function () {     let timeOnLoad = new Date().getTime(); var that = this; Event.observe(document, 'keydown', function keydownCallback(e) {  var choiceID = e.keyCode;  if (choiceID) {   let RT = new Date().getTime() - timeOnLoad;    Qualtrics.SurveyEngine.setEmbeddedData("RT1", RT);   console.log(RT);   Event.stopObserving(document

2
G
Level 1 ●
14 days ago
C
Level 1 ●
CindyJLevel 1 ●
asked in Custom Code

Retreaving Embedded Data using Javascript

I’m trying to retrieve an embedded value that I set from using a block of web service to query from a site using javascript. But I keep running into an error. Namely, I’m trying to use javascript to assign that value to a constant. Let’s say my embedded data field is named “__js_MyData” in the web service block. I tried doing:const data = “${e://Field/__js_MyData}”; const data = Qualtrics.SurveyEngine.getJSEmbeddedData('MyData');But while the 1st approach gives me an error that says there is a syntax error, the 2nd approach just has the value data undefined.I’m sure the embedded data is stored, since if I just use piped text in my questions, it displays the right content. Has anyone tried to do this before? Is there a way to do this? 

2
C
Level 1 ●
14 days ago
B
benji7000
asked in Custom Code

Question Javascript doesn't work when I move it into a new survey

Hi everyone, I have the JS below in a question and it works fine in the original survey, but when I move the question into another survey, the Javascript still shows up in the survey builder but it doesn’t work in preview. Qualtrics.SurveyEngine.addOnload(function(){    /*Place your JavaScript here to run when the page loads*/});Qualtrics.SurveyEngine.addOnReady(function() {        var text_placeholder = 'Good things or people you can feel grateful about, and why.'        jQuery("#question-"+this.questionId+" textarea").attr("placeholder", text_placeholder);    });Qualtrics.SurveyEngine.addOnUnload(function(){    /*Place your JavaScript here to run when the page is unloaded*/}); Thanks for your attention,Benji

3
Deepak
QPN Level 8 ●●●●●●●●
15 days ago
J
JvG
asked in Custom Code

JavaScript Multiple Price List Question

I have a multiple price list question in Qualtrics. The question type is a matrix table and the matrix type is bipolar. I  have a list of choices where the respondents first have to choose between 10 cents or the product, then between 20 cents or the product and so on until 2 euro and the product. This looks like this: "The product" or "€0.10",  "The product" or "€0.20", "The product" or "€0.30", ... and so on until "The product" or "€2.00". So 20 rows in total. QID16 is the question ID. I want to edit the JavaScript to make sure only 1 switching point is possible and to make sure that when the respondent chooses for the money, the rest of the following choices will be automatically also for the money. So when the respondent chooses for the product for the first row, nothing happens, but when the respondent chooses for the 1 euro in the 10th row, all subsequent rows will be automatically selected for the money. Also when, for example, the responder is inconsistent and then wants to sel

3
M
15 days ago
M
MariaLN
asked in Custom Code

How to implement a multiple price list?

Hi, I am trying to implement a multiple price list type of question into Qualtrics. Participants make a series of binary choices between Option A and Option B, where in each row these options are labeled differently. I have not found a question type on Qualtrics that allows me to implement this sort of thing, but maybe I am missing something. In addition (and in an ideal world), I would also be able to implement a unique switching point. This means that participants choices cannot go back and forth between option A and option B, and I force this. I am not fluent in js, nor do I know how exactly Qualtrics objects are named, so I am struggling a bit to think this through. I attached an example of what this sort of question looks like.  Thanks in advance! 

3
M
15 days ago
V
Level 1 ●
VFF_27Level 1 ●
asked in Custom Code

force response and auto-advance option

I need to include in my survey some questions that will auto-advance after a specified amount of time (20 seconds). However, the questions with timer are mandatory, in the sense that I want the participant to provide an answer before moving to the next page within this 20 seconds. However, if the participant has not provided an answer in the 20 second, I want to move on to the next question even without an answer. Currently, this is not possible because with mandatory question, even if the timer has expired, the survey does not advance to the next question, but it restarts the count down so that the participant has all the time she wants to reply. Do you have any suggestion on how to do it? Qualtrics support suggested require response but I’m not satisfied as the participant can go on even without answering. Also, I don't want to delay the visibility of the submit button, as participants should be free to advance as soon as they have answered the question.I thought about a javascript t

6
RickB
Level 3 ●●●
15 days ago
M
mkelly9
asked in Custom Code

Survey progress bar with randomized blocks

Hi all,I currently have a project with four randomized blocks. The progress bar does not accurately reflect real progress, stagnating once it reaches the randomized section. Is there anyway I can create my own custom progress bar so it accurately reflects survey progress?

0
M
16 days ago
C
cs0skr
asked in Custom Code

Accessing the values selected in a matrix question in a later question

I have a matrix question (QID288) - there are 5 rows (A,B,C,D,E) and 6 columns (1,2,3,4,5,-) - it is a radio button matrix so that each of the lettered rows can only have one column selected.In a later question I was to access the selections that were made in the earlier matrix question.As far as I can see I can’t used pipetext.  From that I can see which lettered row had a selection made… but not which selection was made… matrixTablex = "${q://QID288/ChoiceGroup/SelectedChoices}";So that does not help… unless I am missing something. The other option seems to be to us a jquery.Something likeradioButton = jQuery(#QID288~1~1);to access A1.  But I cannot work out what the attributes would be that I should be… one suggestion seems to beradioButton.is(“:checked”); but I don’t get any results when I try that.I assume that the solution must be really simple.Maybe my javascript code is in the wring place… should it be in the addOnReady function?

4
AlonsoC
Administrator
16 days ago
S
S.Sport
asked in Custom Code

EQ-5D VAS Scale Not Working

Hi, I have downloaded the EQ-5D JavaScript from the EQ-5D website. When I import it into a standalone Qualtrics survey, the VAS slider question works fine. However when I copy this question into another survey on Qualtrics that includes some other questionnaires, the slider no longer appears. I cannot work out why! I am very new to coding so do not really understanding what the script is telling me! This is the JavaScript from the question: Qualtrics.SurveyEngine.addOnload(function(){    /*Place your JavaScript here to run when the page loads*/        var qobjid = this.questionId        jQuery("#"+qobjid).find('.QuestionBody').addClass("my_row");        jQuery("#"+qobjid).find('.ChoiceStructure').before('<ul class="newQuestionText vas-ul"><li>Please indicate on the scale how your health is TODAY.</li></ul>');        jQuery("#"+qobjid).find('.newQuestionText, .ChoiceStructure').wrapAll('<div class="left"></div>');        jQuery("#"+qobjid).find('.left

2
S
16 days ago
K
Level 1 ●
KatieALevel 1 ●
asked in Custom Code

Calculating age from participant-entered DOB

I have looked through many previous answers and have come to the conclusion that I know too little about Javascript so please be patient.I have found a suggestion to use luxon so have added this to a footer in Look and Feel<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script> I have set the following embedded fields at the start:AgeDateTimeAnd then after the parent has entered their child’s date of birth (it’s a field with a content check, and has to be DD/MM/YYYY) I have setBirthDate = ${q://QID1215690757/ChoiceTextEntryValue} I have looked at this code  Qualtrics.SurveyEngine.addOnPageSubmit(function() { var DateTime = luxon.DateTime; var birthDate = DateTime.fromFormat(jQuery("#"+this.questionId+" .InputText").val(),"MM/dd/yyyy"); var age = DateTime.now().diff(birthDate, ['months','days']).toObject(); Qualtrics.SurveyEngine.setEmbeddedData('age',age.months);});which is from this questionhttps://community.qualtrics.com/custom-code-12/calcu

12
K
Level 1 ●
16 days ago
A
azambuto
asked in Custom Code

How do I allow respondents to "click to enlarge" an image

I am doing an ad concept test and would like to give respondents the option of viewing the ad again on subsequent questions. Ideally i would do this with a "click to enlarge" thumbnail, but also fine with opening in a new window from a link. Any thoughts on how to best handle in the survey platform?

21
S
16 days ago
E
Elisabeth
asked in Custom Code

Javascript to check for duplicate answers across 3 questions

I have three duplicate questions that ask you to select a response. Due to accessibility issues, we are unable to combine these into one multiple answer question. The issue is that people select the same response in multiple questions. We would like the questions on the same page with no page breaks which removes the option to use carry forward. I was hoping someone may know some JavaScript that could be used to check these 3 questions for duplicates and give an error if there are any.  

3
RickB
Level 3 ●●●
16 days ago
L
LenaS
asked in Custom Code

Building a Q-Sort in Qualtrics

Hello all! I am about to start my dissertation and I am looking for some assistance in making a Q-Sort in Qualtrics. I wanted to inquire if anyone had a 'template' or 'code' already built that they would be willing to share, or if someone has experience with Q Methodology that would be willing to build the survey for me (payment can be negotiated). The Q-set would have around 40-60 items that would need to be sorted into about 5 categories (strongly agree to strongly disagree). The categories would need to be limited in the number of items that could be placed into it (e.g., the strongly agree category could only have 8 items). Thanks for your help! Warmly, Lena

13
A
17 days ago
I
IndyMuk
asked in Custom Code

Need help with Javascript code to get custom validation

Hi all - I’m trying to set up custom JS code to restrict the participants who respond to my survey. Specifically, I am trying to only have respondents that use firefox or safari (no chrome or edge). To do this, I created a text question at the start which just says “checking your browser”, and added the following JS code:Qualtrics.SurveyEngine.addOnload(function() {    var ua = navigator.userAgent;    var browserName;     if (ua.indexOf("Chrome") > -1) {        browserName = "Chrome";    } else if (ua.indexOf("Safari") > -1 && ua.indexOf("Chrome") === -1) {        browserName = "Safari";    } else if (ua.indexOf("Firefox") > -1) {        browserName = "Firefox";    } else if (ua.indexOf("MSIE") > -1 || !!document.documentMode === true) {        browserName = "IE";    } else {        browserName = "Unknown";    }     if (browserName !== "Safari" && browserName !== "Firefox") {        alert("Your browser is not supported. Please use Safari or Firefox. Please r

1
chackbusch
Level 4 ●●●●
17 days ago
J
JoaoFP
asked in Custom Code

Qualtrics Simple Layout - editing multiple choice for square grid with extra option on bottom

 Hi,I want to make a multiple choice question customized for mobile experience and to add a “Haven’t though about this” button. I relied on LLMs to get me halfway through, but they have all hit a wall. The code is below.Right now, it is looking like this, and nothing I can change is making the boxes not overlap. I wanted the boxes to look like the Net Promoter Score, and then add another big box on the bottom   My final goal is to have something htat looks like this in both Desktop and Mobile:   /* Custom CSS for square grid layout */.question .question-content .choice { display: inline-block; width: calc(8.8% - 0px); /* Adjust width to fit all 10 boxes in one line accounting for borders */ height: 30px; /* Adjust height as needed */ background-color: #f0f0f0; /* Gray background */ margin: 0; /* Remove margin */ padding: 0; /* Remove padding */ text-align: center; line-height: 60px; /* Vertically center text */ border: 1px solid #ccc; /* Border color */ bo

0
J
18 days ago
A
Level 1 ●
aabanLevel 1 ●
asked in Custom Code

Convert DOB to Age

Hi there, I have a recruitment survey. One of the questions is “When were you born?” It’s a text entry question in this date format (MM/DD/YYYY). Does anyone know how I can convert this answer into an age? Thanks in advance!

5
B
18 days ago
C
Clemens
asked in Custom Code

Using Javascript to controll customer validation in different questions.

Hi!I’m creating an assesment and audit tool with qualtrics with 500+ question items. Each participant has only to answer a few of these questions but they have always the same question type: “Yes”, “No”, “not appliciable” and an open text field, which is mandatory if “not applicable” was selected. All questions are mandatory. The question typ is a side-by-side-question.In the moment I´m controlling the validation via custom validations (clicking it together for each question). It´s a huge effort, but a way to build a solid solution. Thinking about changes is a nightmare.But I thought about a solution which is capable to control the validation for all of the questions at a central point and thought about JS with a global variable. I tried different approaches with ChatGPT, but I was not capable to implement the code correctly. Problems were the right question option IDs, I think. And it was also a solution without a central variable, just using the same code.Can anybody give me an examp

1
C
18 days ago
J
Level 2 ●●
jinxLevel 2 ●●
asked in Custom Code

Can't find source of JavaScript conflict when two chunks apply to next button

This is a weird one. I had custom js in a loop and merge to create an early exit option in place of the usual back button (since back button is disabled in survey anyway). It’s been working great. I want to add code to hide the next button until the video on p1 (of the 2p loop and merge block) has reached the end. I found code in the forums here and got it working on its own in a test survey. Then I added in the early exit bits into the test survey and it worked great. But when I copied over the newer code into my real survey (which has lots of display logic, quotas, etc), the exit early worked but the continue button never appeared.Tried it in three different branch blocks and had the same result. Imported the block from my test survey to the beginning of the real survey and that block worked, but the later branch still didn’t. I re-copied and pasted the code in case I’d accidentally cut off a character or added a space or something, but no change. I can’t for the life of me figure ou

1
J
Level 2 ●●
18 days ago
ManfredBM
Level 5 ●●●●●
ManfredBMLevel 5 ●●●●●
asked in Custom Code

Change wording of certified questions

Hi,for our annual Employee Engagement survey we are using one of the guided solutions (EX25) with Qualtrics’ certified questions.For two questions, we would like to slightly adapt the question wording (without changing the meaning of the question!).For certified questions it is unfortunately not possible to chance question wording, unless you decouple the question (which has some other negative implications). Although I understand the reason, why the platform limits the changeability of question wording (e.g. to ensure the valitity of benchmarking), I still would like to adapt the wording a little bit - to better reflect specific terms and wordings used in our industry. Is there any workaround for changing the question wording of certified questions? On the question itself, I am not allowed to use JS. But I could add another blank question on the same page, which would hold the JS code.  

2
ManfredBM
Level 5 ●●●●●
18 days ago
W
WyldeBlue
asked in Custom Code

Short bit of custom code failing with Unexpected token error

Hi there. I’m in a bit over my head and we don’t have anyone really skilled in Java on staff with whom I can consult, so I was hoping a generous someone out there in the community might be able to spot what I’m doing wrong. I have four fitness variables that are calculated from the values entered in various survey questions. The range of the numerical scores for those variables will correspond to one of three risk levels: green, yellow, and red. I am trying to create a simple dynamic display so that the respondent’s numerical score appears in the same font color and background color as the legend below it--just to aid in readability and visual appeal. But I can’t seem to get the syntax down well enough to get the proper colors showing for the proper scores. Is there some sneaky single or double quote or apostrophe vs quotation mark that I’m missing, or is there something else more complex at work here? Thanks in advance for your time and scrutiny! - Jason ******************************

1
Deepak
QPN Level 8 ●●●●●●●●
19 days ago

Motivational Playlist

Terms & Conditions