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.

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, 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 ? 

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 use

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

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 a

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. 

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 us

Hello,My company’s IT department just acquired the DXA suite as an add-on to our Qualtrics main instance.I’d like to ask the community what are your experiences using the DXA features: How easy is it to work with? Does it deliver what is advertised?And if there’s anyone out there who currently use Quantum Metric, would love to hear how is it going so far using their platform, as I’m on the understanding it offers a more complete solution with the trade off of being on a higher price point than DXA:How easy is it to work with? How useful are the advanced reports they provide? What would you consider its advantages over DXA?Thank you all in advance!Best regards,Daniel

Hi--I was hoping that someone could help me with creating Javascript to split a single slider question into a grid - where statements are divided into different columns, each with their own sliders.Some background:I have a multiple-choice question in which I use the “column” alignment to split up answer choices (in my case, photographs) into a 3x2 grid (randomized choice order). I then use carry-forward to bring Displayed Choices to a subsequent slider question, where they answer a slider question for each photograph. I’d really like to display this question in the same way as the MC question -- that is, in a 3x2 grid. I know how to split up different questions on a single page:HTML: <style type="text/css">#Questions{display:flex;}</style>Java: Qualtrics.SurveyEngine.addOnload(function() {document.getElementById('Questions').style.display = 'flex';});But not how to get different *slider* state

Hello,I’m working on a study where I want participants to be able to create editable diagrams explaining how they perceive their emotions to unfold. Participants would need to be able to move blocks around and place them in a unique/complex order. I’ve included an example of a diagram someone might make below by dragging blocks into place and connecting them with arrows. Would this be possible to create within Qualtrics? 

Hi everyone, I'm trying to implement a feature where users can unselect a radio button in a single select question by clicking on it again. Currently, users can only select a different option, but not unselect the selected option.I've tried using the following code in the "Single Question JS" section of the question, but it doesn't seem to be working: this.questionclick = function(event, element) {  if (element.type == 'radio') {    var selectedOption = this.getSelectedChoices()[0];    if (selectedOption === element.getAttribute('value')) {      this.clearChoice(element);    }  }}.bind(this);Is there a better way to do this, or am I missing something in my code?Thanks in advance for your help!