Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,295 Topics
  • 22,945 Replies
7295 Topics
rislis
rislis
asked in Custom Code
Spelling Bee, Anyone?

We'd like to use Qualtrics to administer a Spelling test to our elementary students. Tech support suggested I reach out to people here to ask if anyone has a custom code I can use to block spell check in the browser for those students during that time? Thanks!

4988
L
5 years ago
S
salomi
asked in Custom Code
Display a subsequent question based on movement of the preceding slider question

Hello, I have a slider question (ranging from 0-100) and want the subsequent question to appear (in the same page) once the slider is moved. The value of the slider should not matter for the display of the subsequent question. Appreciate any inputs and help.

34
S
5 years ago
dobra021
Level 4 ●●●●
dobra021Level 4 ●●●●
asked in Custom Code
Adding Inline Email Question to a Distribute Survey Task in Actions

In survey 1, I have an action set up to distrubute a survey when staff enter the contact information of a client. For survey two, the email that clients receive should have an inline email question. I copied the source code of the invite email message from survey 2 into my distribute survey action, but the text that is displayed for the inline question is from survey 1. However, when I click on an answer choice it correctly takes me to survey 2. For the correct text to display, I think I need to change these portions of the code, but I don't know how to find the links or IDs to use from survey 2. Any ideas? ${q://QID1/QuestionText} ${q://QID1/ColumnLabel/0} ${q://QID1/ColumnLabel/1} href="${l://ChoiceLink/QID1/0}" ${q://QID1/ChoiceDescription/0} It should look like this (from Survey 2): ! It currently looks like this (Distribute survey task) !

824
TomG
Level 8 ●●●●●●●●
5 years ago
Z
ZeinaM
asked in Custom Code
Customized validation: link to question marked as answered/validated after page is saved

Hello all, I'm building a survey (for the first time ever) in Qualtrics. I'm trying to get a color system for answered questions like so: ! If you have answered the question, the question's link in the sidebar turns blue (well, the border does). With this survey we're building though, it might take someone a long time to answer, so I would like to keep the link to answered questions blue. Right now, they are turning back to red, the default. I have this code for when the user clicks on the question and answers it: ``` Qualtrics.SurveyEngine.addOnload(function (){ this.questionclick = function(event,element){ element.addEventListener("blur", blurFunction, true); function blurFunction() { if ((element.type == "text") && (element.value != "")){ var elementID = element.id.split('~')[1]; var questionID = elementID.substr(3, elementID.length); document.getElementById('question-card' + questionID).classList.add('card-validated'); console.log("validated"); } }

41
Z
5 years ago
KOgles
Level 3 ●●●
KOglesLevel 3 ●●●
asked in Custom Code
How do I add a custom class to a HTML input?

Looking to create a unique identifier on a HTML input to be able to hook up a multi select js function.

611
TomG
Level 8 ●●●●●●●●
5 years ago
S
Level 1 ●
SumeshsdnLevel 1 ●
asked in Custom Code
How can I auto code a single/multi question from the response selected in previous question?

How can I auto code a single/multi question from the response selected in previous question? For example, out of 5 options in a multi question only 1 of them is selected at question Q1. I have to autocode this code in question Q2 which is also a multi question and skipped from been asked to the respondent. What is the best approach to implement it?

7148
S
Level 1 ●
5 years ago
F
Fabisp
asked in Custom Code
Embed a form on an iframe

Hi, How can we embed a form on an iframe? Thank you

182
F
5 years ago
N
newtothis
asked in Custom Code
Qualtrics - Getting data from a behavioral task (BART)

I'm currently trying to get a behavioral task to work with Qualtrics using Javascript. Essentially, the task consists of people pumping a balloon. Each pump brings it closer to popping the balloon, but they get more rewards based on the number of times they pump. They can collect rewards at any time. In total, they repeat pumping balloon and collecting rewards 30 times (30 rounds). I'm interested in how many times they press the pump button in each round. I was able to find a script online that can be used to display the task in Qualtrics (did not write it myself). I'll add the code to the comments. The only thing that was missing was a way to get Qualtrics to record the data I want. I've looked through forums and found that the following script can be used to get Qualtrics to record data: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> Qualtrics.SurveyEngine.setEmbeddedData( 'embeddedDataVariable', value ); Qualt

2584
M
5 years ago
W
weim
asked in Custom Code
Overwrite responses from previous questions with JS

Hi there, I'm trying to write custom code to overwrite the responses from previous questions. Near the end of our survey, I use piped text to display responses from earlier in the survey. I only want to overwrite these responses after displaying them at the end of the survey, but before they are recorded. I want to do this using javascript/jquery at the end of the survey to avoid the complexity of setting embedded data fields for each individual question. Ideally, the process would be something like this: use the QID of questions from previous blocks to access the responses. Then, change the values that respondents gave, but only at the very end of the study; this is why the responses cannot be overwritten or deleted on the page immediately after the respondent leaves the page. I know we can used piped text to display text from previous questions/responses; how can I modify those previous responses? Here's what I've tried before: 1) Setting a variable to `${q://QID3/ChoiceGroup/Se

2169
TomG
Level 8 ●●●●●●●●
5 years ago
G
Gail
asked in Custom Code
Net Promoter

Using the Net Promoter survey to accomplish look/feel that I couldn't seem to in Slider or Multiple Choice. Questions: 1) Can gray boxes (0-10) have a light to dark/gradation feel to them? 2) Can gray boxes be made wider or closer together to fill void (keep a slight space as in sample)? 3) Font for Qualtrics sample appears different than default? Please refer to samples. ! ! Many thanks!!!

1788
A
5 years ago
L
LauraHill_95
asked in Custom Code
Report-Results Paginated table: export CSV includes HTML of questions + full title

Dear all, I have created a report using a paginated table to export into CSV/Excel. I have changed the titles of the questions in the report. Yet when I export it, it includes the full question as well as the HTML/CSS used in some questions. This messes up the text to columns feature as the rows don't match up with the correct columns. How can I export the file without having the full questions or anpother solution that doesn't require me to change the questions in the survey itself? For example: Question about NPS score includes scale with HTML/CSS formatting, but the title in the table should be 'overall NPS'. Thanks in advance for the advice and help!

60
L
5 years ago
E
echongsk
asked in Custom Code
How do you get the current time of people based on their time zone?

I would like to get the current time of my participants based on their time zone so that I can use "branches" in survey flow to direct them to different pages/blocks. I need some support in developing codes to do this. Thanks!

6647
TomG
Level 8 ●●●●●●●●
5 years ago
C
cockrellco
asked in Custom Code
Displaying web page in modal

I am trying to make it so that participants in my survey can open a modal that displays another web page in an iframe. The problem is on mobile it does not display properly. I have also tried using the `<embed>` and `<object>` tags, and those display the page correctly, but they don't allow scrolling even with "-webkit-overflow-scrolling: touch;" Here is the code I have. I am not very familiar with coding. I simply found this and have tried to modify it for my purposes. <style type="text/css">body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding-top: 0px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback c

4061
A
5 years ago
K
Kai_Chizuru
asked in Custom Code
How to change the separator for piped text only

I understand there is a similar question that has already been answered, but that code only works when I don't have any other commas and if I put the div around everything. Could someone please help me with this? I wish to change the commas in the piped text to dashes. Example: "Afterwards, my ${q://QID76/ChoiceGroup/SelectedChoicesTextEntry} controlled what I watched on the Internet."

874
K
5 years ago
L
lignecpq
asked in Custom Code
Replacing every other comma in Selected Choices piped text

I am creating a survey on which respondents can select multiple choices from a long list of names. Each possible choice is in the format of "LastName, FirstName." I would like to show respondents a list of their selections for review before submitting the survey. I created a static content text question using the piped text, ${q://QID2/ChoiceGroup/SelectedChoices}, to display the selected choices. This displays the selected choices as a long comma separated string (i.e., "LastName1, FirstName1, LastName2, FirstName2,...). I tried to custom code a function to replace the commas with line breaks using guidance provided here: https://www.qualtrics.com/community/discussion/198/how-to-change-the-separator-for-piped-text My issue is that this replaces every comma, so, instead of: LastName1, FirstName1 LastName2, FirstName2 ... I end up with: LastName1 FirstName1 LastName2 FirstName2 ... Can anyone provide advice on how to replace every other comma? Thank you so much for any help y

1193
K
5 years ago
P
parpar007
asked in Custom Code
setTimeout simply doesn't work!

I am designing an experiment in qualtrics using java script. For each question in my study, a participant needs to guess the correct answer, type it in, and then hit the space button. Once they hit the space button, a logic checks whether their answer is correct or not. If the answer was correct, a sound should be played for 1.2 seconds, the background color should change into red for a second and then back to white, and lastly the experiment should automatically moves on to the next question. It seems like i am not using the setTimeout logic correctly. no matter what combination of timeout values I used, I couldn't get it to play all the middles steps, including the audio play and red background flash, before the screen moves to the next question. Currently, she background flashes red for less than a second and the screen moves on to the next question. The audio sound simply gets skipped. Even if I change the 2000 an 3000 to 5000 and 8000, still the same result. It is as if these num

482
P
5 years ago
Shira_Good
Shira_Good
asked in Custom Code
Using Regex to score individual words in open-ended text

I'd like to be able to give a question prompt and allow the respondent to provide sentences or even paragraphs of an answer, but score certain words with certain values attached. For example, if someone uses the word "global" in their answer, I'd like to give them two points. If they also use the phrase "open-minded" I'd like to give them three points. I don't want to give any points for words like "the", "and", etc. Does anyone know how to do this? Currently, the only way I can score words is to have a single-word answer and it must match the "right answer" exactly to get credit.

131
TomG
Level 8 ●●●●●●●●
5 years ago
I
ilia987
asked in Custom Code
set up video as full screen without user clicking on full screen icon

the video is already uploaded to the library, is it possible to do it?

1281
LibertyW
Level 3 ●●●
5 years ago
N
NKosslyn
asked in Custom Code
Custom formatting issue with CSS script to format Pick/Group/Rank Table into two columns

In a survey I'm running, I have a Pick/Group/Rank Table with Items that are a picture and some associated text! I wanted to format the table into two columns, as there are a number of such Items, so I found the below CSS script (appended to the last Item's html) to do so: <style> .Skin .PGR .DragAndDrop .Items ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } </style> Unfortunately, this seems to have broken the table's formatting in two ways: first, each Item's image on the right-hand column is no longer sizing correctly—they're returning to their native dimension ration (e.g. 50 px by 80 xp) rather than locking at 80 x 80 like they're supposed to, AND there's a weird issue where the text associated with a given Item ends up on the right column while the image remains on the left (while an odd number of items are in the table)! The only other CSS I'm using is a global script—I suspect this is contributing to the issue but am unsure of the solution: .Skin .PGR

101
N
5 years ago
M
MauroUsabilitySci
asked in Custom Code
Paired Subset Selection with Randomization

Here is what I am trying to execute: I have 2 designs (we will call them A & B ), each of which I am comparing to 19 other designs in paired comparisons. The respondent will rank each pair on a sliding scale from 0 (completely different) to 100 (identical). Rather than having each respondent go through all 38 pairs, what I would like to do is be able to have the block randomly select 10 of the 19 pairs with design A and 10 of the 19 pairs with design B to show the respondent. The thing is, I need the selected A-to-other design comparisons to be the same "other designs" as the B-to-other design comparisons in order to analyze the data comparatively. And, the block needs to be entirely randomized, showing the selected 20 pairs in random order. Is there a way to execute this?

162
M
5 years ago
E
ehoffman
asked in Custom Code
How to change fill color of check boxes in multiple answer matrix table?

Hi all, The check boxes in my matrix table (likert, multiple answer) turn white after I select them. I would like the selected check boxes to turn teal (#44b8bd). I was able to successfully do this with the regular multiple and single answer questions with the following code: .Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked { background: #44b8bd; Background-color: #44b8bd; border-color:#44b8bd; color: #000000; } .Skin label.MultipleAnswer.q-focused.q-checked, .Skin label.SingleAnswer.q-focused.q-checked { background: #44b8bd; } I'm not sure how to make the selected check boxes in the matrix table the same color. Can someone help? Thanks!

1642
G
5 years ago
M
MauroUsabilitySci
asked in Custom Code
Increasing width of the survey on screen

Is there a way to increase the width of your survey on screen? I ideally would like the images (which are in the "choice text" boxes) to appear to the left of my sliders, but due to the tight constraint of the survey on screen, everything is squeezed to the middle of the screen and the images appear above the scales (see image attached)--It seems there is a lot of wasted space. !

13627
fleb
Level 3 ●●●
5 years ago
L
Linda001
asked in Custom Code
How to insert pictures which automatically diseapper in the survey

Hi, I'm developing a survey where I want to insert pictures which automatically diseapper after a few seconds. How do I need to do this? I understanded that this needs to be possible with custom code.

51
TomG
Level 8 ●●●●●●●●
5 years ago
1
1ag0
asked in Custom Code
Format Shown Values of Slider Choices

I have sliders with selected values displayed on the left hand side. I would like those displayed values to be bold, and also add a "%" sign after the displayed values. How do you format the displayed slider values so that they are bolded and is followed by a % sign?

307
TomG
Level 8 ●●●●●●●●
5 years ago
arushman
arushman
asked in Custom Code
Javascript - Time Picker

We have two questions where we have entered the following javascript. We want the respondent to be able to pick the opening time in question one and the closing time in question two.....however when the data is entered the opening time is recorded for both question 1 and question 2. thoughts? Javascript: Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var Qbd = "input[id='QR~"+this.questionId+"']"; jQuery("#" + this.questionId + " .InputText").hide(); jQuery("#appt-time").on(" change", function() { jQuery(Qbd).val(jQuery("#appt-time").val()) ; }); }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ });

893
E
5 years ago

Motivational Playlist

Terms & Conditions