Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,205 Topics
  • 22,586 Replies
7205 Topics
J
Jeanne
posted in Custom Code
How do I add an annotation (e.g., a definition, instructions, clarification) to the survey item??

Hello -- What, if any, options exist for offering the respondent a short definition, clarification, or instruction that would appear, say, when they hover over a particular word in a question or over a particular response category? Thank you.

1
rondev
Level 6 ●●●●●●
4 years ago
S
samars
asked in Custom Code
Pause a Video to answer Questions then Resume

HI community! In my survey, I want to embed a video and get it paused at a certain point then the participant should answer some questions after that I want the video to resume from where it was pause (maybe after clicking a "continue" button). Is there a way to implement that?

0
S
4 years ago
A
Augusto
asked in Custom Code
See survey response on iframe

Hi, i'm trying to see the survey response on an iframe but i've some problems, console show some errors.I am using a Matrix Table with Constant Sum as matrix type, with Scale Point as total box and Must Total as validation type, but the issue is related with the total box, matrix table doesn't show me the add up of the above scale points in the iframe but it's work properly when i see the response on qualtrics page.Do i need add some code or setting the Matrix Table to get the total value?I'm a rookie with qualtrics

2
A
4 years ago
C
CatK
asked in Custom Code
Styling the radio button (pseudo-element) on hover and focus

Hi there, we have used css to style our survey, so that the background is grey, and the text and borders of all elements are white.For single-answer multiple choice questions, we also have to style the pseudo-element radio button to be white as well using the following css:.Skin label.MultipleAnswer>span:after, .Skin label.SingleAnswer>span:after {border-color: #fff;}This works well. The problem we are having is when the participant hovers or focuses on the choice, the radio button turns back to grey. We have tried the following css to set the border colour of the pseudo-element, but with no success:.Skin label.MultipleAnswer>span:hover::after, .Skin label.SingleAnswer>span:hover::after {border-color: #fff;}.Skin label.MultipleAnswer>span:hover:after, .Skin label.SingleAnswer>span:hover:after {border-color: #fff;}.Skin label.MultipleAnswer>span:after::hover, .Skin label.SingleAnswer>span:after::hover {border-color: #fff;}.Skin label.MultipleAnswer>span:hover:after, .Skin label.SingleAn

2
C
4 years ago
B
BLURN
asked in Custom Code
Highlighting active rows in a matrix question instead of alternating rows

I've seen some Qualtrics surveys where a matrix row is only highlighted after you answer the previous row. I know how to highlight alternating rows but does someone know how to highlight either next unanswered row or highlight a row when you mouse over?Thanks.

1
TomG
Level 8 ●●●●●●●●
4 years ago
J
JannikeHarnisch
asked in Custom Code
How to add a word counter progress bar to text entry field

Hello everybody,I would like to add a word counter progress bar to text entry field. So the progress bar should not show the progress for the whole study, just for that specific text entry field. This is the code I would like to use: https://codepen.io/tinynow/pen/dJxDFbut I can't include the Javascript funktion into the HTML code. I was able to add the Jacascript funktion to my Qualtrics Question an the HTML in the editor, but I can't get it to work in Qualtrics. Do you know how it works?Thank you for helping!

2
J
4 years ago
U
urban_othilia
posted in Custom Code
Custom Javascript code not working when another question is added

I am trying to collect mouse movements in a Qualtrics survey. The problem is, the code works fine when there is only one question measuring the mouse movements but as soon as I add another question in a new block and apply the same code for that question, the results only store data from the second question.I tried changing the names of the variables for the second question, but it didn't work. How can I apply this code to more than one question and still store data for each question? Any advice/help would be appreciated. Thank you.Below is the code:/*Place your JavaScript here to run when the page loads*/ Qualtrics.SurveyEngine.addOnload (function() {/*Hide previous button*/ this.hidePreviousButton();/*Hide next button and auto-advance on choosing options*/this.hideNextButton();this.questionclick = function(event,element) { if (element.type == 'radio') { this.clickNextButton(); } }/*Hide radio buttons*/jQuery('input[type=radio]').hide();

0
U
4 years ago
C
CaroZ
asked in Custom Code
Time tracking for open answers with more than one field

Is it possible to track the time a participant needed to answer open comments with more than one line. For example there are 10 fields to answer openly, would it be possible to check how much time the participant needed for each of those 10 answers individually?

1
SurajK
QPN Level 3 ●●●
4 years ago
J
JMaca
posted in Custom Code
Back Button and Embedded Data

Hi there!Any ideas on how to 'erase' and 'rewrite' embedded variable values in javascript. I have a lot of display logic (to avoid using branched logic), but the display logic doesn't seem to work if I go back and change a response. And sometimes entire sections skip for no apparent reason. :-(I have tried using this...Qualtrics.SurveyEngine.addOnPageSubmit(function(type){ var that = this; if(type == "next")  {      Qualtrics.SurveyEngine.setEmbeddedData("Var1", jQuery("#" +that.questionId …and also..Qualtrics.SurveyEngine.addOnUnload(function(){ var that = this;  {      Qualtrics.SurveyEngine.setEmbeddedData("Var1", jQuery("#" +that.questionId …Any idea would be well appreciated!J

0
J
4 years ago
C
Cassidy
asked in Custom Code
How can I remove the sound/option to unmute a Youtube video?

I am trying to show a YouTube video to participants without sound. The file is too big to upload to Qualtrics directly, so I uploaded to YouTube and embedded the link into my survey. I had previously removed the sound from the MP4 file, but somehow YouTube un-removed it during the upload. Nothing I try in YouTube itself will remove the sound, so I am hoping that it is possible to remove once the file is in Qualtrics. Currently, I am using the following code:https://www.youtube.com/embed/dq4KhLsRCL0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>It auto-mutes the video, but does not autoplay or hide the controls. When I tried using the following code, it autoplays and hides the controls, but it unmutes the video so you hear the sound. https://www.youtube.com/embed/dq4KhLsRCL0?controls=0&autoplay=1" width="560">Without adding music, is there a way to remove the audio AND the controls, so participants cannot manually un

1
CamM
Level 3 ●●●
4 years ago
S
saphira
asked in Custom Code
Limit JavaScript to one block (prevent layout changes)

We are conducting a study in which one part is an IAT that was created with the web app iatgen and inserted into the JavaScript of a Text Entry Question. Through that the layout of the entire survey has changed. We would like to limit the JavaScript to the blocks which contain the IAT and leave the rest of the survey unchanged. However, we are unsure why the rest of the study is even affected. We guessed that it might be due to the following code about QuestionID:var qID =this.questionId;qID = qID.replace("QID", '');qID = parseInt(qID);I uploaded one of the 7 parts of the code. Any help is appreciated!IAT_part1.txt

2
S
4 years ago
J
JMaca
asked in Custom Code
Set Count of Group as Embedded Data in PGR

Hi there :)After working on this for a couple of hours with no avail - I figured I'd ask!I am looking to set the count (number of dragged responses) in a particular group (I have 3 total groups) as an embedded data variable. Does anyone have any ideas?Thanks in advance!j

2
J
4 years ago
Y
YJteo
asked in Custom Code
Randomising Logic for a 3 x 2 condition without repeats

Hi all,I am running a study with 2 independent 'author' variables, namely GENDER (male, female, org) x FORMALITY (formal, informal). This leads to 6 possible version of 'authors'. (i.e. Male Formal, Female Formal, Org Formal, Male Informal, Female Informal, Org Informal).I have 6 texts to be presented to participants, and the 6 'authors' to are to be paired with each text, such that one author can only be paired to one text once, without repeats.I have created all the possible conditions in separate blocks (sample):E.g. Org F 1 denotes: Org Formal Text1 and so on.I need to do a randomisation where the text order presented to the participant is randomised (e.g. text 1, text 3, text 5...).the 'author' attached to said text is randomised.But also such that if an 'author' is used in the preceding text presented, then it will be taken out of the pool, and not available for subsequent randomisation. I have attached 3 possible outcome flows for 3 different participants here:How do i structure

1
B
Level 2 ●●
4 years ago
C
cihannuma
asked in Custom Code
Passing/retrieving responses from select2 to backend

Hello,I'm using select2 to display answer choices for a multi select question. The list of possible answers is contained in a local JavaScript array and is quite large (nearly 700 unique choices). The choices render and selected without issues. However, when a user submits the survey, the answers they selected are not saved, and the corresponding field is blank. I have several ideas, including piping the selections to a dummy question as a free text response, but I'm not sure how to implement this. Would appreciate any suggestions!

4
C
4 years ago
B
BLURN
asked in Custom Code
How do you make an answer choice exclusive across statements in a matrix question?

I have a matrix question with multiple scale choices plus an "All". Example: "1 2 3 4 5 All"If "All" is selected for one statement, can I make that exclusive from the remainder of other the statements? In other words, if "All" is selected for one, all other answer choices in other statements are blocked.

3
SurajK
QPN Level 3 ●●●
4 years ago
J
Janus89
asked in Custom Code
Changing background color for single block

Hello everyone,unfortunately I am struggeling to change the background color for a whole block.Changing the background color for the whole survey or single 'descriptive text' is no problem but not for the whole block.The idea behind my question: I am asking the same questions for different areas of life. The color-scheme may help participants.

2
J
4 years ago
N
Nothanks
asked in Custom Code
Add my piped text to a Javascript code

Hi,I've added the following Javascript to add 5 days to today's date and write that to a descriptive text box. Qualtrics.SurveyEngine.addOnload(function(){ Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days);  return date;} var date = new Date();var answer=date.addDays(6) ;document.getElementById('output').innerHTML = answer;});How can I switch our the "this" to the text entry date of my previous question please? Thanks!

0
N
4 years ago
C
cphetmisy
asked in Custom Code
Allowing respondents to "undo" entry on TimePicker in a Matrix-type question.

I am using a Matrix-type question for respondents to indicate their upcoming weekly schedule (e.g., what time will you go to work on Monday?). Right now, I am using the 24-hour TimePicker code from Flatpicker (https://flatpickr.js.org/examples/#time-picker). My code works as intended except for one part: If participants are not working on a particular day of the upcoming week, we instruct them to leave the field blank. But with the code, if they click on that day, they aren't able to delete the time that appears in the box. Thus, they will HAVE to input an answer even if they didn't intend to. Does anyone know of any revisions I could make to my code to either a) allow people to delete times from boxes after already clicking on them, or b) allow people to input a non-time answer to indicate that they do not work on a specific day? Thank you to any insights! I am new to using code in Qualtrics. Here is my current code for the Matrix question: Qualtrics.SurveyEngine.addOnload(function()

2
C
4 years ago
L
LukeHochgesang
asked in Custom Code
How to insert "$" and "%" signs behind response boxes in matrix tables

Hi! I'm trying to insert "$" and "%" signs behind responses boxes in matrix tables to make the metrics more clear for survey takers. I've heard this might require Javascript. Does anyone know how to execute on this, or have any other ways in mind to accomplish this? Thanks!

3
rondev
Level 6 ●●●●●●
4 years ago
S
SedonaFlute
asked in Custom Code
Is there a way to use the JS Methods to access the Region (On/Off) data within a Hot Spot image?

I would like to calculate embedded data values based on the On/Off data within a Hot Spot image question. Basically, each Region would have a score associated with it. The JS would need to calculate the sum of the scores for any Region that is selected and store this in an embedded data value.I am new to Qualtrics and am only vaguely familiar with JS but if I can get a lead on how to do this, I can find someone who is experienced. I am open to phone discussion as that might help to describe my problem.Thanks for any help.

2
S
4 years ago
S
SedonaFlute
asked in Custom Code
Determination of HotSpot Region via Javascript

Is there a way, using JavaScript, to know the name of a Hot Spot Region that has been clicked?

1
TomG
Level 8 ●●●●●●●●
4 years ago
H
HelpPlease
asked in Custom Code
How do I make the graphic choices larger?

I have a question that involves selecting a smiley face that reflects their attitude toward an object (in this image I only have one of the faces for testing it out, but it'll actually be a spectrum). However, the icons are too small, and when I try to increase the size of the image it actually gets smaller! Basically I want them to be as large as the gray area around the smiles. The 9 choices need to be horizontal. Any ideas? Thanks!

2
H
4 years ago
C
ChaseB
asked in Custom Code
Question with custom code only works in preview mode

Hi all,I am working on a survey with custom code that embeds a Google Map for participants to choose a point on. My map appears normally in preview mode, but is blank when I go to actually take the survey. Additionally, the map worked fine within the published survey 3 weeks ago, but doesn't anymore (I didn't make any changes). Any advice on why it might be showing up in the preview, but not in the actual survey?Thanks!

0
C
4 years ago
M
Menno
asked in Custom Code
How can I keep the slider handle hidden until someone clicks on the slider?

To avoid my participants from being anchored, I would like to hide the handle until they click somewhere along the slider. I am entirely new to Qualtrics and have never worked with code like this before. On this forum, I found this code:var q = jQuery("#"+this.questionId);q.find(".handle").css('visibility', 'hidden');q.find(".track").on("click", function() {jQuery(this).find(".handle").css('visibility', 'visible');});But when I go to Look&Feel -> Style -> Custom CSS and paste this code, nothing changes for me.Any help would be greatly appreciated!

2
M
4 years ago
A
adaptive_matcher
asked in Custom Code
Embedding Text From Github in Survey Question Text

Dear Qualtrics Community, I'm new to HTML & Javascript and haven't been able to find a way to do this: I need to embed text from a .txt file (or a .js file, if that's easier) on my github page into my survey question text. Importantly, I don't want an iframe – the text from github should embed seamlessly into the surrounding question text in Qualtrics. I've tried jQuery.get and ajax, but haven't gotten them to work, so I worry I might be getting something fundamentally wrong. This is what I've tried so far: in HTML, and the following Javascript:Qualtrics.SurveyEngine.addOnload(function(){    var url = 'https://raw.githubusercontent.com/example_URL.txt';   jQuery.get(url, function(data) {        $('#GithubText').text(data);     });});(This is an approach I copied from here)As mentioned above, I'm a complete beginner – so any ideas on how to get this working would be much appreciated!! Thank you!

4
A
4 years ago

Motivational Playlist

Terms & Conditions