Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,321 Topics
  • 23,036 Replies
7321 Topics
P
Level 2 ●●
pb7Level 2 ●●
asked in Custom Code
Extracting recode values for dropdown mcq using jQuery

I have a simple dropdown for participants to select their year of birth. I want to create a variable under addOnPageSubmit that will give me the recoded value for this question. I can’t use var age = this.getChoiceRecodeValue(this.getSelectedChoices()); since the js has to be in a different question on the same page. Ideally, I would want something like the below var age= jQuery("#QID209 option:selected"); However, I can’t figure out how to get the recode values using this :( Any help is appreciated! 

522
P
Level 2 ●●
1 year ago
T
TysonVanOverhill
posted in Custom Code
Is there a way to add text before the language dropdown?

I have tried to add a ::before element with a content directive to select#Q_lang.Q_lang, Q_lang, and #Q_lang to no effect.select#Q_lang.Q_lang{ content:"Insert Text"}Is there a better supported way of adding a label to the dropdown?

924
RachelG
Level 2 ●●
1 year ago
T
tpraveenkumar
posted in Custom Code
ISO language is passed in Q_lang which isn't working for three languages. Script to change the iso language to Qualtrics language

Hi All,   We are using Q_lang parameter for prepopulating the customer preference language in the url sent in the email. However, for the below languages Qualtrics is using a different language code values. ISO Code → QualtricsES    → ES-ESZH  → ZH-SZF → ZH-T We are using blocks on the survey and would like to add the javascript to one of the block which can change the language on the load.OnReady function. var Q_Lang= "${e://Field/Q_lang}";        if(Q_Lang=="ZH") { jQuery("#Q_lang").val("ZH-S").trigger("change") };    if(Q_Lang=="ZF") { jQuery("#Q_lang").val("ZH-T").trigger("change") };    if(Q_Lang=="ES") { jQuery("#Q_lang").val("ES-ES").trigger("change") };However, this isn’t working. Can you please give us the hint? 

811
Deepak
QPN Level 8 ●●●●●●●●
1 year ago
A
Level 2 ●●
aghoshLevel 2 ●●
asked in Custom Code
Size of graphics in option boxes of multiple choice question not reflecting image size

Hi! I am trying to create a multiple choice question with images in the option boxes. I have added the images using text editor to the options. However, the option boxes don't seem to reflect updates to the size of the embedded image beyond a certain point (eg., the change is reflected with image heights between 0-200; but beyond that height the changes aren't reflected). The layout of the question is horizontal placement of the option boxes.Could someone please explain this behaviour of the option boxes and how I could change it to reflect larger sizes of the images?  Thanks a lot!

1132
A
Level 2 ●●
1 year ago
H
HollySt
asked in Custom Code
File Uploads Survey Response

Hi All, I set-up a survey that allows file uploads.  When the email submissions are sent to us via the Workflows>Survey Response, the piped File Upload (<a href=“${q://QID1/UploadedFileLink}”>Uploaded File</a>)  is a clickable link, but does not allow the file to be downloaded via the email submission.Do you know of any HTML code or setting in the Workflows that can facilitate the download of the file in the email submissions?  Alternatively, is there any way to append the file upload received via the survey to the email submission?  Appreciate any direction or thoughts on this.  Thanks!

2171
Shashi
Level 8 ●●●●●●●●
1 year ago
J
JMaca
asked in Custom Code
Display Uploaded Image

Hi there,Just wondering if there is a way to capture the url (maybe as an embedded variable?) of an uploaded picture to then display it later on in the survey? Thanks!Jess

2234
W
Level 1 ●
1 year ago
T
Level 1 ●
thunderdan79Level 1 ●
asked in Custom Code
Conditional "Next" button

Hello,First of all, I have found this community to be very helpful and supportive, and have found many answers here already, so I’d like to say thank you to all who have posted solutions!However, I have not been able to find an answer to what I am struggling with at the moment.For my survey, on the second page of my survey, I’d like to have the “Next” button hidden, and only displayed if the user answers “Yes” to the following question which is on the same page:Question:YesNoThis question is a multiple choice question with Answer type of “Allow one answer”Thank you!

5499
Deepak
QPN Level 8 ●●●●●●●●
1 year ago
ChhaviChauhan
Level 1 ●
ChhaviChauhanLevel 1 ●
asked in Custom Code
Progress Bar Customization

Have anyone used some customised codes for progress bar showing the total progress on survey, currently the progress is based on the pages of the survey responded... if one my question has the logic the % is not acccurate.

7907
L
1 year ago
M
MatthewJay
asked in Custom Code
How to Carry Forward subset of drilldown options for matrix questions

So what I have is a drill down hierarchy ofRegion > Park > EntranceThe users will select a Region and a Park for the first question. What I then need is for the entrances to carry forward as the statement options for a matrix question.https://www.qualtrics.com/support/survey-platform/survey-module/editing-questions/question-types-guide/specialty-questions/drill-down/The help provided in the drill down guide above only provides a way to carry forward the selected park or region, but not the entrances associated with the selected park.Is there a way to carry forward drill down options that haven’t been asked without writing loads of conditional display logic questions?Thanks!

1514
ThomasW_IronMountain
Level 5 ●●●●●
1 year ago
N
Level 2 ●●
nrb0050Level 2 ●●
asked in Custom Code
Help with word search data

Hello!I recently used a code to incorporate a word search in my study.I also included a timer on the page which automatically skips to the next page. However I am unsure whether or not including the timer has made it so I am unable to view any other data on the page other than the timer info (clicks, etc.)!Can someone please help me out, as I’m not a coder!

29415
N
Level 2 ●●
1 year ago
A
Level 2 ●●
aghoshLevel 2 ●●
asked in Custom Code
Align all the images at top of multi-choice option boxes

Hi! I am trying to add images to a multi-choice option boxes. I have used the "Rich content editor" and tables with 1 row 1 column, to insert my image graphic. Is there a way to align all the images across the multi-choice option boxes, at the top of the box?I have an image to describe my current issue: I would like to align the images to the top. Thanks a lot!

220
A
Level 2 ●●
1 year ago
R
robi_kalinisan
posted in Custom Code
Enable/Disable Text Box using Radio Button on a Side by Side Question

Ive been looking for any solutions and trying javascript , just to enable the text box whenever I tick the corresponding or its partnered radio button inside in a side by side question type.Example scenario: at onload . the text boxes (1 ,2 and 3) are all disabled. That I cant put any characters. To enable the text box, I just need to tick the radio button depends on the number of the radio button. So if I tick the Radio Button 1, this will enable the text box 1 . The 2 and 3 still disabled. vice versa.

5734
S
1 year ago
V
vince89
asked in Custom Code
Add images to attributes in DCE

Hi everybody,I would like to include pictures for each attribute shown in my DCE. Is there anyway that I can add pictures to attributes?What I did is that I first used Conjoint survey (as choice tasks created) and then include such survey to the main survey. However, I cant find a function in Conjoint survey that I can include pictures to attribute. It only allows me to include pictures in attribute LEVEL. Please see below image attached.Many thanks! 

220
V
1 year ago
T
tjwomble
asked in Custom Code
Javascript not working on mobile devices

I have a Side-by-side question that I’ve written JavaScript for (the first column has a checkbox that disables the rest of the row if checked).  This works fine on a desktop browser, but doesn’t seem to run at all on a mobile device (tested on iOS and Android).  When I connect to web inspector (iOS) I don’t see that the script is called at all (no errors, no console output).  I’m not sure what to check next.   Please help, you’re my only hope! Qualtrics.SurveyEngine.addOnload(function(){ var choices = document.querySelectorAll(".Choice"); this.questionclick = function (event, el) { const disableChoice = function (choiceTD) { choiceTD.children[0].disable(); choiceTD.children[1].style.background = "lightgrey"; choiceTD.children[1].style.borderColor = "lightgrey"; choiceTD.children[1].style.opacity = "25%"; } const enableChoice = function(choiceTD) { choiceTD.children[0].enable(); choiceTD.children[1].style.background = ""; choiceTD.children[1].s

12224
qualtrics_nerd
Level 5 ●●●●●
1 year ago
dobra021
Level 4 ●●●●
dobra021Level 4 ●●●●
asked in Custom Code
Select2 Text Entry Form Multi-Select Dropdown

I am using javascript to transform a text entry form field into a dropdown list and I need to make it multi-select. I know I will need to use Select2 and I have loaded the following into the header: ``` <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> ``` I've read through a lot of the Select2 material, but haven't quite figured it out yet. How would I adapt this code to make the last form field multi-select. ``` Qualtrics.SurveyEngine.addOnReady(function() { /*Creates dropdown lists for form text entry boxes*/ var that=this.questionId; var element="<select id='s1'><option ></option><option value=OPTION1</option><option value='2'>OPTION2</option><option value='3'>OPTION3<option value='4'>OPTION4<option value='5'>OPTION5</select>"; jQu

8272
Tom_1842
Level 8 ●●●●●●●●
1 year ago
J
Level 2 ●●
Jessica.SLevel 2 ●●
asked in Custom Code
Validation of responses in constant sum questions.

Hello! I have a question about validation of responses in constant sum questions.I have noticed that if I add validation (e.g.  must total 100) to a total sum question or to a matrix question with matrix type ‘constant sum’, and if this requirement is not met (response does not equal 100), then all the respondent’s existing responses are cleared. If there are several constant sum questions on one page and one of the questions does not meet the condition, ALL the existing responses for ALL the questions are cleared (even the ones they had completed correctly). So, the respondent would need to complete all the questions again. This does not happen for other question types with validation checks. For other question types, the original responses are kept in the fields, allowing respondents to revise (rather than re-type) their responses.I was wondering if there is a way to keep the responses in the fields (while still showing an error and not allowing the participant to progress until the

1943
J
Level 2 ●●
1 year ago
M
Level 1 ●
markwardlawLevel 1 ●
asked in Custom Code
Moving the next and and previous buttons closer together

Hi, just wondering if its possible to move the next and previous buttons closer together on a survey? I am creating a survey to be used on mobile and feedback has indicated users are having to swipe to get access to them.I am currently using a basic template in Qualtrics, no custom CSS

2183
M
Level 1 ●
1 year ago
E
EPx
asked in Custom Code
Calculate Age (in months) from Date of Birth?

Hi everyone,I am not very tech-inclined and have little experience with JavaScript (or programming languages, for that matter), so please go easy on me. I have seen similar questions in the community but have found them hard to follow or not applicable (e.g., calculating in years).I am looking to group my participants in three different ways: A) under 18 months, B) 18 - 30 months, and C) 30+ months. At the moment, I ask their parent to input their child's age in months and use that number to branch off of, but this can lead to parents miscalculating their child's age in months. I would prefer for the survey to automatically calculate it for them after they enter the child's date of birth.Any help would be appreciated. Thank you!

6487
JonesE
Level 4 ●●●●
1 year ago
A
QPN Level 2 ●●
asi2QPN Level 2 ●●
asked in Custom Code
Change Survey Look and Feel based on Location/Brand/Product

Hello, I want to automatically set the theme (mainly primary colour) of the survey based on the location each respondent is located. For Example, location 1 main colour is blue, location 2 main colour is green, etc. Is this possible at a survey level (using the css editor or would I have to do it at the question level? 

1047
JesperAndersen
QPN Level 4 ●●●●
1 year ago
K
Level 5 ●●●●●
KateLevel 5 ●●●●●
asked in Custom Code
Reduce White Space

I have tried MANY different solutions, but remain unable to reduce the white space in my survey to help a Site Intercept display correctly. What am I missing? The only thing to make a dent is standard “look and feel” options to reduce to “compact” question spacing, no custom code has done anything. Survey/Intercept in question:  Previously attempted solutions:   

10653
JesperAndersen
QPN Level 4 ●●●●
1 year ago
A
Level 2 ●●
aghoshLevel 2 ●●
asked in Custom Code
Place the question of a dropdown style question to the left of the dropdown

Hi, I am looking to customize the display of a dropdown question. In the default setting, the question appears above the dropdown. I tried adding the following javascript code to place the question text to the left of the dropdown: Qualtrics.SurveyEngine.addOnload(function(){ /*Place your JavaScript here to run when the page loads*/ var id=this.questionId; jQuery("#"+id).find("Select").before("This is the question text? ");});However the dropdown menu is still displayed below the question. Looking for pointers on how to place the question text to the left of the dropdown. Thanks a lot!

833
A
Level 2 ●●
1 year ago
A
Level 2 ●●
aghoshLevel 2 ●●
asked in Custom Code
Place three images with captions in the question text of a multiple choice question.

Hi, I have a multiple-choice survey question which has three images and needs to be aligned with captions in the same row. I currently have the following html/css code to achieve this:Html code in the question text:<p>QUESTION TEXT?</p><div class="main><div class="pics3"><figure><img src="..." style="width: 125px; height: 125px;" width="125" /><figcaption style="text-align: center;">Grid-1</figcaption></figure></div><div class="pics3"><figure><img src="..." style="width: 125px; height: 125px;" width="125" /><figcaption style="text-align: center;">Grid-2</figcaption></figure></div> <div class="pics3"><figure><img src="..." style="width: 125px; height: 125px;" width="125" /><figcaption style="text-align: center;">Grid-3</figcaption></figure></div></div>CSS:.main{ width: 100%; padding: 5px 5px 5px 5px; }.main::a

954
A
Level 2 ●●
1 year ago
D
Dave_Situmorang
asked in Custom Code
System Date on the Survey Form

Hello,May I need your support? I need to do a survey and want to put a SYSTEM TIME / CURRENT TIME into the survey form.Would you please advise how should I do?Thanks in advance for your kind help.Best Regards,Dave

344
D
1 year ago
D
Level 1 ●
davetannenbaumLevel 1 ●
asked in Custom Code
How do I show one image on a page, have it disappear and then show another image on the same page?

Short story:I'd like to be able to present an image for 500 ms, directly followed by another image (on the same page) that is presented for 2 seconds.Longer story:I plan to show respondents 50 images each. The keep things manageable I am doing this using the loop & merge function (which pipes in a link to an embedded image), with one image shown at a time. I plan to show each image for exactly 2 seconds, which I can do using the setTimeout function in Javascript.However, before each image is presented I would like to show respondents the same static image for 500 milliseconds. I'd like to do this all on the same page (i.e., respondents do not auto-advancing to a new page between the first and second image). This is the part I haven't been able to figure out --- how to show one image on a page, have it disappear and then show another image on the same page.Any suggestions would be much appreciated.

4916
D
Level 1 ●
1 year ago
J
Level 1 ●
jmcintoshLevel 1 ●
asked in Custom Code
Hiding drilldown answers based on embedded data

I am designing a survey to be used as an intake form with preferences and selections from a respondent. We have decided to use the drill down question type for its clean design and user interface. We prefer not to have a second version of the question that has different responses and though JS could be the solution.I want to hide/remove one option based on embedded data; the option value is 40 (from the inspector view). So far, I have been able to use JS to hide the first drill down box but not just the option. A few of my attempts have included selecting from the n-th child and then .hide() or .remove() which selects the option before hiding the entire box. Based on other posts, I believe my answer may lie on the old Qualtrics Community site that is no longer accessible (https://www.qualtrics.com/community/discussion/comment/15688#Comment_15688). Here is what I have attempted in code:if("${e://Field/EmbeddedData}"=="123") { jQuery("#"+this.questionId+" select option:nth-child(7)").

2142
J
Level 1 ●
1 year ago

Motivational Playlist

Terms & Conditions