Custom Code | XM Community
Skip to main content
Michael_Cooksey
Administrator
4 days ago

Custom Code

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

  • 7,384 Topics
  • 23,309 Replies
7378 Topics
O
Level 2 ●●
OBhLevel 2 ●●
asked in Custom Code
Randomizing groups of questions within a block

I have the following setup in Qualtrics: Statement 1 Question 1.1 Question 1.2 Question 1.3 Question 2.1 Question 2.2 Question 2.3 Question 3.1 Question 3.2 Question 3.3 I have them all in one block because all the questions needs to be displayed in one page. I want to randomize questions 1, 2 and 3. This means Q1.1, Q1.2 and Q1.3 will appear together always. Similarly Q2.1, Q2.2 and Q2.3 will appear together. And finally, Q3.1, Q3.2 and Q3.3 will appear together. But the sequence in which the question groups (Q1, Q2 and Q3) appear will vary. For example one respondent will see the question sequence as below: Statement 1 Question 2.1 Question 2.2 Question 2.3 Question 1.1 Question 1.2 Question 1.3 Question 3.1 Question 3.2 Question 3.3 Please let me know. Thanks, O

6911
O
Level 2 ●●
N
Nasra
asked in Custom Code
Dynamic Multi-select Based on a Drilldown

I need to create a survey that will go to a number of managers, each with one or more groups that they manage. For each group that they manage, I need them to be able to provide a description (text), and select from a list of services they offer. What is the best way to proceed with creating this survey? Drilldown is not that efficient in this case.

20
N
Paul_Farrell
Level 2 ●●
Paul_FarrellLevel 2 ●●
asked in Custom Code
Amend or recode Embedded Data Date field from mm/dd/yyyy to dd/mm/yyyy

Hi, We have an embedded data field in a survey called EVENT_DT which states the date an appt took place, but the format in the sample file is set to mm/dd/yyyy. We wish to pipe this ED field into a question text, but have the format displayed as dd/mm/yyyy. Is this possible in any way as an embedded data function, or if not, possible via Javascript? Thanks

272
Paul_Farrell
Level 2 ●●
S
Level 1 ●
SPGold at WorkLevel 1 ●
asked in Custom Code
Loop and Merge - Not choose options

Hello. I want to do a Loop and Merge but have it NOT select some of the responses. Question 1: What is your favorite sport to watch on TV? Select all that apply. *Baseball *Basketball *Boxing *American Football *Hockey *MMA/ UFC *Soccer *Tennis *Other (with open text field) Question 2 Who is your favorite team for [Loop and Merge]? I do not want the Loop and Merge to ask for Boxing, MMA, Tennis, or Other. So if baseball and Boxing are both selected, it will not matter what go to baseball. Or if someone says Hockey, MMA, and Soccer, it will only choose between hockey and soccer. How do I set it up? Thanks!

343
S
Level 1 ●
A
Arnab
asked in Custom Code
Modifying the size of the "Powered by Qualtrics" logo

Is it possible to reduce the size of the "Powered by Qualtrics" logo at the bottom-right corner of Qualtrics surveys?

141
TomG
Level 8 ●●●●●●●●
S
sarann
posted in Custom Code
Matrix with two different scale points?

I created a matrix with repeating headers, but I would like the second header to have different scale points than the first. Is there a way to do that as pictured in my edited screenshot?

876
O
Level 2 ●●
S
Saptatshi_das
asked in Custom Code
Generating Random number conditional on participant's response

In one block I am collecting response from participant on a slider. And I am storing it as an embedded data. Now I want to generate two random numbers, one greater than the participants response and one lesser than the participants response. Then show them along with participant choice in the next block. Also, I want to do a mathematical operation on one of these random numbers.I tried using Embedded data and random number but that does not always generate greater and lesser than the response of the participant. Is there any JS code available or similar code which I can modify. I am new in Java, so I need some help understanding.

203
S
K
KatieAK
asked in Custom Code
.setEmbeddedData not populating in export

I have a few embedded data fields that I am trying to populate with timestamps at certain progress milestones throughout my survey. They appear to be working in the survey preview but when I export the data these fields are all blank. I’ve been able to successfully export some other embedded data fields also set through javascript, so I can’t work out why these ones aren’t working. The embedded data fields are created at the top of my survey flow with the type set to date: Throughout the survey I use javascript to set the value And I’m pretty sure it’s working because if I pipe the timestamps in to a question at the end of the survey I get appropriate data But when I go to export my dataset all of the fields are blank. I’m pretty stumped, I don’t understand why I would be able to pipe data from the embedded data field but not see it in the export? Any help much appreciated, Thanks Katie

263
vgayraud
QPN Level 5 ●●●●●
L
lks
asked in Custom Code
Qualtrics Javascript only working in 'preview question' not survey preview

Hi there, I have used Javascript to remove the rating scale for the last row of my survey question. In ‘preview question’ it looks how I want it, like this: However, when I preview the survey, it still looks like this: I have also published a copy of the survey and the rating scales appear there too. The JavaScript I have used is as follows: Qualtrics.SurveyEngine.addOnload(() => { const questionContainer = document.getElementById("QID41"); if (questionContainer) { // Select all radio button inputs within the container const radioButtons = questionContainer.querySelectorAll("input[type=radio]"); // Convert NodeList to array and get the last 2 radio buttons [...radioButtons].slice(-2).forEach(radio => { // Disable and hide the radio button radio.disabled = true; radio.style.display = "none"; // Find the associated label using 'for' attribute const label = questionContainer.querySelector(`label[for="${radio.id}"]`); if (label) { label.style.display = "none"; } }); }}); Qualtrics.SurveyEn

634
N
Level 2 ●●
J
Level 1 ●
jmcmummeyLevel 1 ●
posted in Custom Code
Qualtrics survey engine appears to be running twice (at least in preview)

This behaviour has been fouling a more complicated survey, so I tried with only a single question. I have added javascript to my questions as follows: Each of these functions appears to be getting called twice in preview mode. Here's what the console looks like: So OnLoad then On read is run (x2) then onunload (x2).This means that any variables that I'm assigning are getting cleared null and causing major complications with my more complicated survey. This behaviour just doesn't seem kosher - any ideas on what's happening? I think it might be a JTE thing?Regards,Jesse

3486
R
Level 1 ●
M
madisonkspencer
asked in Custom Code
Add a dollar sign to a sliding scale question

I would like to add a $ sign to the scale so that people know it is $0-$20. How do I do this?

141
vgayraud
QPN Level 5 ●●●●●
Z
zjnnnjz
asked in Custom Code
CSS - center align my entire survey

Hi there, I am building a survey with custom CSS. Below is part of my syntax: body {margin: 0;padding: 0;display: flex !important;flex-direction: column !important;align-items: center !important;}.content {display: block;width: 100%;margin: 0 auto !important;max-width: 800px;} I noticed that this CSS can centre my survey, but only if I set the max-width to be around or below 800px. However, when I try to increase the max-width, for example, to be 1200px, then this CSS doesn't work and my survey becomes left-aligned. Can I ask how to solve this alignment problem, as I want to increase the width of my survey content and keep the entire survey to be centred. Many thanks in advance! Any insight would be greatly appreciated.

120
Z
C
Level 2 ●●
ccosartLevel 2 ●●
asked in Custom Code
Simple Layout - No JQuery?

I fear I know the answer, but just to be sure: We are converting a survey to Simple Layout. In the Authenticator Prompt message we have some JQuery we use to make some edits to the Authenticator page. Hiding progress bar, moving some divs, etc. As far as I can tell this no longer works on simple layout, even after changing css id and class references to match the new ones used in Simple Layout. I’m hoping that I’m just being dense and can’t figure out the code, but if someone can confirm that we can’t use Jquery on the authenticator page, I can move on to finding an alternative solution. TIA!

85210
N
AnneG
Level 3 ●●●
AnneGLevel 3 ●●●
asked in Custom Code
Apply custom css which is working for 1 question (color upon hover) to all multiple choice questions on survey

Hi there. I was able to figure out from posts here how to get my first question looking just the way I wanted (different color on hover for 4 of 5 options for multiple choice question) but I am stuck on getting this to apply to the rest of the survey questions. Below is what I have working for question 1. I tried simply duplicating these lines and updating to the correct QIDs for the additional questions on the survey (not ideal) but that didn’t work at all. Is someone able to help me rework this so that it will automatically apply to all multiple choice questions on my survey? Thanks!! .Skin label.MultipleAnswer, .Skin label#QID1-0-label.SingleAnswer:hover{background: #ed6960;}.Skin label.MultipleAnswer, .Skin label#QID1-1-label.SingleAnswer:hover{background: #f7c1b8; }.Skin label.MultipleAnswer, .Skin label#QID1-3-label.SingleAnswer:hover{background: #d9ebae;}.Skin label.MultipleAnswer, .Skin label#QID1-4-label.SingleAnswer:hover{background: #8dd964;

266
AnneG
Level 3 ●●●
J
jennipearson
asked in Custom Code
Is there a way to put a time limit on the prevent ballot box stuffing tool?

Hi, I am using Survey Signal and Qualtrics to conduct an intensive longitudinal study. Participants receive 5 texts/day with an anonymous links to the same Qualtrics survey. Somehow, participants are completing multiple surveys back-to-back. I would like to prevent participants from taking the same survey within 29 minutes of completing the last survey. Is there a way to do this? The prevent ballot box stuffing tool doesn't work for me in this case because I DO want participants to answer the same survey 5 times/day - just not back-to-back. Thanks!

234
hinchja
Level 1 ●
L
Level 1 ●
LisaNguyenLevel 1 ●
asked in Custom Code
Using JavaScript to Calculate Lowest 3 Category Scores

Hi all, Looking for someone with JavaScript knowledge to help me with my custom script (I have no experience, I just learn by figuring the code out visually in this case). Essentially the survey has 6 categories. The user will answer a quiz with questions under those categories and score accordingly. We want the end of survey message to calculate the user’s lowest 3 category scores so we can send a customised message to recommend courses in those categories for the user to take. My issue is that the calculated lowest 3 scores do not appear and I’m not sure why. Appreciate any assistance on this :) Sample message: Thank you for completing the survey! Based on your responses, we've identified the three categories where you scored the lowest. To help you improve in these areas, we recommend the following courses: [Category 1]: [Course Recommendation] [Category 2]: [Course Recommendation] [Category 3]: [Course Recommendation] Here is the code I have currently, as a question at the end with

9420
L
Level 1 ●
N
Level 1 ●
norikazukuriiwaLevel 1 ●
asked in Custom Code
Validation code that 'Next' button is pressed

Hi. I would like to insert code to validate the values of the UI on the page when the Next button is pressed. Could you please provide some advice?

9410
TomG
Level 8 ●●●●●●●●
L
LeoMan
asked in Custom Code
Qualtrics Feedback button - Mobile

The Qualtrics feedback button on mobile present the close option ‘x’ outside the container. This is proving to be problematic with some iOS devices as the ‘x’ option appears outside the display frame. Is there a way to change the position of the ‘x’ through custom coding and have it appear within the container itself? (See attached images for reference)

150
L
O
Level 2 ●●
OBhLevel 2 ●●
asked in Custom Code
Building the response in a particular structure.

Hello All, Please let me know if the following can be done in Qualtrics. I have 20 questions. 12 of them are conjoint questions (Multiple choice). The Conjoint Question looks as follows: The first row is for SMS availability, second for color, third for display and last one is price. Suppose a respondent chooses the third choice. Usually the output in Qualtrics would come as : Question# Choice 3 It is possible to get the output as following ? If a straight approach is not available may be JavaScript would be needed. Any help would be appreciated. Thanks

364
O
Level 2 ●●
A
AlexaW
asked in Custom Code
How can I change the preview image for a survey link?

When distributing survey links via WhatsApp, etc., the link preview image that shows up on the recipient's device is the Qualtrics XM logo. I know you can change the text that previews the link to something more relevant under Survey Options General Display Name & Survey Description, but is there a way to change the image that shows up with the link preview?

3864
T
R
researching_1234
asked in Custom Code
Autoplay audio after page loads, auto advance after the audio is done, but also end the audio when advancing to the next page

I am running a study where participants need to hear an imbedded audio clip once and then the page auto advances to the next question. Below is my current code. I had to do it this way because I wanted the page to advance after the audio ended but the built-in qualtrics auto advance option doesn't take into account the time it takes the page to load- basically I couldn't guess how long the page would take to load and I wanted the page to advance without delay. I currently have 2 issues. 1) I want to be able to advance to the next page early and have the audio clip end (so that we can skip the audio clips when we are testing the survey). 2) the audio clips sometimes aren't playing if the survey has been open/inactive for a little bit. I'm not sure where exactly problem 2 is coming from, but I have to assume it's from my current code. For more info, we have participants play a youtube video within the survey and that audio will work when the imbedded audio clips don't. I am not familiar

230
R
S
QPN Level 2 ●●
sonpageQPN Level 2 ●●
asked in Custom Code
Change placeholder text color

We used custom code to set up placeholder text in open end text boxes to prompt the user to provide detailed feedback etc. Is there a way to change the placeholder text’s font color? We are not sure what attribute/class it is to alter that, if it’s available at all. var placeholderText = 'Use this section for additional feedback.';jQuery('#' + qid + ' input[type="text"], #' + qid + ' textarea').attr('placeholder',placeholderText);});

442
S
QPN Level 2 ●●
R
Robert
asked in Custom Code
Change value of the progress bar

Is it possible to change the value of the built in progress bar with a simple javascript code? The current %-values of my survey give a wrong impression about the length, so I'd like to assign my own values.

107413
B
Level 1 ●
J
JessB123
asked in Custom Code
SURVEY performs perfectly in preview but not performing with anonymous link

My survey performs appropriately in preview, but the anonymous link skips the first page of consent and goes directly into the survey. I have published the survey, but it does not work with the anonymous link. The first question is the consent and has skip logic built in if the participant does not consent, it will take them to the end of the survey. I cannot figure out why the anonymous link is skipping this portion completely, but the preview works fine. How can I fix this? I need to go live ASAP

221
C
Level 4 ●●●●
S
Level 1 ●
sajjidLevel 1 ●
posted in Custom Code
how to hide a scale point for some statements and keep it visible for others in a matrix table?

In the below matrix table, what should be the JS code if I want to keep the last measurement scale (Not Applicable) visible for some statements and hide for other statements?For e.g., in the below screenshot, I want to hide the last column for 'Age' and 'Ethnicity/Culture' but keep the last column for Disability/Exceptionality'. Is there a code to do that as well?

1922
L

Weekly leaders

Motivational Playlist

Terms & Conditions