Custom Code | XM Community

Custom Code

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

  • 7,033 Topics
  • 22,029 Replies

7033 Topics

A
ABA1
asked in Custom Code

Hide TOC button in selected pages

How do I hide the TOC button in some pages? This button is now between my back page and next page buttons. Thank you!

1
Nanditha MM
Level 3 ●●●
12 days ago
T
tchen
asked in Custom Code

Javascript to move the margin of a question

I have a multiple choice question after another question that I want to indent slightly. Trying to achieve something that looks like this: Question 1 (Indent) Question 2 (2-columned) (Indent) - choice 1 (Indent) - choice 2... I was thinking JS for the question rather than CSS since, CSS would change all the margins for that question type.

4
B
13 days ago
I
IndyMuk
asked in Custom Code

How to hide the playtime bar on a video in qualtrics

I’m trying to show participants a video (either via a youtube link, or with an uploaded mp3), but I would like to hide the video’s playtime progress/time bar. How can I go about doing this? Thanks!

2
Nanditha MM
Level 3 ●●●
13 days ago
X
XeniaW
asked in Custom Code

Javascript & HTML carry information over between question blocks

Hello, I’m currently working on an n-back task (both 2 and 3 back). For practice trials, I want there to be feedback, that displays when the participant correctly/incorrectly identifies a match.When clicking preview question/block, everything works as intended. However, when I preview the entire survey (multiple trials are shown after each other), only the first practice trial shows the right feedback. The other blocks are able to identify correct matches and responds to input, but it will only briefly flash “Correct” before switching to “Incorrect”. It does not matter if there are other, not practice trials in-between, the issue always occurs. I assume something is carrying over to the next question, but I’m not sure how to fix that, since I don’t have much experience coding (this is also why my code is pretty messy and probably not correctly implemented...): <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=devi

1
W
14 days ago
V
Level 2 ●●
V.E.Level 2 ●●
asked in Custom Code

n-back task on Qualtrics

Hi all,I’m trying to run the n-back working memory task on Qualtrics (using the JavaScript code from an existing academic paper: https://www.tqmp.org/RegularArticles/vol19-2/p136/p136.pdf), but when I try to use it in Qualtrics, I get the following error: “Invalid JavaScript! You cannot save until you fix all errors: Unexpected token )”. Any ideas of what might be wrong (e.g., indentations/spacing issues)? I’d really appreciate the help! Attached is a word document of the code. 

1
W
14 days ago
V
Level 2 ●●
V.E.Level 2 ●●
asked in Custom Code

Qualtrics n-back test

Hi all, I’m trying to run something called the n-back working memory test on Qualtrics, and I have the Javascript and HTML code ready (which is from an existing paper), and no error messages appear when I paste the code into Qualtrics, but unfortunately, the page for that question does not load even though the code appears to be working. I would appreciate if someone could take a look at the code attached, as I’m not sure what might be wrong (either with the code or the Qualtrics). Thanks in advance!

1
W
14 days ago
C
Level 2 ●●
Coraline.DeroletzLevel 2 ●●
asked in Custom Code

Logo according to langage

Hi everyone,I would need your help as I have a multi country survey so I created one project with several langage but my logo is different for one country.How can I adapt the logo for specific langage/country ? As the logo appears on each page of my survey!Thanks for your help.

10
P
16 days ago
A
Level 1 ●
arezzoLevel 1 ●
asked in Custom Code

NPS button format

Can I change my button style without changing the layout? I have a classic layout but would like to change my NPS buttons like these: 

0
A
Level 1 ●
16 days ago
rislis
rislis
asked in Custom Code

Graphic Added into Pick, Sort and Rank Box

I'd like to add an image to the box where items are sorted to. I tried adding the piped text of an image, but that didn't work. Any ideas? THANKS!

5
O
QPN Level 5 ●●●●●
16 days ago
I
Level 1 ●
IsadoraLevel 1 ●
asked in Custom Code

Piping a random image response from pick, group, sort into next question

Like many here I’m a JS novice so I am having a hard time understanding previous examples and how they can be adapted to my particular design. Goal: Show one of the faces categorized as familiar again.Question 1: 11 images are shown using a stack format for the Pick, group (sorting is irrelevant to me). They are asked to sort into Familiar and UnfamiliarQuestion 2: Please take a few moments to identify this person (Text entry response). My question is, how can I code Qualtrics so that question 2 has 1) a random draw of 2) ONE of the familiar response faces that is 3) PIPED into the question.  

7
O
QPN Level 5 ●●●●●
16 days ago
L
lisarisch
asked in Custom Code

Pick, Group and Rank question

Is there a way to add both text AND an image in the GROUP for a Pick, Group and Rank question?

8
G
Level 1 ●
16 days ago
O
oskr
asked in Custom Code

Restyling profile matrix buttons

Hey all –Trying to style the buttons in a profile-type matrix question so each column is a different color. (ie column 1 is green when selected, column 2 yellow etc etc)I’ve found this plus the snippet below and can get something similar to work for multi choice questions, but can’t figure out the right CSS classes I need for profile question. Any help appreciated! <style>.Skin #QID14 tr td.LabelContainer:nth-child(1) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(1) label.SingleAnswer.q-checked{background-color:red;}.Skin #QID14 tr td.LabelContainer:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}.Skin #QID14 tr td.LabelContainer:nth-child(3) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(3) label.SingleAnswer.q-checked{background-color:yellow;}.Skin #QID14 tr td.LabelContainer:nth-child(4) label.MultipleAnswer.q-checked, .Skin

2
O
16 days ago
L
Level 1 ●
LawrenceTLevel 1 ●
asked in Custom Code

Prepopulate a multiple response question

I know there is code to do this                 jQuery('input[type="checkbox"]').eq(0).prop('checked',true);but this doesn’t work if the multiple response question is randomised. As it just puts it into the first option that appears rather than option 1.SetChoiceValue doesn’t seem to work either only works for single response. Is there code to reference the actual option code?   

5
L
Level 1 ●
16 days ago
D
DHE
posted in Custom Code

Display questions horizontally

Is there a way to display two questions (of any type) horizontally next to each other instead of one below the other?The Qualtrics side-by-side function is limited to multiple choice and text entry.Any help is highly appreciated!

11
dekennedy7
Level 2 ●●
17 days ago
J
Level 1 ●
JessiHLevel 1 ●
asked in Custom Code

Let question fade-in delayed

Hi @ community!  I was wondering if there is a way to let a question fade in after a certain amount of time? I found the following post, where the author had a similar request, that a question appears after showing a video: I implemented this (especially the response with the adjusted version for the slider) and it works just fine. However, what I would like to implement is, that the question fades in instead of just all of a sudden appearing. I’m using the following code from the question answer at the moment as I also have two questions with a slider: var q="#"+this.questionId;jQuery(q).css("content-visibility","hidden");setTimeout(function () {jQuery(q).css("content-visibility","visible");},5000);How could I adjust this code, that it fades in a bit softer than just popping up? I found something online with a “fade.In(‘slow’)” attribute - but I don’t really know how to implement it.  Thank you in advance! 

3
O
QPN Level 5 ●●●●●
17 days ago
A
Level 2 ●●
ar03Level 2 ●●
asked in Custom Code

Hiding and showing slider question

I am trying to use JS to initially hide a slider question. I have a 2 sec fixation cross which should appear while the slider is hidden, and then the slider and an image appear. I have tried various methods to hide the slider question but they are not working. If I use: var q1 = jQuery(".QuestionOuter:first"); and q1.hide() and q1.show() the question is hidden/shown as desired but the functionality of the slider is impacted and it cannot be dragged (see image below).If I use:     var q=("#"+this.questionId);jQuery(q).css("content-visibility","hidden"); and jQuery(q).css("content-visibility","visible"); The slider does not hide as desired. This is my full code: Qualtrics.SurveyEngine.addOnload(function() {  var images = [      "https://cambridge.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_yV5FFwBXvaa9Ju3",      ];   // create fixation cross element       var fixationCross = document.createElement("div");  fixationCross.innerHTML = "+";  fixationCross.style.fontSize = "48px";  fixati

1
O
QPN Level 5 ●●●●●
17 days ago
F
fzd999999
asked in Custom Code

Making border around the text smaller

Hi, I wonder if anyone would mind providing some guidance on how to make the border around text smaller. I used the JavaScript jQuery("#"+this.questionId).css("border","2px solid black"); to create the border around text in Qualtrics. However, the border was way larger than needed (see screenshot below). Is there any way to make the border smaller by any chance?  Any help will be greatly appreciated. Thank you in advance!

0
F
17 days ago
L
LilyR
asked in Custom Code

Adding a Help Button to appear on every page

Hi all,I am interested in creating a Help Button that will appear at the top of every page. When clicked on I want it to display the same set of generic instructions.I have seen information about programming something like this for individual questions, but I am looking for something larger scale/less tedious.An idea I have is to utilize the Header area to input code to create this button, but I am not sure what this code would look like (im not a programmer!). It would need to be advanced enough to include page breaks. It is also essential that this button’s instructions have an “x” so that they can close them and continue answering questions with ease. This survey will need to be compatible for mobile use as well. Thanks so much for your help on this!

0
L
18 days ago
Q
qxmhelp
asked in Custom Code

Auto advance after 1 minute if no answers, but only allow to advance sooner if answered

Hi all, I come to you in desperation as I have (unsuccessfully) tried no less than 15 ways to get this to work. I have a block with one instruction text and six free response questions. This is all on the same page. I need one of two things to happen before the participant can advance. They can either answer all of the questions (so type anything into all six text boxes) and advance at any time OR if it has been 60 seconds, it can be submitted as is (even if that means it is unfinished), but they cannot submit unfinished answers if it has been less than 60 seconds. I truly can’t get anything to work and would really really appreciate any insight. Thanks so much in advance!

0
Q
18 days ago
S
Selena123
posted in Custom Code

Email Invitiations

Hello, Does anyone know how to edit or control what is displayed in the preview of an email when sent to participants. We would like it to mention certain words in the inbox. I know it requires HTML coding. Thanks

3
Tom_1842
Level 8 ●●●●●●●●
19 days ago
Piotr
Piotr
asked in Custom Code

How to hide radio button element in matrix question

Hello! I am struggling with hiding radio button element in Qualtrics. I have a transposed matrix question, and I am trying to hide some specific radio buttons. I was trying to use below codes: <code>$('QR~QID392~5~14').hide(); </code> <code>$('QR~QID392~5~14').style.visibility = 'hidden';</code> However none of them is working. Would be grateful for any advice!

9
TomG
Level 8 ●●●●●●●●
19 days ago
I
IsaN99
asked in Custom Code

Matrix table - drag & drop horizontally aligned

Hi! For my research, I would like to use the Matrix table - drag & drop. Mainly because Qualtrics does support scoring in this question type but not in 'select, group and rank'. However, I would like to have the items horizontally above the 'answer boxes'. In addition, the largest questions consist of 8 boxes and 18 items. Unfortunately, the combination of the following javascript code & CSS codes do not work for this. I have already tried replacing the PGR in the CSS code with jQuery, but this does not give the desired result either.   Javascript: Qualtrics.SurveyEngine.addOnload(function(){/*Place your JavaScript here to run when the page loads*/ var qid = this.questionId;var lastrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table tr:last'; jQuery(lastrow).after('<tr>...</tr>'); }); Qualtrics.SurveyEngine.addOnReady(function(){/*Place your JavaScript here to run when the page is fully displayed*/ var qid = this.questio

2
I
19 days ago
G
QPN Level 2 ●●
GreyGhostQPN Level 2 ●●
asked in Custom Code

Simple Layout - Update CSS w/ JS

I have an unusual situation where I need to control the Look & Feel of different brands in a single survey. We are locked into the “Simple Layout” and I have most of the JS working with the exception of a few selectors giving me trouble. The various brands are getting passed in by a web query so it’s all controlled by the JS in the Header. Here’s one example - Matrix Column Bottom Border ColorjQuery(".matrix .matrix-table .matrix-scale-points-item.hover").css({ "border-bottom-color" : "#5e5e5e"});Unfortunately, I cannot seem to figure out how to update the color for the mouseover/hover/focused effect. Any ideas?  

2
G
QPN Level 2 ●●
20 days ago
D
Dav92
asked in Custom Code

.css to set every answer box with the same width

Good morning. My goal is to make the boxes in the image become the same size in width and height. Not being familiar with css I tried to search into this forum for other users who had the same problem but I did not find the perfect code and all the attempts made did not give the correct results or they give no results at all. Could someone give me a code to insert in the custom css of the look and feel page? Thanks so much for the support

2
G
Level 1 ●
20 days ago
B
bcayir
asked in Custom Code

Help editing the range for the graphic slider thermometer (feeling thermometer)

Could someone share the code for editing the range of the graphic slider thermometer from 0 to 100?

0
B
20 days ago

Productivity playlist

Terms & Conditions