Custom Code | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago

Custom Code

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

  • 7,405 Topics
  • 23,372 Replies
7399 Topics
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.

5744
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 Qual

20
T
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>

3393
PeeyushBansal
Level 6 ●●●●●●
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

1182
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>

9027
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!

302
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

190
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 accessib

3109
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 w

2375
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:last-of-ty

193
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!

321618
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!

100
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.

8539
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!

160
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?

482
B
R
Level 1 ●
Robert_MaihoferLevel 1 ●
asked in Custom Code
Prevent essay text box copy/paste

I am trying to add JavaScript code to prevent essay text entry copy/paste from any source to the online browser-based survey. I have already read the many attempts to explain on this site, but many appear to leave out where and how to enter the script and/or the entire needed code. Below is what I have and it. does not currently prevent copy/paste. Please do NOT refer to other articles and please provide a detailed step by step if at all possible. Question Setup: Code Entered:

162
R
Level 1 ●
J
JoaoFP
asked in Custom Code
How to make custom objects inherit Qualtrics styles?

Hi, I have a bunch of custom sliders that have starting and ending values based on previous answers by the respondent. I am trying to keep the visual aspects of the sliders -- colors, tickers, sizes, etc. -- equal to the standard Qualtrics slider, as I have some standard slider questions and I would love to keep consistency. Is there a simple solution for this, or will I have to do trial and error with CSS code until it matches the Qualtrics sliders

263
TomG
Level 8 ●●●●●●●●
M
mhb324
asked in Custom Code
CSS to remove asterisk in front of Qs in the new "Survey Taking Experience"?

We’re starting to test out the new survey -taking experience (SX), but there is some concern that the newly added asterisk in front of all force-response questions appears unfriendly. While we’re still going to do some A/B testing to see if the new SX has any impact on response overall, to know for the long run, does anyone know if there’s CSS code that could remove the asterisk from the front of any force-response questions in the new survey-taking experience? As an example, the first shot below is a force-response question in a survey with the new SX enabled, the second image is the exact same survey question in the old SX. Ideally we’d be able to use the new SX but have the option to remove the asterisks in front of the questions:

542
M
Nico_Leussink
Level 2 ●●
Nico_LeussinkLevel 2 ●●
asked in Custom Code
Store last answered questionnumber into an embedded data field of an unfinished response

In a survey I have set the option of partial completed responses set to recorded responses after 4 hours after the respondents start of survey. What I like to have is an embedded data field called 'LastQuestion' containing the last used question number. Like the column in the Data & Analysis tab under Responses in Progress where a column Last Question exists. Is such an option possible?

18715
J
QPN Level 2 ●●
A
avikram
asked in Custom Code
Deselecting other checkboxes if one is selected

Suppose I have a checkbox style question - "What fruits do you like?" and the options are: * Apples * Bananas * Oranges * Unsure I want to try and implement two functionalities: 1. In case the user selects "Unsure", then I'd want the other checkboxes to be deselected 2. If afterwards the user deselects "Unsure", then the selections made previously should reappear I need to necessarily figure out a way to implement (1). (2) would be a nice-to-have, but not wholly needed. Follows is the code, wherein I tried to implement this: jQuery("#QID10-4-label").click(function(){ if(jQuery("#QID10-4-label").hasClass("q-checked")){ //This will be implemented if the user has selected option 4 jQuery("#QID10-1-label").prop("q-checked", false); jQuery("#QID10-2-label").prop("q-checked", false); jQuery("#QID10-3-label").prop("q-checked", false); } else { //This will be implemented if the user has deselected option 4 //Ideally I'd want to be able to reselect those options which had been previously select

2564
courtrc
Level 3 ●●●
N
nstrebig
asked in Custom Code
Custom Theme Color is not showing correctly due to "new survey-taking experience".

We have a custom theme with our brand colors within it. Since updating to the new survey experience, color #73C3D4 is not longer showing correctly. Reaching out to support they mentioned it was due to a WCAG update which requires colors to be at least a 3:1 comparison. It was then noted you can override this with a custom CSS configuration. Looking for help to get our theme displaying the correct brand color.

220
N
L
LMJ
asked in Custom Code
What Custom CSS for Browser Tab Icon?

What CSS code do I use to enable our own logo / icon to appear in our survey browser tab, instead of Qualtrics' XM logo?

2004
M
Level 1 ●
M
MCGI
asked in Custom Code
Adding a Calculator to Survey

Hi, I am trying to add a calculator in to be displayed near a question for the respondent to do their own math and input an answer but I have very limited coding experience. How would I do this?

7037
T
O
Level 2 ●●
OBhLevel 2 ●●
asked in Custom Code
Sending a Different End-of-Survey Question to Every 50th Participant in Qualtrics

Deal All, I need to show a different end-of-survey question to every 50th participant in my Qualtrics survey. I cannot ask for their email or name or any information. They have to submit a worker ID. I think I have to know the number of times someone has reached the end of survey. 1st to 49th person will get EOS message 1, then 50th person will get EOS message 2, 51st to 99th person get EOS message 1, 100th person gets End of message 2 and so on. Please let me know how it may be possible. Any help is appreciated. Regards, O

221
J
Level 4 ●●●●
B
benthomas
asked in Custom Code
How can the close button size be increased?

We’re using the Qualtrics SDK in an iOS app and some users have reported that the close button is very hard to hit. My guess is the button is only as big as the X/cross image. Is there a way to increase the size of the hit area, or the size of the X, to make it more easy to press?

100
B

Read Me: How to use the new Experience Community 💜

Michael_Cooksey
Administrator
1 month ago

Motivational Playlist

Terms & Conditions