Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,317 Topics
  • 23,024 Replies
7317 Topics
D
Level 1 ●
DKICMLevel 1 ●
asked in Custom Code
Javascript to pre-select answers not working with matrix table

Hi all -I’m using javascript to preselect answer options based on embedded data in multiple choice questions. @ahmedA gave me great tips on using const choices when I was having some issues there. Now I am struggling with how to set it up for matrix questions. See the question and code below - nothing is pre-selecting. Any advice very appreciated!    const choices = this.getChoices();    if ("${e://Field/ESGFirm}".includes("Yes")) this.setChoiceValue(0,0,true);    if ("${e://Field/ESGFirm}".includes("No")) this.setChoiceValue(0,1,true);    if ("${e://Field/ESGPortfolio}".includes("Yes")) this.setChoiceValue(1,0,true);    if ("${e://Field/ESGPortfolio}".includes("No")) this.setChoiceValue(1,1,true);  

422
D
Level 1 ●
10 months ago
G
Level 2 ●●
gsheppardLevel 2 ●●
asked in Custom Code
Remove Margin left and right from single question

I have a question that is a text/graphic that is being created from an embedded link. I want this question to be able to extend to the edge of the screen. Below this there will be other open end and single select answers that I want to stay in the current location (not extending out). I found this code from another thread that works for the entire survey when entered in the CSS, but I don’t want it to do all questions..Skin .SkinInner {width: 100% !important;max-width: 100% !important;}I also tried putting javascript in with no success:Qualtrics.SurveyEngine.addOnload(function(){ jQuery("#"+this.questionId).find('.SkinInner').css("max-width", "100% !important");}); Here is the link to the other thread:https://community.qualtrics.com/custom-code-12/how-to-remove-left-and-right-margins-in-qualtrics-15412

1548
G
Level 2 ●●
10 months ago
C
Level 1 ●
corinallyLevel 1 ●
asked in Custom Code
Issue with Esri ArcGIS JS SDK in Qualtrics Survey - Map Not Rendering

Hello Qualtrics Community,I am experiencing a challenge integrating the Esri ArcGIS JavaScript SDK into a Qualtrics survey question. The goal is to allow users to search for an address using the Esri map widget within the survey.Following the Esri tutorial for searching an address (https://developers.arcgis.com/javascript/latest/tutorials/search-for-an-address/), I've added the necessary Esri CSS and JS links to the header of my survey:<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.28/"></script>Additionally, I've implemented the map widget through JavaScript in the addOnload function and provided an HTML container for the map in the question text:function addMap() { console.log("before require"); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/widgets/Search", ], function (esriConfig, Map, MapView, Search) { console.log("setting api key"); esriConfig.apiKey

881
C
Level 1 ●
10 months ago
BetterB
Level 2 ●●
BetterBLevel 2 ●●
asked in Custom Code
How do I use embedded data to calculate tenure based on the response date?

Hi All! I am looking to calculate tenure (based on embedded data coming from SFDC) for a customer that responds to a survey. The format of the date is Year-Month-Day. I don’t have a ton of experience with custom coding. Any help or guidance would be greatly appreciated!

1195
TomG
Level 8 ●●●●●●●●
10 months ago
A
adpatter
posted in Custom Code
Sorry, an unexpected error occured. ***Survey has been inoperable for more than 2 months***.

*** Qualtrics engineers have been unable to give us a definitive explanation for why the survey is failing.***The Qualtrics server has been responding with an error on the submission of some of our survey forms. This is an example of what is presented to the user of the survey:Reproducing the error shows that the server is responding with a 500 Internal Server Error HTTP response when we click the Save and Continue button:Further, the browser inexplicably cancels XHR requests (this is sometimes caused by improperly configured HTTP headers sent by the server):This error has prevented us from distributing our survey to research subjects. We have been in correspondence with Qualtrics Support regarding this issue; however, they have been unable to give us a definitive reason for the error. Qualtrics support has provided guesses that the error may be a result of too much display logic, JavaScript, or that our survey has too many questions. They can't tell us which display logic or JavaS

372710
L
10 months ago
M
Level 1 ●
MA1Level 1 ●
asked in Custom Code
Speech to text code

Hi, I am wanting to add the option for participants to use a speech to text dication to answer some of the questions in my survey. Is there a way that I can do this? Thanks in advance, M

11755
Tom_1842
Level 8 ●●●●●●●●
10 months ago
S
Level 2 ●●
Super_RecognisersLevel 2 ●●
posted in Custom Code
Displaying images for specific time limit during MCQ question types.

Hi there,I am not sure if what I am asking is possible, but wanted to ask the community. I am putting together Multiple Choice Questions (MCQs) as trials that have two key parts:An image (this will be in the Question test)MCQ of two answers (same/different)However, for this trial, I am looking to have the image only displayed for a specific length of time (e.g., 5 seconds), but participants can take as long as they like to answer the question itself.So, for instance, if a participant was to go onto the trial, the image is displayed for 5 seconds only, but participants do not have a time limit to actually answer the question. Therefore, a participant is able to respond to the MCQ during the 5 seconds the image is displayed, and after the image has disappeared. Is this something that is possible in Qualtrics using custom code? I know there is auto-advance with a timing question, but this would mean that the image display and MCQ would need to be two separate questions, rather than one. P

1478
B
10 months ago
D
Level 1 ●
DKICMLevel 1 ●
asked in Custom Code
Need help with java to use embedded data to pre-fill multiple choice questions

Hi all -Very thankful for this community as I am working to set up a survey that has a lot of answers pre-filled from previous responses. I’ve already found and successfully employed a javascript code to pre-select multiple choice question options based on embedded data; however, I am now not able to duplicate it for some reason.The code I used was:Qualtrics.SurveyEngine.addOnReady(function(){    if ("${e://Field/InvestorRole}".includes("Majority")) this.setChoiceValue(1, true);    if ("${e://Field/InvestorRole}".includes("Minority")) this.setChoiceValue(2, true);  }); I think tried to use it for the next question, reolacing the items highlighted and adding rows as needed (and then, of course, going up in numbers on set choice value - 3, 4, etc.). Now… nothing. Any ideas? I’m very confused. I double checked embedded data was entered properly, no case differences, changes published, etc.

1893
D
Level 1 ●
10 months ago
P
pavdit
asked in Custom Code
Defining touchend/ click event for .track element of slider question

Hello all!I am new to Qualtrics and web design. Thanks to this forum, I was able to create my very first JS code for my slider questions. But! After four days of intense learning to use the coding I have now identified a problem that might devalue all my efforts so far.I was testing my survey on a smartphone touchscreen and noticed that when I scroll the page, it is very easy to accidentally select an answer on the slider axis. This can easily invalidate my data from respondents, as they might not notice that they touched the axis and selected a different answer. Alternatively, they might get frustrated and not finish the survey.I noticed that when I choose different type of question like multiple choice question, the behavior on touchscreen is as desired – finger does not trigger selection when touching the answer option and then moving the finger, also long press and release at the same position on the answer does not trigger selection. I believe these two parameters might define wha

640
P
10 months ago
L
lin789
asked in Custom Code
Button to toggle images

I would like to display an image along with a button or a series of buttons like in the screenshot below. When a button is clicked on (e.g., Increase Distance), the first image will change into a second image (to show the two corners have moved farther apart). Letting go of the button will show the first image again. I created something that works similarly using a slider question and JS, however, the slider comes with spatial and temporal information that might affect how people perceive the changes in the images. So I would like to use button clicks instead. Is there any way to create the toggles in Qualtrics? 

802
L
10 months ago
Nam Nguyen
QPN Level 8 ●●●●●●●●
Nam NguyenQPN Level 8 ●●●●●●●●
asked in Custom Code
Thousand seperator in Conjoint Pricing

Pricing Feature in Conjoint is very helpful but it’s posing a problem when the currency goes up higher and higher to million. There’s no thousand separator in it and it's hard to watch when my price goes up and there a lot of 0 staying together (for both survey and report). I want the price to be 499,000 rather than 499000Also, I can’t find a way to access the Conjoint block in survey editor to be able to make any display change with HTML/JavaScript.Anyone have any idea on how to custom edit this? Thanks in advance!

542
J
Qualtrics Employee
10 months ago
L
Lena Marti
asked in Custom Code
Tracking choice revision

When a user responds to a single/multiple choice question (more than one question per page), I want to record their first response and the subsequent ones in case they change their mind. I am interested in choice revision, but I am unsure how to be able to measure it on Qualtrics within an online quantitative experiment.I know the timing question records time until a first click is made and the time for the last click on a page, but I want to know which item was initially chosen on and additionally there are several questions on the same page. E.g. Participants should choose a product out of 4 options. By choosing they receive environmental feedback on overall purchase on top of the page. Based on this feedback they might change their initial choice and choose a different option out of the 4 options. Any help is much appreciated.

692
L
10 months ago
T
TaylorO
asked in Custom Code
How do i randomize a subset of text in a question?

Community,I am trying to create a list experiment that looks like the following: “Report how many of the items are true for you:A B C DHow many items are true for you?” The answer provided would be in a text box. I want to randomize the order of the items in the list without manually creating different questions. Is there a way to do this?

23214
T
10 months ago
M
mar_gia
asked in Custom Code
How to add additional statement columns to a matrix table?

Hi there, I haven't been able to find my answer by searching through the community, so I thought I'd post and ask to see if this is possible.I currently have a matrix table (see below) and I would like to have two columns for statements. For example, in the table below, I would like to have $600 and $0 as two separate columns instead of using a "|". I would also like to be able to add a title to each column instead of using the "|". Can anyone help me with some code for this? Thank you!

4562
J
Level 4 ●●●●
10 months ago
C
Christof
asked in Custom Code
Change display of Slider questions

I want to change the way how slider questions are displayed in my surveys. Standard the look is;Labels on top, then numbers, then sliderI want to change to;Labels on top, Slider in the middle then numbers on the bottom.Additionally I want to change the position of the "not rated" box to move below the slider.I was able to simulate my preferred view with "Inspector" in firefox. Now I need help how to bring the right coding in to the survey. What is the correct code? And where do I need to enter it in Qualtrics?Here is the adapted html code;                    1    2    3    4    5   6          Nicht gelöst     

1032
A
10 months ago
D
Level 1 ●
deeannLevel 1 ●
asked in Custom Code
Warning/pop-up message when answer is outside of numeric range of a text entry type question

Dear all,I have a text entry question type that asks for the age of the participant.It aims participants between 10 and 19 years old.Therefore whenever an answer is below 10 or greater than 19, I would like to have a warning/pop-up message.How can I achieve this? Thank you for your help.

412
D
Level 1 ●
10 months ago
M
Mcasenhiser
asked in Custom Code
Simple Layout JavaScript to Autoadvance on a single question (NPS)

We are launching a web intercept on our checkout page and want as few clicks as possible for clients to complete our survey.I’m looking for help with the JavaScript that would be needed for Simple layout to hide the next button on our NPS question and auto advance to our next question/page once a response has been selected.  The remaining questions in our survey are matrix and open text, so I only want to add autoadvance to this single question rather than the whole survey.

1691
Deepak
QPN Level 8 ●●●●●●●●
10 months ago
M
Mcasenhiser
asked in Custom Code
Simply Layout JavaScript to Autoadvance on a single question (NPS)

We are launching a web intercept on our checkout page and want as few clicks as possible for clients to complete our survey.I’m looking for help with the JavaScript that would be needed for Simple layout to hide the next button on our NPS question and auto advance to our next question/page once a response has been selected.  The remaining questions in our survey are matrix and open text, so I only want to add autoadvance to this single question rather than the whole survey.

511
Sachin Nandikol
QPN Level 6 ●●●●●●
10 months ago
A
APNatoli
asked in Custom Code
Format Matrix to Read Right to Left (flip matrix to have statements on left side)

I’m collecting data in a few different languages, and some of these languages are read from right to left (e.g., Arabic, Hebrew). I want to “flip” my matrix table to have my statements on the right-hand side of the matrix (see example below). I found some code (HERE) but I haven’t been able to get it to work. Can anyone help me get this code to work in my survey? (I don’t want this to affect the mobile version of the survey - the mobile version should still present as a single “matrix statement” with the response options underneath.)  

1582
TomG
Level 8 ●●●●●●●●
10 months ago
Q
qually
asked in Custom Code
Carry Forward Selections from 3 Questions

This is my first time ever playing with JavaScript. I am trying to capture through embedded data selected responses from multiple questions to then carry forward to another question. Something like this: Q1: select all of your favorite fruitsQ2: select all of your favorite vegetablesQ3: select all of your favorite candyQ4: [response options are only and all of those previously selected in Q1-Q3] Now rank your favorite foods. I’m getting this error: SE API Error:  TypeError: this.hideChoice is not a function. I also don’t seem to be capturing the question selections correctly either. Script startedVM1453:9 Selected Q1:  ['']VM1453:10 Selected Q2:  ['']VM1453:13 All selected choices:  (2) ['', '']

293
TomG
Level 8 ●●●●●●●●
10 months ago
W
WNewt
asked in Custom Code
Trying to capture Device Type and Browser Language as Emdedded Data

The two types of information I'm missing from the 'Meta Info Question' is the 'Device Type' (Desktop, Tablet, Phone) and the Browser Language. I was able to capture that information using JavaScript in another survey tool but we're transitioning to Qualtrics, and I've had no luck with so far.

151918
TomG
Level 8 ●●●●●●●●
10 months ago
S
Steven
asked in Custom Code
How to disable answer choices with JS

In my survey, a MC question has ten answer options each containing a short video. I want people to watch the videos one by one, and then select one video. To facilitate this interaction and to make sure they really watch the video, I would like to disable an answer option (i.e. grey out and make unclickable) until its video has been watched. I already have code in JS that registers when the video has been watched, but how do I disable and enable answer options? I have seen posts on how to hide answer choices, but that is not what I am going for here. Thanks in advance.

3864
H
10 months ago
W
Wen
asked in Custom Code
Highlight question with the text from previous piped text

Hello!I am trying to create a highlight question with the text coming from the displayed choice of a previous question. I have learned a lot from the community and figured out the basic logic is to first make a placeholder in the highlight text and then replace it with the piped text. But I have no previous experience with javascript and just tried to make some code that could be totally wrong (not working).I was wondering if there is anyone who could help me with it. Thanks a lot!Qualtrics.SurveyEngine.addOnload(function(){ var text1 = "${q://QID2/ChoiceGroup/DisplayedChoices}"; var elems = document.getElementsByClassName('HLTextWord'); jQuery("#"+this.questionId+" span.HLTextWord").replace( elems,text1); /*Place your JavaScript here to run when the page loads*/});

1967
C
10 months ago
Z
ZacJx
posted in Custom Code
Honeypot code for bots, but explained?

Hello, I'm new here, so forgive me if I'm asking a completely obvious question. I have a survey that I'd like to try and make as secure as possible. In addition to all the, for lack of a better word, clickable options in the survey platform - I'm also intrigued by the idea of adding a honeypot field for bots. I have seen the code in another thread. https://community.qualtrics.com/XMcommunity/discussion/6152/hidden-question-traps-for-botsQualtrics.SurveyEngine.addOnload(function() {jQuery("#"+this.questionId).prev('.Separator').hide();jQuery("#"+this.questionId).hide();});However, I have two problems. First, despite lots of searching I can't find anywhere that explains what this code is doing (and again forgive me for wasting anyone's time as I'm very unfamiliar with coding, don't mind learning, but just don't understand). I know that it's providing a hidden field, but I don't know what that hidden field is doing or (and this is the second problem) how to interpret it once I have collec

10675
Z
10 months ago
P
Level 1 ●
PSabouriLevel 1 ●
asked in Custom Code
How to add an "Add to calendar" link to the thank you email

Hi, I am making an event registration form and want to add an “add to calendar” with zoom link to the thank you email that people receive after submitting the registration form. How can I do that?Thanks!  

2762
P
Level 1 ●
10 months ago

Motivational Playlist

Terms & Conditions