Custom Code | XM Community
Skip to main content

Custom Code

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

  • 7,442 Topics
  • 23,547 Replies
7442 Topics
A
Anonymous
asked in Custom Code
Booklet type Image

Hi All,Is it possible to show image like Front page of book click on image to see next page of book, cick again to see end page.TomG I think you mentioned this in some post, can you suggest if possible and how.

100
A
L
LH_Qual_User
asked in Custom Code
Increase Font for Single Question

Hi, I searched earlier and thought I saw something but now I can't find it. I am looking for a CSS example of bumping the font up for a few questions and the answer choices (not the whole survey) The majority of survey is administered by an interviewer but a few questions we hand over to respondent and need to increase font size. I know I need the QID but what elseThanks!

1810
MatthewM
Level 6 ●●●●●●
MikeW
Level 5 ●●●●●
MikeWLevel 5 ●●●●●
asked in Custom Code
How do I make the first row of a matrix table (text entry) read only

I'm using the text entry Matrix Table.I've used 'Add default choices' to pipe in answers from a previous question into the first row of the table, but I would like to make those answers read only.

1010
MikeW
Level 5 ●●●●●
C
CrystalZav
asked in Custom Code
Creating expandable/Collapsible sections for survey taking (not creating)

We're trying to create an online order form for our Pharmacy and Convenience Store at our univeristy so students can order items in advance and pickup while our campus is mostly remote and our store is not open for shopping/browsing in during COVID. Since there is so many products to feature, we want to categorize them by function, and have each section expand and collapse to create ultimate user friendliness. Here is an example of another university's page that is doing this to view as an example: https://campushealth.unc.edu/order-over-counter-items-campus-health-pharmacyI'm under the understanding that custom java is the only way to accomplish this, but i am not a programmer and don't know much about creating code. Is anyone able to help us accomplish this?

2150
C
L
LH_Qual_User
asked in Custom Code
Is there Javascript to limit an answer choice to a single word?

Is there Javascript to limit an answer choice to a single word in an open-end text field?

80
L
M
mjs5zx
asked in Custom Code
Use Javascript to set a new value for an embedded data variable based upon a selected choice

I want to use javascript to set a value for an embedded data variable based upon a selected choice. I'm not familiar with JS, so here is my poor adaptation from the JSI example from Qualtrics (with most of it commented out). I'm basically using this variable to change the descriptive text. The variable "ModeScript" has a default value established int he beginning of the survey flow. Since I need it to change within a block, I'm trying to use Javascript to change it if someone selects the recodedvalue choice three. Qualtrics.SurveyEngine.addOnload(function() { //create Qualtrics.SurveyEngine.QuestionData object Qualtrics.SurveyEngine.addOnload(function () { //disables the next button on the page //this.disableNextButton(); //question click is a simple onclick handler //attached to the question's container div this.questionclick = function(event,element) { //by default you get the click event as the first parameter and the clicked element as the second p

11320
TomG
Level 8 ●●●●●●●●
L
LukeP
asked in Custom Code
My Modal Pop-Out Window will not appear in Qualtrics

Hi all!I'm not proficient at HTML/CSS/JavaScript, but have utilised the three of them in order to produce a modal pop out window in the question text . There is a little info "i" icon I have added in, which when clicked, will cause the modal window to appear with some extra notes to answer the question.The code I have works in jsfiddle.net, but when added to Qualtrics, it will not create the modal window. See here for my jsfiddle code (https://jsfiddle.net/luke_pascoe/28c4vzah/32/). The code is below. Apologies for the long list, but I would greatly appreciate any assistance with what went wrong.I have added this to my survey:JavaScript:$('.launch-scroll').on('click', function(e) { $('#modal-scroll').modal({  show: true });});CSS:.modal {  overflow: hidden;}.modal .modal-body {  height: 500px;  overflow: auto;}.modal-button { border: none; padding: 0; background: none;}/* LUKE CSS Table Fixed Width */body { padding: 14px; text-align: left; font-family: Century Gothic;}table { width: 10

2170
L
R
Raymundo
asked in Custom Code
Result of a text box calculation DataE (Resultado de un calculo delante del textbox & Dato Embebido)

hello I will appreciate your supportI have a text box where a number is entered, and it should calculate a sample size, which should be saved in an embedded data and displayed at the end of four of the same question.My problem is that my code is activated only if after adding the number I must click on another question and then the script question.code:Qualtrics.SurveyEngine.addOnload(function(){ var tamuestra;var inputs = $(this.getQuestionContainer()).select('input[type="text"]'); var input = inputs[0]; $(input).insert({before: ' '}); $(input).insert({after: ' '});this.questionclick = function(event,element)  {     console.log(event, element); var choiceNum = this.getChoiceValue(1); if (choiceNum != '') { tamuestra = Math.round((0.9604*choiceNum)/((0.0025*(choiceNum-1))+0.9604));   if (choiceNum < 50) { tamuestra = choiceNum; } $(input).insert({after: 'Tamaño de muesta: '+tamuestra}); Qualtrics.SurveyEngine.setEmbeddedData("ExternalDataReference", tamuestra);//lo guard

150
R
Q
QubieDK
asked in Custom Code
Script to Move Language Selector Box Flashes for Split Second On Page Load

Hi, Thanks to code in another post from Tom G, the following script allowed us to move the Language Selector Box down below the Next button. Here is a sequence to the problem: 1) Welcome page loads, Language Selector Box (LSB) displays below Next button. (good!) 2) Click Next to go to next page, LSB flashes below Next box for split second then disappears. (bad) 3) Press Back to go back to Welcome page, LSB flashes below Next box for split second then disappears. (bad) 4) Now clicking Next or Back (any page change), LSB flashes below Next box for split second then disappears. (bad) My question is, how can I stop this "ghosting" effect? Any ideas welcome. Here is the script we are using: &lt;script&gt;Qualtrics.SurveyEngine.addOnload(function() { jQuery("#Buttons").after(jQuery(".LanguageSelectorContainer"));});&lt;/script&gt; Thanks, Derek

480
S
L
Labuser
asked in Custom Code
Questions Div Width

I'd like to make the questions div take up the full width of the parent div. Looking around in the source elements, it looks like what I want is to get SkinContent to 100% of the width of SkinInner, but none of the obvious custom CSS seems to work (e.g., #SkinContent{width100%}). I appreciate any tips folks have.

230
L
D
Dhara
asked in Custom Code
How do I change the position of the Language Selector Box to be on be on the centre top of the page?

Currently the language box is awkwardly on the right in between the title and description. I need it to be at the top so that it is between the Progress Bar and the Logo of the survey.

1710
S
N
NIcolas
asked in Custom Code
Capture response with Javascript

I need to capture the response of text entry questions (and one single choice question) to manipulate them and then store them as embedded data. I know how to identify questions IDs and how to create embedded data fields with JS, but I don't know how to get the answers after participants submit them. Any help is appreciated.

11250
TomG
Level 8 ●●●●●●●●
C
Calfoy
asked in Custom Code
Randomize embedded data with no repetition

Hi all, I want to randomly present 20 pictures, which are randomly paired with 20 sentences. The order for both pictures and sentences are expected to be randomized. However, if I use loop and merge, the pairing between pictures and sentences will be fixed; if I use embedded data function, The pictures and photos will appear randomly in each iritation so that the same picture/ photo will show up multiple times. Is there any way I can achieve this? Or any hint on using Javascript to achieve this?Thank you so much in advance!!!

2740
Akdashboard
Level 4 ●●●●
M
mchadwickIT
posted in Custom Code
JavaScript code to add Dollar Sign to rows in matrix table

Hi there, first time asking a question here as I've been looking around for an answer to this question and it looks like this is going to be a complex question that may require me to go to support.What we are creating is a survey that is essentially a form to input data about basic personal investments. In order to accommodate a bulk entry from a single entity, we decided to go with a matrix table that has text entries in an 6x5 matrix. Now some of the rows will be Investment name which is text, year of first investment (number formatted to 4 digits), and then a dollar amount. Each column is an entry into this survey.I'm able to format the year properly using javascript and I've found some code to add a dollar symbol to a column along with formatting a column using either cleave or wNumb to format the input for a column, however I'm unable to find to modify a row. For example this one for adding a $ sign to column "c4" and % to column "c5"    function hasClass(element, cls) {        re

970
M
A
abhisek_sharma_abhi
asked in Custom Code
IMPORTANT!!! Can anyone provide me the code for this survey. link in description

please check here : https://www.surveys.online/jfe/form/SV_6QCBx48f9l67sSpI need to make look like this survey. Clickable single question. please checkout and if you know please give me the javascript or custom css that make like this. Please Client need

80
A
E
Eichhof
asked in Custom Code
Creating matrix table with special dropdown list

Hello everybodyI'm currently creating a survey. In the attachment you can see a picture how the survey looks like. I like the mobile version (right) very much. The browser version (left) I don't like that much because the table is big and users might forget about the headers (and repating headers looks ugly).Currently I'm using a matrix table with likert matrix type and single answer (and force response). Is there a possibility to get the same for the browser as for the mobile version? I tried the Dropdown List but that is not exactly the same.

710
E
M
Mia1234
asked in Custom Code
Pre-populate Multiple Choice Question

Hello, I'm trying to utilize javascript in a side by side question in my survey but unsure if the custom code is possible. For example, I have 2 columns and In column 1 if the user selects "No" I would like to have "N/A" Populated column 2 if the user selects no in the previous column.

140
M
F
FNMN
asked in Custom Code
How to embed an external website to a survey?

I am looking for a possibility to just show one question and the next page button at the top of a survey and below an iframe of an external website.When the participant clicks on the next page button the current URL of the embedded iframe website and the duration for that survey page should be saved.I have found a tutorial for embedding another website/tool within a Qualtrics survey but with another purpose: https://kywch.github.io/jsPsych-in-Qualtrics/hello-world/Is it possible to achieve my described scenario and if yes, how?Thanks in advance.

2250
F
J
jmcphetres
asked in Custom Code
How to name embedded data fields using loop & merge values

I've got a survey where I'm using loop & merge to loop through a few hundred images with links (participants see a random subset).I am using javascript to record whether they click on the link provided, and it records an embedded data field with a 0 or a 1, like this: Qualtrics.SurveyEngine.addOnload(function() {  $('link').on('click', function(name, event) {    Qualtrics.SurveyEngine.setEmbeddedData("clicked${lm://CurrentLoopNumber}", '1')I know that I need to have an embedded data field created in my survey flow, so I can create a few hundred embedded data fields.The problem is that I want to name the embedded data fields with the information from the loop & merge fields (this would contain the image ID, for example).I don't really want to have to create several hundred embedded data fields by hand, one with each image id.Is there an easy way to simply pipe in the Field/1 values from loop & merge?

700
TomG
Level 8 ●●●●●●●●
J
JulianOldmeadow
asked in Custom Code
Javascript to Auto advance to next block upon response

Hi,I want to set my questions to auto advance upon a response (single answer radio button, bipolar scale). I have only one question at the end of each block, so it would need to advance to the next block. I have tried various codes provided by others such as below, but it doesn't work. I have tried it in preview mode and in published mode. I would also like to hide the Next button.Thanks for your help.Qualtrics.SurveyEngine.addOnReady(function(){ var that = this; var answers = $$(".SingleAnswer"); for(var x = 0; x

380
J
C
cjohnburke
asked in Custom Code
Changing number of fields in a questions based previous numeric answers

Hi Everyone,I was wondering if anyone had experience of the following. I have a survey question asking how many credit cards a respondent owns and how many store cards a respondent owns, each up to a maximum of 5 cards.In a follow-up question, I want to ask what the balance is on each card, with one line appearing for each product. So if a respondent has 2 credit cards and 3 store cards, there should be 5 lines appearing, as follows.I can implement this using hidden choices and display logic, but it requires 10 lines of logic. And in reality, I have 10 product types, meaning 50 lines of logic.Is there a better way of achieving the same result? E.g. can I somehow record the 5 products the respondent has in a table and then subsequently refer to that table? Thanks!

2360
TomG
Level 8 ●●●●●●●●
K
Kara_C
asked in Custom Code
Drop down custom validation

I have a drop down question asking individuals to report the age that they did a task with their youngest child. I have a question earlier asking individuals to report the age of their children - also a drop down. The reason why we are using drop down is so we can have a response option be "less than one years old." Is there a way to validate such that the age the person selects is less than the age that they reported for their youngest child earlier? Thanks!

260
K
K
Kara_C
asked in Custom Code
Transpose side-by-side

Hello,I am working on a survey where we take an inventory of all the children an individual is currently raising in their household. I used a side-by-side to get each column to be a variable of interest with children listed as the row variable. Attached is a screenshot of the question.I was wondering if you can transpose side-by-side questions - so that the children would be the columns and the characteristic variables would be the rows. Thank you!

960
K
R
rrauser
asked in Custom Code
How do I use custom validation to prevent future dates from being entered?

I have a date column in a SbS question with the format dd/mm/yyyy. Can I add a custom validation condition with regex or otherwise to prevent any future dates from being entered?

1080
R
A
AliceT
asked in Custom Code
Custom timer - progress to next block without waiting for response

I have a block where each question is separated by a page break. Users are forced to answer each question before moving to the next one, and only have 2mins to complete as many questions as they can. I have a custom timer on the first question in the block from here: https://stackoverflow.com/questions/47317718/how-to-use-automatically-move-respondents-in-qualtrics-with-global-timer-for-blo The timer works great, but once the timer is up the survey waits for a response on the current question. I want the survey to progress to the next block once the timer is up, regardless of whether the user has answered the current question.

5940
Y

Motivational Playlist

Terms & Conditions