Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,303 Topics
  • 22,964 Replies
7303 Topics
A
Aditya_B
posted in Custom Code
Adding a "%" to the "show value" of a slider

Hi Experts!I was going through a few posts and saw that a lot of you had mentioned using Mutation observer for this kind of problem. But I am actually new to javascript and don't really know what mutation observer is. Thus, I was hoping if any one of you could help me with a small code to fix this problem. The requirement is that I want the "show value" of a slider to show 10%,20%... instead of 10,20 e.t.c.Thanks in advance!

3999
S
4 months ago
F
Level 1 ●
f_SILevel 1 ●
asked in Custom Code
Changing font for the survey using custom css

I am trying to change the font of the survey and it won’t work. I have downloaded the ttf file and uploaded it in Qualtrics library and linked it in the code. It still won’t work.Could you please highlight what might be wrong?Here is the code -   

604
Nanditha MM
Level 4 ●●●●
4 months ago
A
Anan
asked in Custom Code
Freeze first column and first row for side by side questions for better scrolling

Hi Qubies,I am trying to write custom CSS on a side by side question such that both my first column and first row can be frozen panes. For example, I have 25 rows and 10 columns, with the first row containing answers and first column containing options. The high number of options necessitates scrolling both horizontally and vertically, especially while on mobile. In order to freeze panes I tried using the "position: webkit-sticky" functionality. It works successfully on the first column. However, it does not work well on the top row. Here is the code I am using: .QuestionBody {    position: relative; } .Headings th { position: -webkit-sticky;    position: sticky;    background-color: grey;    top: 0px; } .Answers th { position: -webkit-sticky;    position: sticky;    background-color: blue;    top: 0px; }   .Choice th {    position: -webkit-sticky;    position: sticky;    background-color: whitesmoke;    left: 0px; }The only one that works is the .Choice line.I appreciate y

110510
D
Level 2 ●●
4 months ago
Z
ZDalton
asked in Custom Code
How do I time a block so it moves onto the next block after a set period?

I am doing my dissertation questionnaire on Qualtrics but I'm really no good at coding; I'm looking to do a timed maths test, meaning that I want a block of open questions, each referring to a specific maths sum, and the aim is for the participant to complete as many as possible before the time limit and then they should be automatically moved onto the next block (probably a block displaying text before they move onto the next maths block). So I was wondering if anyone had any code I could just copy and paste into the JavaScript page that would mean the participant was automatically moved onto the next block after 15 seconds or so.Any help would be massive as I'm really struggling!

273
mrlorey80
4 months ago
K
kathrynyoungs
asked in Custom Code
How to auto-close survey with 5 second timer upon completion

Sorry I'm not good at javascript but I'm sure this probably is an easy ask, and I cannot find the answer anywhere? Is it possible to auto close the survey flyout window on desktop or mobile devices 5 seconds after completion(just enough time to read the thank you message).

3744
C
Level 4 ●●●●
4 months ago
S
Saiph
asked in Custom Code
Sharing filtered results with another person

Hi all, I am facing a challenge in setting up a Qualtrics and I hope this great community will help me figure out the best way to do so :) The situation is the following. There is this Qualtrics survey that will be distributed in a course: this survey is owned by the teacher. At the end of the survey, the respondent can choose if they want to share the results also with the researcher (me). I want to setup Qualtrics so that I automatically receive the data of the respondent who decided to share their data. I cannot own the survey myself, or I will see data that technically was not decided to be shared with me. Is there a way to do so? I tried the following: set up query parameters so that at the end of the survey the ones who accept are redirected to another survey, owned by me. This second survey is set up to receive the query parameters accordingly. In theory feasible, in practice I have too many query parameters for it.  set up a workflow that gets triggered only when respondent acc

172
C
Level 4 ●●●●
4 months ago
A
Angel2024
asked in Custom Code
issues with EmbeddedData

I added to the survey flow embeddedData value userIDTested it is not working The ${e://Field/UserID} shows nothing.This was double checked as far as my input ${q://QID48/ChoiceTextEntryValue/1 Qualtrics.SurveyEngine.addOnload(function(){    /*Place your JavaScript here to run when the page loads*/});Qualtrics.SurveyEngine.addOnReady(function(){ var email = "${q://QID48/ChoiceTextEntryValue/1}}";    var substrings = email.split("@", 2);    var userID = substrings[0];            // Set the user ID as embedded data    Qualtrics.SurveyEngine.setEmbeddedData("userID", userID);});Qualtrics.SurveyEngine.addOnUnload(function(){   }); Any advise?

221
A
4 months ago
R
Level 2 ●●
romanopLevel 2 ●●
asked in Custom Code
Edit the language text within the language selection dropdown menu

How can I edit the text within the language selector menu within a survey?We currently use English UK, so the dropdown menu of the language selector tool shows:“English (United Kingdom)” which is language one. “Nederlands” - Meaning: Dutch, which is language two.Example: We would like to only show the text/string English, not English (United Kingdom). I tried with a jQuery within the header, but was not able to change the text. I'm probably using the wrong jQuery: jQuery("#Q_lang" .QuestionText").html("English");That jQuery also does not focus on just the English string.Hope you can help, many thanks in advance!

382
R
Level 2 ●●
4 months ago
V
Level 1 ●
v_anandLevel 1 ●
asked in Custom Code
Record random number presented in default choice for slider question

 I have a set of such questions which require respondents to give probabilities and the sliders are summed to a 100.How do I record the random default value of the slider that is presented to the respondent. I tried using the code here:  but I ended up with the right hand side labels in my embedded data. Thanks

230
V
Level 1 ●
4 months ago
B
bherbert
asked in Custom Code
Qualtrics Removing HTML Rel Attribute With Custom Popup Modal

I have modified a javascript popup modal to work with the Simple layout. We are using the modal from https://www.jquerymodal.com.When folks are going through and adding the HTML for the popup in page, the actual HTML attribute rel="modal:open"  and its value disappear. Multiple users have noticed this problem. Locking the question will keep the attribute but its a headache. Has anyone experienced anything like this? Anyone have any workarounds or know what is causing it?

240
B
4 months ago
R
raveldc
posted in Custom Code
Custom Code Task failing

I'm working on parsing the response from a webservice using the embedded variable functions. In this case I want to parse the data return, i.e. ~{ch://OCAC_27xIryFGKDjjlxp/data}.If I take the known result and paste it into the code, and click the "Test Code" button, it works exactly as expected. When it executes via the workflow, it throws an error of "Unexpected token )". Here is the code I am using:function codeTask() { const data = ~{ch://OCAC_27xIryFGKDjjlxp/data}     var raw = data.substring(5);     console.log(raw) const jsonData = JSON.parse(raw);             return { "result": jsonData.version }}Any ideas on this one?

2626
R
Level 3 ●●●
4 months ago
S
skochhar
asked in Custom Code
Setting minDate with embedded data in Flatpickr

Hi!I'm trying to set up a calendar for a survey that's part of a longitudinal study, and I want the respondent to select a date that is between when they last took the survey (embedded data) and today. I'm unfamiliar with JS. This is what I have so far:Qualtrics.SurveyEngine.addOnload(function () { var mindate = "${e://Field/subdate_v1_cal}"  var input = jQuery("#"+this.questionId+" .InputText");  input.flatpickr({   dateFormat: "m/d/Y", minDate: mindate ,    maxDate: "today"  });});Does anyone have any ideas? Thank you!!

4517
courtrc
Level 3 ●●●
4 months ago
K
ksheetz
asked in Custom Code
How do I add timing questions to randomized block?

Hello! I need to track the amount of time a participant spends on each question, but the questions have to be randomized for my experiment. I know that randomizing questions breaks the functionality of the timing question, so I was wondering if there’s any way to code the time tracking for each question using javascript? Thanks!

48011
J
4 months ago
M
mark92672a
asked in Custom Code
sending survey results to web service - all at once

Hi,I’m creating a workflow that gets triggered for every new survey submission to send data (of that submission only) to an external service using the WebService task. This works fine using Piped Text in the json payload to the external service. But this way I have to extract each answer separately with a piped text statement.Now I’m looking for a way to send all answers from a single survey submission at once, so that I don’t have to enter each field separately as a Piped Text item. For my use case, almost any json schema will do, as long as it contains the question IDs and corresponding answers.Is there a way to do this? For example, is there a piped text statement that contains all survey data as a json blob? Or is there a way to iterate over all questions/answers in a javascript Code task so that I can construct a suitable javascript return object?Cheers,Mark 

471
TomG
Level 8 ●●●●●●●●
4 months ago
F
Firdaus
asked in Custom Code
Remove duplicate responses

I am currently working on automating the retrieval of survey responses to Qualtrics through their API. However, I am encountering an issue where the responses are being duplicated. Are there any methods or best practices within Qualtrics to prevent or remove duplicate responses? Any guidance or suggestions to resolve this duplication issue would be greatly appreciated. Thank you!  

1131
Nanditha MM
Level 4 ●●●●
4 months ago
D
Deahna
asked in Custom Code
How can I track number of clicks to survey?

Hello,I am trying to figure out how to track the number of clicks to the survey Qualtrics link. Any recommendations on how to track this in Qualtrics or external sites that can help me track? For example I need to be able to report that the link was clicked X times over a week.Thanks,Deahna

6466
J
4 months ago
L
Luis Pilli
asked in Custom Code
JavaScript applying to multiple questions in a block

I have a custom JavaScript and need to apply to all question in the block. Every question must be shown in a different page.I have a large 350 of blocks and respondents will be randomize into one block. Each block has 8 questions. To insert the JavaScript code in each question is unfeasible. What would be the solution? This is the code, when inserted in a single question:Qualtrics.SurveyEngine.addOnload(function(){        jQuery("#"+this.questionId).find('.QuestionText:first').css("padding-bottom", "0px");    var attWidth = 35; //percent width for the question column    var altWidth = 32.5; //percent width for the alternatives column    var cols = jQuery("#"+this.questionId+" tr.Answers").children();    cols.attr("width", altWidth+"%");    cols.first().attr("width", attWidth+"%");        choice_table = this.getChoiceContainer();    new_row = choice_table.insertRow(2);        new_row.innerHTML = choice_table.rows[0].innerHTML;    choice_table.rows[0].hide();        var colscolor =  jQue

835
L
4 months ago
G
Gige
asked in Custom Code
Dynamically add options to a Multichoice via JS

Hello to everyone.I’m working on a feedback survey for internal IS services. The survey is integrate with ServiceNow that is passing closed ticket data like short description, ticket number etc. through embedded data.In the survey there’s a multiple choice that should be populated with these data, the Short description for the text and the ticket number for the value. I wrote some Javascript but I got stuck here because I have no idea on how to add the options. var ticket0desc = Qualtrics.SurveyEngine.getJSEmbeddedData('ticket_0_shortdesc'); var ticket0number = Qualtrics.SurveyEngine.getJSEmbeddedData('ticket_0_number'); var container = Qualtrics.SurveyEngine.getInstance(this.questionId).getQuestionContainer();Maybe the multiple choice it’s not the best option, any suggestion is welcomed :)Thanks in adavance.

573
G
4 months ago
K
kg2472a
posted in Custom Code
How to show Next Button after embedded video ends?

Hi everyone,I have a Vimeo video embedded in one of my survey questions. I want to accomplish two things: (1) pause the video when the window is no longer visible (tabbed away, minimized window); and (2) I would like Qualtrics' 'Next Button' to not appear until the video has ended.    const player = new Vimeo.Player('myvideo');    player.on('ended', function() { //this appears to be how the Vimeo API documentation recommends performing some function when a video ends      this.showNextButton() //not doing anything. I strongly suspect this is where I messed up.    });document.addEventListener("visibilitychange", () => {  if (document.visibilityState !== 'visible') {    player.pause();  }}); I have (1) working, I do not have (2) working. Here is the code in question:This is all in the HTML of the question. The only thing I have in the JS is:Qualtrics.SurveyEngine.addOnload(function(){ this.hideNextButton()});I appreciate any and all help!

6144
J
Level 2 ●●
5 months ago
P
Pesh
asked in Custom Code
Radio buttons alignment

Hey, I have an issue I'm trying to resolve and past solutions in that matter didn’t help wellin my survey, there is a picture of 2 machines presented as the question and the participants need to choose either left or right.I tried to fix the alignment of the radio buttons using costume HTML and CSS codes unsuccessfully.I just want to align properly the radio buttons to fit underneath the picture.  and to make sure this alignment holds even if I'm using a mobile phone and not a laptop etc.link to the picture itself. 

360
P
5 months ago
J
jjykim
asked in Custom Code
Adding hover over for matrix table choice/response

Hi there, I know there's been a lot of discussion on adding the mouseover feature to the question, but I haven't been able to find a solution for adding this feature over the choice field. I'm trying to figure out how to add a hover/mouseover textbox in a Matrix table so that when a user hovers over the choices, they can see the definition associated with that particular text. The reason for this is some of the choices will contain definitions that people may not be familiar with so I'd like for them to be able to hover over that particular text, and see the definition. Any help would be appreciated!

315337
Phillsh
Level 1 ●
5 months ago
A
ArtTay
asked in Custom Code
Question Flip

Hi, I have made a survey using a series of graphic questions with a hotspot. The participant clicks the hotspot of the option they prefer. I have the graphics and hotspot for each question but would like each of the questions that I have to either flip to show a different option or have an arrow which the participant can click on to show another option does anyone have some javaScript to do that please?

120
A
5 months ago
N
Nightblade
asked in Custom Code
Create a questions with random text

Imagine that you have a long list of words and want to ask the following question: What do you think of <RandomWord>? One way you could do this is to have 10,000 different questions each with the text "What do you think of Apple" "What do you think of Cat?" etc... However, then you would get back a data file that had 10,000 null fields and just one field with an answer. Worse yet, if you asked for timeing you would get back 50,000 + null fields and Qualtrics will not export that many fields. Another, much better way to do it, would be to generate the question on the fly and then just have one question that had different text each time it was asked. The first is the default in Qualtrics, and there does not seem to be a way to do the second. Does anyone have an idea on how to do the second choice.

72418
TomG
Level 8 ●●●●●●●●
5 months ago
Z
Zain Akhthar
asked in Custom Code
Progress bar color fill

I increased the height of the progress bar but the color fill size remains default.How do I make sure colour updates the full bar?

140
Z
5 months ago
K
krzych27
asked in Custom Code
Centering survey password in simple layout

Hello, I’ve no idea how to center the password text and box. As I’ve expanded the margins of the survey globally to 65%,  it’s appearance is a bit awkward. Any suggestions are welcome. 

452
Tom_1842
Level 8 ●●●●●●●●
5 months ago

Motivational Playlist

Terms & Conditions