Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,293 Topics
  • 22,931 Replies
7293 Topics
R
Level 1 ●
rarcegaLevel 1 ●
asked in Custom Code
Automatically selecting an answer option even if it wasn't selected by the respondent

I have a question where we ask respondents which programs they are a member of. All of the respondents are members of a specific program. How can I make sure that the specific program is selected for those respondents who forgot to select it?For example:Q1 has A, B and C programs as answer options.All respondents are actual members of the C program.Respondent only selected A and clicked on Next.Before moving to the new question, I need to add C as a selection for Q1Thanks.

1815
R
Level 1 ●
4 years ago
R
Level 1 ●
rarcegaLevel 1 ●
asked in Custom Code
Auto-populating a question based on a previous question before termination

I have a Yes/No question and if the respondent selected No, I would like to auto-populate the next question with a None before I terminate. How is this possible in Javascript?

113
TomG
Level 8 ●●●●●●●●
4 years ago
R
Level 1 ●
rarcegaLevel 1 ●
asked in Custom Code
How to create a loop using a subset of a previous question's answer list?

I have a question with answer options A, B, C, D, E and None. How can I set up a loop that will only be asked of B, D and E if one or more of them were selected. Q1 - respondent selects A, B and E.Next question will be a loop that will ask for B and then E.

211
TomG
Level 8 ●●●●●●●●
4 years ago
C
Level 1 ●
chasmasbLevel 1 ●
asked in Custom Code
iFrame

Hi, my developers are using the iFrame code to insert a poll into one of our website. Is there a way to reduce the width survey content so it fits in the tile of the site?

60
C
Level 1 ●
4 years ago
S
S_smith
posted in Custom Code
removed question

-

10
S
4 years ago
M
Melissa_P
asked in Custom Code
Allow participants to reference instructions

Hello! I am working on a research project where participants will be answering a series of questions. I would like for them to be able to access the instructions as it will include some definitions that they may want to reference throughout the survey. I want to avoid having them click the "back" button several times if they want to reference the instructions. Is there a way to embed a link directly to the instructions, particularly one that could pop up in a separate window? If this isn't possible I'd be open to hearing about others handled allowing participants to have access to certain reference material or instructions while they completed the survey.

11
MatthewM
Level 6 ●●●●●●
4 years ago
M
MeAnnet
asked in Custom Code
How can i add a word completion task in my survey?

Hi there, I was wondering if someone knows how i can put a word completion task (25 words) in my survey. (I've seen some similar questions but the are really complicated, because i don't know much about HTML or JavaScript). It will be a question like: create an existing word. For example: F_LE WAT_RLIV_Is there any way of placing answer boxes like: F [answer box with one character] LE. Is it maybe possible putting a textbox between the letters? I just can not figure it out. I hope someone can. Thanks!

660
M
4 years ago
A
afmiles
asked in Custom Code
Adding an informational popup on survey load

Hi all,I have looked around and dabbled in some options for creating a popup message for survey respondents on the first page of the survey. This is an annual survey that we are still implementing but we wanted to add a temporary popup message at the beginning of the survey with some additional information and a timely kind message. I have searched the forums for html/java code that would allow us to do this. I was only able to find hover text and popup windows that appear specifically after clicking a button. This is arguably simpler than that, but I could use some help. I have also dabbled in making a Creative, but that seems to be reserved for placement on a different website, not a Qualtrics survey. I'd greatly appreciate any help with this. Thanks!

170
A
4 years ago
A
acan
asked in Custom Code
Randomize the position of next button

Hi!I would like to place the next button of a Qualtrics survey in three positions (left, middle, right). The position must be constant for the same participant (e.g. for participant 1 always on the left), but should be randomized between participants (e.g. participant 2 on the right, and so on).I have used the following JS code for individual questions (since I can only add JS for each question but not for the entire survey), but if I apply this to all individual questions the next button will appear in different locations for the same participant:var Button = document.getElementById("NextButton");var ButtonContainer = Button.parentNode; if(Math.random() < 0.333){ ButtonContainer.style.textAlign = "left"}else { if (Math.random() < 0.5) { ButtonContainer.style.textAlign = "center" } else { ButtonContainer.style.textAlign = "right" }}Apparently, the only way to add custom code for the entire survey is via CSS (in Look & Feel settings), I'm aware I cannot impleme

80
A
4 years ago
L
Lobke
asked in Custom Code
Superimpose next button on image

Hi all, I'm rather new at using JavaScript, so I would like some help if possible. I have eight trials in which a picture is shown like the one below. For every trial I have inserted a mouse tracking code (see attached file). Participants are asked to 'walk' from the blue dot at the bottom to the table. The code works perfectly, however the x and y coordinates of the mouse are only properly saved when the participant clicks on the next button. Since I'm interested in the walking path from the blue dot to the table I do not want to have output from the path from table to next button. I was wondering whether I could superimpose the next button onto the laptop on the table in the picture. If so, what code is needed for this? I would really appreciate any help. ! P.s. If you have any other/better ideas on how to stop the mouse tracking when reaching the laptop, I'm all ears.

443
L
4 years ago
C
CatK
asked in Custom Code
Timer Control - Show Milliseconds to Participants

Hi there, I'm using a timer control in my survey. The time is displayed to the participants. Is it possible to have the milliseconds displayed, as well as the seconds?TIA

151
rondev
Level 6 ●●●●●●
4 years ago
S
suzanav
asked in Custom Code
Matrix table without statement column

Hi I want to use a matrix table without a visable statement column, so it is forced to 0 / or as narrow as possible / hidden. This was working before, on a survey with the same design: I just put in the column and dragged it as far left as I could, and this was narrow enough. But now I can't seem to get the width to be less than 100px on mobile using the same technique. It's just a one row matrix table and the resaon I'm using it is so that I can force the likert scale to be horizontal also on the mobile. But I also like it to be stretched out across the whole screen, as I'm using some little images above each radio button and I want to allow these to be as large as they can be given the screen size. Also it looks neater if the likert aligns with the width of the question above (see below). Not sure why dragging it doesn't work now, can I force it with javascript somehow? Or is there a different way of doing this. Posted this in the API forum as well, but maybe this is a better pla

4353
I
4 years ago
P
PC_928
asked in Custom Code
Change hover text font size without changing the font size of main text in multiple choice option

We are trying to change the font size of hover text within a single multiple choice option without changing the font size of the question. Here is the code we entered directly into the multiple choice box: &lt;span href ="#" title="TEXT TO HOVER"&gt;TEXT TO DISPLAY AS MAIN TEXT&lt;/span&gt; I do not have any experience with code so any help will be greatly appreciated. Thanks!

66913
J
4 years ago
J
JayKay
asked in Custom Code
How to return to 'lobby' Question

Hello everyone, I am struggling with the following issue and would be highly grateful for your support. In essence, I am trying to design a 'circular survey'. So, this is what I have and works: – A Q1 (separate block) providing four alternatives, which I have called the 'lobby question'. – Based on the alternative a participant selects, I redirect to one of four corresponding 2nd Qs (currently all in a different block). – Once participants have responded, I show a Q3 (own block), e.g. "Would you be willing to respond to another alternative?" – so one of the other remaining 2nd Qs. But now, here is what I need (and doesn't work): – If participants select 'Yes' to Q3, I would like to redirect them to Q1 (lobby question). Q1 should only display the alternatives to which participants have not yet responded. – This process should be repeatable until responses to all four alternatives have been given. – Naturally, if participants select 'No' to Q3, or have provided all responses, they wi

70
J
4 years ago
M
MartijnVR
asked in Custom Code
How to call functions defined in header script?

Hi, I'm trying to use Qualtrics to create a user study for my thesis research. As you can see from the example preview below, I managed to create interactive maps in each question that the user can interact with. Example preview The JS code needed to do this is copied in each question which is not ideal when I need to edit things, etc... I have found that it should be possible to include code in the header field using &lt;script&gt; tags to define global functions that are usable in each question, but when I try to call `Qualtrics.SurveyEngine.addOnload(function() { begin(); });` in the JS editor I get a reference error that begin() is not defined. I also tried to call begin() from the HTML View but this gives the same result. How do I properly call functions that are defined in my header? Thanks!

2581
TomG
Level 8 ●●●●●●●●
4 years ago
A
Arun_A
asked in Custom Code
Piping statements selected in Matrix Table to Javascript

Hi All, I have to pipe the statements from matrix type question to Java script if only particular scale has been selected. I have used the following code and it is working fine except in one scenario. In one statement there is a single quotation mark(') and whenever that particular statement selected below code is not working. var statements = '${q://QID25/ChoiceGroup/SelectedChoicesForAnswer/2}'; I assumed there is an issue with single quotation in the above code and replaced the single quotation mark with double quotation as below and now this script is not working. var statements = "${q://QID25/ChoiceGroup/SelectedChoicesForAnswer/2}"; Can anyone help me to resolve this issue?

40
A
4 years ago
A
aldb
asked in Custom Code
Force matrix to mobile view

Hi, I would like a few matrices in my survey to be displayed in the mobile-friendly format (more user-friendly). This question has been uploaded various times before (https://www.qualtrics.com/community/discussion/5384/force-mobile-friendly-matrix-questions-even-on-desktop for example). But the solutions presented don't work (anymore). I have seen Toms previous comment (https://www.qualtrics.com/community/discussion/1525/how-can-we-apply-the-mobile-layout-of-matrix-question-to-the-web-one) but making the slider column bigger doesn't force mobile view on all computers... Anyone can help? JQuery code? CSS? Would be appreciated!

530
A
4 years ago
Akdashboard
Level 4 ●●●●
AkdashboardLevel 4 ●●●●
asked in Custom Code
Auto format phone number for text entry box

My guess is that this will take specific code because I haven't found the feature native in Qualtrics. Is it possible to auto-format a text entry box? The exact example I am trying to do is format 10 numbers entered in a text box to a standard phone number format, like 123-456-7890. All I want them to enter is 1234567890.

79913
TomG
Level 8 ●●●●●●●●
4 years ago
P
Pei_2009
asked in Custom Code
How can I record the responder's time focused on each page of my survey?

Timer question seems to record the duration spent on that page. Is there any way I can record the time focused on the page, meaning the page/survey website is on the front page of the subject's window, and the tap of my survey is active. It seems that if I build website/app feedback, "time focused on site" is accessible, but how can I record this information as well in my survey in the survey platform?

41
P
4 years ago
S
Shuyuan
asked in Custom Code
Move slider labels below the slider?

Hi! I'm new to Qualtrics and I'm trying to move the labels below the slider, and I've tried several codes from these links: https://www.qualtrics.com/community/discussion/2326/a-way-to-change-the-position-of-the-labels-in-a-slider-question https://www.qualtrics.com/community/discussion/3294/move-slider-labels-below-choices https://www.qualtrics.com/community/discussion/4154/labels-under-the-slider-bar-two-slider-bars-with-different-labels but weirdly none of these works for me. Here are codes I tried in Qualtrics.SurveyEngine.addOnReady(function() jQuery("ul.labels").insertAfter("div.slider-container:last"); and, in a different attempt, jQuery("#"+this.questionId+" ul.labels").insertAfter("div.slider-container") and, in another attempt, jQuery("ul.labels").insertAfter("div.slider-container") These codes didn't change anything in the layout. I only have one slider per page, and it looks like this: ! Here is what my codes look like:

540
S
4 years ago
J
Jed
asked in Custom Code
autocomplete in jfe spurious carry forward.

Trying to update a question that we've use previously that asked students to name their friends (5,500 names). We have use the code shown below with success in 2018. We copied the code into a new survey and now having finding that the autocomplete text selection remains on the screen. Even after advancing to the next page/screen. Seems like the autocomplete text box are not refreshed/removed. The selected text floats over the subsequent screen. Once you click on the second screen the spurious text disappears and the page displays correctly. I'd also note that each preview window seems to act independently-- you need click each to make the text disappear in each window. Not sure if this matters but I'm working in jfe. Do I need to force a page refresh linked to the next button click? How does one do this? Any would suggestions would be greatly appreciated. Header* &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="s

81
J
4 years ago
Z
Zlver
asked in Custom Code
Design decision making experiment: updating probabilities + feedback, measuring response time

Hi there, I would like to know if it is possible to design an experiment in Qualtrics in which red and green squares are shown on a black background in a random sequence. Full screen. Basic set up: After each stimulus (a red or green square) the participant has to give a response by ticking a key (e.g. 1 for red and 0 for green). After each response there will be given feedback in the form of points to indicate whether the response was correct. These points will appear above the stimulus in the black background. The stimuli and the responses follow each other quite fast. There should not be anything other to click than a 1 or 0 as a response. So no 'next' button for example. I guess one stimulus equals one page, but there will be 100 trials. 100 stimuli per block. Expected data: response time after each stimulus, random sequence that is shown, responses that are given. Any information on the practicability is very much appreciated. Thank you in advance! Please also let me know i

40
Z
4 years ago
F
foreverstudent
asked in Custom Code
Can't delay next button in both online and mobile

I am trying to delay the appearance of the next button for 15 min to get my participants to listen to a recording before moving forward. I have tried different javascript codes, but cannot get the button to delay on both online and mobile previews. It only delays for mobile, If under "addOnload" or "addOnReady," I put: this.hideNextButton(900); this.showNextButton.delay(900); It disappears completely and never reappears on the online version, but remains on mobile if under "addOnload," I put $('NextButton').hide(900); If I put the above under "addOnReady," the page never loads at all. If I try adding a Timer question instead and setting the enable submit to 900s, it works for the mobile version, but not for the online version. For online, it disappears and never shows up again. What am I doing incorrectly?

320
F
4 years ago
E
exp1
asked in Custom Code
How can I hide answer box (in multi line text entry) until inserted video is fully watched?

Here is how our survey should look like: 1. We show different videos to our participants and after watching the video they have to answer a question. 2. Every video + question is on a new page. 3. Participants must watch the whole video, the question and the next button only appears after the whole video has been played. 4. Participants can start to write their answer only after the video is watched + question is displayed, since we want to make sure nobody's trying to cheat (=answering without watching the video). We managed to hide the next button until video is completed, we managed to hide the question until video is completed, however we cannot hide the answer box (we use multiline text entry, with the video inserted in the question box). What should we do to make it work? It is importan to have the video and the answer box in one question, because we will have to use randomization where every video has its own question and has to stay together.

433
rondev
Level 6 ●●●●●●
4 years ago
A
Ali5
posted in Custom Code
Draggable bar graph using Chart.js

Hi all, I posted this question before but it wasn't posted in a very read-friendly way, so here it goes again. I am trying to make a bar graph where you can drag the bars with the mouse. I am using Chart.js with its dragData pluggin, and I am using a source code of a demo provided in (https://www.npmjs.com/package/chartjs-plugin-dragdata, see Bar-Simple demo). I can see the graph perfectly, and the mouse becomes a hand when you put it in one of the bars (as it should be). However, it is weird, because I cannot move the bars. I think that the problem may be that I am not adapting the demo code to Qualtrics properly... But I don't know what else to try, so suggestions are appreciated. Thank you! Here are the steps that I follow: 1. Look and feel--&gt; Hearder(html) : ``` &lt;script src = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"&gt; &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js"&gt;&lt;/script&gt;

4220
A
4 years ago

Motivational Playlist

Terms & Conditions