Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,301 Topics
  • 22,964 Replies
7301 Topics
A
avikram
asked in Custom Code
Deselecting other checkboxes if one is selected

Suppose I have a checkbox style question - "What fruits do you like?" and the options are: * Apples * Bananas * Oranges * Unsure I want to try and implement two functionalities: 1. In case the user selects "Unsure", then I'd want the other checkboxes to be deselected 2. If afterwards the user deselects "Unsure", then the selections made previously should reappear I need to necessarily figure out a way to implement (1). (2) would be a nice-to-have, but not wholly needed. Follows is the code, wherein I tried to implement this: jQuery("#QID10-4-label").click(function(){ if(jQuery("#QID10-4-label").hasClass("q-checked")){ //This will be implemented if the user has selected option 4 jQuery("#QID10-1-label").prop("q-checked", false); jQuery("#QID10-2-label").prop("q-checked", false); jQuery("#QID10-3-label").prop("q-checked", false); } else { //This will be implemented if the user has deselected option 4 //Ideally I'd want

2203
F
7 months ago
A
Level 1 ●
AL_2022Level 1 ●
asked in Custom Code
custom code for pairwise combintaion of responses

Hello XM Community,I'm working on a survey project where participants are asked to identify both their starting and ending cities for a specific journey. My challenge is to do with  categorising these journeys as either intrastate (ie within California) or interstate. For context, in California alone, we have 12 major cities, resulting in 66 possible city pairings, plus the reverse direction of travel.  We have 4 states in total.Using traditional branch logic and embedded data fields in Qualtrics seems impractical due to the sheer volume of potential combinations. My goal is to find a more efficient method to group these responses correctly without having to manually code an exhaustive list of combinations.I am thinking about post-processing step outside of Qualtrics, as we have already 100K responses.  Is it possible to use a web service to process responses in real-time and categorise them accordingly? Has anyone faced a similar challenge with categorizing responses based on a large

352
A
Level 1 ●
7 months ago
C
Cat Mug
asked in Custom Code
Javascript Executed Twice when NOT in Preview Mode

I've set up a custom drilldown question in my survey that lets people choose their location step by step. They can pick from four dropdown menus, which are filled out by a piece of code that looks like this:jQuery(document).off('change', '#QID1_dropdown').on('change', '#QID1_dropdown', function () {    var provinceId = jQuery(this).val();    Qualtrics.SurveyEngine.setEmbeddedData('provinceId', provinceId);    if (provinceId) {        jQuery('#QID2_dropdown').empty().show().append('<option value="">Select City/Regency</option>');        console.log("Fetching cities/regencies...");        jQuery.get('https://mybackendwebsite.com/cities_regencies/' + provinceId, function (data) {            var cityRegencyDropdown = jQuery('#QID2_dropdown');            console.log("Appending cities/regencies...");            jQuery.each(data, function (_, item) {                cityRegencyDropdown.append(new Option(item.city_regency_name, item.city_regency_id));            });            conso

341
TomG
Level 8 ●●●●●●●●
7 months ago
IsabelPosada_Voce
QPN Level 4 ●●●●
IsabelPosada_VoceQPN Level 4 ●●●●
asked in Custom Code
How can I put a drop-down list in a form question field?

Hello Everybody!! We need to launch a survey for updating customers´ data, so we need to make them to select which of the 3 types of document do they have, and this is just one of the field from the form and we don´t want to make an additional question for this. I want to put the dropdown list in the yellow field: ! Thanks for helping me!!! B) B) :* :*

582544
Q
7 months ago
F
FelixK
asked in Custom Code
Replacing piped text with JS based on certain conditions

Hi,Essentially what I want to do is to compare values obtained from participants to loop and merge fields. If any of the participants’ values is less than its corresponding loop and merge value, it replaces the piped text content of another loop and merge field with “1”.The reason why I want to do this is because I want to show participants the results of a simple algorithm (${lm://Field/9}). Let’s say the algorithm is supposed to predict whether a fictional person would be a good partner based on three pieces of information. I want to give the participants the chance to create rules upfront like if the fictional person is above a 7/10 in messiness then the actual algorithm’s prediction will be overruled and just replaced with “1”.I am pretty sure my code mostly works due to the console.log notifications. However, it seems to fail on the last part. I think the reason is that the piped text loop and merge field I want to replace with “1” does not have an HTML element ID and therefore ca

643
F
7 months ago
T
tmcounts
asked in Custom Code
Rank-Order Carry Forward using Embedded Data

I am designing a survey where respondents identify the sports they played in Q8, Rank them in Q9 (using carry-forward), and then I want to embed the rank #1 in a series of questions, and then repeat those questions for sport rank #2 and #3.Q8: Participants indicate number of years they played in sports (if at all) from a list of 17 different sports.Q9: Uses carry-forward items of chosen responses and ask participants to rank the sports in order of importance with most important sport ranked #1. [note it will only display the sports they chose from Q8 given the carry-forward]Q13: "How old were you when you began to play [sport ranked #1 from Q9]"Q30: "How old were you when you began to play [sport ranked #2 from Q9]"Q50: "How old were you when you began to play [sport ranked #3 from Q9]"I know I cannot use piped text because I need more than the highest value and lowest value. I only care about the top 3 ranked sports from Q9 for later use throughout the survey. Some of the research I'v

5696
S
7 months ago
M
Level 2 ●●
MaggieGentryLevel 2 ●●
asked in Custom Code
How to change auto-advance by question/question response

How can I enable auto advance in the theme BUT disable on the last question/question block. I want people to be FORCED to answer a question but NOT autoadvance to close, after answer is submitted. Any javascript? Any HTML code? Or is there code for each block to autoadvance? Help!Update to my question. If yes is selected here, I want to autoadvance to next screen/closing. If no is selected, I don’t want anything to happen. So how do I implement autoadvance on the whole survey BUT only one response for the last question?  

23011
M
Level 2 ●●
7 months ago
A
Level 2 ●●
ar03Level 2 ●●
asked in Custom Code
displaying images using loop and merge

I want to display a series of images with a slider question using the loop and merge function. I have loaded the image urls in field 1 but I am unsure what the html should be to get the images to show. I have tried this - ${lm://Field/1$} - but it is not working. thanks in advance for any help

3609
G
7 months ago
A
adunlap
asked in Custom Code
Tracking use of hover or pop-up text

I am developing a survey that has respondents rank a list of terms. They can currently hover over the terms in the answer choices to see a definition of the term. (I used these instructions: https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly) I need to be able to track which respondents access the definitions while taking the survey. I think it would be easier to have them click on the text for a definition (instead of hovering) and track whether they clicked on the text but I'm not sure how to do this. Thanks in advance for any advice! -Adrienne

461
Phillsh
Level 1 ●
7 months ago
S
snaegelen
asked in Custom Code
Loop & merge code not working

I am looking to create a loop and merge for one question with 60 images. I’m entering the codes correctly (I think) but there isn’t anything showing up when I preview the survey. The code itself (${Im://Field/1}) disappears. Does anyone have any idea why this is happening ? Here’s what I uploaded in the loop & merge : I have a free account, could this have anything to do with it?

381
N
7 months ago
L
Louise_hrs
asked in Custom Code
Date Picker w/ data validation

I'm using the Qualtrics survey to ask about the event date so that they can pick it up on a calendar. I want it to be the one that actually displays a calendar as opposed to the others that have drop-downs. The dates available for selection should start from 14 days after the date they fill out the survey. The user should not be able to choose a date within 14 days from today. How should I do that?

55815
Deepak
QPN Level 8 ●●●●●●●●
7 months ago
L
Level 1 ●
Lee783Level 1 ●
asked in Custom Code
Line Break for custom text on Next Button

Hello,I added a privacy notice for my survey and added a custom text on the next button saying “I consent to the processing as described above and will participate in the market research study”.Unfortunately the text is quite long and not fully displayed on mobile. How can I add a line break?If I do it with HTML, then this code is shown as button text, but no line break is executed.FYI: I have a customized survey layout with logo and customized colors for buttons, maybe this has an influence Thanks & best,Laura  

1169
L
Level 1 ●
8 months ago
X
xanne
asked in Custom Code
How do I change the spacings between the scale points in a matrix likert scale?

Hi, I'm trying to change (decrease and increase) the spacings between the scale points in a matrix  likert scale. Does anyone know how that works? 

4785
T
8 months ago
P
polyama
asked in Custom Code
One region in Hot spot question

Is it possible to allow only one region selected in Hot spot question, and unselect when another region is selected? Like in a multiple choice question which allows one answer?

3685
G
Level 2 ●●
8 months ago
H
hx2022
asked in Custom Code
Adding a button to listen to a recording of the question

Hello, I would like to introduce in my questionnaire the possibility to listen to the question, for example by clicking on a button next to each question which contains a recording of the question (which we could make previously for example)Is this option available on qualtrics? Does someone know the code? Thank you very much in advance  

8946
K
Level 1 ●
8 months ago
dtyler
dtyler
asked in Custom Code
Check user selectIon against a lookup table, write other values in that row to embedded data

TL;DR Create a VLOOKUP equivalent in Qualtrics? --------------- I have several surveys that are similar, but with various tweaks. There are about 12 surveys now, but that could grow to 30+. Instead of having several different surveys that are all similar, I'd like one survey that is customized based on the user's response to the first question. (The surveys are about sport leagues, so you'll see some of that language in here.) For example, if the user selects "MLB" on page 1, I'd like to show survey Blocks A, B, and C. But, if the user selects "EPL," the user would see Blocks A, B, and E. I could build a bunch of if/then logic statements into Qualtrics to accomplish this, but that seems horribly inefficient. It's also more rigid than I'd like, since when I make changes in the future I might want the "EPL" respondents to see Blocks A, D, F, and K. My idea is to create an embedded field that corresponds with each Block (e.g., "blnShowBlockA", "blnShowBlockB", "blnShowBlock_"). If th

3209
BDT
8 months ago
K
Kara_C
asked in Custom Code
Make hot spot exclusive

Hello all,I am making a "hot spot" type question where people will have to select one rung of a ladder. I currently have a validation set so they can only move on once they've selected one, and only one run. I was wondering if there is a way to make the selection exclusive (like in multiple answer, multiple choice questions), such that if a participant selects one spot but then decides they want to select a different one, it will automatically deselect the other spot. Thank you!

682
G
Level 2 ●●
8 months ago
S
Level 1 ●
SurveykorLevel 1 ●
asked in Custom Code
Adding JavaScript to the End Message in order to track clicks on external links

Dear community, I found a solution how to track clicks on external link when it is included in a question (e.g. here  https://community.qualtrics.com/custom-code-12/where-can-i-find-whether-participants-clicked-on-a-link-or-not-13806). However, I would like to track clicks when the external link is included in the end message.How can I include the following JavaScript to the end message? Qualtrics.SurveyEngine.addOnload(function() {              jQuery('#extLink').click(function(event) {                            Qualtrics.SurveyEngine.setEmbeddedData("clicked", "1");                            jQuery("#NextButton").click();              });});Will adding Embedded Data: clicked = 0, in the Survey Flow, before the end message containing the external link work? Thank you in advance for your helpful comments!Best, Kor

2684
A
8 months ago
AdamK12
Level 5 ●●●●●
AdamK12Level 5 ●●●●●
asked in Custom Code
Correct CSS Selector script for displaying Embedded Feedback?

Hello! I’m struggling with implementing the correct CSS selector script to enable an Embedded Feedback intercept. The intercept is testing fine, but is just not visible on the web page. Could someone please provide the correct script so that it displays in the footer? Thanks in advance!

911
K
Level 2 ●●
8 months ago
A
AnGi
posted in Custom Code
Show next button only if an answer is selected

hello matesneed your helpi have a simple multiple choice question with only one checkboxI would like to show the next button only if this checkbox is selectedIs there a way?

2104
N
8 months ago
D
dankob
asked in Custom Code
Any solutions to create a Constant Sum / Slider-type question

Hello! Would love any advice on how to accomplish any of the following:  I’m designing a survey where respondents can allocate credits to a variety of choices, or keep those credits without allocating them.The issue I am running into is that there are elements from both the Slider question type and the Constant Sum question type that I’d like to fuse together. Specifically:1) Snap to Gridlines Function: I need the ability to use 'Snap to grid lines' as respondents should only be able to select credit amounts that are by the 10's (e.g: 10, 20, 30, 40, etc.)(This is something that the Constant Sum question doesn’t allow natively) 2) Constant Sum ~ Responsive Limits: Once respondents assign a portion of their total allotment to one or two items, I’d like to grey out the other bars and doesn’t allow them to assign more.(This is something that the Slider question doesn’t allow natively) 3) Choices with dichotomous values (0 or 20pts): I have a few choices where respondents should only be ab

1531
qualtrics_nerd
Level 5 ●●●●●
8 months ago
H
Hilaryacd
asked in Custom Code
Default choices for a multiple choice question with multiple answers using embedded data

How can I setup a multiple choice question where multiple answers are possible and default choices are selected based on the contact list? I also want to be able to display all the possible choices and only have the relevant choices based on the contact list. 

801
N
8 months ago
D
danlu
posted in Custom Code
How to make Columns Exclusive in Side-By-Side Questions?

Hi everyone,I've developed a survey that looks at the connections between members of two groups in New Zealand. I have a side by side question (see below) that asks to rate the stability and strength of the relationship, giving the option of selecting NA if not applicable or No relationship if there's no relationship. "No relationship" and "not applicable" should be exclusive: If there is no relationship then it can't be strong or stable. How do I do that? I've tried some options but they didn't work. Any help would be much appreciated!Thanks,Lucia

831
KimB
Level 1 ●
8 months ago
V
varunathi
asked in Custom Code
Auto-advance on one block affecting advancement on future block.

The survey I’m developing has two blocks in close proximity to each other. These blocks both have Timing questions.The Timing question in Block A (the first block) has “Display ‘submit’ after 300 seconds” and “Auto-advance after 600 seconds” enabled. So participants are not able to proceed to the next block before 5 minutes have passed. If they finish after 5 minutes and before 10 minutes, they may proceed to the next block voluntarily. If 10 minutes have passed, the block will auto-advance.The Timing question in Block B (the second block) has “Display ‘submit’ after 300 seconds”. However, when previewing my survey (and in one case of running my survey), the block auto-advances. Based on timing, I have basically confirmed that Block B is auto-advancing based on the “Auto-advance” feature in Block A. I looked online for answers. The only solution that seemed viable was to use Qualtrics.SurveyEngine.addOnPageSubmit(function() {    clearTimeout(to); // Clear the timer to prevent auto-adva

311
N
8 months ago
M
Qualtrics Employee
MatHagerQualtrics Employee
asked in Custom Code
Turn OFF Autoadvance option for last question in survey

DELETE

362
A
Level 7 ●●●●●●●
8 months ago

Motivational Playlist

Terms & Conditions