Custom Code

Hi, We currently ask for the participant’s DOB but only the month and year in that order.Is there any way to calculate their age on this basis with a custom code?Thank you!Yamina

Hello!I have a form field question and I need one of those fields to be a drop-down list with 5-7 options. I searched in other posts and the one that has the most interactions is this one but the QSF from the best answer is not there anymore, so I found no clear solution for this issue. Thanks in advance for the help!

I have a Code Task that assigns values from the survey to variables that I used to concatenate some text to send to another system.  Everything is working except some of the assignments that I use to pull text from the survey responses.In the code task, there are a bunch of assignments like this:    let q3 = `${q://QID3/ChoiceTextEntryValue}`;    let q8 = `${q://QID8/ChoiceTextEntryValue}`;    let q4 = `${q://QID4/ChoiceTextEntryValue}`;    let q6 = `${q://QID6/ChoiceTextEntryValue}`;    let q5 = `${q://QID5/ChoiceTextEntryValue}`;These are the last 5 of 20-some.  The problem only occurs with these 5.  Q3:Customer Company NameQ8: Customer IDQ4: Customer Contact NameQ6: Customer Contact EmailQ5: Customer Contact PhoneFor a test, I answered them as:Q3:Customer Company NameQ8: Customer IDQ4: Customer Contact NameQ6: CustomerContactEmail@example.comQ5: Customer Contact PhoneWhen I look at the workflow results, I see this:let q3 = ``; let q8 = `Customer ID`;let q4 = `Customer Company Name`;

Hi EveryoneHope you’re all well. 👊I did find a few existing posts on this but unfortunately they didn't seem to work so hope you can help.Referencing this image. How would I make the text entry boxes white? How would I round the edges of the text entry boxes? How would I change the colour / size of the text in the final text entry box? I am currently using this code. Qualtrics.SurveyEngine.addOnload(function(){jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please provide your email if possible"); Thanks everyone :)

Looking for some custom code (Java, CSS, or HTML) that would make grid questions (matrix) display in accordion style on a desktop similar to how it does on mobile -- where one attribute shows at a time and collapses once an answer is selected, causing the next attribute to open. I have scoured the board and the internet and have yet to find a solution. Anyone have any ideas?

I'm trying to use mp4 videos in my survey and have encountered some problems - I first tried to add them to the library (and had a great help in: https://www.qualtrics.com/community/discussion/6852/how-to-show-next-button-only-after-a-video-inserted-as-media-file-is-finished-playing). Then I realized that some of my videos are too big and Qualtrics allows for 16mb files only, so I decided to embed them from my Google Drive. However - I do not know how to solve the problem now - I want the next button to be hidden until the video finished playing. I'm not sure what is the player used by Google Drive - it seems very similar to YouTube but I can't tell. Moreover, when I tried to solution suggested in: https://www.qualtrics.com/community/discussion/1186/using-iframe-api-to-automatically-advance-to-next-page-after-a-video-has-been-watched nothing happened.... Any adice on how to do it with Google Drive, or any other way to include big video files on a survey (that does not involve uploadin

I can’t figure out why my form fields are not all equal size? They all set to be ‘short’. but for some reason, when I ‘inspect’, I see that some inputs are created with inline css style=”width: 60px”, and it seems to be totally random! I don’t have any custom JS for the sizes<input autocomplete="off" class="Short InputText QR-QID21-10 QWatchTimer" id="QR~QID21~10" name="QR~QID21~10~TEXT" style="width:60px;" type="text" value="" data-runtime-textvalue="runtime.Choices.10.Text" aria-labelledby="QR~QID21~10~label"><input autocomplete="off" class="Short InputText QR-QID21-11 QWatchTimer" id="QR~QID21~11" name="QR~QID21~11~TEXT" type="text" value="" data-runtime-textvalue="runtime.Choices.11.Text" aria-labelledby="QR~QID21~11~label"> 

Hello,I am attempting to use a calendar date box, I have inserted using import from library -> demographics ->calendar and date questions -> enter a date. My only problem is this comes out in US date format MM/DD/YYYY and I need it to be in UK DD/MM/YYYY format. Any suggestions on how to make this happen?Happy to try flatpicker, but it has not worked for me yet. I have tried the below.I tried adding into look and feel header: Help 😥

We have a matrix table with a lot of labels on the top axis. Wondering if anyone out there knows the html to change the labels to vertical like you can do in Excel and in the image below. It would be much easier on the user so they wouldn’t have to scroll to the right to see the other options. Thank you.   

We've designed a Qualtrics survey and had a designer enter some code to match the survey to our study website. The designer is no longer on the project and we'd simply like to change the color of a radio button when it is selected. Currently, the radio button fills in white when a choice is selected. We'd like it to be blue (or anything darker really). See the screen shot below for the current design. And the current code used below that. I can't figure out where I should change the color in the code below or if there are additional lines of code. I appreciate any guidance!! Thanks in advance. ! .Skin label.q-radio.q-checked { background-color: #009FAC !important; outline: #9C9C9C } .Skin label.q-checkbox, .Skin label.q-radio { border: 2px solid #0F993D; outline: none; } .Skin label.Matrix.q-checked.q-focused, .Skin label.SingleAnswer.mobile.q-focused:hover { outline: none; } .Skin label.q-radio.q-focused.q-checked { box-shadow: 0 0 4pt 2px #0F993D; } .Skin la

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