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,066 Replies
7326 Topics
Y
yinche
posted in Custom Code
how could I display a popup window when respondents click on text

Hi,I am new to Qualtrics. I like to display a popup window when respondents click on certain text on the survey. It is like a definition or more information need to show to respondents on certain terms or text on the survey. I use the javascript function like that below:function open_new_window1a(event) { event = event || window.event; if (event.preventDefault) {  event.preventDefault(); } else { event.returnValue = false;}  new_window = open("","my_new_window","width=360,height=420,left=45,top=150, scrollbars=1");new_window.focus();new_window.document.open();new_window.document.write("");new_window.document.write("The Lifetime Capital Gains Exemption (LCGE) helps to spare businesses from paying taxes on all or part of the profit they earn when selling a small business, a farm property or a fishing property. Business owners may seek to use this option when selling their business as source of income for retirement. ");new_window.document.write("");new_window.document.write("");new_windo

830
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
I
iboafra
asked in Custom Code
Embedded Variables (Piped Field) in Web Service URL

Hello, Does the Web Service block support dynamic url strings depending on embedded variable values? I am able to successfully test my web service when the URL is statically defined. However, when I change the URL as below, the call is unsuccessful. ! Thank you!

180
S
2 years ago
C
chawk
posted in Custom Code
Two part survey information transfer

Hi,I have two part survey for healthcare safety event. I used the retake link to make this happen.Part 1 is where a quality engineer enter basic safety event information (patient name, date, etc.) The quality engineer then inputs the emails of the nurse(s) to receive the survey. Part 2 is where a nurse(s) will input feedback and event detail. When nurse(s) receive link via email, it shows what quality engineer input on first page. The problem: If a survey goes out to 5 nurses, if 1 of the nurses provides feedback and completes part 2 of survey, then when the other nurses go to complete part 2 they can no longer see the information the quality engineer input. Scenario:Nurse 1 - receives it and does it immediately. can review what quality engineer input and complete part 2Nurse 2 - receives it but doesn't click link and does it at end of day instead. When link is clicked, nurse 2 cannot see part 1 input from quality engineerNurse 3 - same as nurse 2.How can I get the data from part 1 to

120
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
H
Hattie
asked in Custom Code
Creating a graphic visual analogue scale

Hi, I am new to Qualtrics and am using the platform for my thesis research. I want to create four visual analogue scales with a smiley/ sad face at either end as the scale. I have attached a picture of the questionnaire I am trying to recreate in Qualtrics. I have read through other posts however they talk about using Java Script and I have no idea what I am doing. I cannot express how grateful I would be for some support!Best wishes, Hattie

9430
Tom_1842
Level 8 ●●●●●●●●
2 years ago
T
Tadeyente
asked in Custom Code
How do you add in JAVA in the question?

I would like to add in a JAVA code in the survey, but it does not show this option. What can I change to add in the JAVA code?

2440
T
2 years ago
E
Erika
asked in Custom Code
Has anyone utilized Custom Code for the Table of Contents?

I am looking to format the Table of Contents to have the Block names BOLDED or BOLDED plus a different color and then have all sections under that block to appear under in normal text. Has anyone used custom code for this, and if so, could you share your approach?

1390
Tom_1842
Level 8 ●●●●●●●●
2 years ago
N
nicco695
posted in Custom Code
Qualtrics: Can I custom the slider range with embedded data using javascript?

I want to create one single slider in Qualtrics where the min is always 0 and the MAX changes according to 4 different embedded data. I need help with the Javascript.Why do I need one single slider? I need a single slider because I have 16 questions in total, and it is easier to recall 16 questions ID rather than 64 different questions ID. How should the slider change? I need the slider MAX to be either 1, 10, 100 or 177. Moreover, I always need to have 100 possible choices. Therefore, I need to introduce 2, 1, 0 and 0 decimals, respectively. Why Javascript? Qualtrics does not allow dynamic custom slider values.What I have tried so far:I tried using the default options, but they are not helpful in this specific case.I tied looking for resolved questions on StackOverflow but only found this thread: https://community.qualtrics.com/XMcommunity/discussion/5963/dynamic-accessing-slider-value

1240
TomG
Level 8 ●●●●●●●●
2 years ago
S
Level 2 ●●
Super_RecognisersLevel 2 ●●
posted in Custom Code
Multiple language survey: Changing default drop-down menu to make it easier to select language

Hi all,I am trying to provide my participants with a more intuitive way of selecting the language preference for my survey, rather than the drop-down that Qualtrics provides by default.I have had a look at several sources for trying to replace the drop-down menu:https://community.qualtrics.com/XMcommunity/discussion/9256/2-language-survey-how-to-change-language-drop-down-to-a-simple-buttonhttps://community.qualtrics.com/XMcommunity/discussion/2308/change-mode-of-selecting-survey-language-using-csshttps://community.qualtrics.com/XMcommunity/discussion/1338/is-there-a-way-to-add-a-label-above-the-language-selection-drop-downBut none of these seem to provide a good solution for multiple language translations. I also found that the first link above, produces a box in the header to switch between languages, but does not seem to work too well, even when replacing with my language codes.What I am thinking is whether there could be a more intuitive way of selecting the preferred language, i.e.

12620
S
Level 2 ●●
2 years ago
K
Level 2 ●●
KatjaTLevel 2 ●●
posted in Custom Code
HTML carries over in review question

Hello,In my survey one of my first questions is a multiple choice question and each selecctable answer has an 'information' button behind, which when clicked displays more information. At the end of my survey I have created a "Review your responses" section, into which all previous answers are carried over in a non-editable way. Unfortunately I'm struggling to carry over the answer of the first multiple choice question. I have tried different types of questions. The Text Entry questions displays the answer, but it also carries over the HTML I have inserted in the multiple choice question. I can use another multiple choice question as the review question, but it looks weird and it also carries over the information button which I don't need in this section.I've tried around with this for such a long time, but can just not get it right. Would anybody have any advice?Thank you so much!

60
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
S
sozgen
asked in Custom Code
Forced Text - Auto-Advance - Prevent Timer Refresh

Hi Community, I would like to have a text-entry question that will auto-advance after a given X time (e.g., 90secs) and will require participants to write at least Y words (e.g.,25 words). But if the time is up, the participant shall be auto-advanced to next question regardless of the number of word entries made. The way I set it up is that I have a text-entry question and timer question in the same block (with no page breaks). Timer is set to auto advance after 90s. I searched and used codes available online but did not manage to streamline the process (three criteria together in one code) - given I am a newbie with Qualtrics codes! My obstacles are:1) After 90 sec, the participant is not auto-advanced to the next question/next block. It waits for the participant to enter min req. number of words. 2) If the participant clicks next before either writing 25 words or before 90s , the timer resets, and starts to recount down from 90s. I would like to prevent timer from refreshing. I wan

370
Shashi
Level 8 ●●●●●●●●
2 years ago
R
Level 1 ●
rzhao3Level 1 ●
posted in Custom Code
Validation of sum count

I want to add a validation function under this question, that is, the sum of the 3 numbers entered in this question shouldn't exceed a certain number. If the sum exceeds the number, when participants hit the "next" button, they cannot go to the next page with an error message. Is there any built-in validation in Qualtrics to realize this function? Thank you very much!P.S. I know that the matrix table has a "constant sum" function. The problem is that I don't know how to create "var" with the content entered in the matrix table under javascript. The "remaining investment fund" should show a calculated result interactively according to the three numbers entered in this question. I know the way to create var with text input is var=parseInt(textInputs.eq(0).val()); If anyone knows how to create a variable with the inputs of the matrix table, I would highly appreciate it as well!

1520
R
Level 1 ●
2 years ago
MikeW
Level 5 ●●●●●
MikeWLevel 5 ●●●●●
posted in Custom Code
Count Multiple Choice Responses when using Column Alignment

I found a solution in the community that counts the number of responses across several multiple choice questions on a page (see code below).However when I change the alignment of the multiple choice question from the default vertical layout to column layout the solution no longer works.Below is the code:let all_checkboxes = document.querySelectorAll(".q-checkbox");all_checkboxes.forEach((cb) => (cb.parentElement.onmousedown = selected_choices));function selected_choices() {    let num_chosen = document.querySelectorAll(".q-checkbox.q-checked").length;    if (num_chosen >= 2 && !this.querySelector(".q-checked")) {        this.click();        alert(            "Please select up to two choices only. Please remove a choice before proceeding."        );    }}I've tried adjusting the code. I've tried inspecting the question to try and work out what has changed in the question, but I can't work it out.1) What do I need to update in the code to make it work when the multiple choice questions a

170
MikeW
Level 5 ●●●●●
2 years ago
A
aparnab
asked in Custom Code
Text Labelling Survey

Hi,I am a new Qualtrics user, and want to set up a text labelling survey. I want each question to show a text string to be labelled. I have an external file consisting of a list of such text strings, and during survey deployment, I want each question to (1) randomly sample a text string, (2) show this on the survey page.What would be the best way to do this? Any guidance on how to proceed would be much appreciated. A python-based solution (if possible) would be most helpful

80
Shashi
Level 8 ●●●●●●●●
2 years ago
N
Level 2 ●●
NadalyLevel 2 ●●
asked in Custom Code
Hide a TOC block with Loop&Merge

I am hiding some blocks in our survey with the following code placed in the survey header:jQuery("#FL_55").hide();But blocks with Loop&Merge do not hide with this code. Is there a solution for that?

130
Shashi
Level 8 ●●●●●●●●
2 years ago
T
TGM
asked in Custom Code
Loop & Merge Timer Not Working Below 5 Seconds

Hi Qualtrics Community, I have a question I was hoping you could help with. I need my participants to be exposed to a series of images that need to automatically rotate without any interaction from the participant. They will not have any buttons or any actions from their side, they only need to be exposed to the series of images that will automatically advance in their screens after 1 second.I have configured a Loop & Merge with the images and have added a Timing question to ensure I can use the Auto-Advance function. It works wonderfully. However, it only auto-advances after 5 seconds, even if I configure the Auto-Advance to 1 second. I have noticed it is able to go above 5 seconds (I've tried 10 and 15 and it works great) but no less than 5 seconds.Is there anyway I can configure this Timing to Auto-Advance at 1 second? Is this expected behavior or a technical issue?Thank you!

180
Shashi
Level 8 ●●●●●●●●
2 years ago
A
avesha
asked in Custom Code
Java timer data not correctly recorded in embedded data - it cumulates time from future questions

I programmed a timer for each question which captures the time people spend on the question. I could not use Qualtrics in built timer because I want people to be able to pause the timer. The data in seconds for each question should be added to an embedded variable called 'response_time'. I have created new embedded variable to record timer data for each question.Q embedded varQ1 response_timeQ2 response_time2Q3 response_time3The results are forward cumulative, and only the last question has its time data correctly recorded in embeded variable. The result is the following - response_time = timer value from Q1 + timer value from Q2 + timer value from Q3 response_time2 =timer value from Q2 + timer value from Q3 response_time3 = timer value from Q3I do not want other response times to be added. I even renamed all common variables to ensure there is no cross referencing. How can I get around it? I am attaching the code here - JAVAQualtrics.SurveyEngine.addO

180
S
QPN Level 1 ●
2 years ago
R
Level 1 ●
rarcegaLevel 1 ●
asked in Custom Code
Populate first row of a side by side matrix based on a previous question and make it read-only

We ask a household size question first, and then we ask them to indicate the age ranges for each member of the hh using a side-by-side matrix with the age column as a drop down. The first row is the respondent, and I want to populate the drop-down with what was selected in the previous age question (18-24,25-34,35-54,55+) and then make it read-only. I was able to do this before when the column is a text entry but not sure how to implement the code with a drop-down.Is this possible?

490
S
QPN Level 1 ●
2 years ago
S
SJeong
posted in Custom Code
How can I stop (early exit) randomized block (or loop and merge) under certain condition?

Hello. I'm having trouble because the randomization function overrides the display logic/skip logic/survey flow function.What I'm trying to do is to show six images (2 images at a time, the order of six images is randomized) and stop showing the images once a participant chooses one of the images. Currently, I ask "Are you willing to accept either one of the offer?" and want to skip the rest of the images and move to the next block. So, some participants will make a decision on the second round (see 4 images and do not see the rest 2 images) and some participants will make a decision on the final (third) round (see all 6 images).If doesn't matter whether I use the randomization function in the block or loop and merge function as long as I can make the survey work as I explained. I tried both. However, as the randomization or loop function override survey flow/display logic/skip logic, I could not figure out how to stop participants from seeing the rest of the images once they decide to

4110
S
2 years ago
E
emmlan
asked in Custom Code
Possible to reset event count through window function?

Hi all, we are using Tracked Events in our targeting logic. The event count is manually incremented using window._qsie = window._qsie || [];window._qsie.push('eventName');Is there any way to reset the count to zero using the window functions?Relevant docs: https://www.qualtrics.com/support/website-app-feedback/intercepts-tab/edit-intercept-section/action-set-options/adding-event-tracking-triggering/#AdvancedEventTracking

960
S
QPN Level 1 ●
2 years ago
M
moralrebel
posted in Custom Code
Custom code for creating space in between 2 specific options in a 3 item multiple choice format

Hi!Can anyone please provide me with a custom code in order to create space in between 2 specific options (column style) in a 3-item multiple choice format. Please find attached an example of the desired end state. Any help would be much appreciated, thank you!

500
S
QPN Level 1 ●
2 years ago
C
carolinefilan
posted in Custom Code
Side-by-Side Image and Question

I am new to Qualtrics but looking to create a survey where the image is on the right side of the survey and four questions are displayed to the left of that image. Does anyone have any kind of idea of how to accomplish this?

5060
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
J
JoseSantos
posted in Custom Code
Symbol (€) in mobile version vs desktop version

Hi, I need help with a question.I placed a java code that allowed me to insert a symbol (€) in front of the text box. However, in mobile version this does not happen because the symbol appears below the text box and not on top. Ex: Mobile VersionEx: Desktop VersionIn the desktop version is correct. Can you help me with this issue? Thanks a lot!

50
J
2 years ago
T
terisaurus
asked in Custom Code
Remove / reduce spacing between horizontal choices

I am trying to reduce the spacing between a set of horizontal choices on a 3-choice multiple choice question. I've tried narrowing the entire survey, as well as reducing the size of the buttons. No matter what I do, the spacing is retained (even with smaller buttons).I think I'm close to isolating the .css element with inspect, and I've found a setting where the width of a table is 33.33..%.I've tried a few things, and spent some time searching the forum, but can't quite get it, some attempts below:.Skin .MC .MAHR table td, .Skin .MC .SAHR table td, .Skin .NPS table td {width: 10%!important;}.Skin .MC .MAHR .QuestionBody td.LabelContainer.LabelContainer {width: 50px;}Any help is appreciated.

2330
M
2 years ago
J
JoseSantos
posted in Custom Code
Symbol in front of "text entry"

Hi,I have two questions: 1- In a "Pick, Group and Rank" question I need to change the word "Items" to "Options". How can I do this? 2- A second question concerns a "Text entry" question. I would like to put a "€" symbol in front of the text box to help the respondent understand. It could be inside or outside, I just need to put that symbol somewhere. How can I do this? Many thanks. Best regards,

2800
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
R
Robin2024
posted in Custom Code
How to increase height of single group container in "Pick, group, rank" question?

Hi there! This question pertains to the container in which items can be dragged. I have a list of about 30 items, and participants are to choose 10 of those items and place them in a single group container. What code do I need to enter in the Custom CSS to increase the height of the container, so that respondents can drag an item from the list horizontally into the container - without having to scroll up? I would be grateful for any advice that you may have!

420
R
2 years ago

Motivational Playlist

Terms & Conditions