Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,202 Topics
  • 22,585 Replies
7202 Topics
E
ehoffman
asked in Custom Code
How to change fill color of check boxes in multiple answer matrix table?

Hi all, The check boxes in my matrix table (likert, multiple answer) turn white after I select them. I would like the selected check boxes to turn teal (#44b8bd). I was able to successfully do this with the regular multiple and single answer questions with the following code: .Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked { background: #44b8bd; Background-color: #44b8bd; border-color:#44b8bd; color: #000000; } .Skin label.MultipleAnswer.q-focused.q-checked, .Skin label.SingleAnswer.q-focused.q-checked { background: #44b8bd; } I'm not sure how to make the selected check boxes in the matrix table the same color. Can someone help? Thanks!

2
G
5 years ago
M
MauroUsabilitySci
asked in Custom Code
Increasing width of the survey on screen

Is there a way to increase the width of your survey on screen? I ideally would like the images (which are in the "choice text" boxes) to appear to the left of my sliders, but due to the tight constraint of the survey on screen, everything is squeezed to the middle of the screen and the images appear above the scales (see image attached)--It seems there is a lot of wasted space. !

7
fleb
Level 3 ●●●
5 years ago
L
Linda001
asked in Custom Code
How to insert pictures which automatically diseapper in the survey

Hi, I'm developing a survey where I want to insert pictures which automatically diseapper after a few seconds. How do I need to do this? I understanded that this needs to be possible with custom code.

1
TomG
Level 8 ●●●●●●●●
5 years ago
1
1ag0
asked in Custom Code
Format Shown Values of Slider Choices

I have sliders with selected values displayed on the left hand side. I would like those displayed values to be bold, and also add a "%" sign after the displayed values. How do you format the displayed slider values so that they are bolded and is followed by a % sign?

7
TomG
Level 8 ●●●●●●●●
5 years ago
arushman
arushman
asked in Custom Code
Javascript - Time Picker

We have two questions where we have entered the following javascript. We want the respondent to be able to pick the opening time in question one and the closing time in question two.....however when the data is entered the opening time is recorded for both question 1 and question 2. thoughts? Javascript: Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var Qbd = "input[id='QR~"+this.questionId+"']"; jQuery("#" + this.questionId + " .InputText").hide(); jQuery("#appt-time").on(" change", function() { jQuery(Qbd).val(jQuery("#appt-time").val()) ; }); }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ });

3
E
5 years ago
D
ddebraak
asked in Custom Code
Is there a way to remove the auto advance "Done" floating button?

Hi, I have turned on the Autoadvance feature but see that there is a floating "Done" button. Is there anyway to remove or hide this?!

13
T
5 years ago
J
Jonathan
asked in Custom Code
Hide next button till click / Click validation?

Hey everyone, I am having some trouble with some respondents on my survey just clicking through the survey. The idea behind my study is that people have to click on a dice to make it stop rolling and then they have to remember the number that appeared. As for now I have coded that a gif of a rolling dice is played until the participants click on it. When clicked, the gif disappears and a photo of a dice appears. In one block I have 6 questions for each possible dice outcome, of which 1 is randomly shown to the participants, + a timer. I would like to hide the next button until the gif is clicked. I have some code that seems to do the trick but is does not always work, which confuses me. Is it possible the code conflicts with the timer? Does anyone have a solution for this? Even better would be some custom validation that only makes the next button clickable after the gif of the rolling dice has ben clicked, but javascript isn't my forte. Thanks in advance! A simplified example can

3
w.patrick.gale
Level 3 ●●●
5 years ago
C
Level 1 ●
CathayaLevel 1 ●
asked in Custom Code
Click hide to show，Words overlap

! When I click aaaa, these words are overlapped ! This is the code I added. ! ! Could you help me please?

1
SaurabhPujare_Ugam
QPN Level 5 ●●●●●
5 years ago
K
kk321
asked in Custom Code
not able to use Javascript successfully

I am trying to enable a rolling dice on my survey with the instruction from the link below. https://tschiemer.github.io/qualtrics-gambling/dice/dice.html https://github.com/tschiemer/qualtrics-gambling However, I am not successful to realize it. I saved the dice javascrip file and dice image files into my dropbox and insert the code below to my qualtrics survey. I am not familiar with Javascript language. Can anyone help to figure out how can I fix the problem? Thank you very much in advance. <!-- include dice source.--> <script src= "https://www.dropbox.com/sh/460ga74bw0mdw02/AAC2ngEyoH41YjGjgwTBU5ada?dl=0/dice.js" type="text/javascript"> </script> <!-- Actual dice html here --> <div id="dice"></div> <br> <button id="throw">Throw dice!</button> new Dice('dice','throw',{ value_set: [ {key: '1',probability: 1},

2
K
5 years ago
S
Surveys4Fun
asked in Custom Code
How to clear two sets of radio buttons based on a checkbox in a side by side item? JavaScript?

I'm building a survey of side-by-side questions and wish to have an N/A column: ! ! What I would like to do with javascript code is implement custom behavior with the N/A checkbox such that, when clicked, the row of radio buttons (across the two columns to the right) are cleared if they were previously selected (and possibly grayed-out?). Conversely, if the user selects the N/A checkbox, and then enters a frequency or importance rating, the N/A checkbox is cleared. How can I best implement this behavior? Thanks for any information on this!

1
w.patrick.gale
Level 3 ●●●
5 years ago
O
Oren_Nathan23
asked in Custom Code
Video Playback

Hi, I want to launch a survey which features a short video clip, the video contains some product placements which I'm researching. Anyway I can't figure out how to make the video to play only once (for example, I want the user to click the play button and be unable to rewind/replay at all), enabling the user to multiple viewing will harm the validity of my test, Are there any solutions? Thanks in advance, Oren.

5
LibertyW
Level 3 ●●●
5 years ago
B
busmarketing
asked in Custom Code
Incremental Digit Entry

Hello, Can you please help me on how to code to have an incremental digit entry field for a question? I need 1 field for digit entry and 1 field for decimal entry. Something like the screenshot I attached. !

4
B
5 years ago
M
Mauricio
asked in Custom Code
How to move to a specific page using java script?

I want to be able to send people to a page in the survey if they take too long on the current page. This is not the next page, so I cannot simply do a $(NextButton).run(). I also don't want to do it through Survey Flow because it will create another problem with the previous button on the following page. Any ideas?

4
TomG
Level 8 ●●●●●●●●
5 years ago
C
Level 1 ●
CathayaLevel 1 ●
asked in Custom Code
Hidden text

There is too much content, but it cannot be deleted. ! I want to hide the contents of the brackets, click on the content before the brackets, and then display the contents in the brackets. ! Is there a way to use js to achieve it? I don't know very well. Thank you for your help.

4
PraDeepKotian_XM
QPN Level 5 ●●●●●
5 years ago
N
NadiaH
asked in Custom Code
Previous/next buttons color change doesn't work on mobile devices

I changed the buttons' color for both the desktop & mobile devices through Look and feel => Style, and entered the CSS code and saved it for both devices. When I look at the Look and feel, the change is visible, but for the preview and in the distributed survey, only the desktop buttons' color is changed (now in blue), not the mobile ones (still red). CSS code: Buttons NextButton, Buttons PreviousButton{ background-color: #66D2FF;} Any ideas on how to solve this?

1
A
5 years ago
L
LydonLab_RA
asked in Custom Code
Manipulating the flow of survey

Is there a way to manipulate the flow of the survey using JS? Essentially after a couple questions, a random question appears (from an existing list of questions) but it needs to be succeeded by a certain question for e.g. from my current list of questions, I randomly select q3 and after q3, q4 must appear.

1
TomG
Level 8 ●●●●●●●●
5 years ago
B
Bernie_TLabs
asked in Custom Code
Embedding games/simulations

Hello, I have a related question - I'm wondering what languages can be used to embed a game or simulation in a Qualtrics survey. So far, I understand that games can be coded in Javascript or html games can be embedded with an iFrame. Can you share all possible languages that could be used to embed a game into a Qualtrics survey? I'm wondering what languages I need to have the games/simulations coded in so I can record game scores in Qualtrics datasets without providing the code to users (the way Javascript does). Thank you!

1
A
5 years ago
A
AngelaT
asked in Custom Code
Help with Creating a Survey portal for multiple surveys

Hi, I hope someone can offer guidance. We are creating a survey portal in Qualtrics that contains personal links to several modules (that are each their own separate survey) that student must complete. Picture this.. 1. A student receives their invitation with the link to their survey portal. They click on the link and there they will see a qualtrics page with 3 modules (separate surveys) that need to be completed. Each link takes them to a survey that is customized with a lot of embedded to capture their student experience. 2. I would like to hide the submit button at the end of the survey portal page so they cannot bypass it. Although they don't have to answer every survey question within each module, they are required to engage in each module (click on each link). I would like to have it so that after the student engages in each module the submit button on the portal appears for them to complete the entire survey experience. 3. Ideally I would like each module to be visible in

3
A
5 years ago
R
rschnider
asked in Custom Code
random treatment assignment while controlling for quota (Javascript?)

Hi all! So, I would like to randomly assign participants to one of six different treatment groups, which is itself easy (e.g. using set embedded data within a randomizer and than use branches). BUT I would like to assign participants only to treatment groups, which are not "full" yet. Despite participants potentially dropping out of the survey, I want to end up with 30 responses in all treatment groups. Therefore I try to find a way to randomize the treatment assignment, while controlling for Quotas. One could create separate randomizers within branches for all 2^6 cases (64 possibilities), like only randomize over the 5 remaining treatments if one is already full etc. However, this takes way to long and gets impractical for the next survey using even 12 treatment groups... Ideally, I am looking for a solution using javascript, for example using a loop such that the randomizer picks a group, if the group is already full, it keeps randomizing until it randomly picked a group which

3
N
5 years ago
S
Shir_genzer1
asked in Custom Code
Watch a video only once

hi, I want to prevent people from seeing a video I uploaded to qualtrics from Youtube more then once. Does anyone know how can I do that? Thanks!

4
O
5 years ago
T
Ted_R
asked in Custom Code
Save embedded data before the page break?

Hello, I'm appending characters to a string embedded data element with .setEmbeddedData. The data element is updated many times before the Next button is clicked, and the repeated updates must, by necessity, remain on the same page. If I examine the element with .getEmbeddedData, the embedded data element appears to change each time it's incremented. But if the respondent does "save and continue" (or loses connectivity) before the next button is clicked, the incremented embedded data element seems to be lost. Is there a way to force embedded data to be saved WITHIN a page, as it would be after a page break or Next click? Thanks all! -Ted

2
T
5 years ago
T
triple_w
asked in Custom Code
How do I know whether participants viewed embedded Youtube videos?

I embedded Youtube videos into my qualtrics survey as follows: https://www.qualtrics.com/blog/our-favorite-research-suite-features-embedding-a-youtube-video/ Is there an easy way to find out whether participants viewed the video and if so for how long?

1
SaurabhPujare_Ugam
QPN Level 5 ●●●●●
5 years ago
D
David1980
asked in Custom Code
Two question on the same screen

Hi all. I wish to create a page which on the left side the participant can see a scroll down text (descriptive question) and on the left side, he sees a randomly changing image. is it possible to create such a page with the survey tool? Thank you, david

3
SaurabhPujare_Ugam
QPN Level 5 ●●●●●
5 years ago
T
TriciaB
asked in Custom Code
Look & Feel Background on Selection

Hello Apologies if this has already been asked, but I couldn't find it anywhere. I've set up a theme in Look & Feel with Style/Primary Color as Orange. This makes the buttons orange, and the selected options orange, as required. However, when an option is selected, the background of the page changes to light orange. How do I stop this? I've tried uploading a white image as the background, which works, but now an orange border appears around the question when an option is selected instead, which isn't ideal!. Any ideas on how I keep the background as white when an option is selected (while still keeping the orange theme)? ! ! Thanks!

3
A
5 years ago
JeremyK
Level 3 ●●●
JeremyKLevel 3 ●●●
asked in Custom Code
Javascript API calls syntax

Afternoon guys, I'm so frustrated with API calls and sick of trail and error to figure them out, so I thought I could start a thread as kind of a source-of-truth for API calls. I think the API documentation from Qualtrics is both great and weak at the same time. Attached are screenshots of an email I sent to Qualtrics Support a few months back after spending countless errors using trial and error, making a tiny changing, then scraping the call and using straight JS to fix the problem. I'd love to borrow some knowledge from you fine people! Hence, this post. I guess I'll start by giving some demonstrations of what I've discovered on my own and giving some questions I don't have answers to. I don't have many figured out; as I said, most of my solutions don't use these because of a lack of understanding. Any and all comments welcome, spanning to better ways to script, best practices, constructive criticism, questions for me, you name it! Disclaimer, my code is free game. Copy, paste,

4
JeremyK
Level 3 ●●●
5 years ago

Motivational Playlist

Terms & Conditions