Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,324 Topics
  • 23,058 Replies
7324 Topics
Nico_Leussink
Level 2 ●●
Nico_LeussinkLevel 2 ●●
asked in Custom Code
Store last answered questionnumber into an embedded data field of an unfinished response

In a survey I have set the option of partial completed responses set to recorded responses after 4 hours after the respondents start of survey. What I like to have is an embedded data field called 'LastQuestion' containing the last used question number. Like the column in the Data & Analysis tab under Responses in Progress where a column Last Question exists. Is such an option possible?

1190
TomG
Level 8 ●●●●●●●●
2 years ago
J
JacobW
posted in Custom Code
Static Text for Text Entry on Single Choice MC Q

I have utilized a Javascript code that allows a text entry box to only display when that specific answer is selected in a single choice MC question. However, I need to add static text before and after the text entry. Below is my current code for the text entry boxes to only appear when selected. var QID= this.questionId; jQuery("#" + QID + " .InputText ").hide(); jQuery("#" + QID + " input[type='radio']").each(function(){ if(jQuery(this).prop("checked") == true) { var v1 = jQuery(this).attr("id"); jQuery("[id*='"+v1+"~TEXT']").show(); } else { var v1 = jQuery(this).attr("id"); jQuery("[id*='"+v1+"~TEXT']").val(''); jQuery("[id*='"+v1+"~TEXT']").hide(); } }); jQuery("#" + QID + " .Selection ").on("click change",function(){ jQuery("#" + QID + " input[type='radio']").each(function(){ if(jQuery(this).prop("checked") == true

3150
J
2 years ago
J
JacobW
posted in Custom Code
Show/Hide Text Entry Box on Single Choice MC Question

I am new to coding and qualtrics in general. In sort of a time crunch but slowly teaching myself the basics of html currently. I have a survey question that consist of a single choice MC question with three choices available. Each choice has a text entry box that appears for the choice selected. A hide/show function essentially. However, I am needing to add difference prefixes and suffixes for the text entry boxes like "$" and "annually". I am having an issue where the prefixes and suffixes appear before the choice is selected and the text entry box does not appear till you select the choice. Pictures below. The mobile picture at the very end also does not fit correctly. Any help is appreciated. I added my current code at the end. Qualtrics.SurveyEngine.addOnload(function(){ var textInputs = jQuery("#"+this.questionId+" .InputText").css("float","none"); textInputs.eq(0).before("$ ").after(" hourly"); textInputs.eq(1).before("$ ").after(" annually"); textInputs.eq(2).after(" %"); var Q

1930
J
2 years ago
E
Eldar_Lab
posted in Custom Code
Next button disable working only in preview

~~ edit ~~Turns out there was a small bug in the JS code. The preview seemed to cope with it but the published version was more strict.

70
E
2 years ago
J
jheath18
asked in Custom Code
Changing font and font colour for Next and Back buttons

Hi thereCan any of you lovely people help with a CSS code that allows me to change the colour of the button and included font (style and colour) for my next and back buttons?I'm wanting to end up with a button coloured Orange #FC5400, with "Next" in Roboto Medium coloured white #ffffff.I am able to change the colour of the skin and the font to Roboto Medium but the font defaults to black.Any suggestions would be greatly appreciated!

2780
K
2 years ago
S
Sascha
asked in Custom Code
Text entry box only shows if selected in multiple choice question

Hi, Still a bit new here, and I haven't been able to find my answer in the community site, so sorry if this is already been asked earlier! I have a few multiple choice questions where I need there to be an option for text entry. I am able to add the text entry box, but I would like it to only show (so a type of display logic?) if the participant chooses that option. Is this possible? Note: I have already added a custom validation to the text entry to ensure that the character count does not exceed 30. Not sure if this is important to note, but figured it would be best to know the whole situation just in case. Also, here are a few screenshots in case that helps: ! !

14650
J
2 years ago
R
RRhen
posted in Custom Code
Minimum number requirement for side-by-side table

Is there a Java Script available to bring up an error message if a respondent enters a negative number on a side-by-side table?This following script works to set the number range, but it allows respondents to pass on to the next question even if they enter a negative number: jQuery("#"+this.questionId+" .InputText").attr({'type':'number','min':'0', 'max':'5000'});Is there a way around to enforce minimum number entry in a side by side table without using custom validation?

00
bstrahin
Level 6 ●●●●●●
2 years ago
R
rydajo
asked in Custom Code
Changing colours for Hot Spot Question

Hello! I am not sure if I am posting at the right category. Anywho, may I know if anyone have any idea if it is possible to change the hovering colour of hot spot question to another colour? ! The default colours are green and white & green, red and white for "On/Off" and "Like/Dislike" interactivity respectively. Will it be possible to change the colours? Cheers!

560
Tom_1842
Level 8 ●●●●●●●●
2 years ago
R
Ramon
asked in Custom Code
Auto Scroll-UP on new survey page

I'm embedding a survey using an iframe. When a respondent transitions to a new survey page she does not always see the top, the new survey page is displayed at the position of the former survey page. How can I force new survey pages being displayed in response mode to automatically scroll to the top when loaded? Any working syntax that one can insert into the header or JS would be much appreciated - thank you!

880
Tom_1842
Level 8 ●●●●●●●●
2 years ago
J
Jo0801
asked in Custom Code
Modifying Javascript Code to Add Days to Date Entered

Hello! I'm a complete newbie to JavaScript coding, and I need a little help modifying a code I have to serve a slightly different purpose. The code below uses the date entered for the question, adds 10 days, and then sets the new date as embedded data. (A friend helped me with this part!) I need to use the same date and add 5 days to create a different embedded data point. I reviewed several other discussions and tried modifying the code on my own, but instead of adding 5 days to the answer entered, it added 5 days to the original calculation (answer entered + 10). So . . . how would I modify this to get it to calculate Date + 10 AND Date + 5 separately (and set both as different embedded data)? (I'm also OK with setting up the Date + 5 as part of another question, just pulling the answer from the previous question . . . but I wasn't sure exactly what to change to make that work.) Thanks in advance for your help!Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaS

2840
JoseS
Former XM Community Team Member
2 years ago
W
Wess
posted in Custom Code
Measuring click time from start video to mouse click

Hi everyone,I have no experience with Javascript whatsoever nor with Qualtrics. My current aim is to record the amount of time between when a preloaded movie starts playing and when a participant clicks on an image that represents: "i have decided".So far, I have added a movie to my survey that preloads before autoplaying. I have also added a timer that starts as soon as the page is loaded. And Qualtrics also registers the mouse clicks of the participant in relation to the time.But now the problems come: There is a difference between the page having loaded and when the movie has loaded, and thus, starts playing. Hence I was thinking to reset the time counter by adding an eventlistener that searching for the moment when the movie starts playing? The mouse click should only be registered if the participants clicks on the image that I described. All other mouse clicks should be ignored.Can someone explain to me how to do this and what the code should be like?

1190
grahulp5
QPN Level 3 ●●●
2 years ago
A
anhernan
asked in Custom Code
How can I change multiple choice buttons to a different color for the last 3 response options?

Hi everyone,I've been trying change the color of the MC buttons to a light grey color, to match the color of the text. Is there a code for this to be done? My current CSS code, thanks to the community postings, is as following:@media only screen and (min-width:481px) {td:nth-last-child(3) { border-left: 3px solid lightgrey; }td:nth-last-child(3) { margin-left:20px; }}Here is what the question looks like so far:Please let me know what I can add in order to switch the last three circles to a light grey color, instead of blue. Thank you so much!Ana

330
Tom_1842
Level 8 ●●●●●●●●
2 years ago
D
DiegoQ
posted in Custom Code
How can I set a title in each block?

I want to make a title for each block of the survey, so that it is easier for the user to understand, but I am not sure how to do it.Does anyone know how it can be done? Thank you

6550
TomG
Level 8 ●●●●●●●●
2 years ago
C
CaitlinP
posted in Custom Code
How do I edit the format of profile likert questions?

Hi all,I am struggling to create a profile likert question which displays nicely in our survey. Some of the question statements are rather long and it causes the statement text to spill into multiple rows (see attached). Unlike the 'standard likert' question format, you cannot just resize the table using drop and drag. I am open to a couple of different solutions, but am struggling to get either working: 1) Make the scale points boxes narrower to allow more space for the text2) Widen the survey dimensions - I have tried a couple of methods to doing this, picked up from the forum, but none seem to be working for our survey (i.e. .skin html code) I would appreciate help achieving either of those two solutions. Thank you in advance for your help!

2090
T
2 years ago
C
Level 1 ●
ChelseaICLevel 1 ●
asked in Custom Code
How do I change the background color of an email?

I would like the background color of my email invite to be this color: #173963. Is there a way to code that?

3786
Tom_1842
Level 8 ●●●●●●●●
2 years ago
M
mha2604
posted in Custom Code
How to adapt HTML Dot Estimation Task code (from Inquisit) to Qualtrics

Hi everyone,I currently have this script running in Inquisit, which I would like to adapt to Qualtrics. Do you know how to do this?If it cannot be adapted here is the design: I am looking for a qulatrics design where a picture is shown filled with dots for 3 seconds, then it disappears and the participant is asked how many dots there was. This is round 1 and is done for 30 pictures with dots.Then in round 2 the same 30 pictures are shown one after one for 3 seconds (as in round 1). The difference is now that after the 3 seconds showing the old picture the participant is told that "other participants" have estimated the number of dots to be *number of dots the participant him/her self said + 15 %*. And once again the participant puts in the number of dots they now think were there.Any help is appreciated! Thank you in advance!MY CURRENT HTML INQUISIT SCRIPT:___________________________________________________________________________________________________________________                

310
M
2 years ago
R
retmaze
asked in Custom Code
Hard coding text in Matrix questions

In a Matrix Text Entry question, is it possible to hard-code text under each text box answer? Or, is it possible to have an entire column (scale point) pre-populate with text that can't be erased?My problem/use case: I'd like to be able to give respondents example answers that can't be removed. More specifically, for each question I'm asking about the respondent's institution I'd like to be able to show the answer from my own institution... Would look something like this:

340
Tom_1842
Level 8 ●●●●●●●●
2 years ago
U
usama_shoaib1
asked in Custom Code
Pick, Group & Rank: Change Validation Alert Text

Hi, Can I use custom code to alter the text of the validation alert: For example, can I change the text "No more than a 9 choice(s)" ! Custom Validation is not an option as there are far too many options. Thanks 😀

410
TomG
Level 8 ●●●●●●●●
2 years ago
T
tbetts1_MSU
posted in Custom Code
Side by Side custom code for Likert Scale.

When using a "side by side" question, i want the Likert scale to be labelled...Notatall1Of course, centered and no returns. The drop down menu next to the Likert scale in a side by side only gives me the option of "Exclude from Analysis". How do I get the Likert scale heading to show the "Not at all 1" across multiple lines rather than extending out as one long line.

490
T
2 years ago
J
JMaca
asked in Custom Code
Adapt Layout of Drag and Drop Question

Hello! I am looking to change the layout of the drag and drop question so that my 'items' are stacked and centered at the top of the page and my 'drop boxes' are in columns below these items. I have five drop boxes and they don't align easily across the page. By moving the items above, it should align well. Any ideas?Thanks!!

2510
Tom_1842
Level 8 ●●●●●●●●
2 years ago
Dax
Qualtrics Employee
DaxQualtrics Employee
asked in Custom Code
How do I make the survey wider so it can accommodate images?

How do I make the survey wider so it can accommodate images?

13680
M
2 years ago
KatherineD
Level 1 ●
KatherineDLevel 1 ●
asked in Custom Code
Is there a way to embed a Powerpoint presentation as an iframe into Qualtrics?

Is there a way to embed the entire presentation as an iframe into Qualtrics? I brought the slides in as images, but there is concern about ADA compliance with screen readers not being able to read the image text.

7010
Tom_1842
Level 8 ●●●●●●●●
2 years ago
M
mhatfield
asked in Custom Code
Custom Drag and Drop javascript not working in Qualtrics

I am using Rednips drag and drop javascript code (https://www.redips.net/javascript/drag-and-drop-table-content/) to drag elements from one table to another and record the position of those dragged items on the submit button. This works as an html file but in qualtrics the elements aren't able to be dragged. Can anyone help me with this? From what I've read it should be possible to do so. This is what it is supposed to look like with the blue boxes able to be dragged into the table on the right:

340
Tom_1842
Level 8 ●●●●●●●●
2 years ago
W
wmackenz
posted in Custom Code
Javascript Not Executing unless Back button is pressed

Hi There - I am attempting to calculate the sum of three entries within a form field and display that sum on a later page. When I go to the next page, the embedded data value does not display. If I hit the back button, and then the next button again (not changing anything on the page), the JS executes and the ED value displays appropriately. My JS is below and is set to run on Unload - is there something I am missing to execute this when the next button is pressed?var Hours1= parseInt("${q://QID2/ChoiceTextEntryValue/1}"); var Hours2= parseInt("${q://QID2/ChoiceTextEntryValue/2}"); var Hours3= parseInt("${q://QID2/ChoiceTextEntryValue/3}"); Total=Hours1+Hours2+Hours3 Qualtrics.SurveyEngine.addEmbeddedData( "Total",Total);

580
Deepak
QPN Level 8 ●●●●●●●●
2 years ago
I
ianmacfarlane
asked in Custom Code
Survey doesn't continue after JavaScript

Hello everyone,I have a student working on her thesis who is collecting data using an Implicit Association Test (IAT) she designed and built using the materials provided by Project Implicit. This is a JavaScript task that presents people with stimuli and measures reaction times. The IAT itself runs fine when we preview the survey, but moving on to the rest of the survey isn't working. The last screen of the JavaScript says "Press spacebar to proceed" and when I do so the script task seems to go away but it does not proceed to the next question and the "next" button typically in the lower right corner is gone. I don't know JavaScript coding so I don't know if it's something wrong with the script or if I have something set up incorrectly in Qualtrics. The JavaScript used for the Qualtrics question is:Qualtrics.SurveyEngine.addOnload(function () {  // hide question and next button  var container = this.getQuestionContainer();  container.querySelector('.Inner').style.display = 'none';  thi

720
S
2 years ago

Motivational Playlist

Terms & Conditions