AI Center
Events
Groups
Ideas

Experience Community
Developer Corner
Custom Code

Custom Code

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

7,441 Topics
23,546 Replies

When you subscribe we will email you when there is a new topic in this category

7441 Topics

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

190

5 years ago

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

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.

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!

460

5 years ago

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();

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?

5 years ago

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

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

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

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

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

5 years ago

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!

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.

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.

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!

5 years ago

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()

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!

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.

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?

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!

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!

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!

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!

Can I assign Scores to Hot Spot regions?

I would like to assign scores to the various regions in Hot Spot question and then have access to those scores in a Report.

What is the custom CSS code to bold the questions and keep the options regular?

Hello,I am currently designing a survey and I was wondering if someone could help me with the custom code to bold all the questions while not bolding the options to those questions on a survey. I also want to keep the font size and colour uniform.Since I am using a theme for my organization, I am unable to use the options under style in look and feel tab and need a custom code.I want it to appear like thisWhat is your opinion on xxx? (Bold)Option A (Regular)Option B (Regular)I hope you are able to understand my questionThanks in advance for the help

6280

5 years ago

Page 213 / 298

Motivational Playlist

Terms & Conditions

Sign up

Already have an account? Login

Social Login

Login to the community

Social Login

Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.

Enter your e-mail address

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.