Developer Corner | XM Community

Developer Corner

Discuss developer and custom (HTML, CSS, Javascript) solutions, best practices, & more

8884 Topics

R
Level 1 ●
rarcegaLevel 1 ●
asked in Qualtrics API

Adding another field to the "List Opted Out Directory Contacts" API call

I was able so successfully ran an API call that listed opted outs from the directory. Aside from name and email, I also need a specific id (CID) in the output in order to link the records to our internal database. This field (CID) is an embedded data field that exists in all of our mailing lists. Is it possible to include this in the output of this API call?

0
R
Level 1 ●
2 hours 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 ●●
2 hours 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 ●●
2 hours 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 ●●
2 hours ago
Ricmarug
Level 5 ●●●●●
RicmarugLevel 5 ●●●●●
asked in Custom Code

How to Include a drop-down list within a form field question type

Hello!I have a form field question and I need one of those fields to be a drop-down list with 5-7 options. I searched in other posts and the one that has the most interactions is this one but the QSF from the best answer is not there anymore, so I found no clear solution for this issue. Thanks in advance for the help!

11
G
1 day ago
J
JenP_2024
asked in Website & App Insights

Web intercept action set containing form token clause

I am trying to program a web intercept survey for customers.   I’ve using an old survey intercept that was created at our company by a former employee.  They have a clause in their action set that says Current URL does not contain form token.    Does anyone know what this might mean?  On our website, we have both a pop up and feedback button survey available.  I’m trying to figure out how to stop the pop up if someone has taken the feedback button survey and how to keep the feedback button active even if the pop up survey is taken. I wonder if this form token clause might be the reason???Thanks!  

0
J
1 day 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
1 day 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
1 day 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
1 day 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
1 day 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 ●●●
1 day 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 ●●●●●
1 day 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
1 day 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
1 day ago
Goldie
Level 2 ●●
GoldieLevel 2 ●●
asked in Custom Code

PDF exports for ALL responses

In the Data & Analysis tab, you can export a single response to a PDF. Is there a way to export all responses to PDF instead of going through each one individually and saving and/or printing?

39
F
Level 3 ●●●
2 days ago
M
mhiser1024
asked in Qualtrics API

Adding Time Delay between API Call retries

When we make API calls from Qualtrics to other services, is there any way to add some time between retries? For example, when the call fails, it will automatically retry, but within a few milliseconds of each other. This generally results in continued failure. It would be great to be able to build in a long delay between automatic retries. Is this possible?

0
M
2 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
2 days ago
V
VijayataKeshari
posted in Qualtrics API

Can anybody help me with Qualtrics and Power BI integration?

I would like to extract data from qualtrics to Power Bi directly using API

1
C
QPN Level 2 ●●
3 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
3 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 ●●●●
3 days ago
J
jreeves
asked in Website & App Insights

Qualtrics Support Format / Language?

Hi there!Does anyone have an idea of what platform/language the Qualtrics Support pages (i.e. https://www.qualtrics.com/support/getting-started-qualtrics/home/) are written in? Like - how could I replicate the format of this easily? I am trying to develop my own support documents for various tech products that colleagues use and the layout of these are so easy to use and navigate. I’m hoping it’s something pre-built and/or easy to learn!

1
Nanditha MM
Level 4 ●●●●
3 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 ●●
3 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
3 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
3 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 ●●●●●●
3 days ago

Productivity playlist

Terms & Conditions