Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,326 Topics
  • 23,069 Replies
7326 Topics
D
derosa
posted in Custom Code
How do I integrate KaTeX into Qualtrics?

I am trying to put together a survey based on math formulae using KaTeX. I can add the JavaScript to a question following the guidance on an old forum post but am struggling to add the Katex style sheet (css) and JavaScript to my header as suggested.Can someone please walk me through this? Thanks!For reference I am trying to follow this old post:https://community.qualtrics.com/XMcommunity/discussion/comment/32547#Comment_32547

1680
TomG
Level 8 ●●●●●●●●
2 years ago
T
Tugba
asked in Custom Code
Setting a conditional embedded variable with JavaScript

Hi - apologies my question has been discussed before (for instance here: https://community.qualtrics.com/XMcommunity/discussion/13161/setting-embedded-data-using-if-else-statement-in-javascript), but I'm having difficulty following the answers because I have no experience using JavaScript.I set an embedded variable in the survey flow called "partnerand2". I set this to the string "null". This precedes my question block.Then in my block, I have a question, QID344 (ZHPART below). If respondents select yes, I want the value of the embedded variable to be updated to the string "and your partner", so that I can use this as piped text in the questions ahead (for example the next question QID407).I added the below two lines of JS code to QID407 to do that after looking at discussions on the XM Community, but failed to get it working. Could you please tell me what's wrong? If I can get this to work, I can merge my next block to my current one and get my back button back.Qualtrics.SurveyEngine.

6450
T
2 years ago
M
Level 2 ●●
MaggieGentryLevel 2 ●●
posted in Custom Code
Add horizontal line to Group Question

Hi, I want to add a horizontal line divider to a Grouped list. However, I only want it to apply to the LAST item of the whole list, not each group. In current state, when I apply this code, it applies a line above the last choice of each group:#QID30009 li:last-of-type { border-top: 2px solid #8D8D8D4D; }#QID30009 li:last-of-type label { margin-top:10px; }However, I want only one line above the end of this list (where the red line is located):

6940
TomG
Level 8 ●●●●●●●●
2 years ago
K
korear
posted in Custom Code
Alert Message for Selecting Only One Option on Multi-Select Question

I have a multi-select question where respondents can select any combination of 6 locations (they later order these in terms of preferences). The most popular option to select is New York City, New York. I need an alert message to appear if the respondent selects only New York City, New York and none of the other options. This alert message would detail that New York City, New York is in high demand and that it is recommended to select other options as well. This should not prevent them from moving forward however.

1050
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
S
sena
asked in Custom Code
How to add headers to bipolar matrix question

I want to add headers to the matrix table(bipolar); I checked the 'position text above' option since participants need to slide on their mobile version otherwise. I'm trying to create 7-point semantic differentials with headers/labels on top of the statements(from 1 to 7). I googled jQuery code and tried several times, but it did not work out for me. I've attached an example picture to explain what I would like to make. Any suggestions would be a great help - Thank you in advance!

1570
Tom_1842
Level 8 ●●●●●●●●
2 years ago
B
BrianAndersen
asked in Custom Code
Display logic on groups

Is it possible to do display logic on a group in a "pick, group and rank"-question? I can see, that it's possible on items, but can't seem to find it for groups.

1590
SuhasM
Qualtrics Employee
2 years ago
D
DHE
posted in Custom Code
How to Auto-advance after certain time with force response question

Hi community!How do I write a javascript to do the following:For a page of force response questions (containing multiple choice and bipolar matrix table), after 2 min without response, automatically select the first options (of multiple choice and bipolar matrix table), and move on to the next page?Any help is highly appreciated.Thank you!

1800
SuhasM
Qualtrics Employee
2 years ago
L
lesm_13
asked in Custom Code
Is there any way to make the slider values appear below the slider?

I would like to move the slider values (1,2,3, etc.) below the bar, so that the labels are above, and the numbers are below. Is there any way to do this?

260
Tom_1842
Level 8 ●●●●●●●●
2 years ago
A
adstr_bepp
posted in Custom Code
Javascript Autocomplete Formatting

Hi all, I'm trying to implement a custom autocomplete for a text entry field using javascript but having trouble with how to format it. I have the following code for my text entry question:Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ let textOptions = ["John", "Jimmy", "Jonathon", "Jimbo"]   let $elem = jQuery('.QR-'+this.questionId)   let $elemParent = $elem.parent();  jQuery($elem).autocomplete({   source: textOptions,     minLength:1,     appendTo: $elemParent });});However, when I type "J" into the text box the dropdown menu is cut off seemingly by the Next Button HTML Section. How do I fix this?

3650
H
2 years ago
J
JK2020
asked in Custom Code
Adding CSS code so that header only shows for ranking questions

Hi everyone,Is there CSS code that I can add that would make it so that the header only shows for rank-order type questions?Thanks!

250
Tom_1842
Level 8 ●●●●●●●●
2 years ago
S
Simin
posted in Custom Code
change the background for one question

Is there a way of adding an image as the background of just one question?Thank you in advance

1380
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
M
marymaher
posted in Custom Code
Javascript radar chart/Spider graph

I am new to both qualtrics and JavaScript, but essentially I want to be able to display a spider graph of a participants answers against the scored answers in real time. To show how they compare to the expected score and be able to make recommendations on this.I am looking for help with the real basics like where to put the JavaScript code, what to do with JavaScript graphics libraries and how to bring in the responses to be reflected on the graph. I would like this to be displayed to the participant at the end of the survey, I have seen recommendations for putting in a new block and piping in the responses I just dont know how to do that.Any help would be greatly appreciated.

900
P
QPN Level 1 ●
2 years ago
R
robi_kalinisan
posted in Custom Code
Add another Text Entry in one Radio button in Multiple Choice Question

Hi! Is there any way that I can get Two Text Entry in One Radio Button (normally One Text Entry per Radio Button). Just like the image below. Thanks

340
SuhasM
Qualtrics Employee
2 years ago
J
justin_j
posted in Custom Code
Splitting multiple choice answers into different embedded data

Hi all,I am looking for a way where I can split multi-check question in survey editor into different embedded dats using JS.E.g. Please select your school you volunteer in from below:ABC SchoolPQR SchoolXYZ SchoolLMN SchoolIf a respondent selects lets say ABC and XYZ so in embd data 1 = ABC , embd data 2 = XYZ

560
SuhasM
Qualtrics Employee
2 years ago
S
Simin
posted in Custom Code
How to get the value or recode value from getSelectedChoices ()

I am using the below javascript to get the selected answers but this is only giving me the choice number and I want the value. How can get the value of the selected answer and not just the number? var choices = this.getSelectedChoices (); console.log('choices are: ' + choices);

9290
SuhasM
Qualtrics Employee
2 years ago
H
hirompet
posted in Custom Code
Changing styles (color, size, position, etc) of the next button for one page

Hi, I am struggling to figure out how I can change styles of the next button on selected pages. For instance, I want to have a special next button (e.g., big red circle in the middle of the screen) for some pages (not all pages). Is this possible with custom JavaScript? I appreciate any help/suggestions. Warm regards,Hiro

5410
SuhasM
Qualtrics Employee
2 years ago
A
AriannaMartinelli
posted in Custom Code
Multiple-option autocomplete question

Hi everyone!I have a question where I ask respondents about their contacts with other firms. I have a relatively large set of firms active in this sector (around 1900), and I am asking questions such as 'in which firms have you worked before'? I would like to have an autocomplete question where the respondent can type in a few letters and be directed to the firm names that I have recorded (i.e., an autocomplete option). At the same time, I would like to give the respondent the possibility of choosing more than one firm among my list, and ideally to add the name of a firm that is not in my list. I would like each choice to be recorded as a separate answer, because I plan to build a network between firms and respondents.I have tried the code mentioned in this thread, which works well for what I am trying to achieve, but does not work if one enables the 'multiple line' option in the text type. https://community.qualtrics.com/XMcommunity/discussion/12/adding-autocomplete-javascript-to-my-s

7370
A
2 years ago
P
Psychduck
asked in Custom Code
Embedded game where I can save scores

Hello!For a project I'm looking to embed a simple game in which I can keep track of participant's scores. Any game along the lines of snake, tetris, or a simple puzzle would do. Inherently I just want to have the participant play the game for let's say a minute and get their score after each round.Thanks in advance!

7590
AdamK12
Level 5 ●●●●●
2 years ago
VirginiaUKY
Level 2 ●●
VirginiaUKYLevel 2 ●●
posted in Custom Code
Calculate median score from matrix-text entry values

Hi all - I have a 4x3 matrix question where respondents enter three numerical values in each of four rows of open text fields and I need to calculate the median value in each row. Qualtrics doesn't appear to include a median math operation and scoring isn't available for this question type.TomG suggested the below code to someone who needed to calculate a max value and I'd love something similarly simple if it exists. (Unfortunately Math.median doesn't appear to be a thing. :/) Thanks in advance!var max = Math.max(parseInt("${q://QID16ChoiceTextEntryValue"), parseInt("${q://QID17ChoiceTextEntryValue}"), parseInt("${q://QID18ChoiceTextEntryValue)}"));Qualtrics.SurveyEngine.setEmbeddedData("max", max);

500
VirginiaUKY
Level 2 ●●
2 years ago
C
carterin11
posted in Custom Code
How to use JavaScript to insert graphics into item choices for Pick, Group, Rank question?

I have a very large set of images in a library folder. Each image needs to be inserted into an item choice in a Pick, Group, Rank question so users can placed it into groups. Manually inserting the graphics isn't feasible because of the size of the dataset. I have all the Qualtrics urls for each image, I just don't know how to implement them. Additionally, there would ideally be 192 choices, each with one image and no words, and each user would be shown a random 20 of them. Qualtrics seems to limit the number of choices to 100, but is there any way to work around that using Javascript?Thank you!

560
TomG
Level 8 ●●●●●●●●
2 years ago
A
all_cam
posted in Custom Code
No audio on mobile

Hello,I have some items with audio tracks. It works great on desktop, but on a mobile device, it doesn't show any information regarding track duration (it just has 00:00) and does not play anything. I'm not sure how to fix this since it's only happening on mobile. I'm not having it autoplay and providing instructions that responders click the play button.

200
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
S
Simin
posted in Custom Code
embedded data for sliders

I have a question with 4 scoring sliders (0-5) which are not mandatory. I would like you to set an embedded data that if a slider is unselected, the value should be 0.Is that possible?

180
TomG
Level 8 ●●●●●●●●
2 years ago
L
lesm_13
asked in Custom Code
Is there any way to move the numbers below the slider?

Hi, my slider question has 4 grid line points defined with numbers from 1 to 5 . I wanted to know if there is any code which allows me to move these numbers so that they appear below the slider bar?

1190
Tom_1842
Level 8 ●●●●●●●●
2 years ago
Teddy
Teddy
posted in Custom Code
Autocoding Rank order question

I maked rank order question (Format: Text box).As shown in the image above, I want to record the response value of the ranking question in the hidden single question.How can I express it using JavaScript?

440
Teddy
2 years ago
A
Annie
asked in Custom Code
Change the color of radio button (before selection) but only for the last response.

I want to change the color of just one of the radio buttons on a multiple choice question, but only for the last response (i.e., don't know response). For example for the following question, I'd like to make the circle under "don't know" a red circle instead of black, and if "don't know" is selected I'd like the fill color to become red. Ideally, I'd like it to work in either a horizontal or vertical position, but horizontal is higher priority. Is there a JavaScript I could use for this?

2480
L
2 years ago

Motivational Playlist

Terms & Conditions