Developer Corner | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago

Developer Corner

Discuss developer and custom (HTML, CSS, Javascript) solutions, best practices, & more

9424 Topics
C
cmarieknaff
asked in Custom Code
Tooltips for question text and multiple choice answers

Does anyone know the simplest 'html view' code for hover and/or hyperlinked tooltips in Qualtrics question and multiple choice answers? I am also not sure if something needs to be in the survey's ‘Custom CSS’ box in Look and Feel > Style. For instance, I want when someone hovers over “Try this one out.” for this text to appear: “I am a tooltip that provides more details about the term you clicked on.” I read all the other tooltip posts on here, Youtube, and asked Qualtrics support and could not get an answer that worked. Many thanks!

415
C
R
Regan
asked in Custom Code
Issue sizing PNG in Text/Graphic question

I have a PNG that I inserted into a Text/Graphic question. No matter the size of the original PNG it always appears much smaller in the survey program. Is there a way to make the image larger in the page? I currently have the JS below to create a box around the image. jQuery("#"+this.questionId).css({"padding": "15px", "border-radius": "8px", "border": "2px solid #007AC0" }); For some reason there is more white space at the bottom.

242
R
R
Regan
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 likely I 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.

441
TomG
Level 8 ●●●●●●●●
J
JRZ
asked in Custom Code
If I check " Show Question Numbers", how can I remove the dot for the questions of description text?

!

2975
J
Level 1 ●
Adam_Jermain
Level 2 ●●
Adam_JermainLevel 2 ●●
asked in Custom Code
Calculating Age in Simple layout with Side-by-Side question

I need to create an age verification question using the side-by-side matrix format from the Qualtrics shared library. The end goal is to collect date of birth, verify if the respondent is 18 or older, then allow them to complete the survey (if yes). We use the Simple Layout in this survey. I tried using embedded data in the survey flow to calculate age and can get close , but it’s not accurate enough for our needs (ages are off by 1-2 weeks due to leap years, etc.). I assume a custom code solution is the next best option but I’ve had no luck transferring the concepts from this code (below) to a side-by-side matrix in Simple Layout. https://gist.github.com/marketinview/543413f36b34ba8bc71d97d4fd489b9d Qualtrics.SurveyEngine.addOnPageSubmit(function() { var DateTime = luxon.DateTime; var birthDate = DateTime.fromFormat(jQuery("#"+this.questionId+" .InputText").val(),"MM/dd/yyyy"); var age = DateTime.now().diff(birthDate, ['years','months']).toObject(); Qualtrics.SurveyEngine.setJSEmbedde

2593
S
Level 2 ●●
S
Level 2 ●●
sally_Level 2 ●●
asked in Custom Code
Calculating DOB from MONTH and YEAR (NOT DAY) collected via a side by side question using Javascript

Hello, Does anyone know how to calculate approximate AGE (not DOB - I made an error in the title of this question and can’t seem to edit it) using the following side by side question design in the simple layout using Javascript? i.e., Assuming all respondents are born in the middle of the month. The question asks for the month and year respondents were born, but not the day/date they were born.

131
S
Level 2 ●●
E
EmilyY
asked in Custom Code
Using month and year (but not day) to estimate age eligibility

Hello, I have no experience with Javascript which seems to be needed for this question. I am wondering if it is possible to use just month and year of birth to estimate age eligibility (18-25 year olds). Obviously without the day of birth, it would not be precise, but I am looking to use just month and year of birth in order to exclude less than 18 or greater than 25 year olds. I'm currently using a Javascript survey question from the global library that asks for month and year of birth.

872
S
Level 2 ●●
R
Regan
asked in Custom Code
Widen question background color

I used this code to change the question background color jQuery("#"+this.questionId).css("background-color","#F5F5F5") However, the color comes very close to the text. Is there a way to widen all the margins (top/bottom/left/right) so that there is more space between the text and the box?

423
gPandey_715
Level 2 ●●
c.rose
Level 2 ●●
c.roseLevel 2 ●●
asked in Custom Code
Custom code - Feedback button styling

Hello! Would anyone assist in helping me know what CSS to add to our feedback button to make it match this styling? I have done as much as possible in the editor itself, but my CSS changes aren’t reflecting live button. I feel like I might be targeting the wrong elements. Any ideas for this?

260
c.rose
Level 2 ●●
G
Level 2 ●●
GillesLevel 2 ●●
asked in Custom Code
Change the ‘NEXT’ button to ‘SUBMIT’ on TOC Conclusion Page

Hello, Very grateful if you can help me on this request. Can we change the ‘NEXT’ button to ‘SUBMIT’ specifically on the Table of Contents Conclusion Page ?

1785
S
Level 1 ●
S
Level 1 ●
Skolar248Level 1 ●
asked in Custom Code
Scroll Bar for Side by Side Question on an iPad only Works in Portrait, how can I get the scroll bar in landscape?

I have a survey that is going to be taken on ipads and have a rather large side by side question that I added some custom code to that makes the first column sticky, so you can still see the first column with the statement choices as you scroll. This works perfectly when I hold the ipad in portrait, but when I rotate to landscape the scroll bar no longer displays with the question, but at the bottom of the page so the option to keep the first column showing as you scroll doesn’t work. In landscape it spreads the content out more so it’s easier to work with, I’m just not sure why I lose the scroll bar. Does anyone know of an option or some custom code that will address this issue?

80
S
Level 1 ●
Y
YXC
asked in Custom Code
how to redirect the "next" button to different question or block based on the choice of current question?

Hi experts, I am thinking about the code the survey with javascript and html in order to re-direct the “next page” button. How to do that for a simple example? The question in the page is: do you want to upload more items? There are two choice: one is yes, the other is no. If the answer is yes, the “next page” button will go to a block named “uploading block” If the answer is no, the “next page” will go to the block named as “exit block.” I understand it can be done with a built-in branch function. But I need to learn to do it in this simple example. So that I can build more complicated ones later on.

443
TomG
Level 8 ●●●●●●●●
w.patrick.gale
Level 3 ●●●
w.patrick.galeLevel 3 ●●●
posted in Custom Code
Changing the 'size' of the select box with jQuery

The 'select box' answer type for multiple choice questions seems to default to a size of 10. If you only have a few responses to choose from it might not make sense to keep the size=10 (number of rows shown). Below is a example with the size property set at 3. ! To set the size property for the select box, simply add the following code to your 'addOnReady' function in the javascript editor of your select box question: var qid = this.questionId; jQuery( "select[name='QR\\~"+qid+"']" ).prop("size",3); // using 'qid' so you can simply copy and paste this code into other similar questions without needing to hard-code the question ID; setting the size=3 Note: The select box is useful if you wish to use 'in-page' display logic using the responses from this question type (answer choices such as dropdown do not seem to allow for in-page display logic) and where the tab key is mainly used to move through the survey and keyboard keys such as numbers are used to select the response options (where

2372
B
B
Level 2 ●●
baharsenerLevel 2 ●●
asked in Custom Code
Save image as base64, or alternatives?

Hi all! I added a custom drag-and-drop function to my questions (finally). I want to save what the final position of the dragged images looks like, and it would be ideal if I could save it as an image. One way I saw this is that I could save the image as base64 encoding and decode it later to get the image. I can do this in console printing, however it won’t save as embedded data to my survey. I have the HTML code, JS code (which is where I set up the image saving), and the error below. The error seems to be due to Qualtrics thinking that the image is not coming from Qualtrics, but this is the url from the image library! Error: E API Error: SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at saveFinalImage (eval at <anonymous> (jfeLib.fa2484b7040929bdf0ac.min.js:2:125561), <anonymous>:81:28) at A.i.eval (eval at <anonymous> (jfeLib.fa2484b7040929bdf0ac.min.js:2:125561), <anonymous>:89:4) at A.i.<anonymous> (jfe.f9dd9f5e15c3385f2

464
B
Level 2 ●●
K
QPN Level 2 ●●
karen_split-pinQPN Level 2 ●●
asked in Custom Code
JS to calcuate age in years and service in years from metadata

Would anyone be able to help me with JS to calculate age in years from a participant’s metadata. My metadata field is called BirthDate and the format is YYYY-MM-DD. This is for a lifecycle survey. I would also need such code for years in service and my metadata is called Hire Date also YYYY-MM-DD

303
TomG
Level 8 ●●●●●●●●
D
D-Train
asked in Custom Code
Trying to adjust spacing around multiple choice question stem and first answer choice

Hello: I’d like to modify the brown/orange space in the picture below. I’d ideally like to enter code into Look and feel → Style → Custom CSS so that it would make the change for all multiple-choice questions. However, I would also appreciate having code that I could slip into the actual question content using the HTML option that would only impact that one question. Much thanks, D’Arcy

373
A
Level 7 ●●●●●●●
Z
ZoeH
asked in Custom Code
Record highlighted piped text in highlight question

Hi everyone! I’m trying to create a highlight question which displays and records piped text. I was successful in getting new piped text displayed in the highlight question thanks to this thread. My code (below) currently: 1) breaks up the piped text from QID1 by sentences/paragraphs, 2) writes over placeholder text, and 3) removes any leftover displayed placeholder text. var $this = jQuery(this.questionContainer); var choices = "${q://QID1/QuestionText}".match(/[^.!?]+[.!?]/g); // Split text into sentences Query(".QuestionBody .HLTextWords .HLTextWord", $this).each(function (i) { if (choices[i] !== undefined) { // Check for <br> or <br><br> and add line breaks appropriately if (choices[i].includes("<br><br>")) { jQuery(this).html(choices[i].replace(/<br><br>/g, "<br><br>")); // Double line break } else if (choices[i].includes("<br>")) { jQuery(this).html(choices[i].replace(/<br>/g, "<br>")); // Single line break } else { jQuery(this).text(choices[i].trim()); // Regular sentence } } el

301
Aggarwal
Level 4 ●●●●
hmacdermott
Level 2 ●●
hmacdermottLevel 2 ●●
asked in Custom Code
carry forward Q2 answer choices that are randomized with a specific answer choice as the LAST one to Q3 where the same order of answer choices are listed with a DIFFERENT last answer choice

Howdy! I’m stumped and would appreciate any counsel. Q2 has 14 answer choices total - the first 13 should be randomized, and 14th one has to be the last one (“some statement A”). We need Q3 to have the same 13 answer choices from Q2 in the same order AND the 14th answer choice needs to be “some statement B” (it’s different from the 14th answer choice in Q2). Any ideas? Will I need some JS code? Thanks for reading! Cheers, Helen

233
TomG
Level 8 ●●●●●●●●
Z
zzhang
asked in Integrations
Going back to Qualtrics where I last left off from Pavlovia

Hello,I'm currently working on a survey in Qualtrics which involves linking Qualtrics to Pavlovia and back to Qualtrics. I was able to make it work but the issue right now is that once Pavlovia redirects me back to Qualtrics, I am brought back to the beginning of the Qualtrics survey and Qualtrics would mark this response as complete. Is there a way that I can be brought back to the place where I last left off in Qualtrics? Any suggestions would be helpful! Thank you!

1221
P
K
KatieAK
asked in Custom Code
How to add a class to response options

Hi, I’m doing some custom styling on a multiple choice question in my survey and I think life would be easier if I could add a custom css class to each of the response options. I’m sure you can do this through javascript but I’m not sure how/what syntax to use? I don’t want to add the class to a parent element because my css would specifically be targeting when the response also has the “q-checked” class applied, so that a selected answer (for this question only, no other questions) has specific styling applied. Thankyou!

515
TomG
Level 8 ●●●●●●●●
P
Level 2 ●●
pb7Level 2 ●●
posted in Custom Code
Graphic Slider Size

Hello all! I have swapped out the image on the graphic slider, but can't figure out a way to increase the size of the image or the slider. Anyone have any experience with this? There are some related posts on this on this forum, but I did not find one that works yet. Thanks in advance! My current code is below - var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");imgs[0].style.background = "url(https://waltonuark.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_GyGxAQBU9b6AvHI) no-repeat";imgs[0].style.padding = '0';

211
W
RickB
Level 4 ●●●●
RickBLevel 4 ●●●●
asked in Custom Code
Question ID 

Question ID Is there an easy way to look up a question ID? Now I go to the question and right click on inspect and then at elements I look for the correct question and then the ID code.

934
RickB
Level 4 ●●●●
M
Level 1 ●
mc1999Level 1 ●
posted in Custom Code
Validation for multiple drill down questions

Hi! I’m working with a block with 7 drill down questions with 3 groups (each one uses the same hierarchy of choices). I need apply validation to the responses in order to avoid duplicates in the set of responses from the 7 questions within the block. Any ideas to achieve this?

170
M
Level 1 ●
K
kato
asked in Custom Code
Issue with Custom Sliders in Qualtrics – Responses Not Being Recorded

Hi everyone, I'm experiencing an issue with custom sliders in Qualtrics using JavaScript. Visually, everything works as expected—the sliders appear and can be moved. However, the responses are not being recorded. When the question is required, moving the slider does not register as an answer. I still get the validation message saying that I need to answer the question before proceeding. When the question is not required, I can proceed to the next page, but the response is not stored. It seems like Qualtrics does not recognize the slider interaction as an actual response. Has anyone encountered this issue before, or does anyone know how I can fix this so that the answers are properly saved? Any help would be greatly appreciated! Thanks in advance. This is the JS-code i’ve used: Qualtrics.SurveyEngine.addOnload(function() { // Get the question container var container = this.getQuestionContainer(); // Hide the original Qualtrics question text and body container.querySelector('.QuestionTex

250
K
O
Level 2 ●●
O.kisaLevel 2 ●●
asked in Custom Code
Custom Validation.

Hello, I want to create a study on qualtrics. Participants have some income that they have made before and they spend with this income. I want to prevent extra spending by using Validation. But it does not work. Thank you in advance.

212
O
Level 2 ●●

Read Me: How to use the new Experience Community 💜

Michael_Cooksey
Administrator
1 month ago

Motivational Playlist

Terms & Conditions