Custom Code

I want my #3 radio button in red color. I used the Javascript code below. It works well in the horizontal application but doesn't work in vertical and column applications. JS :Qualtrics.SurveyEngine.addOnReady(function () {  ch = this.getChoiceContainer();  all_buttons = ch.querySelectorAll("[class^=q-]");  all_buttons[all_buttons.length - 1].id = "last_button";  last_button = ch.getElementsBySelector("#last_button")[0];  // Set border to red  last_button.style.borderColor = "red";});work well in the horizontal casebut it doesn't show red color, though the element code show" red". The sample problem happens in column application also.The code from https://community.qualtrics.com/XMcommunity/discussion/13922/change-the-color-of-radio-button-before-selection-but-only-for-the-last-responseshe works out both horizontal and vertical one year ago. I am not sure why not now. I am using the basic blank theme, and flat layout, without additional CSS.

hi!I am using the flat layout, and I want to move the radio buttons from the left side of the answers text to the right side, using the custom css. (for example - on the modern layout the buttons are on the right side of the text) anyone has an idea what code can I use to do that?thank you!

I'm building a survey to get feedback on courses I am developing at Tulane University. I'm using the Matrix Table style of question, and have the Statements as the Course Titles. I'd like to have a pop-up window appear after a roll-over/click on the Statement that will have the Course Description if folks need more detail and information about that particular course. I don't want the question itself to be so text heavy. I see an option in the Rich Text Editor to create a hyperlink to a text anchor, but it seems like the text anchor has to be in the question itself, which kinda defeats the point of moving the text to the pop-up window. I am new to Qualtrics, but after scouring the help and community area, I can't seem to find a solution on how to do this. Does anyone have any suggestions? I'd rather not build another suite and use the URL/Anchor there, as I don't want the course information to be public yet, so any other thoughts or ideas would be appreciated. Thanks, Jerry

Hello, I've been looking for information on how to create a pop-up button that when clicked brings up a box of additional information - but I have only found "hover-over" options and an option for using the "next" button as a pop up option. I'd like to have a button that says "Click here for examples you can use to edit or complete your list" that appears under a text entry form. When clicked, a pop-up window would appear with information. I am new to Qualtrics with little knowledge on coding. Is there a simple way to do this without coding knowledge? If there is another page with information on this already I'm happy to be redirected. Thank you!

Hi everyone ! Does anyone know how to change the arrow color in the next button ? I need to change it from black to white. I tried some CSS codes posted by the community in other posts, but none of them worked. I have customized the background color of some next buttons and I don’t know if the script for the arrow color is overrided by the background one. 

Hi, I have the side-by-side question below with both the statements and column options being based on display logic from responses previous questions that were “select all that apply” (which solutions have you used, and which options did you use the solutions with). Solutions listed in the statements (ABCD), and the options they use them with (1234) in the columns. A respondent may use solution A&B with options 1, 2, &3, but they only used solution C with the option 1. How can I hide or disable the radio buttons highlighted so that they don’t see or aren’t able to select for those?  

I have a Qualtrics survey written mostly with custom JS. Throughout, I use CSS stylings to manipulate the background colour of the page body. At some point in the last week, my CSS stopped displaying properly (having worked correctly since January). Below is a minimal example of my code; the issue is that the html, body{ } chunk doesn’t affect the page body (i.e., it’s white rather than black). I’d be grateful for any suggestions! My script: <!DOCTYPE html><html><head><style>html, body {  height: 100% !important;  margin: 0;  padding: 0;  background-color: black !important;}p {  color: white;  font-size: 18px;}</style></head><body><p>Some text</p></body></html> EDIT: I’ve tried altering the background colour inline, to no avail.

I’ve seen a bunch of people asking about how to embed chat GPT into a qualtrics survey. I managed to construct a working version of a multi-turn interaction with chatGPT, and so I’m posting the code here. Hopefully it helps someone.The basic idea is to dynamically alter properties in the webpage, including adding custom buttons and changing the question text. You can see a demo of the survey here. Because of the way that it directly alters various webpage properties, I’m quite sure that it will break easily. For example, I don’t know what happens if you have multiple questions on the same page. There be dragons there.The results of the conversation get stored in an embedded field.I just created a single question with a text area answer, and then dropped this code into the question’s “addOnLoad” method. // this question will drop a JSON version of the conversation into this embedded data locationconst EMBEDDED_DATA_DEST = "convo_history";// adjust as neededconst OPENAI_API_KEY = "Bearer

Hey community,I use a matrix table but the text above the matrix table has unintended line breaks (see picture attached).How can I make this text full table width?Thanks!  

Hi everyone, For a new research project, I ask participants to evaluate fictitious job candidates. The information of the job candidates is summarized in a small table (implemented in Qualtrics as a descriptive text). Since the participants in the survey need to evaluate the candidates with respect to a bunch of statements it would be great if the table with info would move down when the participants scroll down through the statements. In this way the participants can always see the qualifications of the job applicants while evaluating them. I was wondering how I could implement this in Qualtics? I have seen discussions regarding fixing images, however with respect to fixing questions I have not seen any solutions for my problem so far. Maybe good to know is that I am completely new when it comes to coding. So any detailed solution on how I could program this, would be great!Thanks in advance for the input!Hannah

Hi all, hope anyone could help with this. I would like to show custom values to multiple slider question respondents (e.g. 'good' when '3' is selected). Has anyone an appropriate code? ! Thanks in advance

This is my Q2 in the Qualtrics survey instrument in which I have a side-by-side table with 4 statements and 2 columns with dropdown options. For statements 2 and 3, I want to hide dropdown options for both columns. 

Hi everyone,For my master thesis i would like to research chatbots. In order to do this i would like to have some sort of frame where participants are able to interact with a chatbot through some sort of embedded square in the survey. The research really focuses on interacting with the chatbot in that environment so i would like to apply the following script into a page so people can interact with it: https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"> var myLandbot = new LandbotFrameWidget({  container: '#myLandbot',    index: 'https://landbot.io/u/H-201854-TW0ZHY5GVEOKB963/index.html', });This script came directly from the landbot website, and i would like to know if it is possible to create a page where people see this embedded chatbot, so that they can interact with it. Unfortunately, i was not able to add this into qualtrics. Perhaps you guys could help me out, or present an alternative!Thanks in advance!

Hi All,sorry but i have hit my limit. I’m too far in to not use Simple Layout or the SBS for these questions but Simple Layout is, simply, frustrating and/or my JavaScript is way too poor.I have forced response: 1 choice in Col 1, 1 choice in Col 2. But, now i’ve been asked that, if the last choice is made in Col 2, it should negate any choice in Col 1.i have tried editing code from here: and here: and even considered the @TomG code for enabling  the removal of a selection (it would then require their trust to remove their selection in Col 1 if they choose ‘exclusive’, which is not ideal but ok given the limited end-users) - though my understanding is that it doesn’t work for Simple Layout. correct?Either i’m not getting the element names correct or something.My preference is to keep it as just the 2 columns as per top picture, below, but would also happily move that “exclusive” choice to a 3rd column is that’s easier.Also, if anyone has any creative work-arounds that will work in-page

Hi, I have 3 questions (say, Q1, Q2, Q3), each question asks for a number, and a 4th question (Q4) which sums up all numbers entered in those previous questions. This 4th question is not technically a question, it just shows the 'sum entered' and asks the respondent to confirm by clicking the forward arrow, or the back arrow to make changes to any of the inputted data. I have a custom javascript code which disables input into that (Q4) field. But my issue is, when i go back to Q1, Q2, or Q3 and make changes to any of the numbers entered, the sum at Q4 is not updated to the new sum (it still shows the original calculated sum!). Note; the calculated sum at Q4 is shown using embedded piped text. Could anyone please advise? and/or point me in the right direction? Many thanks, Amy

hi all, I want to provide a calendar picker for month and year only. I tried with the code below:  jQuery("#"+this.questionId+" .InputText").flatpickr({    dateFormat: "m/Y"}); The outcome did give me just month and year, but the calendar that pops out has day.  how to display only the month and year in the calendar picker? 

Hello! I'm new to customizing Qualtrics survey questions and need some support. I have slider questions that I'm using Javascript to delay until after a video finishes playing (I found the script in this post), but the slider doesn't work once it appears after the delay. The slider disappears and I'm not able to move the slider when previewing it (see image below). My other questions (e.g., multiple choice) work just fine though with the exact same script. Does anyone know how I can fix this?

Hi Community,I'm trying to work with can add a reset/clear option in the multiple question in single page 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 onceI tried this code; however, it's only working single question in single page and has an error when I click this clear/reset button it disables the validation and when I back it appears the last selection that I already reset/clear.Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ const quest = this;    const qc = quest.questionContainer; var questionId = this.questionId; var inputs =  $(this.getQuestionContainer()).select('input[type="radio"]', 'input[type="checkbox"]', 'input[type="text"]');    qc.querySelector(".QuestionText").insertAdjacentHTML("afterend", "Clear Responses");    qc.querySelector(".reset").onclick = function () {    

Hi there! I wondering if putting a Simple Layout survey into a responsive dialog creative, impacts JS applied to survey questions? My development team sees our JS is working as expected in the console, however once the survey is in the responsive dialog, the JS no longer works.Just wondering if there is a relationship between the two. 

I am currently facing an issue with integrating a Qualtrics feedback pop-up survey button on our website. I have encountered a challenge when attempting to map a value from a hidden HTML element on our website to an Embedded Data field in the Qualtrics survey.Here are the specific details of the situation:We have successfully implemented the Qualtrics feedback pop-up survey button on our website, and it is functioning as intended. Within our website, we have a hidden HTML element that contains a value we would like to capture and map to an Embedded Data field in the Qualtrics survey. The hidden HTML element is dynamically populated with a value based on user interactions on our website. We would like to pass this value from the hidden HTML element to the Qualtrics survey as an Embedded Data field so that we can analyze it alongside the survey responses.We have attempted to explore potential solutions on our own, but we are currently facing difficulties in achieving this desired functio

I would like to use the bipolar matrix table to show subjects choices and they can make choices between these two boxes. But I want to confirm they only switch point one time, not multiple times, which means there are no multiple switches. The question is attached to this question. Does anyone have good ideas to satisfy this condition? THANKS FOR YOU HELP.

Hello,I need to embed several videos into my survey and I need them to have as little YouTube branding as possible. They are actually TikTok videos that I have downloaded and then uploaded to YouTube so that they will be optimized for display in Qualtrics. I have gotten as far as removing the YouTube branding...I would love for the title of the video to not display (because YouTube forces you to title your video), but I can work around that. More importantly, I'd really like for the "channel" information and "subscribe" button to not appear in my embedded videos. Is there a way to solve this? The code I have worked on so far is below:https://www.youtube.com/embed/VIDEO?modestbranding=1" frameborder="0" allowfullscreen>I am hoping someone with more coding expertise than me has suggestions for how to modify the video display (or suggestions for another way to embed TikTok videos in my survey). I tried downloading and doing a direct upload but the audio did not work on mobile.Many thanks

Hello, I have been able to embed a PDF in Qualtrics. However it is not being shown as fullscreen. I tried all possible styling solution in the HTML code but still it does not help.  Here is my codeI also tried this but I still do not see the pdf stretched across screen <iframe height="100%" width="100%" id="pdfContent" src="https://fiu.qualtrics.com/CP/File.php?F=F_ggfg" frameborder="0" allowfullscreen></iframe></div> I also tried - <iframe src="PDF Link + #toolbar=0" height="100%" width="100%"></iframe>  

Hi I would like to use the MacArthur Scale of Subjective Social Status on a Qualtrics Survey. This requires at the minimum a vertical scale, preferably with a scale ladder graphic. Does anyone have any experience developing/designing this? Or any advice to improve my efforts, equally welcome!So far I've blended knowledge from across the developers corner and not been super successful. But I am close... I think. First: Choose Question Type: Constant Sum , 1 statement, vertical format. Second: Updated Look and feel> General<link href="https://cdn.jsdelivr.net/npm/nouislider@14.6.3/distribute/nouislider.min.css" rel="stylesheet" type="text/css" /><script src="https://cdn.jsdelivr.net/combine/npm/nouislider@14,npm/wnumb@1"></script>Third: Updated JavaScript Qualtrics.SurveyEngine.addOnload(function(){ var vSlider = document.getElementById('uiSlider');  noUiSlider.create(vSlider, {   start: 50,   step: 1,   direction: 'rtl',   orie