AI Center
Events
Groups
Ideas

Experience Community
Developer Corner
Custom Code

Custom Code

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

7,437 Topics
23,529 Replies

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

7437 Topics

Clickable image slideshow

Hello,I'm hoping someone can help me diagnose a problem with custom JS. Following these steps (https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp), I can create an image gallery but the next/previous buttons are not functional. A similar dead thread from 2018 (https://community.qualtrics.com/XMcommunity/discussion/2514/is-there-a-way-to-include-an-image-slideshow-in-my-survey) ran into this issue, but no solution was offered (the 2020 suggestion to use an Imgur album will not work, unless there is a way to prevent the imgur image from linking out of the survey and over to imgur.com).Thank you!

10379

2 days ago

SLEE

asked in Custom Code

Left question numbers blank, but "." shows up in place in preview. How do I get rid of the periods?

I left the question numbers blank, hoping to have no question numbers in the survey. ! In preview, however, I don't get blanks. There are periods in place of the blanks. How can I get rid of them? !

setChoiceValueByRecodeValue in JavaScript occasionally selecting more than function called

Hi everyone,New to Qualtrics and I have some code that I’m trying to tease out what’s wrong with, but I can’t seem to and would love some insight as to whether this is a Qualtrics quirk or something wrong in the code. Also, whether I am going about this in the best way!I have a survey consisting of two rounds. Round 1 has participants selecting values on a slider in a Loop & Merge block. I then have an intermediary block with a multi-select multiple choice question where the code below runs.The code creates a permutation of a list of numbers (right now 1 through 8) that reference the loops in Round 1. It then identifies the loops whose questions have answers where the chose value is not 3 (the middle of the slider). This is the `alteredCandidates` and `normalCandidates` in the code.From those two arrays, it selects two from the `alteredCandidates` array if possible to put into `alteredPosts` and then it selects the rest, up to a total of 4, from either `alteredCandidates` or `norma

9 days ago

davgon1774Level 2 ●●

asked in Custom Code

How to add Percentages to Incremental Value on a Slider Question

I am trying to add percentage symbols for the values given on the increments for the slider question- is there a java code or some capabilities through qualtrics to allow me to do this?

11613

9 days ago

ReganLevel 1 ●

asked in Custom Code

Changing first letter of piped text to lowercase

I want to pipe the selection from a standard likert scale question like the one below into a follow-up open ended question.Very unlikely Somewhat unlikely Neither likely nor unlikely Somewhat likely Very likelyI want to change the first letter of the piped selection so that it is lower case.The piping instruction I currently have in the open ended question is:Why are you ${q://QID26/ChoiceGroup/SelectedChoices} to consider using... I tried using the tips noted in the thread below but it isn’t working for me.

Setting embedded data via javascript intercept

Hi,I’m struggling with setting embedded data in a qualtrics survey in an Web/App insights project with an intercept. Within the intercept I’ve set up the following: Screenshot from interceptOn the survey page I use the following code:Qualtrics.SurveyEngine.addOnReady(function() { // Verstecke und deaktiviere den Weiter-Button var nextButton = document.getElementById('NextButton'); if (nextButton) { nextButton.style.display = 'none'; nextButton.disabled = true; } var element = document.getElementById("SurveyEngineBody"); let pageData; const setBackgroundBasedOnDevice = () => { const width = window.innerWidth; // mobile breakpoint if (width < 768) { document.body.style.backgroundColor = pageData.data.mobileColor; } else { document.body.style.backgroundColor = pageData.data.desktopColor; } console.log('changed Backgroundcolor'); }; const getKameleoonData = (event) => { const daten = event.data; if (daten.type === 'Kameleoon') { pageData

250

10 days ago

ErikahuerQPN Level 4 ●●●●

asked in Custom Code

Show/Hide Matrix Text Entry Boxes Based on Specific Options

Hi everyone,I have a matrix-type question in Qualtrics where each row has a set of radio button options (Extremamente satisfeito, Satisfeito, Neutro, Insatisfeito, Nada satisfeito), and also an open text box directly under the row label.What I’m trying to do is: Keep all the text boxes hidden by default. Show the text box only when the respondent selects “Insatisfeito” or “Nada satisfeito” (columns 1 or 2 from the left in my case). If the respondent changes their selection to something else, hide the text box again and clear its value. I’ve tried some JavaScript in the “AddOnload” section, but the text boxes still appear when the page loads or don’t hide/show reliably. I suspect it’s because Qualtrics renders these inputs in a <th> tag and they’re visible before my script runs.Here’s my current code attempt (not working as expected): Qualtrics.SurveyEngine.addOnload(function () { var qid = this.getQuestionInfo().QuestionID; jQuery("#" + qid + " .TextEntryBox").css("disp

303

16 days ago

jflowers1Level 4 ●●●●

asked in Custom Code

Hiding One Field in a Form Field Question

I have a survey that has been open for a year that contains a form field question with six fields. We no longer need users to fill out one of the fields, but we still want to keep the data that was previously collected, so I don’t want to completely remove that particular field. Is there a way to hide only the second field in a form field question?

Select2 loads JSON but doesn't search

Hi everyone.I’ve successfully created a Multiple choice question using Select2 to render options via an online JSON file and works fine…..initially. But when try to keyword search, it doesn’t seem to limit the results - just blips/refreshes the list and displays everything again.It’s working great for embedded data on a duplicate question, but the external JSON referenced data is buggy.The JSON file is saved to Qualtrics file system for testing initially - not sure if that should make a difference., The final form will source the data from a different domain.Here’s my code:Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ jQuery('#' + this.questionId + ' select').select2({ ajax: { url: 'https://submit.dese.gov.au/ControlPanel/File.php?F=F_LbC2C0OmXT7JG1k', dataType: 'json' }, placeholder: 'Search for provider name or code...', width: '100%', cache: false });});And here’s the result:https://submit.dese.gov.au/j

Allowing respondents to skip constant sum questions despite 'Must Total' validation WITH SLIDERS and KEEPING THE SLIDER CAP

Hi all,I have a constant sum question where respondents are required to allocate 100 “tokens” to different categories -- each category being a slider. The idea is that the sum of all sliders should be exactly 100, but I also wanted to allow my respondents to skip this question.My problem is very similar to this one, with a few caveats. First, the author of the original post was using a constant sum question with answer type “Choices”. I’m using answer type “Sliders”, which required a slightly different syntax. I managed to maneuver this difference using Javascript, and as of now, the validation condition with JS successfully requires the sum of the sliders to be either 100 or zero. However (and this is the second caveat and my problem here) there is a very annoying aspect with this workaround: if the sliders don’t sum EXACTLY TO 100, the answer is not valid. In other words, if my user moves the sliders to values that sum to slightly more -- or less -- than that (say, 97 or 102), they

576

18 days ago

rarcegaLevel 2 ●●

asked in Custom Code

Randomly picking from a list of brands but excluding certain combinations

I am creating a monthly survey that has a brand list that that contains a minimum of 1 brand to a max of 10. The brands a respondent will see depends on a whether they shopped there in the past (Q1). In this example, pretend that the respondent shopped at Brands A, B, C, D and E.I have a loop and merge where I present a max of 3 brands to the respondent. The only exception would be is that the respondent could not see both Brands A and C. We are allowing all other combinations as long as Brands A and C are not together. Is this possible? Keep in mind that the brand list changes every month and that the brands that cannot be together are also changing. Thanks in advance.

How to hide right chevron in carousel until an option is selected?

Hi all, I want to hide right chevron in carousel until an option is selected, and I want this to happen at each carousel card. I was able to write a JavaScript code but it only seems to be working for first carousel card. Can anyone help me here? Please! I tried using ChatGPT, but the code it generates isn’t working. Here is the code:Qualtrics.SurveyEngine.addOnload(function () { var q = jQuery(this.questionContainer); // Hide the right chevron once at the start var rightChevron = q.find(".CarouselCardRightContainer .CarouselChevronContainer"); rightChevron.hide(); // Add click listener to each CarouselAnswerButtonContainer q.find(".CarouselAnswerButtonContainer").each(function () { jQuery(this).on("click", function () { rightChevron.show(); }); });});

351

20 days ago

RAlbertLevel 1 ●

asked in Custom Code

Custom code for making videos hosted in qualtrics library Full screen automatically

We’re running an experiment where our short 6 second video clips need to ideally load in Full screen mode when the question displays allowing the user to click play on the play button that is auto-embedded over the screen. Alternatively, we could disable the user controls of the video and have them click a button that would move the video to full screen and start playing. My html code of a sample video looks like this:Watch this video:<br /><br /><video class="qmedia" controls="true" height="380" preload="auto" width="450"><source src="https://lvc.qualtrics.com/CP/File.php?F=F_8IiNUf5k0oU49Qq" type="video/mp4" /><embed align="middle" autoplay='true' bgcolor="white" class="qmedia" controller="true" height="380" pluginspage="http://www.apple.com/quicktime/download/" src="https://lvc.qualtrics.com/CP/File.php?F=F_8IiNUf5k0oU49Qq" type="video/quicktime" width="450" /></video I’ve tried reading other posts on this topic and adding the code recommended here

Turning A Form Field Into A Drop Down With Force Response - New Survey Taking Experience

Hi folks,I’m trying to move all of my organization surveys to the new survey taking experience. One of my surveys has a form field question with JavaScript that converts one of the fields to a dropdown. After converting it to the new survey taking experience, the dropdown no longer works. Below is the original script that used to work:Qualtrics.SurveyEngine.addOnload(function() { var that=this.questionId; var pipe1 = this.getTextValue(6); var element="<select id='s6'><option></option><option value='Charter'>Charter</option><option value='Cyber'>Cyber</option><option value='District'>District</option><option value='Home School'>Home School</option><option value='Private'>Private</option></select>"; jQuery(element).insertAfter("#"+that+" .InputText:eq(5)"); jQuery("#"+that+" .InputText:eq(5)").hide().val(pipe1); jQuery("#s6").val(pipe1); var select1= document.getElementById("s6");

Custom javascript with a multiple choice not working anymore with simple layout

Hello, I’m switching a project to simple layout and one of my custom javascript isn’t working any more.part of the code is this one : this.questionclick = function (event, element) { var selectedDisruptions = []; var EligibleDisruptions = []; var isdisrupt = ''; jQuery('#QID57 input:checked').each(function(btn) { if (this.id.split('~')[2] != '1') { selectedDisruptions.push(choiceDict[this.id.split('~')[2]] isdisrupt = 'Y'; } if (this.id.split('~')[2] == '1') { isdisrupt = 'N'; selectedDisruptions.push(choiceDict[this.id.split('~')[2]]) } }); }; The jquery isn’t working anymore evenif i add “<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>” in the header part. What do I need to change here “jQuery('#QID57 input:checked').each(function(btn)“. Thanks

Custom event counter for trigger

Hi everyone, grateful for any assistance please! Have an embedded (star type) survey being deployed via Google Tag Manager - after a valid form submission.GTM trigger pushes a custom event:Which is being picked up and counted fine via the Cookie ‘QSI_CT.’ However the Cookie is only set on page refresh, so a trigger such as this won’t work in real time: Have also tried JS expression with the same outcome - only displays on page reload: Example of the condition type added: PS. Works as expected when the main Qualtrics script is injected via GTM - on the valid form submision. However on our live page the Qualtrics script is inline - hence the survey appears immediately.

New Calendar Question Type - Removing Time Interval?

It appears Qualtrics has included it’s own Calendar Question Type. Yay!However, it looks like it also includes a time-interval formatting feature where people HAVE to pick a time. Currently there is not an option to exclude this.I contacted Support and they said maybe there is someone in the community that can recommend code to get rid of it.Would love some help. Thank you!

How to properly update a Constant Sum input value via JavaScript?

Hello Guys! So I have a Constant Sum Input Question, and I can update value through Javascript inside Qualtrics.SurveyEngine.addOnRead, but my problem is when I submit/next the flow, the value becomes null. I tried the trigger change after setting the value, I tried setting the value inside Qualtrics.SurveyEngine.addOnPageSubmit, I also tried to make sure that the value is not empty before submitting but it is not working. What am I missing?Before Submit…After Submit…

312

1 month ago

Ryan_in_Qualtrics9898

asked in Custom Code

Create dynamic surveys with multiple choice

Hi, I am new to Qualtrics.I am currently designing a survey with approximately 40 multiple-choice questions.Each question has five choices. Each choice consists of one image (randomly selected from pool A), another image (from pool B), and two words (from pool C).I would like to randomise the order of all questions as well as the order of choices within each question.I plan to distribute 500 surveys, and I don’t mind generating them individually if needed. However, I’m wondering if there is a more efficient way to implement this.For example, I could perform all the randomisation in Python and output the content of each choice in each question to a CSV file. Then, at the beginning of the survey, the respondent could enter a code or number, and Qualtrics would generate the corresponding version based on the CSV.I’ve tried using “Supplemental Data” (but HTML text is not supported), Web Services (but couldn’t find a suitable JSON server, and creating 540 embedded data fields seems impracti

How do I allow respondents to "click to enlarge" an image

I am doing an ad concept test and would like to give respondents the option of viewing the ad again on subsequent questions. Ideally i would do this with a "click to enlarge" thumbnail, but also fine with opening in a new window from a link. Any thoughts on how to best handle in the survey platform?

338022

1 month ago

MarkJPLevel 2 ●●

asked in Custom Code

Character Limit on Form Field question using JS

Hi,I've created a form field question with five rows. If I want the second row to have a character limit of 8, what would the JS be? Currently the below is not working...ThanksMark

JavaScript Help Needed: Calculating Values from Multiple Matrix Tables

Hello Qualtrics Community,I am working on a survey with two matrix tables and need assistance with JavaScript to perform certain calculations. Please note that I do not have any knowledge of HTML. The reason I am using JavaScript is that I need the calculation to happen on the same page where the respondent is making their selections. This is necessary because we need to show the calculated value on the same page so that respondents can amend their answers if they feel the need to adjust.Here’s the breakdown:Matrix Table 1: Contains 4 statements, each with 3 options. Each option has an associated recode value. Matrix Table 2: Contains 2 statements, each with 2 options. Each option also has a recode value.I need to:Sum the recode values of all selected options for each statement in the first matrix table. Multiply the recode values of the two statements in the second matrix table. Multiply the sum from the first matrix table by the result from the second matrix table.I would appreciate

How can I create a dynamic trade-off slider?

Hi! I appreciate any help on this.For a study I'm looking to create a slider that displays a trade-off between two options. Participants have to decide how much of a resource to spend towards Option A, which automatically affects how much of that resource is left to spend on Option B. For example, when participants choose to spend 60% of their resources on Option A, the slider should automatically show that 40% goes toward Option B. I can achieve this to some extent with the 'Constant Sum' question type, but a) this is not a dynamic item and b) I would prefer to have my item as a single-item. This is what it should ideally look like:

1653

1 month ago

MakgomesLevel 1 ●

asked in Custom Code

Text box entry beside multiple choice response instead of below

Hi there, I have tried code from some similar questions on here but none are working. I would like the text box to be beside “email:” instead of below. QID is #QID101. I am pulling emails from a contact list so that is why the text box is populated. Thanks in advance!

402

1 month ago

RoseLLevel 1 ●

asked in Custom Code

How to Add Auto-Update Drop down List with Javascript to Question in Qualtrics

Good Morning! I'm working on application forms for our university and one of the fields is a drop down box that list 5 years (2001, 2002, ...., 2005) that would start from the current year. I would like to avoid having to manually update the drop down each year. I found the JavaScript code but I am not sure how to use it to replace my current "year" option Qualtrics question. I am not a whiz when it comes to coding and have inserted some basic jQuery/JavaScript that I found that has been extremely helpful but I can't figure this one out .... can someone please advise how to get the following code into my question or please provide me a source? <script type="text/javascript"></script> The code output would

2414

1 month ago

Page 1 / 298

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.