Custom Code | XM Community

Custom Code

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

  • 7,033 Topics
  • 22,030 Replies

7033 Topics

D
DArmstrong
asked in Custom Code

CSS for navigation boxes, matrix questions?

After customising quite a few surveys in Qualtrics, there are some elements that I've repeatedly struggled to adjust to my full satisfaction. Does anyone know of a canonical reference document that shows the CSS relating to Next and Back buttons (especially their position - I can only ever get them to show in the bottom-right of each page, next to one another)? I'm also having difficulty with matrix questions - I can't figure out the CSS that controls the 'fade on hover' behaviour for alternate lines. I have a darker shade behind every other statement / ranking line, which currently fades to white on mouse-over and I'd like to disable this behaviour. Any help appreciated!

1
AnthonyR
Level 4 ●●●●
6 years ago
D
DavidS
asked in Custom Code

auto-advance

How can I make my survey auto-advance using JavaScript so that... after a person selects one answer for each statement in a matrix question (single answer allowed for each statement), it auto-advances to the next page? Thanks. --David

12
D
6 years ago
D
DavidS
posted in Custom Code

Capturing use of the "back" button

Is there a way to use Java script to record in the dataset whether the respondent hit the "back" button on any given page?

1
TomG
Level 8 ●●●●●●●●
6 years ago
A
AmyHall
asked in Custom Code

Character Limit in Hover Box

I have a question that requires an additional definition, and I have it coded so that when you hover over a word, you see additional text. However, the hover text box is not big enough to display my whole definition. It seems to be related to character count. Is there a way to make the box bigger or allow more characters? Thanks!

7
TomG
Level 8 ●●●●●●●●
6 years ago
F
Qualtrics Employee
FiaQualtrics Employee
asked in Custom Code

Survey Does not appear when transitioning from another page to page with embedded survey.

Hi, For my intercept, I am using "Display with custom Javascript code" for displaying the intercept. I am integrating qualtrics with a single page application on Angular JS. I have placed the Zone code in index.html and I am loading the survey using QSI.API.load() and QSI.API.run(). The issue is that when I redirect from another page to the target page(where survey needs to be loaded) , even though the statements QSI.API.load() and QSI.API.run() are executed, the survey does not load on that page. I also don't see any qualtrics related calls made on that page. When I reload the target page, the statements QSI.API.load() and QSI.API.run() are executed again, and the survey is displayed as expected and qualtrics related calls are also made. Please suggest what I can do to fix this. Thanks.

1
K
Level 2 ●●
6 years ago
MaryHoban
MaryHoban
asked in Custom Code

right-justify entries in a constant sum box?

I'm hoping that someone might have a javascript so that entries in a constant sum question are right-justified, rather than centered in the box? TIA! - Mary

5
MaryHoban
6 years ago
E
EddieDA
posted in Custom Code

Qualtrics Client Side Javascript API or Embedded Data

Does anyone know how to get respondent data and survey response data back after a survey is filled out on my website ? Seems like there is an API to create surveys but not get data back in real time.

8
E
6 years ago
S
swarupjacob
asked in Custom Code

Generate random values using Javascript

I am using the below javascript to define an array and retrieve random elements from the array. var COST = ["$400","$500","$600","$700","$800"]; var COST_a1 = COST[Math.floor(Math.random()*COST.length)]; alert (COST_a1) ; /* for debugging */ When I preview the survey, Qualtrics runs this piece of code TWICE. The alert box pops up twice with different values for COST_a1. This is causing issues on another page when I try to capture the value of Cost_a1 using this.setChoiceValue(3,COST_a1); I only need the random value to be generated once. Any guidance on this matter is appreciated. Thank you.

12
Michael_Campbell_RedPepper
QPN Level 3 ●●●
6 years ago
M
manu0079
asked in Custom Code

Custom Side by Side Question with 7 columns

We are trying to create a Custom Side by Side Question with choice options on both sides and question text at the middle but no luck. i.e. we need 7 columns, with three columns of text in the middle and two columns of choices either side. The choice options are to be grouped per row as the user is expected to only choose one option per row. Attached is the sample screenshot of the question I am trying to achieve. Can someone help please?

7
M
6 years ago
Akdashboard
Level 4 ●●●●
AkdashboardLevel 4 ●●●●
posted in Custom Code

How to split a string using 2 different separators

I am trying to break up a date text string into the year, month, and day, but I just discovered that the date text string can separate the values using either "-" or "/" depending on the source. The script I am using (adopted from a script I got in an earlier thread) will work for one, either/or the other. Is there a way to write a .split statement with an or condition? Below is my code. Imagine that COVERAGE_BEG_DT can be either 01/01/2018 or 01-01-2018 const Coverage_Beg_DT = Qualtrics.SurveyEngine.getEmbeddedData('COVERAGE_BEG_DT'); Coverage_Beg_DTArr = Coverage_Beg_DT.split("/") Qualtrics.SurveyEngine.setEmbeddedData("YOTenure",Coverage_Beg_DTArr[2]) Qualtrics.SurveyEngine.setEmbeddedData("MOTenure",Coverage_Beg_DTArr[0]) Qualtrics.SurveyEngine.setEmbeddedData("DOTenure",Coverage_Beg_DTArr[1])

4
Akdashboard
Level 4 ●●●●
6 years ago
J
jsolita
asked in Custom Code

How do I use embedded data in java script to show different background colors in survey Look & Feel?

Hello - I am looking to use embedded data fields in the survey in order to show different color schemes for the survey. Is there a java script that would allow me to say "If embedded data is 'blank1', then show (java script for one color scheme). If embedded data is 'blank2', then (insert java script for second color scheme)."? I currently have the color scheme java script in place, however, I am looking for the ability to implement these "if, then" scenarios. Thanks in advance. -Joseph

2
Michael_Campbell_RedPepper
QPN Level 3 ●●●
6 years ago
J
Jonas
asked in Custom Code

Use "Enter" to submit a question

Hello everyone :) I am still working on the word completion task where the participants get a new entrybox every 6 seconds. Now, thanks to the community, I was able to implement the custom code to have the entry box preselected. To increase the convinience for my participants even further, I wonder whether it is possible to submit an answer by pressing the "Enter" key on the keyboard (instead of clicking on the arrow with the cursor). Can this be implemented? Thank you Jonas

1
TomG
Level 8 ●●●●●●●●
6 years ago
J
Jonas
asked in Custom Code

Preselect a Text Entry

Hello everyone I want to do a word-completion task. This means participants see a word fragment (e.g. "w_t_r") which they should complete to a full word (e.g. "water"). As I do it currently, I show them the word fragment as text field and below that there is an empty text entry where they should write "water". This is kind of alright (is that the best way?). Now I want to present them only one word every 6 seconds. So what happens is that I have around 35 blocks with each one word fragment and one entry field. Every 6 seconds there is a new fragment automatically. Now what I would love is that the text entry field is preselected. So that basically the participants not have to select the text entry every new block. I was told by support that this might work with a custom code? Any ideas? Thank you Jonas

4
J
6 years ago
Michael_Campbell_RedPepper
QPN Level 3 ●●●
Michael_Campbell_RedPepperQPN Level 3 ●●●
posted in Custom Code

Testing interest:

A lot of my projects involve Custom End of Survey Messages, but will be doing custom emails, and Piped Text Input in styled/HTML Survey Blocks. One of my biggest bottlenecks is the Qualtrics IDE (It is excellent, but I enjoy working on my own, local IDE, Visual Studio Code). Another bottleneck I face is Piped Text Token (i.e. `${e://Field//Total}`). When I run code in my local IDE, and have a Chart.js that takes in an array of embedded fields, in have to swap them in and out to test it locally and then post the code in Qualtrics. I, today, started developing a Transpiler of sorts, as an NPM Package. Copies your code with Piped Text Tokens, and replaces them with sample data. I wanted to get a feel for if you guys would like a copy, or if there is interest so I could package it up and serve it publicly. It takes in three key pieces of data: a Source Directory, an Output Directory, and a list of key-value pairs, the key being the Piped Text Token, and the value being the Sample da

0
Michael_Campbell_RedPepper
QPN Level 3 ●●●
6 years ago
N
ntvandam
asked in Custom Code

Display logic based on date using javascript

From what I've read it seems Qualtrics does not provide display logic options for dates. Can anyone advise re: javascript code that would check the date a survey was being taken against a user-provided date(s). I want to allow survey completion if the date on which the survey is being taken corresponds to +/-7 days of a user-provided date.

1
TomG
Level 8 ●●●●●●●●
6 years ago
T
tuh39046
asked in Custom Code

Pick, Group, and Rank (Drag-and-Drop) Custom CSS

I was wondering if anyone has developed custom CSS or JavaScript to alter the drag and drop question format. I would like to display the items that are dragged horizontally across the top of the page. Alternatively, if that can't be down, I would like to keep the items fixed in their position in the item container when they are unsorted. As it is, their position is dynamic, and as you sort the items that come before it, the items move up. If you place an item back in list, you can place it in any order. I would like every item to have its own place that does not change while it is unsorted on the left hand side of the page. Thanks!

1
Michael_Campbell_RedPepper
QPN Level 3 ●●●
6 years ago
A
Abhi
asked in Custom Code

saving data into qualtrics

Hello Everyone, I have a timer 10 seconds to fill only one feedback question about his/her experience on the interaction with the random person. data is only recorded in Qualtrics only when the user hits the submit button but data is not recording when the user didn't press submit button with in the time period of ten seconds. i wanted to make use of data and want to record the data in Qualtrics even if the user misses the submit button option in ten seconds. does anyone know how to do that with javascript?

10
AnthonyR
Level 4 ●●●●
6 years ago
Michael_Campbell_RedPepper
QPN Level 3 ●●●
Michael_Campbell_RedPepperQPN Level 3 ●●●
posted in Custom Code

Useful Code Snippets

I have been running into similar situations with a few of my customers and wanted to share some of my custom code solutions, with the hopes that others can share theirs as well!

3
TomG
Level 8 ●●●●●●●●
6 years ago
I
IngerMathilde
asked in Custom Code

Javascript loading to slow

Hey! I am using javascript to randomize some pictures as part of a multiple choice question. I am not able to use the advanced randomization included in Qualtrics as there are some very specific rules the randomization needs to adhere to. I figured out the javascript part. The only problem is that when the page loads, the question briefly flashed the non-randomized order of pictures before showing the correct randomized version. Is there any way to load the javascript earlier, or to delay the showing of the question so that this flash doesn't happen?

1
TomG
Level 8 ●●●●●●●●
6 years ago
lillianc
Level 3 ●●●
lilliancLevel 3 ●●●
asked in Custom Code

JavaScript font difficulties

Hi all of you coders out there - I'm wondering whether any of you also have difficulties with the JavaScript editor font. Two related issues: first, the font is not monospaced, and second, the cursor often appears in the wrong place (see screencast below). I'm not sure if I'm the only one experiencing this problem. Basically my cursor never lines up with the actual location of the text I'm editing in the JavaScript editor. I never know whether I'm deleting the wrong text until I actually do because the cursor often shows up in the wrong spot. Sometimes the cursor doesn't even line up with any text. I think this wouldn't be a problem if they would use a monospaced font in the editor window. Screencast: youtu.be/UIAOUoyDjTk?hd=1

3
James
Level 1 ●
6 years ago
Akdashboard
Level 4 ●●●●
AkdashboardLevel 4 ●●●●
asked in Custom Code

Remove extra spacing using Java

I am not very Java-savvy, but I know I can remove the extra space between questions by adding JavaScript to the question. I haven't done it for a while and cannot remember how. The example I am working on is having "blank" question text for a couple of question types below a descriptive text box. I'd like only the answerable parts to be closer to the descriptive text, instead of huge blank spaces between them.

3
TomG
Level 8 ●●●●●●●●
6 years ago
mcoverdale
Level 2 ●●
mcoverdaleLevel 2 ●●
asked in Custom Code

Does anyone know how to center text-entry boxes?

Is there a way to make the text-entry boxes appear in the center of the screen rather than the left side?

3
LibertyW
Level 3 ●●●
6 years ago
britain
Level 2 ●●
britainLevel 2 ●●
asked in Custom Code

Default CSS sheets for Qualtrics themes

One of my researchers would like to use a basic Qualtrics stylesheet as a base for custom CSS for her project. Is this canonized anywhere or is her best bet to use her web browser's inspector to find it?

1
AnthonyR
Level 4 ●●●●
6 years ago
Akdashboard
Level 4 ●●●●
AkdashboardLevel 4 ●●●●
asked in Custom Code

Post comments to a website automatically

I am trying to figure out a way to embed a live stream of customer comments on to an internal work website. I feel like this might be possible to push the response data automatically somehow, am I just not sure how. Worst case scenario is that I can update the website manually every so often from comments I have scrubbed, but ideally this wouldn't need to happen. Also to note, this internal website looks like something you'd expect in 1999, so I am not sure I am working with the most up-to-date programs. Any ideas out from anyone?

1
AnthonyR
Level 4 ●●●●
6 years ago
B
bmgray
asked in Custom Code

Can I override a theme setting on a particular question?

Our branded theme displays single choice and multi choice responses in large clickable blocks - this is ideal for the vast majority of surveys/questions. However occasionally (e.g. with a long response list) it would be better to revert to the standard radio button / check box style display. Is it possible to override the theme default without having to revert to a different (and non-branded) theme?

1
AnthonyR
Level 4 ●●●●
6 years ago

Productivity playlist

Terms & Conditions