Custom Code

Hello,For my survey, I am giving survey-takers a set amount of time to view an image. The image is a large poster which I would like viewers to be able to zoom in on. I have searched extensively on Qualtrics community to find a solution to this, but unfortunately with my inability to code using JavaScript/HTML/CSS, I cannot find a solution that I am able to make work.Based on my searches, I have two options, both of which have a major issue:Option 1: Use the code provided by w.patrick.gale in the following link: https://jsfiddle.net/Taqi_Shah/0zshgg1a/ which allows for a very cool mouseover/hover option.

I would like Qualtrics to randomly select a choice from a set of unselected choices from the previous question.For example, the first question respondants need to answer is “Which country do you support” with an option to choose one from a list of 21 choices (Algeria, Australia, … , United Kingdom). This is easy to set up and I have done this. The second question I am hoping to ask the respondant is “What do you think of the current government in XXX”. I would like one of the unselected countries from question 1 to appear in the place of “XXX”. However, I want the selection of unselected country to be random.So for example, if a person selects “Germany” from the dropdown menu in question 1, then I want the question “What do you think of the current government in Algeria” to appear, where “Algeria” has been randomly selected by the computer out of possible 20 unselected choices of countries. How would I go about doing this? This seems not possible with using piped text.Thank you.

When sending emails through salesforce this code opens the email in a browser: click here.Is there a version of the code that works in Qualtrics?

Hi there.  I have both DOB and Entry Date as metadata in my lifecycle surveys.  Simple layout version.  I’ve had java in there to calculate the age and tenure in years, but it doesn’t seem to work in the Simple layout version. I also want to capture the year and month the survey was completed but this is also not working.  Is anyone able to let me know if my code needs to be changed:In the Look & Feel header I have the following<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script><script>    moment().format();</script>And then in one of my survey questions I have the following JS:Qualtrics.SurveyEngine.addOnload(function(){  var joinDate = moment('${e://Field/Entry%20Date}', 'DD/MM/YYYY');  var currentDate = moment();  var Tenure1 = (currentDate.diff(joinDate, 'months')).toString();  var Unit = ' months'  var Tenure = Tenure1.concat(Unit)    var birthdate = moment('${e://Field/Date%20of%20birth}', 'DD/MM/YYYY');  var age1 =

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!

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