Custom Code | XM Community

Custom Code

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

  • 7,049 Topics
  • 22,088 Replies

7049 Topics

D
Level 1 ●
djuniusLevel 1 ●
asked in Custom Code

Vertical labels in matrix table

We have a matrix table with a lot of labels on the top axis. Wondering if anyone out there knows the html to change the labels to vertical like you can do in Excel and in the image below. It would be much easier on the user so they wouldn’t have to scroll to the right to see the other options. Thank you.   

10
L
Level 2 ●●
14 days ago
E
ErikS
asked in Custom Code

Selected radio button color using CSS Editor

We've designed a Qualtrics survey and had a designer enter some code to match the survey to our study website. The designer is no longer on the project and we'd simply like to change the color of a radio button when it is selected. Currently, the radio button fills in white when a choice is selected. We'd like it to be blue (or anything darker really). See the screen shot below for the current design. And the current code used below that. I can't figure out where I should change the color in the code below or if there are additional lines of code. I appreciate any guidance!! Thanks in advance. ! .Skin label.q-radio.q-checked { background-color: #009FAC !important; outline: #9C9C9C } .Skin label.q-checkbox, .Skin label.q-radio { border: 2px solid #0F993D; outline: none; } .Skin label.Matrix.q-checked.q-focused, .Skin label.SingleAnswer.mobile.q-focused:hover { outline: none; } .Skin label.q-radio.q-focused.q-checked { box-shadow: 0 0 4pt 2px #0F993D; } .Skin la

3
G
Level 2 ●●
16 days ago
L
LingZ
posted in Custom Code

JavaScript for radio button color change doesn't work in vertical case.

I want my #3 radio button in red color. I used the Javascript code below. It works well in the horizontal application but doesn't work in vertical and column applications. JS :Qualtrics.SurveyEngine.addOnReady(function () {  ch = this.getChoiceContainer();  all_buttons = ch.querySelectorAll("[class^=q-]");  all_buttons[all_buttons.length - 1].id = "last_button";  last_button = ch.getElementsBySelector("#last_button")[0];  // Set border to red  last_button.style.borderColor = "red";});work well in the horizontal casebut it doesn't show red color, though the element code show" red". The sample problem happens in column application also.The code from https://community.qualtrics.com/XMcommunity/discussion/13922/change-the-color-of-radio-button-before-selection-but-only-for-the-last-responseshe works out both horizontal and vertical one year ago. I am not sure why not now. I am using the basic blank theme, and flat layout, without additional CSS.

4
G
Level 2 ●●
16 days ago
M
MorMey
asked in Custom Code

changing the side of the radio button on the flat layout using custom css

hi!I am using the flat layout, and I want to move the radio buttons from the left side of the answers text to the right side, using the custom css. (for example - on the modern layout the buttons are on the right side of the text) anyone has an idea what code can I use to do that?thank you!

8
G
Level 2 ●●
16 days ago
jerlenaz
jerlenaz
asked in Custom Code

Creating a Pop-Up Window over question options

I'm building a survey to get feedback on courses I am developing at Tulane University. I'm using the Matrix Table style of question, and have the Statements as the Course Titles. I'd like to have a pop-up window appear after a roll-over/click on the Statement that will have the Course Description if folks need more detail and information about that particular course. I don't want the question itself to be so text heavy. I see an option in the Rich Text Editor to create a hyperlink to a text anchor, but it seems like the text anchor has to be in the question itself, which kinda defeats the point of moving the text to the pop-up window. I am new to Qualtrics, but after scouring the help and community area, I can't seem to find a solution on how to do this. Does anyone have any suggestions? I'd rather not build another suite and use the URL/Anchor there, as I don't want the course information to be public yet, so any other thoughts or ideas would be appreciated. Thanks, Jerry

4
T
17 days ago
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!

17
T
17 days ago
C
CSonn
asked in Custom Code

Insert a button that gives a pop-up additional information window when clicked

Hello, I've been looking for information on how to create a pop-up button that when clicked brings up a box of additional information - but I have only found "hover-over" options and an option for using the "next" button as a pop up option. I'd like to have a button that says "Click here for examples you can use to edit or complete your list" that appears under a text entry form. When clicked, a pop-up window would appear with information. I am new to Qualtrics with little knowledge on coding. Is there a simple way to do this without coding knowledge? If there is another page with information on this already I'm happy to be redirected. Thank you!

26
T
17 days ago
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>  

1
T
17 days ago
F
Forno_99
asked in Custom Code

Changing color of the arrow in next buttons

Hi everyone ! Does anyone know how to change the arrow color in the next button ? I need to change it from black to white. I tried some CSS codes posted by the community in other posts, but none of them worked. I have customized the background color of some next buttons and I don’t know if the script for the arrow color is overrided by the background one. 

3
R
Level 3 ●●●
17 days ago
adawson
Level 1 ●
adawsonLevel 1 ●
asked in Custom Code

Custom Code to Hide Scale Options in Side by Side Matrix

Hi, I have the side-by-side question below with both the statements and column options being based on display logic from responses previous questions that were “select all that apply” (which solutions have you used, and which options did you use the solutions with). Solutions listed in the statements (ABCD), and the options they use them with (1234) in the columns. A respondent may use solution A&B with options 1, 2, &3, but they only used solution C with the option 1. How can I hide or disable the radio buttons highlighted so that they don’t see or aren’t able to select for those?  

1
O
QPN Level 5 ●●●●●
17 days ago
M
m_schneider
asked in Custom Code

Slider without anchoring. Handle appearing on click

Hi there! I want to implement a slider without showing the handle until the handle bar is clicked on to prevent any anchoring. Based on several posts this seems to work just fine. However, I do get it to work. Any ideas why?  Thanks a lot!

2
M
17 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

2
J
17 days ago
M
mhiser1024
asked in Custom Code

Passing Ticket Data via URL Parameters

I am using tickets to distribute a survey (after the ticket changes status, it triggers the distribution of another survey). For example, Ticket A has 15 ticket data fields. When Ticket A changes status, it triggers the distribution of Survey A. I need to pass the values of the 15 ticket data fields from Ticket A into Survey A as embedded data. I am adding the data fields to the Survey URL in the invite as I should be, but for whatever reason, only about 30% of the ticket data fields from Ticket A populate in Survey A.  Here is an example of the survey link from my email invite: ${l://SurveyURL}&JourneyID=${tck://kv/JourneyID?format=urlencode}&BrandName=${tck://kv/BrandName?format=urlencode}&ProductName=${tck://kv/ProductName?format=urlencode}&ProductForm=${tck://kv/ProductForm?format=urlencode}&totalWeeks=${tck://kv/totalWeeks?format=urlencode}&ConditionPhrase=${tck://kv/ConditionPhrase?format=urlencode} Does anyone know why I cannot pass values for all the tic

0
M
18 days ago
R
Rogers_Lab_Bangor
asked in Custom Code

CSS Stylings No Longer Working

I have a Qualtrics survey written mostly with custom JS. Throughout, I use CSS stylings to manipulate the background colour of the page body. At some point in the last week, my CSS stopped displaying properly (having worked correctly since January). Below is a minimal example of my code; the issue is that the html, body{ } chunk doesn’t affect the page body (i.e., it’s white rather than black). I’d be grateful for any suggestions! My script: <!DOCTYPE html><html><head><style>html, body {  height: 100% !important;  margin: 0;  padding: 0;  background-color: black !important;}p {  color: white;  font-size: 18px;}</style></head><body><p>Some text</p></body></html> EDIT: I’ve tried altering the background colour inline, to no avail.

4
R
19 days ago
W
wingated
posted in Custom Code

Integrating / embedding chat GPT for multiple turns

I’ve seen a bunch of people asking about how to embed chat GPT into a qualtrics survey. I managed to construct a working version of a multi-turn interaction with chatGPT, and so I’m posting the code here. Hopefully it helps someone.The basic idea is to dynamically alter properties in the webpage, including adding custom buttons and changing the question text. You can see a demo of the survey here. Because of the way that it directly alters various webpage properties, I’m quite sure that it will break easily. For example, I don’t know what happens if you have multiple questions on the same page. There be dragons there.The results of the conversation get stored in an embedded field.I just created a single question with a text area answer, and then dropped this code into the question’s “addOnLoad” method. // this question will drop a JSON version of the conversation into this embedded data locationconst EMBEDDED_DATA_DEST = "convo_history";// adjust as neededconst OPENAI_API_KEY = "Bearer

2
Nanditha MM
Level 4 ●●●●
19 days ago
L
Level 2 ●●
lamoriLevel 2 ●●
asked in Custom Code

Text above matrix table full width

Hey community,I use a matrix table but the text above the matrix table has unintended line breaks (see picture attached).How can I make this text full table width?Thanks!  

4
L
Level 2 ●●
19 days ago
H
HVB
asked in Custom Code

How to lock/fix a question at the top of the screen, while scrolling down?

Hi everyone, For a new research project, I ask participants to evaluate fictitious job candidates. The information of the job candidates is summarized in a small table (implemented in Qualtrics as a descriptive text). Since the participants in the survey need to evaluate the candidates with respect to a bunch of statements it would be great if the table with info would move down when the participants scroll down through the statements. In this way the participants can always see the qualifications of the job applicants while evaluating them. I was wondering how I could implement this in Qualtics? I have seen discussions regarding fixing images, however with respect to fixing questions I have not seen any solutions for my problem so far. Maybe good to know is that I am completely new when it comes to coding. So any detailed solution on how I could program this, would be great!Thanks in advance for the input!Hannah

22
5
19 days ago
BettoLamacchia
BettoLamacchia
asked in Custom Code

How to have custom values appear on multiple sliders

Hi all, hope anyone could help with this. I would like to show custom values to multiple slider question respondents (e.g. 'good' when '3' is selected). Has anyone an appropriate code? ! Thanks in advance

5
J
19 days ago
S
Level 1 ●
sajjidLevel 1 ●
asked in Custom Code

need JS to hide dropdown options in side-by-side matrix for one of the statements

This is my Q2 in the Qualtrics survey instrument in which I have a side-by-side table with 4 statements and 2 columns with dropdown options. For statements 2 and 3, I want to hide dropdown options for both columns. 

3
A
Level 6 ●●●●●●
19 days ago
P
Percy0202
asked in Custom Code

Inserting a Chatbot code into Qualtrics

Hi everyone,For my master thesis i would like to research chatbots. In order to do this i would like to have some sort of frame where participants are able to interact with a chatbot through some sort of embedded square in the survey. The research really focuses on interacting with the chatbot in that environment so i would like to apply the following script into a page so people can interact with it: https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"> var myLandbot = new LandbotFrameWidget({  container: '#myLandbot',    index: 'https://landbot.io/u/H-201854-TW0ZHY5GVEOKB963/index.html', });This script came directly from the landbot website, and i would like to know if it is possible to create a page where people see this embedded chatbot, so that they can interact with it. Unfortunately, i was not able to add this into qualtrics. Perhaps you guys could help me out, or present an alternative!Thanks in advance!

4
S
20 days ago
J
Level 2 ●●
jMakinLevel 2 ●●
asked in Custom Code

Hide SBS column - (not so) Simple Layout

Hi All,sorry but i have hit my limit. I’m too far in to not use Simple Layout or the SBS for these questions but Simple Layout is, simply, frustrating and/or my JavaScript is way too poor.I have forced response: 1 choice in Col 1, 1 choice in Col 2. But, now i’ve been asked that, if the last choice is made in Col 2, it should negate any choice in Col 1.i have tried editing code from here: and here: and even considered the @TomG code for enabling  the removal of a selection (it would then require their trust to remove their selection in Col 1 if they choose ‘exclusive’, which is not ideal but ok given the limited end-users) - though my understanding is that it doesn’t work for Simple Layout. correct?Either i’m not getting the element names correct or something.My preference is to keep it as just the 2 columns as per top picture, below, but would also happily move that “exclusive” choice to a 3rd column is that’s easier.Also, if anyone has any creative work-arounds that will work in-page

1
J
Level 2 ●●
22 days ago
A
amilgate
asked in Custom Code

Calculated data entered NOT updated after clicking "back" button

Hi, I have 3 questions (say, Q1, Q2, Q3), each question asks for a number, and a 4th question (Q4) which sums up all numbers entered in those previous questions. This 4th question is not technically a question, it just shows the 'sum entered' and asks the respondent to confirm by clicking the forward arrow, or the back arrow to make changes to any of the inputted data. I have a custom javascript code which disables input into that (Q4) field. But my issue is, when i go back to Q1, Q2, or Q3 and make changes to any of the numbers entered, the sum at Q4 is not updated to the new sum (it still shows the original calculated sum!). Note; the calculated sum at Q4 is shown using embedded piped text. Could anyone please advise? and/or point me in the right direction? Many thanks, Amy

3
M
22 days ago
S
Level 1 ●
sics_sue_chooLevel 1 ●
asked in Custom Code

calendar picker with only month and year

hi all, I want to provide a calendar picker for month and year only. I tried with the code below:  jQuery("#"+this.questionId+" .InputText").flatpickr({    dateFormat: "m/Y"}); The outcome did give me just month and year, but the calendar that pops out has day.  how to display only the month and year in the calendar picker? 

2
S
Level 1 ●
22 days ago
T
Trinda
asked in Custom Code

Delayed Slider Question Doesn't work with my Javascript

Hello! I'm new to customizing Qualtrics survey questions and need some support. I have slider questions that I'm using Javascript to delay until after a video finishes playing (I found the script in this post), but the slider doesn't work once it appears after the delay. The slider disappears and I'm not able to move the slider when previewing it (see image below). My other questions (e.g., multiple choice) work just fine though with the exact same script. Does anyone know how I can fix this?

6
S
22 days ago
R
ricsdpl
posted in Custom Code

How to reset multiple Question

Hi Community,I'm trying to work with can add a reset/clear option in the multiple question in single page that would like to clear their selections for the current question, they can simply press a reset/clear button and it would delete all the responses for that question at onceI tried this code; however, it's only working single question in single page and has an error when I click this clear/reset button it disables the validation and when I back it appears the last selection that I already reset/clear.Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ const quest = this;    const qc = quest.questionContainer; var questionId = this.questionId; var inputs =  $(this.getQuestionContainer()).select('input[type="radio"]', 'input[type="checkbox"]', 'input[type="text"]');    qc.querySelector(".QuestionText").insertAdjacentHTML("afterend", "Clear Responses");    qc.querySelector(".reset").onclick = function () {    

2
R
Level 3 ●●●
23 days ago

Productivity playlist

Terms & Conditions