Developer Corner

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!

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.

!

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/543413f36b34ba8bc71d97d4fd489b9dQualtrics.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

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.  

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.

I used this code to change the question background colorjQuery("#"+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?

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?  

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 ? 

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?

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.

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

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.&

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

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  

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 sentencesQuery(".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&

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

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!

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! 

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';

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. 

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? 

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('.Ques

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.

I have a survey where I’ve customised the multiple choice function and text entry features to create an accordian type survey. The issue was when a user expands an accordian item, enters some text and then collapses it again it means the answer can’t be submitted, as you get an “You have added text into an unselected answer choice” error. To get around this, I used a bit of jQuery to recognise when a textarea has content and then assign a class active to the Label Wrapper. jQuery('.LabelWrapper textarea').keyup(function(){    if(jQuery(this).val()){    jQuery(this).parent().find('label').addClass("active");  }else{    jQuery(this).parent().find('label').removeClass("active");  }}); Then I can change the icon to a tick and make the answer uncollapsible using CSS.  At this point I thought I’d cracked it, but I’m using blocks in this survey and a Table of Contents (it’s what the client has specified). If a user goes back to this block having made entries to this page then the active class