Custom Code

Hi ,I have created a bipolar question with a 7 point scale. But the width of the container holding the question body does not increase automatically and the horizontal scroll bar seems to show up. I understand that to remove the scrollbar Javascript has to be used. But I am unable to identify the right class or code the script correctly. Was anyone able to solve this issue? Please let me know.

I am piping a text from a previous question, but here i need to pipe the text in lower case. I don't want to use embedded data or intermediate question to do this. Is there any way i can directly change all letter in lower cases while piping "${q://QID10/ChoiceGroup/SelectedChoices}"?

Hi all, I am working on a survey that presents patients with a choice between two options, A and B. We want to ask participants the percent chance they would choose each option. The options are mutually exclusive and there are no other choices, so the percent chances of choosing each choice should add up to 100%.  I would like to use one slider instead of using a constant sum question with two sliders to reduce friction as participants take the survey, and add dynamic text below the slider that shows probability of choosing option A (selected using the slider) and implied probability of choosing option B (100% minus the probability of choosing option A). I would also like to make sure that the dynamic text works in the “mobile-friendly” survey version. I currently have the code below, which works in non-mobile-friendly version but does not work for mobile-friendly. Is anyone able to advise how to make this work in the mobile-friendly version, or is there no way to do this?  Thank you! 

Referring to this post: The posted solution does not work with Simple Layout. This is despite loading JQuery in the header of the survey (as proposed here: )Does anyone have any suggestion?

I would like to add a button to display more information if the respondent wants to see. By default the details will be hidden and on clicking the button it should toggle between displaying the details and hiding it again. How can it be done?I have found the code on how to do it using JS but dont know how to make it work using Jquery.It is the fourth answer in the link..Hide and show text by click on div

I am on version 2.6.0.We have an react native app and are using your package. The survey pops up and the answers come through but the embedded data does not on iOS.So I am wondering how that could happen as it seems the setup is correct as it is popping up on both platforms and the answers come through and the embedded data is coming through on Android.

Hello,I would appreciate if someone could answer my question. When using a constant sum question type and sliders as the answer type I was wondering if there was a way to insert an image into the right side of the slider? There is only a text box that will not allow images to be inserted. Additionally I would like to get rid of the numbers above the slider bar (0-100) using either Javascript or CSS.Thank you,

I´m trying to use javascript in a date of birthday question to calculate age of the participant on a specific date (11/09/2001 - dd/mm/yyyy). Because after I´m going to display some questions to people who were older that 18 years at that time. I aldready create “age” in embedded data. Is this code correct? Because it it not working for me Qualtrics.SurveyEngine.addOnload(function() {  /* Place your JavaScript here to run when the page loads */  var dobString = "${q://QID212/ChoiceTextEntryValue}";  var dobParts = dobString.split("/");  var dobDate = new Date(dobParts[2], dobParts[1] - 1, dobParts[0]); // Year, Month (0-based), Day  var targetDate = new Date(2001, 8, 11); // 11th September 2001  if (!isNaN(dobDate)) {    var ageInMillis = targetDate.getTime() - dobDate.getTime();    // Calculate age based on milliseconds    var years = ageInMillis / (365.25 * 24 * 60 * 60 * 1000);    // Set the calculated age as embedded data    Qualtrics.SurveyEngine.setEmbeddedData("age", Math.floor(

Hi, I am trying to increase the width of the statements in a matrix - the survey is in the Simple layout. For some reason, manually dragging the statement width isn’t working in this layout (but is working in different layouts) and the code I’ve tried hasn’t worked either. Is there a way to increase the width in the Simple layout? Thank you!  

Is there a way to reset choice options when a user navigates back to a screen? For example, they select some answer in a multiple choice question on page A, then go to page B, and later use the back button to get back to page A--when they go back to page A, I'd like the selected choice to be clear and allow them to choose a new option without any pre-selected options. Is this possible in normal Qualtrics options or using JS?

I have adjusted my survey to span 70% of the window with the following code:.Skin .SkinInner{width: 70% !important;;max-width: 70% !important;} While this works for majority of the survey, there are questions that still do not correctly span the window despite the forward and back arrows (and banner) spanning the window correctly. The image below is an instance of this. The issue occurs with matrix questions and a dropdown question.  

Hi Community,I'm trying to work with can add a reset/clear option to the survey that would like to clear their selections for the current question, they can simply press a reset/clear button and it would delete all the responses for that question at once

While testing, our team identified an issue: the ScreenReader, like Voice Over (Apple) and NVDA, read the options (single-select and multi-select) twice.  It is occurring due to the aria-labelledby in HTML flow has the group header, label, and the option text all added in a single line. Is there a way to edit it and customize the aria-labelledby for individual options? <div class="choice checkbox"><div class="choice-error-container"><div class="choice-error"><label class="choice-label" for="mc-choice-input-QID13-1"><input aria-invalid="false" aria-labelledby="choice-display-QID13-1 choice-group-display-QID13-cg_3 exclusive-choice-label-QID13-1" id="mc-choice-input-QID13-1" name="QID13" role="checkbox" type="checkbox"><span class="radio-button checkbox"></span><span class="choice-content"><span class="display-with-image" id="choice-display-QID13-1"><span class="display-with-image-display rich-text">Métis</span></span&g

I apologize if someone’s already asked about this and I couldn’t find a similar posting or answer. I’ve got a budget form where I’m asking individuals to enter dollar amounts. Originally I didn’t include the text about not including commas (I’ve since added it in hopes of preventing any other issues before the deadline to submit, but I can manually fix on the back end), because I thought I’d tested it and it worked fine, but I ran into some issues with the totals not calculating in my embedded data because of the few instances when folks included commas in the Total cost field dollar amount.  This is how I’m calculating the total across 4 pages like the screenshot above. I did try another addition calculation previously that I’d found here on the Community and this one seemed to work more reliably when I had empty values since not every person is going to need to budget for 20 individuals. So I’m curious if there’s something I can do to either A) make commas included still work in the

Hellow,I would appreciate it if someone can help me. In my survey, I have a slider question where I want to display three pictures. I inserted these pictures by adding labels in the 'Format' section. I want one picture in the middle, one on the left but outside the slider bar, and one on the right but outside the slider bar. However, the pictures cannot be positioned outside the slider bar. Could you please guide me on how to achieve this? SEE the example picture please. 

Help needed on: Hiding the next button.  Auto advance after seeing the video. Here is what I have done already. I have a survey wherein I want to create a feeling of thought disruption by showing a video. The videos are directly uploaded on Qualtrics. I have used this thread to enable autoplay and removal of controls.Further to that, the videos I am going to show randomly, vary in time (6, 15, 30, 60 seconds). I want to use auto-advance feature after the video. So, once a respondent has seen the video, the page moves forward automatically. I have tried the following two posts and the auto advance does not work.  I have also tried the auto advance function through ‘Look and feel’ area but as the video is within a text/graphics question, the auto advance does not work and ‘next’ buttong is still shown. I am not very good at code, as you can imagine, so, please help! 

I have a problem about the qualtrics report layout. I use results table to show the field and the data in report tag. However, some column width are too long and some are too short. I have a date field called 'Recorded Date' and the layout is like the below: ! I want to change the layout like the below: ! I think this problem is because of the column width. So, how can I change the column width for each column field in the result table?

Hi.I would like to control a text box based on the selection of radio buttons. The form will have 3 radio buttons and a text box. When the form is loaded, I want the text box to be disabled. However, when "Other" is selected in the radio buttons, I want the text box to be enabled. Additionally, if any option other than "Other" is selected, I want to clear the value of the text box and disable it again. Could you please tell me what code I should write to achieve this control? 

Hi there, I’m in the process of creating a very simple survey. I have a number of multi choice questions, with ‘Other, please’ specify options. At the minute, the text entry box automatically appears below the question like this:  But what I’d really like to do is for the text entry box to only appear if someone clicks the other please specify option. So essentially it would be routing the text entry box to appear only when the option is selected. Is this possible?  I’ve tried display logic, all sorts, and I can’t see a thread on here where this issue has been resolved. I’d be grateful for any help. Thank you!

ISSUE DESCRIPTION I am trying to embed a video into qualtrics, such that the participant cannot interact with the video player, and it autoplays. This setup currently works, as I use the following HTML code: <iframe height="800" src="https://www.youtube.com/embed/Crhpyg_a5XY?autoplay=1&controls=0&showinfo=0&loop=1" style="pointer-events: none" width="800"></iframe>   However, for another video, I would like to change the playback speed to 1.5x, again without the participant having to do so manually.   I tried to use the following JavaScript code in the question, but it did not work. Qualtrics.SurveyEngine.addOnload(function() {     // Function to set playback rate via YouTube API     function setPlaybackRate() {         var iframe = document.getElementById('video');         iframe.contentWindow.postMessage('{"event":"command","func":"setPlaybackRate","args":[1.5],"id":1}', '*');

I am trying to use KaTex for equations in my Qualtrics survey. All of the math renders correctly in “question preview” but only two of them render in “block preview”. This block contains page breaks, if that’s relevant. I put the starter template in the header (Browser · KaTeX), and each question with the KaTex has the JavaScript:Qualtrics.SurveyEngine.addOnload(function() {jQuery(".katex").each(function() {katex.render(this.innerHTML, this, { throwOnError: false });});});Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/});Qualtrics.SurveyEngine.addOnUnload(function(){ /*Place your JavaScript here to run when the page is unloaded*/}); The math is rendering for some of my questions but not others. For example, this worked (in the question text HTML):Bernoulli trial equation: <span class="katex"> P(X = \mathrm{x}) = \binom{n}{\mathrm{x}} p^{\mathrm{x}} (1 - p)^{n-\mathrm{x}} </span>This one also worked (

Hi everyone,I am wondering if there is a way to position individual choice options all around an image, not limiting the choices to a single side. The idea is to have the choices placed around an image like a clock as seen below (ignore the arrow):I imagine this will require JavaScript or custom CSS, but as I am not well versed in either, I need help finding a solution if it is possible.Thanks in advance for your help.

Hi Qualtrics Community,I’m currently working on a survey that includes drag-and-drop questions, and I’m having trouble optimizing them for mobile devices. Here's the situation:The Problem:I want to ensure that my drag-and-drop questions fit properly on mobile screens without requiring horizontal scrolling. Specifically, I need the following:Mobile responsiveness: The items, groups, and containers should shrink or adjust based on the screen size, ensuring that everything fits within the mobile screen and the navigation button remains visible without any scrolling. Resizing: The drag-and-drop elements (choices, boxes, etc.) should automatically resize for smaller screens, like on mobile phones and tablets. Viewport scaling: I’ve added the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, but the layout still doesn’t adjust properly on mobile devices.What I’ve Tried:Implemented CSS media queries for mobile devices to resize elements like the containers, lis

Hi Qualtrics Community,I’m currently working on a survey that includes drag-and-drop questions, and I’m having trouble optimizing them for mobile devices. Here's the situation:The Problem:I want to ensure that my drag-and-drop questions fit properly on mobile screens without requiring horizontal scrolling. Specifically, I need the following:Mobile responsiveness: The items, groups, and containers should shrink or adjust based on the screen size, ensuring that everything fits within the mobile screen and the navigation button remains visible without any scrolling. Resizing: The drag-and-drop elements (choices, boxes, etc.) should automatically resize for smaller screens, like on mobile phones and tablets. Viewport scaling: I’ve added the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, but the layout still doesn’t adjust properly on mobile devices.What I’ve Tried:Implemented CSS media queries for mobile devices to resize elements like the containers, lis

Hi! Does anyone know of a way to display answer choices in alphabetical order in a multiple choice question? For example, we have a question where the respondent selects their instructor name from a multiple choice list. There are 212 instructors. When the survey was built, we were able to paste the instructor names into the answer choices alphabetically from a sorted MS Excel spreadsheet. We were just asked to add 25 instructors to this question. Since we have already collected data in the survey, the only option is to add the names to the bottom of the answer list and manually click an arrow to move them up until they display in alpha order. This is a pain to do...Any help would be greatly appreciated!