Announcements
Events
Groups
Ideas

XM Community
Developer Corner
Custom Code

Custom Code

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

7,317 Topics
23,026 Replies

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

7317 Topics

How to default loop & merge values based on previous values?

Apologies if this has been asked, I tried finding the answer.I’m trying to create a multi-year budget form. The intent is that the user would fill out values for YR1, then when they continue to YR2, the default values for YR2 would be whatever had been entered in YR1. I have a Loop & Merge block for my budget that is based off of a numeric value. I ask the user how many budget periods they have, they provide a numeric value and that is the number of times my Budget question will loop. My Budget Question is a Side-by-Side question with a dropdown value to select the Cost Type, then text fields to enter a description and cost for each type. Example is below: My intent is that after entering the all the values for the first year/loop, when the user moves forward to the next year/loop, the values in all 3 columns (pictured above) would copy over as the default value for that loop. Same copy functionality would apply for each new loop.Any help is appreciated. I’m happy to explore any ap

272

1 year ago

mblanyonLevel 1 ●

asked in Custom Code

tracking specific urls clicked within a Qualtrics survey

I have a survey in which there are 3 urls within the question. We want to track which specific urls are clicked rather than just a url was clicked. I have this code for that with the embedded data of clicked=0Qualtrics.SurveyEngine.addOnload(function() {jQuery('#extLink').click(function(event) { Qualtrics.SurveyEngine.setEmbeddedData("clicked", "1"); jQuery("#NextButton").click();});});But I can't figure out a good way to modify this to be able to know the specific url clicked, since the jQuery is #extLink and really this code is only counting if something is clicked but not specifically what.Any advice?This is also an example of what the HTML code looks like for each option in the question. <div><a href="https://www.directrelief.org/" id="extLink" rel="noopener" target="_blank">Direct Relief</a> - Support for people affected by emergencies</div>

1502

1 year ago

JohannesCELevel 6 ●●●●●●

asked in Custom Code

Wordcloud replace space between words in Survey Flow

Hi! I have a form question with 3 fields where respondents are supposed to write 3 associations with a brand. The goal is to visualize this as a Wordcloud in a CX Dashboard.In the Survey Flow I merge the results from this page, otherwise the Wordcloud widget won't let me display them in 1 cloud.My issue is that the Wordcloud widgets only accepts single words, so in this case it displays “Not” and “fast” separatedly.Is there a way to replace the empty spaces between words with e.g. a hyphen within the Survey Flow? There is another post with this issue, but no solution:can we do word cloud widget of CX dashboard with the words which has space in it? | XM Community (qualtrics.com)

321

1 year ago

parkie_0007Level 5 ●●●●●

asked in Custom Code

Form Question - Drop Down Formatting

Hi EveryoneI found this code to make a form field into a dropdown.var that=this.questionId;var pipe3 = this.getTextValue(3);var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");jQuery("#"+that+" .InputText:eq(2)").hide().val(pipe3);jQuery("#s3").val(pipe3);var select3 = document.getElementById("s3");select3.addEventListener('input', function (event) {jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s3 option:selected").text());}, false);Looks like this. But how do I format the the dropdown to look like the other form fields?Thanks :)

43811

1 year ago

LauraS244Level 2 ●●

asked in Custom Code

Conjoint Feature images

Is there any way to make images in the conjoint feature larger? They are auto-shrinking and becoming illegible.

Heat map using piped image

I have the images I would like to use throughout the survey stored as embedded data (there are a lot of options), and I was hoping to include a heat map question to click on certain things in the image if they are there. Is it possible to have the image in the heatmap be dynamically determined, or is it basically preset? (I’ve seen other posts that you can do branching, but I can’t realistically make hundreds of branches)Alternatively, I am looking for a way for the respondent to mark where text is located on an image for an annotation task (so I was thinking click top-left and bottom-right). Is there a (different) feasible way to achieve this in qualtrics?

Side by Side Question in a Qualtrics Survey

I would like to know how I can get a single response in each row, not multiple responses.Please see attachment

3442

1 year ago

LizyLevel 1 ●

asked in Custom Code

How to record the current date to the embedded data?

Hi all, First of all, I appreciate all posted answers and discussions in this community. They are helpful and have answered most of my questions. I am trapped in a JavaScript coding issue. My goal is to record the dates on which respondents answered specific questions in my survey via an anonymous link. I've set up the embedded data in the survey flow and then entered the code I learned from this community. However, the date cannot be recorded. Below is my code:Qualtrics.SurveyEngine.addOnReady(function(){ /*Place your JavaScript here to run when the page is fully displayed*/ var curDate = "${date://CurrentDate/m%2Fd%2FY}"; Qualtrics.SurveyEngine.setEmbeddedData( 'DateConsentFormSub', curDate); }); I am grateful for your consideration of this question. Thank you!

inline email survey question

Hey everyone,is there a way i can make the boxes for my response choices sized consistently for my email distribution? The Very dissatisfied is kinda distracting.

Javascript: Embedded Data doesn't update

I have been trying to run a very simple js code on Qualtrics for about 5 hours now. There are 3 blocks:Block 1 captures a numeric value (say p) Block 2 creates an embedded value (say embedVar =-99) Block 3 captures another numeric value (say r) Within Block 3, on a new page, I want to display the embedded variable embedVar = r/p. For this I am running the following js code: var p ="${q://QID7/ChoiceTextEntryValue}" ; var r = "${q://QID2/ChoiceTextEntryValue}" ; var result = Math.ceil(r/p) ; Qualtrics.SurveyEngine.setEmbeddedData( 'embedVar', result );This just does not work. I have tried to put it on “onload”, “onunload”, “onsubmit”, “onready” (please don’t mind the case-insensitivity). I have put this code in the page where I record the response r, the page where I am supposed display the updated embedVar. I exhausted every combination. It just remains -99 or it shows a 0. What does work is if I equate embedVar to p, it does show the actually recorded p. This makes me suspect that the

Looking to figure out how to use the typewriter function to print paragraphs that contain new lines/breaks

Hello all, I’m trying to figure out how to use a typewriter function in JavaScript in order to print a text that appears when participants click into the question. My goal is to gradually print 4 paragraphs on the screen using the typewriter function. So far, I have managed to figure out how to type the first paragraph, but I’m having trouble figuring out how to create a new line. I have tried embedding \n and \\n into the quotation marks of the txt variable, but that has not been successful in creating a new line. Based on my code below, does anyone know what I’m missing or what I could try differently to get two consecutive new lines in my paragraph? Here is what I have so far:HTML:<html><body><p id="demo"></p><p> &nbsp </p><script>var i = 0;var txt = '';function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } }typeWriter()</script>

Displaying Timer in Seconds

Hello! I have a visible timer for one of my questions, and survey takers are supposed to write for 90 seconds. However, the timer counts up to 1:30. Does anybody know of a way to make it visibly count to 90 seconds instead of the minute: second format?

How to insert audio file in a survey?

Hi, in doing a survey i must add ad audio that the partecipant should be forced to listened to. The first problem is that i can put a file for the audio but if i try to put ad audioplay on the survey itself it responds with ‘You are allowed to use only a subset of HTML markup tags’. In the help section it’s said that i should be able to use MP3 and .wav files to put on the survey but it still doesn’t do it. Also in my homepage there is no allowences to be made for all HTML subsets so i don’t know what to do. Also, if i need to put only the file in it how can i be sure that they must listen to it before going forward. Thanks.

Is it possible to integrate a survey in an iOS app without using the Mobile App Prompt Creative ?

I want to integrate a survey into my mobile app, but I'm hoping to avoid having to purchase access to the Mobile App SDK. Does anyone have any ideas about how this could be done using custom code, or using the API and JSON calls for example?Thank you!

781

1 year ago

pdunlopLevel 1 ●

asked in Custom Code

Display scale point for only 1 statement in matrix table

I have a matrix table with 5 scale points as standard, however I’d like to add in an additional scale point (NA) for just 1 of the statements in the matrix table. Could someone please advise on how to do so?

How to customise the length of my sliders?

Hi, I am trying to make my slider 0-100 % mobile friendly but it does not work. I have already tried that “mobile-friendly” button and it does not help. I have also tried this code below: Qualtrics.SurveyEngine.addOnload(function(){/*Place your JavaScript here to run when the page loads*/if (window.matchMedia("(min-width: 720px)").matches) { /* Code to execute */jQuery("#" + this.questionId + " .QuestionBody").width(600);jQuery("#" + this.questionId + " .statement-container").css("padding-top",6); } else { /* Code to execute */ jQuery("#" + this.questionId + " .QuestionBody").width(300);jQuery("#" + this.questionId + " .statement-container").css("padding-top",6); }}); However, that does not work either. This is how it looks like on mobile phone. Another thing! I had the same mobile friendly issue with the videos and I needed to use this code (in the custom CSS) to make it work: .container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%;}.responsive-if

822

1 year ago

ErikahuerQPN Level 4 ●●●●

asked in Custom Code

how to add in the progress bar the number of questions qualtrics

Hi I would like to add inthe progress bar the amount of answered questions/total questions text. For example if the person has answered 2 questions and i have a total of 12 questions, to have in the progress bar 2/12. Any ideas of how can i archive this?

Build custom code to video record participants while they take the survey

Hello, I am a researcher at UC Berkeley and need help building a code to video record participants taking my survey for the entire length of the survey, even while they are watching a recording. This is crucial to watch their facial expressions change while watching the video. Does anyone have any idea on how to go about this?

Removing header display in end of survey block

Hi,I’m looking to remove the header that I input into the Look & Feel section from displaying in End of Survey section. I was able to remove the header from other blocks by inputting code into the Rich Content Editor, but I’m not able to access the Rich Content Editor in the End of Survey Block. I tried putting the code into the saved message in My Library but the header still remains. Any help with this?

Do not display a Row if the row is empty

Dear all,I have a question that looks like this: Each statement of the matrix depends on an embedded dataset. For some individuals, the values of var2 or var3 may be empty. To make it simple for those answering my questionnaire, I would like not to display the empty questions. Do you have any suggestions on how to do it?Thanks in advance!

Add spacing between logo and question text

Hello everyone, I have a question regarding the layout. In "look and feel", I added a logo on top of the page. Because the logo and the question text are very close together, I would like to add a spacing between them. Is there a custom code for this? Many thanks in advance Melissa

Dear Community Members,For a project, I would need to include a table in a survey that allows participants to sort the informaton in a chronological order if they click on the first row. In other words, having the table below: respondents should have the option to click on the first row and be able to visualize this: Do you know whether such a feature is available in Qualtrics and how to do that?Thank you in advance for your help! Denise

Slider question malfunction in survey

Hello! Can someone help me to figure out what’s happening with my slider question. When I’m building this survey, I can’t move or play around with the slider question in the survey building mode. And the code i have attached to the sldier question won’t work either. Pic 1 for reference. However in my other surveys, the slider questions works perfectly with the coding i have. Pic 2 for reference. Is there a setting that i might have turned on in the current survey I’m working on that’s preventing the slider question from working??

220

1 year ago

bucklibLevel 1 ●

posted in Custom Code

Expanding the width of the Feedback Button Slider DIV

I have been stumped on how to accomplish this by modifying the CSS in the developer panel so thought I would ask for support and guidance from this awesome community. I have set up a Feedback Button creative using the slider functionality which defaults to max-width of 400px. In my theme settings I have the classic layout selected. This width unfortunately is just too small for our surveys so I am trying to expand the slider width to 600px. When I update the max-width it expands the DIV off screen to the right. Anyone have guidance on what CSS adjustments I need to make in order to get the window below to 600px?

How do I use JavaScript create a cumulative ceiling based on scores?

This is a repeat question with a more specific title….I have created a survey that will act as a language assessment and I need to add basal and ceiling. Specifically, out of 60 questions, I need the first ten to always be answered. At the 11th question, I need to move to the next survey block after 6 consecutive wrong answers - there are four answer options for each question. When an answer is correct, the number of wrong answers is reset to zero. For example, if I answer questions 11-15 incorrectly, but get #16 right, the count is reset.

361

1 year ago

Page 42 / 293

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.

Popular Use Cases

Customer Experience Management (CXM)
NPS Software
Employee Engagement Software
Online Survey Software
Market Research Software
360° Employee Feedback

Customer Survey Software
Website & App Feedback
Voice of Customer Software
Employee Pulse Surveys
Onboarding & New Hire Surveys
Online Reputation Management

Support

Submit a Ticket
Online Help
Qualtrics Community
Professional Services
Product Roadmap
Status

Company

About Us
Investors
X4 Summit
Careers
Partnerships
Contact Us
Newsroom

Resources

Customers
Integrations
Blog
Events
Training & Certification
Resource Library
XM Basecamp

Privacy Statement

Security Statement