Custom Code | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago

Custom Code

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

  • 7,402 Topics
  • 23,363 Replies
7396 Topics
R
Level 1 ●
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 :)

153910
R
Level 1 ●
M
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 means

5021
M
K
kurtriver
asked in Custom Code
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!

220
K
E
Level 1 ●
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!

682
E
Level 1 ●
J
Level 2 ●●
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"; in

881
J
Level 2 ●●
M
mwilson2
asked in Custom Code
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, D12 I 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?

371
O
QPN Level 5 ●●●●●
N
nmels
asked in Custom Code
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!

1196
N
J
Level 2 ●●
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 Format However, I can not achieve above format yet, and my best outcome so far is like below: Current Format For 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 improv

1162
J
Level 2 ●●
C
CV1
asked in Custom Code
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?

8982
J
F
Level 1 ●
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.

813
Sachin Nandikol
QPN Level 6 ●●●●●●
bstrahin
Level 6 ●●●●●●
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

1253
bstrahin
Level 6 ●●●●●●
G
Level 1 ●
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.

3792
Y
E
EMack
asked in Custom Code
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.

7617
W
R
romeoT
asked in Custom Code
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?

240
R
D
Daan
asked in Custom Code
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 } } } });

2471
A
Level 7 ●●●●●●●
L
Leinad
asked in Custom Code
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 an

620
L
M
Level 2 ●●
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

1905
M
Level 2 ●●
L
Lisa_Roberts
asked in Custom Code
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

50529
TomG
Level 8 ●●●●●●●●
A
atorres1
asked in Custom Code
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?

3843
A
Level 7 ●●●●●●●
C
cjlaw
asked in Custom Code
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: Flat General Question Text: 18 General Answer Text: 16 Current 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!

2001
Sachin Nandikol
QPN Level 6 ●●●●●●
S
SpongeEvan
asked in Custom Code
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?

1061
Sachin Nandikol
QPN Level 6 ●●●●●●
ChrisFAU
ChrisFAU
asked in Custom Code
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

753
ChrisFAU
L
Level 1 ●
ljensen1Level 1 ●
asked in Custom Code
Using previous answer to populate autocomplete from one file

I have a file containing U.S. universities, and the state each school is in. I want users to choose their university’s state from a drop-down list. The next question would ask the user what their university is. I want this question to use autocomplete and I want the state they choose in the previous question to limit the choices they see. For instance, if someone chooses “Kansas”, the autocomplete question would show schools from Kansas only (drawn from the file I described above). I don’t want to use drill down because that would necessitate 50 different files and I prefer the autocomplete method of entry for such a large list.

3156
A
QPN Level 2 ●●
K
kengreene
asked in Custom Code
Display logic from prior drill down question

Hi: I have a drill down question with two components totaling over 5,000 options. I want to display subsequent questions only if certain options are selected in the prior drill down. I have tried two approaches, neither of which have worked. I tried to simply use display logic based on a question, but my drill down question doesn’t appear in the list of usable questions once I’m in display logic. I tried setting two embedded variables in the survey flow, one for each component of the drill down, as follows: state=${q://QID8_1/ChoiceGroup/SelectedChoices} mun=${q://QID8_2/ChoiceGroup/SelectedChoices} Then, for the relevant subsequent question I used display logic for an embedded variable and entered “state” as well as the scores I wanted to select respondents into viewing the question. That didn’t work either. Any ideas?

49311
TomG
Level 8 ●●●●●●●●
S
Level 1 ●
ShiyaoLevel 1 ●
asked in Custom Code
Uploading a .png file using javascript with a hidden file upload question.

Hi everyone, I implemented a canvas in my Qualtrics survey for people to sketch on and I was expecting people could upload their sketch by clicking a button. Currently I figured out how to attach the current the sketch but I didn’t find a way to finish the uploading process. Is that even doable in Qualtrics? Thank you!

3895
G

Read Me: How to use the new Experience Community 💜

Michael_Cooksey
Administrator
1 month ago

Motivational Playlist

Terms & Conditions