Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,323 Topics
  • 23,054 Replies
7323 Topics
T
tzylo
asked in Custom Code
MaxDiff programming needed?

If I want to "loop" maxdiff among 6 items, 3 at a time, with maybe 4 presentations, does that require custom programming? I will be given specific presentations, so randomization will not work. Is that something I can do myself (not that advanced with programming) or should I be talking to Qualtrics about this?

1600
TomG
Level 8 ●●●●●●●●
3 years ago
B
Birte
asked in Custom Code
How can I hide the answer choices for multiple questions in a block?

Hello everyone,I am currently building a multiple choice survey via key presses and need help with hiding the answer choices. The survey consists of 77 questions, in which the participants first see a fixation cross and then a target question that prompts them to either press "J" for Yes or "F" for No. Right now, I am using this.hideChoices(); for each question. When I run the preview, however, the answer choices still show up for a few seconds before they delayingly dissapear and the target image appears. The 'flashing' is unfortunately quite problematic as I want the participants to focus on the fixation crosses and targets only. Is there something wrong with my code, perhaps? Or is there a way to hide the choices for a whole block, so that the Qualtrics Engine wouldn't have to run it for every single question? And does it have to do something with the browser I am using? I have already tried it out with Safari, Chrome and Microsoft Edge, and tried putting the entire code in addOnloa

1640
B
3 years ago
R
RBear
asked in Custom Code
Hide next button not working at the begining of a randomizer

Dear community, I'm designing a survey with 20 test entry questions in a randomizer. I would like to hide the next botton until participants type something in the text bar. I used the following code :    function hideEl(element) {       element.hide();   }     var nb = $('NextButton');   hideEl.defer(nb);   $(this.questionId).down('.InputText').on('keyup', function(event) {       if(this.value.length == 0) nb.hide();       else nb.show();   });which works perfect for other questions in the randomizer except for the first one.Can anyone help me with this problem? I am very new to Qualtrics, so please explain the solution (if there is any) more explicitly. Thank you all.

270
A
Level 7 ●●●●●●●
3 years ago
L
Level 1 ●
LrudmanLevel 1 ●
asked in Custom Code
Text or Graphic Next to Multiple choice question

Hi,Does anyone know how to approximate the following layout in Qualtrics with text or graphic on the left and multiple choice question on the right? Thanks, Larry

130
J
3 years ago
S
sreisma1
asked in Custom Code
Autoplay Audio Files Using Loop and Merge

Hello,I am running an experiment where I need audio files to autoplay without a participant being able to fast forward, rewind, pause, etc. (I.e., autoplay, autostart, no controls). This files need to be randomized, so I am using the loop and merge function. Here is the code I am using:

2560
S
3 years ago
L
LarryBarsalou
asked in Custom Code
Align choice texts with multiple sliders

I'm using the modern layout. Under that layout, choice text doesn't align with the sliders. ! I tried the custom CSS from this post, but that didn't work for me. Neither did increasing the survey width . The choices are displayed properly for the classic layout. Any way I can make this look decent with the modern layout? I don't want to use mobile-friendly.

640
P
3 years ago
S
syedss
posted in Custom Code
Read Qualtrics Survey Mailing List and Contacts from NodeJS application

Hello,I am creating a NodeJS application and I want to get distribution Email and Contact List for a particular survey.Someone can give advise how I can achieve my requirement ,if any JavaScript library or Particular Qualtrics API will be helpful to me.

160
A
Level 7 ●●●●●●●
3 years ago
VirginiaUKY
Level 2 ●●
VirginiaUKYLevel 2 ●●
asked in Custom Code
How to do same-page math operations?

I have a situation where I need to ask respondents for numerical values and then display the result of a math operation back to them ON THE SAME PAGE. Simplified example:Q1) What is your hourly wage? AQ2) How many hours per week do you work? B(In background, multiply A*B*52 to get value C)Q3) You have reported that your annual salary is approximately $C. Is this correct? [Y/N]I can do the math using piped text and Qualtrics math operations, but that only seems to work if there's a page break between Qs 2 and 3. In our actual survey (which involves a more complex series of value entry boxes and calculations), I want the result to appear on the same page so that respondents can easily see and correct errors without having to move back and forth in the survey to see the results. Ideally, I would like it to work like the Constant Sum question type where the resulting sum is shown instantly.Is there a way to do this within Qualtrics natively? Or some kind of js plug-in I could use? Thanks

330
A
Level 7 ●●●●●●●
3 years ago
C
Level 1 ●
Chaps85Level 1 ●
asked in Custom Code
Drill down Year-->Month --> week (CX Dashboard)

In simple chart, using a metadata date, (Start date or recorded date), how do you do a simple chart where you can display nps score by year, then when you click on the year in the chart, drill down to months view, then if you click on month drill down to week or days.

290
C
Level 1 ●
3 years ago
G
GreigP
asked in Custom Code
Auto advance on image click

Hello, I am (poorly) trying to stitch together code snippets to allow research participants to advance to the next survey question if they click on a call to action image that appears after watching a video. The below seems to achieve this, but requires that I use a radio button question type. This type of display doesn't work for what I'm trying to do. Any ideas how to allow the auto advance upon click of the image itself? Thanks in advance! Qualtrics.SurveyEngine.addOnload(function(){  this.getQuestionContainer().hide();});Qualtrics.SurveyEngine.addOnReady(function(){  var delayTime = 10000 //This is the time of delay  var that = this;  setTimeout(function(){that.getQuestionContainer().show()}, delayTime);  });Qualtrics.SurveyEngine.addOnload(function() {  $('extLink').on('click', function(name, event) {    Qualtrics.SurveyEngine.setEmbeddedData('clicked', '1');  });});Qualtrics.SurveyEngine.addOnload(function(){    this.questionclick = function(event,element){    if (element.type ==

550
G
3 years ago
CatherineO
Level 1 ●
CatherineOLevel 1 ●
asked in Custom Code
Centered next button moves slightly when clicked (Back button hidden)

Hello, I'm working on a project where the back button is hidden and the next button is centered in the header of each survey page, and the header is locked so it stays at the top of the page when scrolled. Everything is working as I would like except when the next button is clicked it jumps slightly to the right side as if to accommodate/split center with the hidden back button. This does not happen on pages where there is a back button shown. The centering of the buttons is done in the Header CSS and the previous button is hidden using HTML to prevent flashing as per previous posts.Is there some way to prevent this movement when clicked? This is something I could live with, but I'd rather find a solution.I'd be happy to offer more context and welcome any suggestions.Thanks! CatherineO

260
CatherineO
Level 1 ●
3 years ago
A
AngieMP
asked in Custom Code
Predictive text?

Hi there! I'm wondering if there is a way to add predictive text to a text entry question. I.e. What kind of car do you drive? When the respondent begins typing A.. options like Audi, Aston Martin, Alfa Romeo pop up.

920
P
3 years ago
E
EmerC
asked in Custom Code
Randomising Question Choices

Hello,I am trying to conduct an experiment on somebody's weight affects how they are perceived. I have edited pictures of faces so that I have one chubby version and one skinny version. The participants will be shown an image of the person alongside a quote of what they are saying. The pictures and statements need to be randomised so that each person sees a different combination of faces and quotes. I have created a loop & merge function, with Field 1 as all the chubby faces, Field 2 as all the skinny faces and Field 3 as all the quotes. My question is: how I can ensure that a participant won't see the two versions of the same face in the loop and merge? Is there a way I can tell qualtrics to show either the face in Field 1 or Field 2? And then a random selection of these alongside the quotes in Field 3?I hope that makes sense. Any help would be GREATLY appreciated! Thank you!Emer

30
A
Level 7 ●●●●●●●
3 years ago
S
SANTI
asked in Custom Code
Hi I was wondering how I can implement a Custom Code.

Hi I was wondering how I can implement a Custom Code. I have been trying to implement the following code into my Survey, but unfortunaley I haven't been able to do so. I want my Survey to change the date automatically in a Weekly fashion. Meaning that It shows monday Next week and the following days.In addition I wanted the Survey to show the Current and following Calender Week. I found these codes:          Calculate week number of current date                          //define a date object variable that will take the current system date         todaydate = new Date();          //find the year of the current date         var oneJan =  new Date(todaydate.getFullYear(), 0, 1);              // calculating number of days in given year before a given date          var numberOfDays =  Math.floor((todaydate - oneJan) / (24 * 60 * 60 * 1000));              // adding 1 since to current date and returns value starting from 0          var result = Math.ceil(( todaydate.getDay() + 1 + numberOfDa

80
S
3 years ago
DannyDelve
DannyDelve
asked in Custom Code
Custom text on autoadvance "Done" button

Hi,Is it possible to customize the text of the "Done" button when autoadvance is enabled? Any advice on how to achieve this would be much appreciated. Thanks in (auto)advance! 🙂Danny

130
AHammell
Level 2 ●●
3 years ago
R
Level 3 ●●●
Rod_PestellLevel 3 ●●●
asked in Custom Code
Looking for a good free-ish(!) graphical (wysiwyg) HTML editor tool

Hi All,I thought I would add a question here to ask for recommendations on the tools that people use to analyse, edit and manipulate HTML code. I am very much a beginner, I've had no training as such so I'm just picking it up as I go along. I'd like to find a tool that will allow me to plug in a URL address (and not have to worry about copying any source code or css stuff) and be able to click on an element and drag them about and see the resulting changes in the code in order to then plug it in a css script or use jQuery() to manipulate it. The Chrome developer tool gets you half way there but you can't drag an element around and resize it so you are left guessing what code you need to use.I'd be grateful if people could reply with examples of what they use and whether they meet the criteria I'm looking for: 1) provide a URL address and not have to copy any source code or css2) to be able to drag an element, adjust its size and position etc. and see what properties and code have c

140
R
Level 3 ●●●
3 years ago
A
AniS
asked in Custom Code
Hiding Conjoint Introduction Note

I created a Conjoint survey using Qualtrics and have an introductory note regarding the conjoint exercise for the respondents. However, the note appears on each conjoint screen something that I don't want as it forces respondents to scroll resulting in poor CX. Is there a way to restrict the note to just the first Conjoint page or hide from other pages?

60
A
3 years ago
M
maruiu
asked in Custom Code
Count number of attempts at changing a "text entry" field

Hello,I have a question which is supposed to get participants familiar with a task they have to solve later. The question is a text entry, and they can introduce different numerical values and see how that dynamically changes a result.I would like to count how many attempts at filling in the text entry box participants make. For now, I would also like to display this number on the same page using html (later I will save it as embedded data, the html is just for me to check whether the value updates as it should).I came up with the following, which does not work:In JavaScript, in addOnReady:var counter = 0;  jQuery("#"+this.questionId+" .InputText").bind('input', function() { counter++;});document.getElementById("counter").innerHTML = counter;In the HTML of the question, I have the following--before any input, the value of "counter" is -1:-1

120
M
3 years ago
A
AleQ
asked in Custom Code
Pop-Up window in survey - trouble with code

Hallo to you all! I hope everyone is doing ok during these complicated times. I am writing to this community for the first time. I have followed few of the conversation about how to develop a pop-up window in a survey and I am very grateful for those of you who were able to share their codes, which I was able to copy to work on my survey. However, I am experiencing an issue. I have 2 questions each with multiple items and for each of these items I would like to have a pop-up window showing the associated definition. While the code works for the first questions it does not seem to work for the second questions. Below I posted my code and if anyone would be able to help I would really appreciate it.This is my code:I hope it is clear what I did. I basically repeated the code for both questions. Is this correct?Thank you for any help you may be able to provide!Ale

3270
A
3 years ago
J
jasonbub_sea
asked in Custom Code
Route In/Out/In/Return

Hi,We have a content testing platform that we need to integrate with Qualtrics.The typical flow of an event is:Attendee is checked inWe route them to Decipher with some variable on the URL stringDecipher uses those variables to make a RESTful API call back to our platformDecipher parses the JSON response and populates the associated questions in the Pre-Stimuli portion of the surveyDecipher then prompts the respondent with the remaining Pre-Stimuli questionsDecipher "suspends the survey" and routes the respondent back to our platform with some of the originally sent in variables and a token that represents the place within the survey the associated respondent is in.The respondent participates in the event / watches the content / provides their feedbackAfter the stimuli, we redirect them back to Decipher with that token we were sent and a couple of additional variables.The respondent finishes the post-stimuli questionnaireDecipher then [using the Return Links] redirects them back to our

860
A
Level 7 ●●●●●●●
3 years ago
K
KMS1010
asked in Custom Code
Code labels to individual sliders in single question?

Hi all, I would like to have a slider bar question for some semantic differential responses. All sliders would have the same question stem, so really, I would like to just have more choices for a single question, rather than making a new question for each semantic pair. But I would like to have one word on either end of the slider bar, like:Happy |------------{}-----| SadCalm |-----{}-------------| AngryIs this possible with some custom code? And if so, how? Thank you!!

180
K
3 years ago
I
igncic
asked in Custom Code
Showing text based on drill down answer

Hi!I have a database with average descriptive statistics for university degrees per Univeristy. This is a csv where the first column is the University name, the second is the degree name, and the third and fourth column are men's average salary and women's average salary.I want the persons to select a university, then a degree, and in the next page show them the average salary for men and women. I'd basically tried with drill down (uploading the csv), but then they have to select the option in the third and fourth column. I would like to show them in text (in the next page), based on the selection of the first and second column.I read that select2 could be useful, but I don't have much experience with javascript, so any other way would be helpful or maybe a guide to set it using select2.Thank you!

80
A
Level 7 ●●●●●●●
3 years ago
K
Kaz28_
asked in Custom Code
End Survey Code for Qualtrics 2017

Hello, I know there is a code to input Withdraw button on Qualtrics 2014 but only Qualtrics 2017 is available to me. Does anyone know how to manipulate the code to get it to work for 2017? TIA

60
lizb311
Level 3 ●●●
3 years ago
R
rhonaf
asked in Custom Code
Using images in questions - how do I change how the selected image and non-selected images display

Hi, I am using smiley faces for a feedback question but I hate how they look when they are displayed - they have a grey box around them which looks bad - the images are transparent. Also, when they are selected, they appear with a blue box around them and again look awful. I would like for the non-selected choices to be grey and the selected choice to keep its color if possible. Can anyone help me with the code for this or even where I can go to see these options. Screenshots here: Grey box around the images: ! Selected image: !

1170
LaurenK
Former XM Community Team Member
3 years ago
StephenL
StephenL
asked in Custom Code
How to dynamically change an choice graphic when answer is selected?

On horizontal single-choice multiple choice questions, we're going to add some icon graphics below the text choices. On our theme, when the choice is selected the choice background turns blue. The image may look good when unselected, but doesn't look as good when selected (on the blue background).There are various tips for this on this community post: https://www.qualtrics.com/community/discussion/1081/using-images-in-questions-how-do-i-change-how-the-selected-image-and-non-selected-images-display. But is there a way (like with custom code) to dynamically switch to a second image when the choice is selected (an image which looks better on a blue background)? Can it be done somehow using https://s.qualtrics.com/WRAPI/QuestionAPI/classes/Qualtrics%20JavaScript%20Question%20API.html ?Disclaimer: I have some in-house javascript-coding expertise, but we're new to Qualtrics custom coding.

870
A
Level 7 ●●●●●●●
3 years ago

Motivational Playlist

Terms & Conditions