Custom Code | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago

Custom Code

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

  • 7,404 Topics
  • 23,367 Replies
7398 Topics
C
Christof
asked in Custom Code
Change display of Slider questions

I want to change the way how slider questions are displayed in my surveys. Standard the look is;Labels on top, then numbers, then sliderI want to change to;Labels on top, Slider in the middle then numbers on the bottom.Additionally I want to change the position of the "not rated" box to move below the slider.I was able to simulate my preferred view with "Inspector" in firefox. Now I need help how to bring the right coding in to the survey. What is the correct code? And where do I need to enter it in Qualtrics? Here is the adapted html code; 1 2 3 4 5 6 Nicht gelöst

1062
A
D
Level 1 ●
deeannLevel 1 ●
asked in Custom Code
Warning/pop-up message when answer is outside of numeric range of a text entry type question

Dear all, I have a text entry question type that asks for the age of the participant. It aims participants between 10 and 19 years old. Therefore whenever an answer is below 10 or greater than 19, I would like to have a warning/pop-up message. How can I achieve this? Thank you for your help.

532
D
Level 1 ●
M
Mcasenhiser
asked in Custom Code
Simple Layout JavaScript to Autoadvance on a single question (NPS)

We are launching a web intercept on our checkout page and want as few clicks as possible for clients to complete our survey. I’m looking for help with the JavaScript that would be needed for Simple layout to hide the next button on our NPS question and auto advance to our next question/page once a response has been selected. The remaining questions in our survey are matrix and open text, so I only want to add autoadvance to this single question rather than the whole survey.

2011
Deepak
QPN Level 8 ●●●●●●●●
M
Mcasenhiser
asked in Custom Code
Simply Layout JavaScript to Autoadvance on a single question (NPS)

We are launching a web intercept on our checkout page and want as few clicks as possible for clients to complete our survey. I’m looking for help with the JavaScript that would be needed for Simple layout to hide the next button on our NPS question and auto advance to our next question/page once a response has been selected. The remaining questions in our survey are matrix and open text, so I only want to add autoadvance to this single question rather than the whole survey.

541
Sachin Nandikol
QPN Level 6 ●●●●●●
A
APNatoli
asked in Custom Code
Format Matrix to Read Right to Left (flip matrix to have statements on left side)

I’m collecting data in a few different languages, and some of these languages are read from right to left (e.g., Arabic, Hebrew). I want to “flip” my matrix table to have my statements on the right-hand side of the matrix (see example below). I found some code (HERE) but I haven’t been able to get it to work. Can anyone help me get this code to work in my survey? (I don’t want this to affect the mobile version of the survey - the mobile version should still present as a single “matrix statement” with the response options underneath.)

2202
TomG
Level 8 ●●●●●●●●
Q
qually
asked in Custom Code
Carry Forward Selections from 3 Questions

This is my first time ever playing with JavaScript. I am trying to capture through embedded data selected responses from multiple questions to then carry forward to another question. Something like this: Q1: select all of your favorite fruitsQ2: select all of your favorite vegetablesQ3: select all of your favorite candy Q4: [response options are only and all of those previously selected in Q1-Q3] Now rank your favorite foods. I’m getting this error: SE API Error: TypeError: this.hideChoice is not a function. I also don’t seem to be capturing the question selections correctly either. Script startedVM1453:9 Selected Q1: ['']VM1453:10 Selected Q2: ['']VM1453:13 All selected choices: (2) ['', '']

333
TomG
Level 8 ●●●●●●●●
W
WNewt
asked in Custom Code
Trying to capture Device Type and Browser Language as Emdedded Data

The two types of information I'm missing from the 'Meta Info Question' is the 'Device Type' (Desktop, Tablet, Phone) and the Browser Language. I was able to capture that information using JavaScript in another survey tool but we're transitioning to Qualtrics, and I've had no luck with so far.

172518
TomG
Level 8 ●●●●●●●●
S
Steven
asked in Custom Code
How to disable answer choices with JS

In my survey, a MC question has ten answer options each containing a short video. I want people to watch the videos one by one, and then select one video. To facilitate this interaction and to make sure they really watch the video, I would like to disable an answer option (i.e. grey out and make unclickable) until its video has been watched. I already have code in JS that registers when the video has been watched, but how do I disable and enable answer options? I have seen posts on how to hide answer choices, but that is not what I am going for here. Thanks in advance.

4684
H
W
Wen
asked in Custom Code
Highlight question with the text from previous piped text

Hello!I am trying to create a highlight question with the text coming from the displayed choice of a previous question. I have learned a lot from the community and figured out the basic logic is to first make a placeholder in the highlight text and then replace it with the piped text. But I have no previous experience with javascript and just tried to make some code that could be totally wrong (not working).I was wondering if there is anyone who could help me with it. Thanks a lot! Qualtrics.SurveyEngine.addOnload(function(){ var text1 = "${q://QID2/ChoiceGroup/DisplayedChoices}"; var elems = document.getElementsByClassName('HLTextWord'); jQuery("#"+this.questionId+" span.HLTextWord").replace( elems,text1); /*Place your JavaScript here to run when the page loads*/});

2387
C
Z
ZacJx
posted in Custom Code
Honeypot code for bots, but explained?

Hello, I'm new here, so forgive me if I'm asking a completely obvious question. I have a survey that I'd like to try and make as secure as possible. In addition to all the, for lack of a better word, clickable options in the survey platform - I'm also intrigued by the idea of adding a honeypot field for bots. I have seen the code in another thread. https://community.qualtrics.com/XMcommunity/discussion/6152/hidden-question-traps-for-bots Qualtrics.SurveyEngine.addOnload(function() {jQuery("#"+this.questionId).prev('.Separator').hide();jQuery("#"+this.questionId).hide();});However, I have two problems. First, despite lots of searching I can't find anywhere that explains what this code is doing (and again forgive me for wasting anyone's time as I'm very unfamiliar with coding, don't mind learning, but just don't understand). I know that it's providing a hidden field, but I don't know what that hidden field is doing or (and this is the second problem) how to interpret it once I have colle

12205
Z
P
Level 1 ●
PSabouriLevel 1 ●
asked in Custom Code
How to add an "Add to calendar" link to the thank you email

Hi, I am making an event registration form and want to add an “add to calendar” with zoom link to the thank you email that people receive after submitting the registration form. How can I do that? Thanks!

3472
P
Level 1 ●
Amy_boz
Level 2 ●●
Amy_bozLevel 2 ●●
posted in Custom Code
Can I set embedded data from variable names?

Hi all. I'm trying to set embedded data from a question that I have added variable naming to the responses. In short, I want to include the variable names as embedded data, not the values or the answer text because it has HTML encoded in it. Is this possible? I thought I had set embedded data up this way by selecting "insert piped text - selected choices recode" which means in my survey flow the embedded data = ${q://QID2/SelectedChoicesRecode} But this just adds numbers to the embedded data which is worthless. I've gone through my embedded data and it turns out this hasn't been working for a while when I'm sure I had it working a few months ago so I'm at a loss as to what to do.Am I doing something wrong? Did Qualtrics change something? Is this a bug? Hope someone can help. Thanks :)

107010
TomG
Level 8 ●●●●●●●●
B
bherbert
asked in Custom Code
Extract/Determine the Value of Graphic 'Selected Choice' Stored in an Embedded Value for JS Use

I have a matrix table - likert - drag and drop question. The ‘selected choices’ are images (I’ve tried setting them using the GUI and HTML tags). I’d like to read them in as embedded values (to do some math and then update the embeddedValue). I see that it works to return the image when I pipe the embedded value for the choice, i.e. “${q://QID45/ChoiceGroup/SelectedChoicesForAnswer/1}” in a question but how do I extract the HTML of the selected choice? Eventually I’d like to get a string but open to other ideas (new to JS). This is an example of the code I’m trying to write. // Get the value of the embedded variablevar embeddedValue = "${q://QID45/ChoiceGroup/SelectedChoicesForAnswer/1}"; /* blue tractor gas can image */ // Do something to get a string ?... // Based on the string, do something... switch (embeddedValue) { case "Blue Can": console.log("This is a blue can."); break; default: console.log("Test.");}

351
TomG
Level 8 ●●●●●●●●
MorYu
MorYu
asked in Custom Code
Pin instructions to top of page as participants scroll through questions.

For the love of God, can someone please tell me how i can do this? I just want my two sentences of instructions to remain visible as participants are scrolling and answering the questions that follow. How do I do this? I found a couple of posts but they were about images and I have no idea how to translate those pieces of code to use them for text, I know very little about code... Help!

270915
L
Level 1 ●
J
Level 1 ●
jyansonLevel 1 ●
asked in Custom Code
Tracking in embedded videos

I have two embedded youtube videos and I want to track the number of times someone presses play without using youtube api. Anyone have a code for this?

762
Umang Upadhyay
QPN Level 4 ●●●●
S
SimgeT
asked in Custom Code
How can I customize the size of a HotSpot Question?

Hello, I have a survey with images that I would like to present as HotSpot questions. I would like the presentation of these questions to be custom-sized to fit the survey takers’ screens. Currently, I have the following CSS code under Look and feel > Style. #SkinContent{ width:100vw; } #SkinContent{ height:100vw; } .Skin .HotSpot .QuestionBody{display: flex;justify-content: center; }.Skin .HotSpot .QuestionBody { width: 85% !important; height: 85% !important;} The idea here was to size the “canvas” on which the images are presented to the screen (100vw) and to center the images and size them such that they cover 85% of this screen area. The last part of this snippet of code didn’t seem to do anything. I also tried other variations I could find online, to no effect. How can I custom-size a HotSpot question? Your help would be much appreciated.

1813
R
F
FiloumenaZ
asked in Custom Code
How do i even out the space between the bullet points in a Likert and Bipolal scale?

Hello amazing users! I need to make the bullet points equally in space between them.I tried a java code I found, but it does not seem to work, so, where do I put a code and what code should I use to made both my Likert and Bipolar scales items even in distance between them? Just bear in mind I am total dork in these things, I am just starting learning about custom code in Qualtrics by you :) Thank you!

411
Umang Upadhyay
QPN Level 4 ●●●●
J
Level 1 ●
jmcmummeyLevel 1 ●
asked in Custom Code
Centering Questions while expanding view port width

I know that I can increase the width of the view window by: .Skin, .SkinInner {width:100% !important;}.Skin .QuestionOuter.Matrix{ max-width: 100%; } But how do I get it to align the text and questions to the centre of the page rather than left justified?

532
Umang Upadhyay
QPN Level 4 ●●●●
H
Level 1 ●
HarukiLevel 1 ●
asked in Custom Code
I want to add a gradation to NPS.

I would like to know how to create a gradation between flat, modern, and classic layouts in terms of Look and Feel.If possible, please post the code.

23417
Umang Upadhyay
QPN Level 4 ●●●●
V
Valerie0515
asked in Custom Code
sending multiple customer survey to same email

Have a scenario where 1 email contact is completing survey on behalf of multiple customer surveys. That email address is part of a list that also includes customer name & customer id #. The upload list process allows multiple occurrences of the email address, however Qualtrics is removing duplicate email addresses prior to distributing. Is there a way to tell it to dedupe based on another field, i.,e customer id, instead of the email address?

6224
G
Level 1 ●
A
angelicandeoliveira
asked in Custom Code
display a pop message on screen when a particular response is given

Hi everyone!I'm trying to have a pop-up message on the screen upon selection of a particular answer for a multiple-choice question.I'm trying to see if I can change participants' responses after the warning message, so it is important to record their first choices and whether they changed their minds or not.If choice #1 is selected, I need a pop message to show on the screen at the moment the participant select that choice.I need Qualtrics to record the response they selected that caused the pop up to appear, andI need to provide an opportunity for participants to change their choices after seeing the pop up message.I need that both the first choice and second choice to be recorded.I tried this:var that = this; var msg = 'INSERT ERROR TEXT HERE'; jQuery("#NextButton").on('click',function(){ var correctrecode = 8; var choiceid = jQuery("#"+that.questionId+" input[type='radio']:checked").attr("choiceid"); var selectedrecode = that.getChoiceRecodeValue ( choiceid ); if(correctrecode==sele

17919
D
Level 1 ●
J
J.F.
asked in Custom Code
Problem Implementing Timing at Block Level

Hi all, I have never used JavaScript before, so I’m trying to implement Javascript I’ve found from here https://stackoverflow.com/questions/47317718/how-to-use-automatically-move-respondents-in-qualtrics-with-global-timer-for-blo and edits from here with the goal of creating a 10-minute timer that is visible to the participant and will continue throughout an entire block with page breaks (thus, why I cannot use the native timer function) and will auto-advance participants to the next block once time is up. Having never used JavaScript and CSS much, I presume this block of code is meant to go in the Custom CSS section of style (for some reason or another). .header-cont { width:100%; position:fixed; top:0px; z-index:1000; } .header { height:auto; background:#FFFFFF; width:100%; top: 0px; margin:0px auto; position:fixed; z-index:1000; } .timer{ width: 500px; margin: auto; text-align: center; vertical-align: middle; line-height: 50px; font-size: 28px; } Implementing the JavaScript is where

1332
J
B
Level 1 ●
bodoSLevel 1 ●
asked in Custom Code
Response Count for randomization

Good evening, I am doing a study which contains randomly assigned groups. Some means of answer of the survey will show to the respondents (long story) but here is my problem: Is there any way that would allow a response count to be embedded data? So that I could start the randomization after some answers are already recorded? Or some other feature that would start the randomization after, for example, 10 answers? Only way I could think is doing a separate survey for the first respondents but this is not very optimal. Thank you!!

181
TomG
Level 8 ●●●●●●●●
K
kaik13
asked in Custom Code
Make year and month a dropdown in form field

Hi, I have looked at other resposnes but the code doesnt work for me. I need to make the month and year fields a dropdown. Could someone help?

1592
K
N
Nofar
asked in Custom Code
JavaScript for uploaded Video

Hello, I want to create a JavaScript script for an uploaded video (from the library) that will address the following issues:1. The video should appear automatically (autoplay).2. The size should fit various screens, especially laptops, cellphones, and tablets.3. Participants will not be able to click on the next button until the video reaches its end. For issue 1, I'm using this code:```html<video autoplay loop=true style="pointer-events: none; width: 80%"> <source src="my video" type="video/mp4" /> Sorry, your browser doesn't support embedded videos.</video>``` For issue 3, I haven't used any code. Instead, I added another "timing" question to the page and delayed the display of the next button until the end of the video (I inserted the time it should stop). The problems I'm encountering are:a. The video continues to play despite the next button appearing at the end of the segment. The video loops, and I want to stop the looping and end playback when the video's time (151 seconds) is

430
N

Read Me: How to use the new Experience Community 💜

Michael_Cooksey
Administrator
1 month ago

Motivational Playlist

Terms & Conditions