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
L
Luksh
asked in Custom Code
Matrix carousel not displayed correctly after adding display logic

I set up a matrix carousel question after a rather lengthy bit of text. Because I would like to encourage respondents to first read the text, before reading the questions (on the same page), I would like to set up a “button” which triggers displaying the matrix carousel. I found a solution which works for me (involving a display logic dependent on a multiple choice question with only one option), however, this messes up the formatting of the matrix carousel (see preview screenshot). If I remove the display logic matrix carousel is displayed as expected. Is there a way I can circumvent this error or fix the formatting of the matrix carousel?  Thanks in advance for helping!  

727
praveengeorgeix
QPN Level 4 ●●●●
8 months ago
JR33
QPN Level 2 ●●
JR33QPN Level 2 ●●
asked in Custom Code
Hidding Powered by Qualtrics - Custom code doesn't work with simple layout

Hey,I have an issue with the code for hidding “Powered by Qualtrics”. It doesn’t work with the simple layout.<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">Qualtrics.SurveyEngine.addOnReady(function() { jQuery('#Plug').attr('style', 'display:none !important');});</script>I tried to call sur jquery library before it but still not working.Thanks for your help

2253
JMyers
8 months ago
R
rmoseley
posted in Custom Code
How to limit characters to just one free-text option on a multiple choice question?

Hello, Sincere apologies if I post this question in the wrong place - I am totally new, though a long-time Qualtrics user!I've worked out how to limit characters to text response questions and form field questions using Javascript as follows:Qualtrics.SurveyEngine.addOnload(function(){jQuery("#"+this.questionId+" .InputText").each(function () {  jQuery(this).attr('maxlength','200');});});Unfortunately, I cannot figure out how to prevent participants going over 200 characters on a multiple choice question where most of the items are clickable but only one is free-text. I believe it's possible to do this via 'matches regex', but I would rather participants can clearly see where they're unable to go any further. Presently, with the above code, they can select option 4 and then keep on writing beyond the 200 limit. Does anyone know how I can make this Javascript work for one free-text item within a multiple choice or a matrix table made up of other clickable options? My questions are, for

4317
JMyers
8 months ago
K
Kevin M
asked in Custom Code
Tooltips for questions and for multiple choice - examples not working

This question has been asked 300 times before, but I cannot find a working solution. I’ve tried searching the forums and even ChatGPT. I’m looking for a working version of tooltips. The examples that I found either just don’t work or they cut off the top of my text.Any ideas?

1531
A
Level 1 ●
8 months ago
A
Level 1 ●
ahughes9Level 1 ●
asked in Custom Code
Tool tips in MaxDiff aren't working

How can I get tool tips to work for a MaxDiff attribute? This used to work: <div title="text">text</div> where “text” is the tooltip text. I also tried: <span title=”tool tip”>Attribute label</span>. However, it seems like Qualtrics is now stripping out the HTML in the attribute box. Any suggestions?  

281
A
Level 1 ●
8 months ago
X
xelaO
asked in Custom Code
Translating piped text value with JavaScript

I am trying to have a piped text translated from English to another the language selected by the survey on starting the survey using JavaScript. I put together this script below but it failed. Any idea if this is possible? or ideas as to what I might be missing? Thanks in advance. Qualtrics.SurveyEngine.addOnload(function() {    // Get the selected language choice    var selectedLanguage = "${e://Field/LanguageChoice}";    // Get the current value of the piped text    var pipedTextValue = "${e://Field/added%20info}";    // Trim whitespace from the piped text value    pipedTextValue = pipedTextValue.trim();    // Define the specific text to search for    var searchText = "This is the current text.";    // Check if the piped text contains the specific text    if (pipedTextValue.includes(searchText)) {        // Check if the selected language is French        if (selectedLanguage === "French") {            // Replace the content of the preferenceInsight element with the French translation

1638
X
8 months ago
B
brannan_m
asked in Custom Code
JavaScript and MaxDiff Most Preferred selections

I’m hoping for help with accessing the data from a MaxDiff question via JavaScript.For context, I am trying to create a MaxDiff survey with conditional follow-up questions. So if someone selects feature X during any of the MaxDiff questions as most preferred, then at the end of the survey they see the "feature X follow-up question." If they did NOT select feature X as most preferred, then they do NOT see that follow-up.I see that MaxDiff questions do not work with survey logic. So I am trying to get it to work with JavaScript.From an export of the data, I found the variable names associated with the MaxDiff selections:QID1_1QID1_2QID1_3…Which then correspond with the order of concepts in the following variables:1.1_MAXDIFF1.2_MAXDIFF1.3_MAXDIFF…But I can’t figure out how to access the value in JavaScript.When I return a console.log of the following MaxDiff variables, it returns nothing: temp_MaxD_Question = '${q://QID1_1}';console.log("temp_MaxD_Question = " + temp_MaxD_Question); With

1408
B
8 months ago
M
Level 1 ●
mblanyonLevel 1 ●
posted in Custom Code
Delaying a question from appearing?

This question was posted and answered in the community page six years ago.  I tried the JavaScript provided by AnthonyR below, but it doesn’t seem to be working for me.  I don’t know if there is something within Qualtrics that has changed in that time frame that wouldn’t allow this to work?  Any ideas? Is there a way for me to delay a question from appearing? I have a video that I would like the respondent to watch for 30 seconds before a question appears right below it on the same page.iconBest answer by AnthonyRAdd the following JavaScript to the question you would like a delayed:Qualtrics.SurveyEngine.addOnload(function(){this.getQuestionContainer().hide();});Qualtrics.SurveyEngine.addOnReady(function(){var delayTime = 30000 //This is the time of delayvar that = this;setTimeout(function(){that.getQuestionContainer().show()}, delayTime);});The timing can be updated by updating the value of delayTime, which is set in milliseconds.

312
M
Level 1 ●
8 months ago
K
kpm1965
asked in Custom Code
How can I integrate mouseovers in a MaxDiff?

Hi,I’d like to test 15 possible company benefits in a MaxDiff. So each benefit is one item in the MaxDiff.I want to have explanatory mouseovers for each item.Any advice?Thanks in advanceKai 

512
A
Level 1 ●
8 months ago
K
Level 1 ●
kemakinoLevel 1 ●
posted in Custom Code
Recent Qualtrics change broke JavaScript codes with remove()

Hello everyone, I recently got a notification from some users of my Google Maps component that it no longer worked.Some notes about the issue are here with my investigation, it seems that there is an issue in the Qualtrics-provided code that hangs with a certain logic. In short, it seems the code overrides the behavior of ChildNode.remove(), yet lacks the validation of the parent node of an HTML element when it removes itself.// prototype.45d699cfb71157c2bc5a.js:1:30423function c(t) { return (t = e(t)), t.parentNode.removeChild(t), t; // t.parentNode could be undefined} Therefore, the minimal code to replicate the issue below:var x = document.createElement("div");x.remove();alert("Hello World!"); // does not workstops at line 2 and does not show the alert. It means that, sadly, any package or external JavaScript that removes HTML elements in their code will no longer work. In my case, Google Maps API tried to add a navigation tooltip and it caused an error.// map.js:107:415var x = doc

1462
K
Level 1 ●
8 months ago
A
Level 1 ●
Ali AjrouchLevel 1 ●
asked in Custom Code
Help adding placeholder text in text input box

I’ve looked at previous posts about adding place holder text and tried a few codes but non seem to be working for me. No text appears. Can anyone please advise on what I’m doing wrong? The code is: Qualtrics.SurveyEngine.addOnReady(function(){    /*Place your JavaScript here to run when the page is fully displayed*/    var placeholderText = 'I am different text';    jQuery("#"+this.questionId+ " .InputText").attr("placeholder", placeholderText);}); 

46212
A
Level 1 ●
8 months ago
R
reoolivarez
posted in Custom Code
How can I use Javascript to implement the changes in CSS

I am new in using Javascript and I want to use Javascript to implement the CSS code below. I need to use javascript since the client want to have this for a specific logic only..Skin label.MultipleAnswer, .Skin label#QID2-0-label.SingleAnswer{ background: #E43E3D; }.Skin label.MultipleAnswer, .Skin label#QID2-1-label.SingleAnswer{ background: #EA484D; }.Skin label.MultipleAnswer, .Skin label#QID2-2-label.SingleAnswer{ background: #EC654E; }.Skin label.MultipleAnswer, .Skin label#QID2-3-label.SingleAnswer{ background: #EF874C; }.Skin label.MultipleAnswer, .Skin label#QID2-4-label.SingleAnswer{ background: #F3A74C; }.Skin label.MultipleAnswer, .Skin label#QID2-5-label.SingleAnswer{ background: #F8C43D; }.Skin label.MultipleAnswer, .Skin label#QID2-6-label.SingleAnswer{ background: #E1C63B; }.Skin label.MultipleAnswer, .Skin label#QID2-7-label.SingleAnswer{ background: #C1CC36; }.Skin label.MultipleAnswer, .Skin label#QID2-8-label.SingleAnswer{ background: #9FCD35; }.Skin label.MultipleAn

2144
M
8 months ago
straister
straister
asked in Custom Code
Formatting Pick, Group, and Rank questions

Hi friends! I am reaching out for some support related to custom formatting for the Pick, Group, and Rank questions, specifically when using the drag and drop functionality. I've seen a bunch of posts in the forums that are similar, but my expertise with CSS is admittedly very limited so I'll need a little more hand-holding here. As you can see from the attached picture, I've been able to get some of what I want done, but I've mostly broken it and made it worse. ! I'm trying to figure out which attributes will affect the blue line (bucket width), red line (I'm calling it "bucket text width"), and the green line (space between buckets). I was also unsuccessful in changing the font attributes at all, so would love help there (especially in overriding the theme that we'll be using for this specific question, if that's possible). I'm specifically hoping to change font weight, type, and size. It'd be especially great if I could change part of the bucket text, but not all of it (so in the

2743
L
8 months ago
C
cgh2
asked in Custom Code
Qualtrics not passing cookies through iFrame?

I’m pretty new to Qualtrics and not experienced with iFrames, so bear with me.My survey embeds a custom map (OpenLayers with Django backend) hosted on my server. The iFrame loads and I’m able to click through and interact with the map. I’m using URL parameters to pass the survey response ID into the backend application, so that all works fine as far as it goes.The problem is that the session logic isn’t working right. Cookies that are supposed to keep continuity during the session aren’t being set, so the embedded site doesn’t work correctly. When the map page isn’t embedded, everything works. But the server acts like every click is like a different session.My browser lists the right cookies in the debug console, but the server isn’t getting them from the client through the iFrame. I can’t tell if this is a limitation of Qualtrics or just the way iFrames work.I think my next step is embedding the information my views need in the URL parameters to remove the ambiguity, but it’s annoying

360
C
8 months ago
S
SandeepPadam
asked in Custom Code
css styling for skin inner and legend working in translation but not in the default language (English) ?

Hi, I added css code in the custom css for the skin inner and legend to be of certain dimensions, this however is working when choose other language but not for the default language (English). Can someone help fix this issue. Thanks, in advance. 

351
chackbusch
QPN Level 5 ●●●●●
8 months ago
A
AelGhani
asked in Custom Code
Qualtrics Go/NoGo Task: Issue with Response Recording

I'm encountering an issue with a Qualtrics Go/NoGo task where participant responses aren't being recorded despite implementing JavaScript for response tracking. In the script, I initialize the score, determine the correct color for the "go" condition, and set the stimulus color accordingly. The script listens for spacebar key presses and updates embedded data with the score based on the trial's correctness. Despite these efforts, no response data is recorded in the survey results.  JavaScript code:```javascriptQualtrics.SurveyEngine.addOnload(function() {    Qualtrics.SurveyEngine.setEmbeddedData('score', -1); // Initialize score    let color = "${e://Field/Color}";    let condition = "${e://Field/Condition}";    // Define the correct color for the "go" condition    var correctGoColor = (condition === 'go') ? 'yellow' : 'blue';     // Set the color of the gngstim element for the "go" condition    jQuery("#gngstim").css('color', (correctGoColor === 'yellow') ? 'yellow' : 'blue');    doc

732
A
8 months ago
H
hajira
asked in Custom Code
Adding a "View instructions again" button in the survey

Hi all,  I would like to include a button in my survey which participants can click to see the task instructions again if needed. I’d like the button to be added to each question. Could anyone please guide me on how I can do this?  Huge thanks in advance!  

502
Sachin Nandikol
QPN Level 6 ●●●●●●
8 months ago
mtmaniaci
Level 1 ●
mtmaniaciLevel 1 ●
asked in Custom Code
Adding code to survey for Google Tag Manager--where do I put it?

I am not a programmer, and know very little about code. Our marketing department has asked me to add Google Tag Manager code to two of our surveys. There’s two parts to it, one says “1. Paste this code as high in the <head> of the page as possible:” The second says “2. Paste this code immediately after the opening <body> tag:”  Is this possible in Qualtrics? If so, how? I really appreciate any help.

3081
K
8 months ago
J
jmejia
asked in Custom Code
Follow-up Question after MaxDiff

Is it possible to add a piped text follow-up question after a maxdiff exercise (with the piped text being their top option)? For example, after respondents go through a maxdiff exercise of 10 questions for "most important feature", would it be possible to ask "Please explain why [piped text] is the most important feature for you". I know there is the ability to have an anchored maxdiff question as respondents go through the series of questions, but I imagine there would be a high risk of respondent drop off having to answer why they chose their option 10 different times (we're only interested in the reason for the ultimate winner)

25911
lizb311
Level 3 ●●●
8 months ago
A
AMc
asked in Custom Code
Google Analytics Events in a Survey?

Hi, I'm currently evaluating Qualtrics and I've hit a roadblock - hopefully one of you experienced users has a clue?On our current platform I can insert any JavaScript I like as a text field.I use that to insert the Google Analytics Tag code on pages where it's needed and then fire back GA Events to the site that launched the survey.I can add the GA tag code into the Look & Feel> General> Edit Header. That's working and I see page loads for the Survey URL.If I add JavaScript to a question and paste in the Event call it fails ... silently.I know the code block runs because the console message shows up. e.g.Qualtrics.SurveyEngine.addOnload(function(){ /*Place your JavaScript here to run when the page loads*/console.log("Onload ran");ga('send', { hitType: 'event', eventCategory: 'Videos', eventAction: 'play', eventLabel: 'Fall Campaign'});});Any thoughts would be appreciated on firing an Google Analytics Event from within the survey - many thanks for reading.Andy

1601
A
Level 1 ●
8 months ago
D
DT00807
asked in Custom Code
Tinder-Style Survey

Hello, I'm trying to create a survey with Tinder-style responses where responders are required to swipe right or left to indicate their choice of answer (like this: https://www.qualtrics.com/blog/ll-bean-customer-experience-surveys/). Does anyone have experience building something like this or able to offer any advice on how to set it up? Thanks in advance.

85116
TomG
Level 8 ●●●●●●●●
8 months ago
D
dwaughtal
asked in Custom Code
Hide the next button in Slider questions with Multiple statements:

Hello! I’m new to the community and am looking for a little code to help me with a survey that contains slider questions. There are 7 statements within each slider question.I’m looking for code to hide the ‘next’ button until all 7 sliders have been interacted with. The code below shows the ‘next’ button after one slider has been clicked and it also causes the sound file to play again if participants try to advance. For my study, this is the bigger issue since I want to limit the number of times a participant hears each sound file to 1. I need to keep forced responses, so the page will not advance if all questions are not answered.My question would be an expansion of this question and answer:https://community.qualtrics.com/custom-code-12/show-next-button-after-slider-has-been-moved-23737Thanks so much! 

1054
D
8 months ago
P
pei-yu.ychen
asked in Custom Code
Is it possible to use external JavaScript library (d3.js)?

Hi everyone, I was wondering if it is possible to import a Javascript library on Qualtrics?I have interactive visualizations made with d3.js that I want to show in the survey, however, I haven't been able to run any d3.js code in Qualtrics. I tried inserting the library references into the header, following this. (<script src="https://d3js.org/d3.v4.min.js"></script>) However, it is not working.Any advice would be appreciated, thank you!

1372
A
Level 7 ●●●●●●●
8 months ago
F
ffionunderwood
asked in Custom Code
looking for a way to slimline slider response.

i’m trying to reduce the vertical space between sliders on the survey, as the question requires ~10 stacked sliders and it is taking up a lot of space / requiring the user to scroll. any advice on how I can achieve this would be greatly appreciated, ty !

272
F
8 months ago
R
Level 1 ●
RonnieLevel 1 ●
asked in Custom Code
Can I set up a type-search-and-select choice question in Qualtrics?

Hi everyone,I am seeking assistance on optimizing a survey question. The respondents are required to select a sector from a dropdown list containing 285 options. Considering the extensive list, I am exploring the possibility of implementing a question where respondents can initially input a rough approximation of the target sector name. Subsequently, the system would conduct a search within my uploaded options and present a narrowed-down selection of possible matches. This approach aims to simplify the process for respondents, alleviating the need to sift through an extensive list of sector options.Thank you so much guys :)

107210
R
Level 1 ●
8 months ago

Motivational Playlist

Terms & Conditions