Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,413 Topics
  • 23,395 Replies
7407 Topics
F
foundationseries
asked in Custom Code
Slide that automatically takes previous value

I have the following setting, where in the same page there is a first 2-slider question (Q41 in the example below) and a further slide below (Q67). When going through the survey, the respondent decides on the desired values for the first two sliders. I would like the second slider to always take the value 10 - (sum of previous sliders).  now, here is where i’m stuck. I can relatively easily add text below the two sliders that show my desired algebraic sum, using the following code:Qualtrics.SurveyEngine.addOnReady(function(){var qid = this.questionId;    jQuery("<p>You are realising savings for your firm of: <span id='tot'>10</span>.</p>")        .insertAfter("div.ChoiceStructure");     function updateTotal() {        var $inputs = jQuery("#" + qid + " input.ResultsInput");        var A = parseInt($inputs.eq(0).val(), 10) || 0;        var B = parseInt($inputs.eq(1).val(), 10) || 0;        var tot = 10 - (A + B) || 0;        jQuery("#tot").text(tot);    }     jQu

101
F
MikeBot
Level 2 ●●
MikeBotLevel 2 ●●
asked in Custom Code
Adding a pop-up for both computer and mobile devices

Hi all,I am wondering if there is a way to add an option to a survey question, where respondent can click on a word or a button to then show a pop-up box with more information?I tried the method described in the below, but couldn’t get it to work. I followed the above, without really understanding it (!!) and I get my key word underlined and showing as a tool tip, and the info will show if I hover. However, how do I get this key word to be clickable on a mobile device?  The code I have used in my survey question (HTML view) is below. The word “here” is where the tooltip is shown - but is not clickable on a mobile device.My apologies in advance if this is an obvious fix! Thanks, Mike. HTML:  Have you, or a spouse/ family member, had any of the following symptoms?<b>Please hover <abbr title="Cough; cold; sore throat" rel="tooltip"><span style="color:red;">here </abbr><span style="color:black;"> for examples of symptoms</span></span></b>  

3755
rochak_khandelwal
Level 4 ●●●●
Y
Level 2 ●●
yve872Level 2 ●●
asked in Custom Code
Hover graphic or hover text html

I have a text only question (no response requested, just intro text presented) for which I want to allow hover over a specific word to bring up additional text.  I found the code to use in these forums (below) but it seems to have a character limit as it doesn’t show all the text.  It may be better for me to save the hover text as a graphic and instead have the graphic pop up in hover.  Is this possible?  Or maybe there is a way to change the # characters in the hover text.  I think the graphic option is better though so I can visually break up the text and bold where needed. Additionally, when I use the hover html code below, it is placing the word I am hovering over on its own line rather than keeping it in the same paragraph stream. See attached picture - the text I want to hover over is simply the word ‘here’ and it is forced onto its own line rather than keeping within the sentence. <div title="This is hover-over information">Hover over this text</div>

234
Y
Level 2 ●●
M
Makgomes
asked in Custom Code
How to remove a radio button for the text entry within multiple choice question and keep the radio buttons for the other options

I would like to make my multiple choice question look similar to this (this was made using another survey software). The text entry should not have a radio button. The other responses should have radio buttons.I want to ensure the text entry still acts as a exclusive response (i.e., you should NOT have to click another response in addition to fill out the text entry)Thanks!

221
C
Level 4 ●●●●
jamesbyrne
jamesbyrne
asked in Custom Code
Prevent survey progression via JavaScript

In my survey I have a constant sum matrix table with 2 columns and the total for the 2 columns must equal the value given for a previous question, e.g.: question_0: how many items did you buy? ; answer_0 = 10question_1:  for you for your friend apples a b oranges c d total e f I only want to allow the survey to progress when e + f = 10. I think the default sum validation can only look at e and f individually and check if these equal 10? I have added some JavaScript inside the addOnPageSubmit method and I can return a browser alert when the totals don’t match, but the survey still progresses to the next page when the alert is dismissed. Is there anything I am doing wrong, or missing? Thanks! Qualtrics.SurveyEngine.addOnPageSubmit(function() { // Function to validate the totals function validateTotal() { // Retrieve the embedded data field value const s17_01 = parseFloat('${e://Field/s17_01}'); // Retrieve the values entered by the responden

100
jamesbyrne
K
KPKat
asked in Custom Code
Progress ID has multiple Request IDs

I have code that uses a REST API in SAS to request a survey, prompting a request id, and then to and then “get” the data via PROC HTTP.  I’ve found that over the past 2-3 weeks, the code is not pulling the latest data.  I’d run the code to request the survey, wait over an hour, and then try to “get”, but noticed that despite survey ID and Progress ID being the same, the http pulls post different request IDs and the data is not the latest.  Hoping someone call help me understand where I’m going wrong?    %put GetSurveyID for &survey_nm.; run;    %GetSurveyID(&Survey_Nm.); run;       %put The Survey ID for the Survey Name (abbreviation = &survey_nm.) is &=SurveyID;  /* Need to provide the SurveyID (see previous step)  in order to get the RequestID as well as the ProgressID */    %put Proc HTTP to create Request;    options set=SSLREQCERT="allow";    filename rsp temp;    proc http    url="https://sjc1.qualtrics.com/API/v3/surveys/&SurveyID./export-responses/"    metho

60
K
MargaretW
Level 2 ●●
MargaretWLevel 2 ●●
asked in Custom Code
Matrix Table & Piped Text

We inherited a survey that contains a fairly large Matrix table (50 questions with a five point scale). The Matrix table is a list of skills associated with a discipline and respondents need to rate how important that skill is to them.  The matrix table question, is followed by this text-box question:You identified X, Y, Z skills as very important or important, Please tell us why. “X,Y,Z” above uses piped text to display the question text only if users identify a skill as very important or important (scale point 1 or 2), but when we test the survey we get many blank values when users select neither of those options. I looked at the code and I see where they how it is making questions display, but i do not see how it is preventing the blanks. Can advice? I can post the code if you like.

222
MargaretW
Level 2 ●●
R
Level 1 ●
RijaLevel 1 ●
asked in Custom Code
Need Help Moving Slider Labels Below the Slider

Slider Lables to be repostioned Hi, I would like to reposition the labels in my slider question. Currently, they appear above the slider, but I want them to be displayed below it, as shown in the picture, with 0% and 100% positioned at the ends of the slider. I have tried using some JavaScript, but it they don’t seem to be working. Can you please help?

8210
R
Level 1 ●
A
amitju
asked in Custom Code
Want to send Anonymous survey, but, i will like to collect some of the embed data from contacts?

Hi, I want send survey to my employees & keep their response Anonymous. but some of the contacts field such as department, Designation etc should be collected when they respond to survey. Please share any custom code to do the same. Thanks

4826
Y
E
Level 2 ●●
eliasg13Level 2 ●●
asked in Custom Code
Piping Randomization across Surveys

Hello!My team is hoping someone knows how to create code that can pipe randomization without replacement across multiple surveys. Below is our basic study design if that helps to explain what we need the code to do:We are distributing a daily survey to people where they will be asked about different scenarios/cues We have one list of scenarios, and another of cues (with an equal number in each list) We want to be able to ask participants about each scenario and cue, but with the scenarios and cues randomly combined together without replacement, so that each participant sees every scenario and every cue, but with cues/scenarios paired differently for each participant Since surveys are daily, we want to create separate Qualtrics surveys for each day, but aren’t sure how to maintain randomization of cues/scenarios without replacement across multiple surveys.Any help is greatly appreciated!

211
TomG
Level 8 ●●●●●●●●
A
AYG
asked in Custom Code
Can I change the submit button text color?

Right now, setting the Secondary Color makes the Submit button appear as the color I need, but the text color is automatic and I would like to change its color to something more accurate to the brand guidelines I have for my client. Is there any way to do this?

69210
B
lillianc
Level 3 ●●●
lilliancLevel 3 ●●●
asked in Custom Code
Setting dynamic custom start position (NOT DEFAULT CHOICE)

I'm trying to set a dynamic custom start position for a slider, but do not want it to be set using the default choice feature. I want to be able to force a response from the respondent, but have the start position be preset dynamically. If I use the default choice feature, it sets the start position but also allows the participant to skip answering and simply click forward because it preselects the answer. Therefore, the default choice feature cannot be used. The custom start position feature seems to only allow a static start position. setChoiceValue also doesn't work because it preselects the answer as well. I need the participant to actively choose a value.Has anybody else achieved this previously? I scoured the community, but the only answers pointed to the default choice option which does not solve my issue.This question has been asked before here, but the answer didn't address the dynamic start position or the forcing of the response.

6154
J
T
Tzu
asked in Custom Code
Need Help with Javascript to Conduct Conjoint Experiment Including Randomly-Selected Features

Hi everyone. I would like to design a conjoint experiment that includes three consistent features (say Gender, Ideology, and Party) and one out of two selective features (say Abortion and Gun), i.e., a conjoint experiment list may include features such as Gender, Ideology, Party, and Abortion and the other list may include features as Gender, Ideology, Party, and Gun. I added several lines of code to the Javascript generated by ConjointSDT (https://github.com/astrezhnev/conjointsdt). Although everything looks fine when I preview the survey, there is still one problem---the exported data fails to capture the feature name Gun. More precisely, even though respondents may see the feature Gun is randomly selected during the experiment, in the exported data, it only records the feature name Abortion, regardless of which selective feature  (Abortion or Gun) is selected. Below is my current code. Any help is appreciated.=================// Code to randomly generate conjoint profiles in a Qualt

160
T
L
Linz
asked in Custom Code
Tooltips and language variations

Hi AllI am fairly new to qualtrics, and just a user not a developer. Having created our first client satisfaction survey last year, we have received some feedback as to how we could improve the user experience for our survey this year and I am trying to implement that now. One of the feedbacks which we received was about unfamiliar terms or not knowing exactly which aspect we were targeting within some of our likert questions. Rather than adding lots of text and making the survey longer, I would like to work with tooltips...but these should work on both desktop and mobile versions. I have tried this Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis and it works, however I come across an issue, which I'm hoping you can help me with: My survey is available in 3 languages: English, French and German. Is there any way that I can have the tooltip be dynamic, so that it knows which language to show a tooltip in based on the survey language selected? E.g. In English a tooltip for Comm

1232
PeeyushBansal
Level 6 ●●●●●●
F
fafawaka21
asked in Custom Code
How do I add a bullet-point list to a tooltip/hover over?

I’d like to add a bulleted list to a tooltip/hover over in the text of a Qualtrics survey question. Is there any way to do this? I’m using the following, which of course doesn’t separate out the bullet points into separate lines: <span class="tooltip" data-text="Here are a few examples: ● Example A, ● Example B, ● Example C, ● Example D">questions</span>

9507
PeeyushBansal
Level 6 ●●●●●●
E
QPN Level 4 ●●●●
ErikahuerQPN Level 4 ●●●●
asked in Custom Code
description of the questions

Hi everyone,I would like to add a pop-up that provides more information about a question when the user hovers over it.Like this but for the question and not for the options:Since this survey has translations, I also need to ensure that the pop-up boxes display the description in the correct language.If anyone has any suggestions, they would be greatly appreciated!

352
E
QPN Level 4 ●●●●
J
javier_leal
asked in Custom Code
Capture the time of the last click on a page

Hi everyone! I’m using a JavaScript code to capture and store the time of the last click on a page, which will later be used in the survey to determine the flow. However, when I compare the results with the variable that Qualtrics automatically creates when recording the survey (Q#_LastClick), I notice that in some cases the results are quite similar, but in others the don’t seem to match at all. Does anyone know why this isn’t working properly in all cases, and how I could fix it?  Here's a bit more context: the page automatically advances after 160 seconds, but the 'Next' button remains accessible during this time. What I want to track is the time of the user's last click, excluding any click on the Next button in case the user decides to advance before the 160-second timer runs out. This is the JavaScript code: var pageLoadTime = Date.now(); // Stores the page load time var timeElapsed = 0; // Variable to store the elapsed time// Function to calculate the elapsed time between the pa

240
J
RebeccaM00
RebeccaM00
asked in Custom Code
Creating expandable/collapsible buttons that are fully accessible to individuals who use the "tab" button on the keyboard to navigate the survey.

Hello,  I’ve created a survey that uses custom code from this forum (thank you!) to create buttons that expand/collapse to provide respondents with the option to view more information/definitions as needed. I’ve successfully applied the code to: (1) Survey introductory text that contains multiple buttons on the same page; (2) survey questions (e.g., multiple choice); and (3) survey response options that contain one button for a number of the response options in a multiple choice question.  Although these buttons work well on desktop (mouse) and mobile devices (tap/touchscreen), they do not work for individuals who use the “tab” button on their desktop keyboard to navigate each survey page. I’m wondering if there is code that I can add to my current code that will enable this level of accessibility? If not, are there other options for adding additional optional content if needed (e.g., further definition of a term) that can be widely accessible to diverse audiences with different access

3339
C
courtrc
Level 3 ●●●
courtrcLevel 3 ●●●
posted in Custom Code
Ability to attach files to a ticket

Hello,I’ve created a survey with a file upload question and am generating a ticket based on that including the filename and URL. So the file gets attached in that manner. But what if more files need to be attached to that ticket later? Has anyone found a way to do this?I’ve been playing around and have found somewhat of a workaround but it’s kinda dumb and I don’t want to even propose it as an option to our end user.My workaround is:I have a workflow that generates a ticket, once the ticket is generated, send an email from within the ticket to themselves, reply with attachment then it gets attached to the ticket. I even attempted replying to the auto generated ticket email and a custom email notification but they were both undeliverable and weren’t able to be tied to the ticket in the same way replying to an email sent FROM the ticket is which makes sense because the reply-to email has some ticket specific information in it like the ticket key + some random ID. I wish there was a way t

2445
courtrc
Level 3 ●●●
M
Level 2 ●●
MaggieGentryLevel 2 ●●
asked in Custom Code
CSS Code - Not Displaying - Line Before Don't Know

I have a survey with CSS added into the “Look & Feel” portion. It adds a line before the last option (“Other, please specify: “).In the question preview AND the block preview, this displays perfectly. However, in the survey preview the line is missing.I have tried rebuilding both the question and the block to no avail. Single choice questions in another block work, so unsure about the cause. I tested on both Edge & Chrome and I cleared my cache / cookies. There is no specific HTML in the question.Does anyone know what could be causing this / how I would fix it? Thank you!   li:last-of-type { border-top: 2px solid #8D8D8D4D; }li:last-of-type label { margin-top:10px; }.Skin #Wrapper {margin-top: 40px !important;}.Skin .EndOfSurvey {color: #525252;padding: 10px 40px 60px 40px !important;}.Skin .Matrix table thead th:last-of-type {border-left: 2px solid #8D8D8D4D;}.Skin .Matrix table .ChoiceRow td:last-of-type {border-left: 2px solid #8D8D8D4D;}.Skin .Matrix table .ChoiceRow td:las

233
M
Level 2 ●●
W
Level 1 ●
walliLevel 1 ●
asked in Custom Code
Pop-Up Box for additional information (working also on mobile)

Hi! I would like to add additional information for some keywords in our survey that should be displayed when hovering over the keyword (or clicking the keyword) in an additional pop-up box or tooltip. Using the html span-titel command unfortunately only works for computers but not if accessing the survey with a mobile device. Also, the pop-up box disappears very quickly on some browsers (Internet Explorer... yeah, people exist that still use it :D ), which makes it impossible to read the text. Another problem is, that on some browsers, it takes quite some time until the pop-up appears. Could someone share Java-code with me to solve this issue, or maybe lead me to a topic where this was already solved? I have digged through the community posts but weren't able to find a properly working java solution. Happy for any suggestions!

327918
M
Z
Zonks
asked in Custom Code
Setting up Flatpickr

I have been trying for hours to create an inline calendar that does not allow future dates to be selected and if a participant selects a day that is in the previous month, for the calendar to move to that month.I have absolutely zero experience in coding and have been asking ChatGPT for help with the Qualtrics calendar (the first one in the library) with only the future dates being successful. ChatGPT cannot figure out the monthly part. For example, the calendar view is April 2025 and someone clicks on March 31, I want the calendar to move over to March 2025 view.I’ve seen many people suggest flatpickr, but I have no idea what the code is to get what I want or how to even put it in my survey.Please help!

110
Z
M
MilBu
asked in Custom Code
Can I change the layout at the question-level without overriding the entire layout?

Hello,Is it possible to change the layout of specific questions without overriding the whole layout of the survey?Specifically, I currently have a theme that has the following layout (Classic):I want to continue having this theme, however, for certain questions, I would prefer having checkboxes (for multiple choice) or radio buttons (for single choices) (example below, with Flat as the Layout):Any help would be appreciated. Please let me know if I should elaborate.

8689
Mannila
Level 4 ●●●●
B
bacoduti
asked in Custom Code
Sharing Quiz Results to Social Media

I have created a “What’s Your Persona” quiz in Qualtrics based on scoring. It’s simple and meant to be similar to a Buzzfeed quiz.Based on the responses, the respondent will be sent to one of three different end of survey messages that will let them know which persona they are.Can I add a “Share to Facebook” button or URL so that the respondent can share their result/what their persona is? Is there custom code for that? Just to clarify, I want them to be able to share their results, not the survey itself!

180
B
drewhudson
drewhudson
asked in Custom Code
Sharing Quiz Results to Social Media and Seeing Other's Results

I’m building a quiz on Qualtrics through scoring questions. Is there any way to share the results on social media and/or see how others respond?

512
B

Motivational Playlist

Terms & Conditions