Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,444 Topics
  • 23,558 Replies
7444 Topics
Goldie
Qualtrics Employee
GoldieQualtrics Employee
asked in Custom Code
PDF exports for ALL responses

In the Data & Analysis tab, you can export a single response to a PDF. Is there a way to export all responses to PDF instead of going through each one individually and saving and/or printing?

627842
arunxmarchitect
P
pshen
asked in Custom Code
How to download PDF response report in bulk?

Reference thread https://www.qualtrics.com/community/discussion/83/pdf-exports-for-all-responses So I tried to write a Python script to download the PDF response reports in bulk. And I was able to create individual links to the PDF using the link format mentioned in the above thread. However it requires login into Qualtrics when opening the link in a browser, so it might need an active session and cookies? I have tried using Requests package to post my credentials, but the response I got is still an HTML page instead of PDF. Does anyone have any experience with this? Thanks!

1252
arunxmarchitect
R
Robert
asked in Custom Code
How to change the text displayed in the progress bar?

Currently there is "Survey completion" displayed. In German "Umfragenfortschritt". Can I change this text?

3156
M
Level 2 ●●
A
Anna Malerba
asked in Custom Code
Set of a multiple choice question with text both before and after the option choices

I need to creat a multiple choice question where I have text both before the 4 choices are presented and after them, below.  It should appear as it does in the screenshot but without using an additional Text / Graphic box. I want all text to be in the same box, else, the text after the 4 choices will be too far away and this could create confusion. I know Qualtrics does not accomodate for this setting so I was wondering if anybody could help me with a custom code to do that. Thanks! :) 

251
TomG
Level 8 ●●●●●●●●
w.patrick.gale
Level 3 ●●●
w.patrick.galeLevel 3 ●●●
posted in Custom Code
Autofocus a text box field

I thought I would share this since I needed it for a survey. My use-case involves scanning barcodes to verify the values meet certain conditions. I want my users to simply load the survey and begin scanning barcodes and not have to manually select the text field with their cursor each time they need to scan a barcode.So if you have a text field that you want the user cursor auto focused on when the question loads (to save the user from needing to manually select it to begin typing or entering text), you can use the following javascript within your question. (Side note: if the text field currently has a value entered in it when the question loads then the cursor might NOT be visible, but the text field should have focus if javascript is enabled.)Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ var qid = this.questionId; var inputText = jQuery("input[id='QR~"+qid+"']"); inputText.trigger('focus');}); 

2416
w.patrick.gale
Level 3 ●●●
D
Level 1 ●
dp-gotoLevel 1 ●
asked in Custom Code
Error "Could not find a declaration file for module 'react-native-qualtrics'" starting on 2.6.0

Hey, I just update ‘react-native-qualtrics’ from 2.5.0 to 2.8.0 and starting to get the error:Could not find a declaration file for module 'react-native-qualtrics'. 'PATH_MASKED/node_modules/react-native-qualtrics/lib/commonjs/index.js' implicitly has an 'any' type.  Try `npm i --save-dev @types/react-native-qualtrics` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-qualtrics';` After some digging, it started in 2.6.0 since the folder structure under typescript has changed.With 2.5.0 in our node_module, react-native-qualtrics was having:typescript/      index.d.ts       index.d.ts.map       NativeRNQ...csDigital.d.ts       NativeRNQ...ital.d.ts.map But starting from 2.6.0 , I seetypescript/      lib/      scripts/      src/           index.d.ts           index.d.ts.map           NativeRNQ...csDigital.d.ts           NativeRNQ...ital.d.ts.map           Can this be fixed please?

2182
D
Level 1 ●
I
Level 1 ●
IndyMukLevel 1 ●
asked in Custom Code
Need Help Collecting Embedded Data

Hi there! I’m trying to create a survey in which participants are able to move through various videos on the same page, viewing one, then picking another one, whilst being able to move on past the videos at any time. I was able to accomplish this with the HTML and JS outlined below. The issue I run into is collecting the embedded data. That is, I want to log what videos participants select, and how long they spent watching it. Could someone please explain how I can collect those? Thanks! HTML:<div id="video-menu-root">  <h3>Select a video to watch it. Press on the video to play or pause.</h3>  <div id="video-buttons" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;"></div>    <div id="player-shell" style="position:relative;background:#f3f3f3;border-radius:12px;overflow:hidden;">        <div id="vimeo-mount" style="position:absolute;top:0;left:0;width:100%;height:100%;"></div>        <div id="vp-clickpad"         style="po

130
I
Level 1 ●
M
MarkTheRobot
asked in Custom Code
Adding static text after each text box in a form field with display logic

I’m pretty new to JavaScript, but I’m trying to add different static text to text boxes in a form field. The complication is that there’s display logic on the question.In the question before, the user selects what items they’ve received. Then, in the relevant question they’ll input how many of each they received. Some of the choices need units behind them. Here’s a simple example: I found answers for if there isn’t display logic, it’s pretty straight forward, like this example:  My problem is, that only works if they select every option from the question above. Otherwise the units appear nonsensically. With the display logic, I can’t reference the choice box by location in the list. But I’m struggling to reference the displayed answer choices correctly. This is what I have so far: Qualtrics.SurveyEngine.addOnload(function(){    function hasClass(element, cls) {        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;    }    var inputs = $(this.getQuestionContain

12673
J
Level 1 ●
D
Dem
asked in Custom Code
Slider display

Good morning, I have two types of sliders configured on my website, but I can't get them to behave as I want.The first is a classic slider, which I would like to appear open when the page loads.The second one I created with the new template. It appears open, but when I close it, the tab is no longer available to reopen it.Thank you for your help.First one  Second oneWhen closed desapear 

150
D
hilaryk
Level 2 ●●
hilarykLevel 2 ●●
asked in Custom Code
Pick, Group, and Rank Question - how to dynamically count down items left to rank?

I have a pick, group, and rank question with 32 items, set to display stacked so as not to overwhelm the survey-taker. I would like to have a counter on the page that indicates how many items are remaining in the stack (they must rank all items). There are two groups the items can be ranked into. I haven’t found much information on the forums about using JS with pick, group, and rank questions, so I’m a little lost. So far I have the following, which I don’t think is working: var group1count=jQuery("#" +this.questionId+"group0 li").length; var group2count=jQuery("#" +this.questionId+"group1 li").length; var remaining = 32 - group1count - group2count Qualtrics.SurveyEngine.setEmbeddedData( 'remaining_n', remaining); Here is a screenshot of how the question looks on the page (the stack of items has a length of 32 before any ranking occurs, and we want somewhere on the page to show how many are left in a dynamic way):If anyone can give me some pointers on a) how to get the length of the

324
hilaryk
Level 2 ●●
K
Level 2 ●●
KateDLevel 2 ●●
asked in Custom Code
Piping text based on which form text box was displayed

I have a survey where we ask if it was a trip to your home and the response is yes / no.If yes, then the next page (a form) will show a field asking ‘Where did you go?’ and the default option of ‘home’ is entered. The ‘Where did you go? (including name of place/business if applicable)’ field is hidden, as is the ‘street address’ field and instead a ‘location description’ field is shown.If no, then the ‘Where did you go?’ and the default option of ‘home’ is hidden and the ‘Where did you go? (including name of place/business if applicable)’ field is shown, with the ‘street address’ field also shown and the ‘location description’ field hidden.This is because we don’t want to know respondent’s actual addresses, just an area, but if it is a business etc, then we want to know the address.This works fine but when it comes to subsequent questions, we want to pipe in their answer to where they went, which, previously I did by adding “${q://QID56/ChoiceTextEntryValue/2}” where relevant. If they

303
K
Level 2 ●●
N
nicole_celestine
asked in Custom Code
Adding Flatpickr (Timepicker) to a Question

Hi there, My respondents have been complaining about the hassle of navigating three separate dropdown boxes to select times in a survey that asks a lot about their activities throughout different times of the day. I am therefore looking to add the Time Picker available here as a survey question. I know *nothing* about Javascript and so I was hoping someone could tell me how to go about doing this. So far I have gauged the following: I can paste things under the OnLoad, OnRead, or OnUnload JS sections of a question and so I've pasted the following 'input element' under the OnLoad section without getting any errors: Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+" .InputText").flatpickr(optional_config); }); I've then tried pasting the following under all three sections and keep getting errors about the brackets not being closed (even though they're closed), as well as there being unexpected identifiers. { enableTime; true, noCalendar; true, d

280318
K
Level 2 ●●
S
Level 1 ●
SumeshsdnLevel 1 ●
asked in Custom Code
How can I auto code a single/multi question from the response selected in previous question?

How can I auto code a single/multi question from the response selected in previous question? For example, out of 5 options in a multi question only 1 of them is selected at question Q1. I have to autocode this code in question Q2 which is also a multi question and skipped from been asked to the respondent. What is the best approach to implement it?

86213
R
Level 1 ●
L
Luis Pilli
asked in Custom Code
Custom HTML code vs Qualtrics new survey experience

Hi,I have the following HTML code that I import as a survey to my project.After some JS customization in the answer table, it works as expected.However, if I set the new survey experience the same code becomes problematic. It seems that a ghost column is inserted at the right side of the table, and I cannot fix it. Is it possible to have a solution for this issue?cheersLuisImagine that these two platforms would be launched in the near future.</p><p>You are considering to try out one of them.</p><p>Which one would you choose?</br><br/><style type="text/css">table {width: 100%;border: none;border-collapse: collapse;}th = {text-align:left;}th, td {font-family: verdana;font-size: 12px;padding: 3px;}th = {text-align:left;}td:first-child {border-left:none;border-top:none;}td {line-height:1.2;border-left:2px solid #FFFFFF;border-right:2px solid #FFFFFF;border-bottom:1px solid #FFFFFF;}td.att {width:30%;}td.alt {width:35%;}p {margin-bottom:2.5%;text-al

282
L
R
Level 1 ●
ReganLevel 1 ●
asked in Custom Code
Adjusting options in an image slideshow

I found this discussion and was able to use the code supplied to create an image slideshow within my survey. However, the Number Text (i.e., 1/3 etc.) and Next/Previous arrows overlap with the image (see below). What can I do to make it so the Number Text appears above the image and the Next Previous arrows appear outside of the image?

150
R
Level 1 ●
B
BetzD
asked in Custom Code
Clickable image slideshow

Hello,I'm hoping someone can help me diagnose a problem with custom JS. Following these steps (https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp), I can create an image gallery but the next/previous buttons are not functional. A similar dead thread from 2018 (https://community.qualtrics.com/XMcommunity/discussion/2514/is-there-a-way-to-include-an-image-slideshow-in-my-survey) ran into this issue, but no solution was offered (the 2020 suggestion to use an Imgur album will not work, unless there is a way to prevent the imgur image from linking out of the survey and over to imgur.com).Thank you!

10539
R
Level 1 ●
S
SLEE
asked in Custom Code
Left question numbers blank, but "." shows up in place in preview. How do I get rid of the periods?

I left the question numbers blank, hoping to have no question numbers in the survey. ! In preview, however, I don't get blanks. There are periods in place of the blanks. How can I get rid of them? !

15408
J
Level 1 ●
K
Kly27
asked in Custom Code
setChoiceValueByRecodeValue in JavaScript occasionally selecting more than function called

Hi everyone,New to Qualtrics and I have some code that I’m trying to tease out what’s wrong with, but I can’t seem to and would love some insight as to whether this is a Qualtrics quirk or something wrong in the code. Also, whether I am going about this in the best way!I have a survey consisting of two rounds. Round 1 has participants selecting values on a slider in a Loop & Merge block. I then have an intermediary block with a multi-select multiple choice question where the code below runs.The code creates a permutation of a list of numbers (right now 1 through 8) that reference the loops in Round 1. It then identifies the loops whose questions have answers where the chose value is not 3 (the middle of the slider). This is the `alteredCandidates` and `normalCandidates` in the code.From those two arrays, it selects two from the `alteredCandidates` array if possible to put into `alteredPosts` and then it selects the rest, up to a total of 4, from either `alteredCandidates` or `norma

80
K
D
Level 2 ●●
davgon1774Level 2 ●●
asked in Custom Code
How to add Percentages to Incremental Value on a Slider Question

I am trying to add percentage symbols for the values given on the increments for the slider question- is there a java code or some capabilities through qualtrics to allow me to do this? 

12213
R
R
Level 1 ●
ReganLevel 1 ●
asked in Custom Code
Changing first letter of piped text to lowercase

I want to pipe the selection from a standard likert scale question like the one below into a follow-up open ended question.Very unlikely Somewhat unlikely Neither likely nor unlikely Somewhat likely Very likelyI want to change the first letter of the piped selection so that it is lower case.The piping instruction I currently have in the open ended question is:Why are you ${q://QID26/ChoiceGroup/SelectedChoices} to consider using... I tried using the tips noted in the thread below but it isn’t working for me. 

1296
R
Level 1 ●
L
LiamJ
asked in Custom Code
Setting embedded data via javascript intercept

Hi,I’m struggling with setting embedded data in a qualtrics survey in an Web/App insights project with an intercept. Within the intercept I’ve set up the following: Screenshot from interceptOn the survey page I use the following code:Qualtrics.SurveyEngine.addOnReady(function() { // Verstecke und deaktiviere den Weiter-Button var nextButton = document.getElementById('NextButton'); if (nextButton) { nextButton.style.display = 'none'; nextButton.disabled = true; } var element = document.getElementById("SurveyEngineBody"); let pageData; const setBackgroundBasedOnDevice = () => { const width = window.innerWidth; // mobile breakpoint if (width < 768) { document.body.style.backgroundColor = pageData.data.mobileColor; } else { document.body.style.backgroundColor = pageData.data.desktopColor; } console.log('changed Backgroundcolor'); }; const getKameleoonData = (event) => { const daten = event.data; if (daten.type === 'Kameleoon') { pageData

390
L
E
QPN Level 4 ●●●●
ErikahuerQPN Level 4 ●●●●
asked in Custom Code
Show/Hide Matrix Text Entry Boxes Based on Specific Options

Hi everyone,I have a matrix-type question in Qualtrics where each row has a set of radio button options (Extremamente satisfeito, Satisfeito, Neutro, Insatisfeito, Nada satisfeito), and also an open text box directly under the row label.What I’m trying to do is: Keep all the text boxes hidden by default. Show the text box only when the respondent selects “Insatisfeito” or “Nada satisfeito” (columns 1 or 2 from the left in my case). If the respondent changes their selection to something else, hide the text box again and clear its value. I’ve tried some JavaScript in the “AddOnload” section, but the text boxes still appear when the page loads or don’t hide/show reliably. I suspect it’s because Qualtrics renders these inputs in a <th> tag and they’re visible before my script runs.Here’s my current code attempt (not working as expected): Qualtrics.SurveyEngine.addOnload(function () {    var qid = this.getQuestionInfo().QuestionID;    jQuery("#" + qid + " .TextEntryBox").css("disp

393
TomG
Level 8 ●●●●●●●●
jflowers1
Level 4 ●●●●
jflowers1Level 4 ●●●●
asked in Custom Code
Hiding One Field in a Form Field Question

I have a survey that has been open for a year that contains a form field question with six fields. We no longer need users to fill out one of the fields, but we still want to keep the data that was previously collected, so I don’t want to completely remove that particular field. Is there a way to hide only the second field in a form field question?

242
jflowers1
Level 4 ●●●●
W
wunderpants
asked in Custom Code
Select2 loads JSON but doesn't search

Hi everyone.I’ve successfully created a Multiple choice question using Select2 to render options via an online JSON file and works fine…..initially.  But when try to keyword search, it doesn’t seem to limit the results - just blips/refreshes the list and displays everything again.It’s working great for embedded data on a duplicate question, but the external JSON referenced data is buggy.The JSON file is saved to Qualtrics file system for testing initially - not sure if that should make a difference., The final form will source the data from a different domain.Here’s my code:Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ jQuery('#' + this.questionId + ' select').select2({ ajax: { url: 'https://submit.dese.gov.au/ControlPanel/File.php?F=F_LbC2C0OmXT7JG1k', dataType: 'json' }, placeholder: 'Search for provider name or code...', width: '100%', cache: false });});And here’s the result:https://submit.dese.gov.au/j

565
W
P
psferr
asked in Custom Code
Allowing respondents to skip constant sum questions despite 'Must Total' validation WITH SLIDERS and KEEPING THE SLIDER CAP

Hi all,I have a constant sum question where respondents are required to allocate 100 “tokens” to different categories -- each category being a slider. The idea is that the sum of all sliders should be exactly 100, but I also wanted to allow my respondents to skip this question.My problem is very similar to this one, with a few caveats. First, the author of the original post was using a constant sum question with answer type “Choices”. I’m using answer type “Sliders”, which required a slightly different syntax. I managed to maneuver this difference using Javascript, and as of now, the validation condition with JS successfully requires the sum of the sliders to be either 100 or zero. However (and this is the second caveat and my problem here) there is a very annoying aspect with this workaround: if the sliders don’t sum EXACTLY TO 100, the answer is not valid. In other words, if my user moves the sliders to values that sum to slightly more  -- or less -- than that (say, 97 or 102), they

616
P

Motivational Playlist

Terms & Conditions