Announcements
Events
Groups
Ideas

XM Community
Developer Corner
Custom Code

Custom Code

Discuss custom code (HTML, CSS, JavaScript, etc.) solutions, best practices, & more.

7,285 Topics
22,877 Replies

When you subscribe we will email you when there is a new topic in this category

7285 Topics

Recently active

Most replies Most views Newest first

pei-yu.ychen

asked in Custom Code

Is it possible to use external JavaScript library (d3.js)?

Hi everyone, I was wondering if it is possible to import a Javascript library on Qualtrics?I have interactive visualizations made with d3.js that I want to show in the survey, however, I haven't been able to run any d3.js code in Qualtrics. I tried inserting the library references into the header, following this. (<script src="https://d3js.org/d3.v4.min.js"></script>) However, it is not working.Any advice would be appreciated, thank you!

looking for a way to slimline slider response.

i’m trying to reduce the vertical space between sliders on the survey, as the question requires ~10 stacked sliders and it is taking up a lot of space / requiring the user to scroll. any advice on how I can achieve this would be greatly appreciated, ty !

222

8 months ago

RonnieLevel 1 ●

asked in Custom Code

Can I set up a type-search-and-select choice question in Qualtrics?

Hi everyone,I am seeking assistance on optimizing a survey question. The respondents are required to select a sector from a dropdown list containing 285 options. Considering the extensive list, I am exploring the possibility of implementing a question where respondents can initially input a rough approximation of the target sector name. Subsequently, the system would conduct a search within my uploaded options and present a narrowed-down selection of possible matches. This approach aims to simplify the process for respondents, alleviating the need to sift through an extensive list of sector options.Thank you so much guys :)

99710

8 months ago

Mattalica1972

posted in Custom Code

Matrix table width solution

After searching through lots of different discussions and questions and such, I ended up with a CSS code that both allows for widening the survey and widening a matrix table so that all of the options appear on screen (i.e., to avoid having to scroll to get to some of the options). The code that worked for me is the following (i.e., cut/pasted into the “Custom CSS” box under the “Style” tab on “Look & Feel”): .Skin, .SkinInner {width:90% !important;}.Matrix {max-width:100%!important;}@media only screen and (min-width:1080px) { #Questions(min-width:1080px;}} I don’t know if there is a better or more sophisticated way to do this with CSS, but it worked and that’s all that I needed. Given the amount of effort I put into searching for the information to make this happen (and the number of people who seem to have this issue), I thought it worth posting what worked for me. Hopefully it helps for you (NOTE: this code is being used for a desktop/laptop only study, so I’m not sure what it

HTML transition not working

Hi, I created custom HTML and JavaScript code to move a figure across the screen. In Visual Studio Code, the code works fine but in qualtrics the transitions seem to not work. The transition is supposed to smoothly move the figure a given interval to the right which can be triggered by pressing a button. The button still works and the variables (e.g., currentPosition which is supposed to be the current position of the figure) in the background are adjusted properly. However, the figure appears to not be moving. I've attached a version which should reproduce the problem. (also the image of the figure for visuals but the src would need to be adjusted in the code of course) Are there perhaps any settings in qualtrics which prevent the HTML transitions from occurring? Many thanks in advance!

130

8 months ago

EvaZwLevel 1 ●

asked in Custom Code

Auto advance / display second question on the same screen after response to the first question has been provided

Dear all,I would like to display a second question on the same screen with another question but only after the first question has been replied to.The first question is a single select and the second one is meant to be an open text field that wants to understand the reasoning for the answer to the first question, thus it should be displayed underneath the first question once the first question has been answered.I have tried to auto advance using JS in the first question but that didn’t work.Can anyone advise?Thank you!

552

8 months ago

Jilong_WuLevel 2 ●●

asked in Custom Code

How to adjust padding of the inputbox of text entry question

Hi everyone,I notice that for the inputbox of the text entry question, there exist extra vertical spaces beyond padding as you can see below figure. Also, you can see the demo page here.The eventual goal is to make two options same regarding the height and width, but due to the vertical space in the text entry box of the right option, current situation is suboptimal. I tried to adjust the margin and padding of the inputbox, but extra vertical spaces still exist while the left/right padding can be reduced by adjusting the padding.Qualtrics.SurveyEngine.addOnReady(function () { const inputBox = document.querySelector(".InputText"); const inputHolder = document.querySelector(".input-holder"); inputHolder.insertAdjacentElement("afterbegin", inputBox); inputBox.type = "number"; inputBox.style.width = "6rem"; inputBox.style.maxWidth = "50%"; inputBox.style.background = "transparent"; inputBox.style.color = "black"; inputBox.style.margin = "0px 0px"; inputBox.style.borderColor = "gray"; input

Randomization of blocks with specifications

I have 24 blocks created. For the project, they are “grouped” into four groups (but not grouped in Qualtrics in any way currently):A1, A2, A3, A4, A5, A6 B1, B2, B3, B4, B5, B6 C7, C8, C9, C10, C11, C12 D7, D8, D9, D10, D11, D12I want 12 blocks to be randomly show to participants, following the below specifications:No number can repeat (if participants see A1, they can’t see B1) The 12 blocks shown must be a combination of 3 blocks from each of the above groups (E.g., A1, A2, A3, B4, B5, B6, C7, C8, C9, D10, D11, D12) Within the randomization, no more than three of the blocks containing numbers 1-6 can be shown in a row, and no more than three blocks containing numbers 7-12 can be shown in a row. Within the randomization, no more than three As and/or Cs can be in a row, and the no more than three Bs and/or Ds can be in a row.Is this possible on Qualtrics?

Custom Countdown Timer on Auto-Advancing Trials

I currently have a series of timed trials. Each trial auto-advanced after a set period of time. I want to display a countdown timer that only appears when there are only 3 seconds remaining in the trial. Right now, here is an example of the JS I am using to autoadvance a trial: Qualtrics.SurveyEngine.addOnload(function() { var timeLimit = 73000; var questionElement = jQuery("M02_NoInfo"); var timeoutId = setTimeout(function() { jQuery('.q-btn:contains("Next")').click(); }, timeLimit); }); How can I insert a countdown timer that only begins when there are 3 seconds remaining? Thanks!

776

8 months ago

Jilong_WuLevel 2 ●●

asked in Custom Code

How to edit the text element which are added by javascripts for a text entry question

Dear all,Currently I am trying to create my survey with a text-entry question. Specifically, I am trying to make it in the form of option-matching as shown below. Ideal FormatHowever, I can not achieve above format yet, and my best outcome so far is like below:Current FormatFor the current format, I firstly adjust the location of the text entry question’s legend by the CSS style code below so that I have a left-right layout, while the OPTION A content is the legend. #QID1 .InnerInner fieldset legend{float:left;width:55%;}#QID1 .InnerInner fieldset QuestionBody{float:left;width:45%;}Then, I add the text before and after the text entry box by:Qualtrics.SurveyEngine.addOnload(function(){ jQuery("#"+this.questionId+" .InputText").before("OPTION B"); jQuery("#"+this.questionId+" .InputText").after(" XXX"); this.questionContainer.select('.ChoiceStructure')[0].style = 'text-align: center;';});However, current display effect does not meet my needs. Could you please tell me how to improve it an

How do you switch a survey's base language without deleting all translations?

Hi all - we want to switch the base language to the previous translation language, but we already inputted all of the translations. How can we switch the base language without deleting the translations, but just make the translated version the “base”? or is our only option manually copying over every single question in the other language again?

6372

8 months ago

f_SILevel 1 ●

asked in Custom Code

Blinking Text Box pop up

Hello everyone, I have added a pop up box(table with one row and one column) which pop ups when a respondent selects a certain option. In pursuit of making it more aesthetic, I want to make the pop up box blink and IF POSSIBLE, add a custom image in the background of the text box. Attaching the pop-up box for your reference - I am also open to suggestion on what else can be done to make the box more aesthetic.

Can I change the layout at the question-level without overriding the entire layout?

Hello,Is it possible to change the layout of specific questions without overriding the whole layout of the survey?Specifically, I currently have a theme that has the following layout (Classic):I want to continue having this theme, however, for certain questions, I would prefer having checkboxes (for multiple choice) or radio buttons (for single choices) (example below, with Flat as the Layout):Any help would be appreciated. Please let me know if I should elaborate.

7218

8 months ago

bstrahinLevel 6 ●●●●●●

asked in Custom Code

Glitch manually programming a drill down

I started a survey last year not realizing that when you reload a drilldown question with an edited list, it will RECODE all of your values. I have about 60 program specific reports that I am basing off of the value of these codes. Since I plan to use this program monthly for a few years I accepted just updating the filters but unexpectedly I have more changes to the drilldown. To avoid hours of redoing saved filter I am trying to hard code the drill down. I am having decent success but when I click the next button my program name and program number get wiped out of the input. If you can provide any help with how to prevent that from happening I’d appreciate it. Otherwise I have a work around where I save the program number in the Embedded data and base my filters on Embedded data instead of Question data. That is okay but it takes some working and fingers crossing to get this set up BEFORE having data that chose a particular program number - a requirement as I am showing people their

1003

8 months ago

ghotkoLevel 1 ●

asked in Custom Code

Changing color of standard error messages.

Good morning Qualtrics Community - The default color of Qualtrics’ standard error messages is dark red. Which when used on a dark background make it hard to read and definitely fail any accessibility checks. How can I change the color of the messages? When I spoke to support, they indicated that it would be through custom code and to reach out to the community. I cannot change the background color as that is our brand color scheme. Qualtrics really should have this as a general option.

Modify carousel container or option prompt buttons

Does anyone have any suggestions on how to modify the container or the option prompts when using the matrix table carousel option? I want to use a 6 option prompt (horizontal position) but it cuts off and enables a scroll bar.

Workflow task extension as loader task

Hello everyone,I am trying to develop a Qualtrics extension that processes a .csv file which is extracted from an SFTP server via the extractor task. The extractor task requires a data destination e.g. a loader task. Is there any way to setup a workflow task extension as a loader task that receives the extracted files from the SFTP extractor?

Integrating Chart.js in Qualtrics

Dear community,The following script from https://www.chartjs.org/docs/latest/getting-started/ does not seem to be working in my survey. I am very new to Java and HTML and was hoping you could you help me figure out why it's not working. Thank you very much for your help!In the question itself, I have included the following code in HTML:<div><canvas id="myChart"></canvas></div> I have added the following code the the header in HTML:<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> To the question JSS, I have included the following code: const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });

Formatting and disable responses on SBS (Side byside) questions

Dear all, I am not new to working with Qualtrics, but I have no knowledge of javascript and only a passing knowledge of CSS. I am trying to help out a student with a survey, but being unable to do so, and would kindly like to ask for your assistance in doing various things.The situation at hand pertains to a side-by-side question with four different answer columns, as you can see in the image. These are the things I am trying to accomplish:Alternating colours (white/grey/white) for the lines; I tried some CSS I found here but it did nothing. Different background colours for answer columns 1 and 3 (same as above). Making it so that whenever someone responds “Never” on columns 1 or 3, the respective options in columns 2 or 4 disappear, on a line-per-line basis. Having those disappearing options not trigger the ‘forced response’ option.In your responses, if there are issues I need to be aware of (for example, having to find the ID of the table or the column, or response, etc...), or any o

440

8 months ago

mugheeshayLevel 2 ●●

asked in Custom Code

Lock a question on screen after it is answered / Carry forward default choices

Q1 is a multiple select question.Once the question is answered, I want that question and it’s responses to remain on the screen as a reference for the questions ahead, without the respondent being able to change the initial response.I tried doing this by creating multiple copies of Q1, putting them on top of all questions without page breaks and disabling the checkboxes using JS.However, this seems really inefficient and I was also unable to set the options selected in the original Q1 as default in all the copies. Could anyone help out with either the overall task or just setting the previously selected choices as default for all copied questions. Thanks

How can I reverse the order of a matrix table scale on an accordian mobile layout?

I have a matrix table that shows the scales going horizontally negative (left) to positive (right), and when these change to an accordion layout on a mobile, the scale go vertically negative (top) to positive (bottom). Is there a way to reverse the order on the accordion layout so that they go positive (top) to negative (bottom), without needing to make the separate questions for mobile users. This is best practice for vertical scales, so I'd like to know if there is a way to do this please? Thanks Lisa

Is there a way to disable participants' ability to change the playback speed on media files?

I have a media file that I want participants to listen to at one point in my Qualtrics survey. I see they have the option to change the playback speed. Is there a way to disable that?

How do I increase the font size for the scale points on matrix questions for mobile users?

I’m running into an issue for the font size for the scale points on my matrix questions are smaller for the mobile version than for the desktop version. How do I increase the scale point font size in matrix questions for the mobile version. On the desktop (looks good):On mobile (looks bad): Layout: FlatGeneral Question Text: 18General Answer Text: 16Current Custom CSS in “Look and Feel - Style”:.Skin .q-matrix .answered-indicator span {font-size: 14px!important;}.Skin .Matrix table th{font-size: 18px;}.Skin .q-matrix .table-cell {font-size: 18px!important;}Any help is greatly appreciated!

Display repeated headers in matrix table

I am using a six-item Likert scale for a total number of 16 questions. When I used the “repeat headers-all” function, I noticed that the header was not shown for the last question. (See attached) Is there anyway to display the header for the last question?

Autocomplete rank order question

Hi all, I was wondering if could please get help with the below.For context, I have a question Q1 which is a multi select question asking why people want to go to TAFE. I then use the carry forward function to pipe in the answers that were selected in Q1 into Q2. Q2 is a rank order question using text boxes where respondents have to enter in a number (rank) for each of the reasons they go to TAFE.If a respondent only selects one answer in Q1, then only one answer is carried forward into Q2. Is there a way so if a respondent only selects one answer in Q1, then it automatically enters the number 1 into the text box in Q2, and then proceeds them to the next question? I understand this might be possible using Javascript but I haven’t been able to get something that works. Any assistance here would be greatly appreciated!Thanks,Christian

583

8 months ago

Page 22 / 292

Motivational Playlist

Terms & Conditions

Sign up

Already have an account? Login

Social Login

Login to the community

Social Login

Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.

Enter your e-mail address

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.