Custom Code

Dear all, we are advertising a survey on Facebook and would therefore like to implement a Facebook Pixel in Qualtrics at a certain point. The code provided by Facebook looks like this: <!-- Facebook Pixel Code --> <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'ID'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=ID&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> If we try to add it via "Add Javascript" we always get the following error message: SiteWide.Alert I

Hi! How can I increase the length of my question text, so that it has the same width as the matrix with the different answers below? My multiple choice matrix is quite wide. It looks like this: ________________ question text ________________ ________________ question text________________ _________ likert scale likert scale likert scale likert scale _________ answer | answer | answer |

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!

Hi,I have a side-by-side question with 3 columns. The last column is text-entry. I want to force them to choose from the drop-down list in the second column if they have typed something in the text-entry box. The enforcement would be row-wise because I also have custom JS code that enables “add” rows instead of showing them all rows at once.This can’t be achieved with the custom validation available in Qualtrics because they could add many rows.  Is there any way to achieve this with javascript? Thanks so much!

I have a side by side question similar to the below. Respondents aren’t required to answer all questions, but if they give an answer on a row, then there should be an answer somewhere on the previous row i.e. there shouldn’t be any blank rows followed by a row with data in.It’s probably possible with custom validation, but because some of the columns have display logic, it’s set up as 9 columns - so doing the validation means checking for a response in each of the 9 cells in the row.Is there a way to do the validation. i.e.if there are any answers in the second row, then check there are answers in the first row if there are any answers in the third row, then check are answers in the second row etc 

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! For my survey, I have 5 questions that I want the participants to be able to navigate in-between. So, I added a "previous page" button on these questions. However, I also want to record the time spent per question. This timer has to stop when a previous or next question will be visited, but when the participant comes back to the same question, the timer needs to add the additional time and not start over. How do I install this? I hope someone knows this :) 

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 want to design a video questionnaire, where each block consists of a Text/Graphic and a Slider. The Text/Graphic is an embedded YouTube video, and I want to know how to position the sliders to the right side of the video (or horizontally aligned with the videos) instead of the default position below it. Thanks!

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 am using tickets to distribute a survey (after the ticket changes status, it triggers the distribution of another survey). For example, Ticket A has 15 ticket data fields. When Ticket A changes status, it triggers the distribution of Survey A. I need to pass the values of the 15 ticket data fields from Ticket A into Survey A as embedded data. I am adding the data fields to the Survey URL in the invite as I should be, but for whatever reason, only about 30% of the ticket data fields from Ticket A populate in Survey A.  Here is an example of the survey link from my email invite: ${l://SurveyURL}&JourneyID=${tck://kv/JourneyID?format=urlencode}&BrandName=${tck://kv/BrandName?format=urlencode}&ProductName=${tck://kv/ProductName?format=urlencode}&ProductForm=${tck://kv/ProductForm?format=urlencode}&totalWeeks=${tck://kv/totalWeeks?format=urlencode}&ConditionPhrase=${tck://kv/ConditionPhrase?format=urlencode} Does anyone know why I cannot pass values for all the tic

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