Custom Code | XM Community

Custom Code

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

  • 7,047 Topics
  • 22,084 Replies

7047 Topics

ChrisFAU
ChrisFAU
asked in Custom Code

Rank order query with carry forward, piping and ranking condition

Hi all 🤗,I was wondering whether I could get some help with a rank order question as I was unable to find anything in the forums.I currently have a rank order question which is carrying forward the responses from a previous question (Q1). In the rank order question (Q2), I want respondents to rank the top 3 statements they had selected from the previous question (Q1). I have tried using validation such as having respondents rank min 1 and max 3, however, if respondents select more than 3, they are still able to proceed with selecting ranking 1 or 2. Alternatively I have tried min 3 and max 3, however, if respondents select less than 3, they are still forced to rank 3 statements and unable to proceed.In addition, is there a way if a respondent only selects one statement (in Q1) to have it autocomplete rank 1 (in Q2) and then allow them to skip Q2 entirely?Any suggestions using any survey tools or JS would be greatly appreciated.Thanks!

0
ChrisFAU
3 months ago
H
Hemil
asked in Custom Code

Slider with option position

Hello, I want to change the option position in slider question, It looks something like this when customizing it, But when seeing it on frontend the option which is on the left comes on top like in following imageI want it to look something like this, Basically, Text Image and Slider all in same line. 

0
H
3 months ago
T
Tim Ebner
asked in Custom Code

How to import variables from JSON String in session storage / data layer

Hello,we have set up a key within the session storage of our project website which holds multiple variables in JSON notation.When I try to import distinct variables (e.g. LoginStatus) from this JSON object as embedded data by the intercept and catch the result up with our survey, the value is set to “undefined”. This is what I have configured in the intercept:Embedded data type: Value from JavaScript Value: window.sessionStorage.QUALTRICS_DATA.LoginStatus Name: LoginStatusThis is what I have configured in the survey: This data is stored when I take the survey:   Does anyone happen to know what I need to change in order to make it work? Best,Tim

0
T
3 months ago
E
Eliza1967
asked in Custom Code

Measure whether Embedded Tweet was liked/shared/commented/clicked

Dear Commmunity, I would like to measure whether a participant clicks on an Embedded Tweet, and especially whether they click on the like/share/reply button. I already figured out, how to embedd a post via Twitter, which then looks like that in the HTML View of the Text/Graphic Question<blockquote class="twitter-tweet"><p lang="en" dir="ltr">reminder to get up before your legs fall asleep</p>— X (@X) <a href="https://twitter.com/X/status/1743504138309132368?ref_src=twsrc%5Etfw">January 6, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>Which then looks like:  I also figured out how to measure whether a link was clicked (thanks to this post). And got it to worked with an unrelated link.However, when I apply it to either of the links in this embedding, it does not work. Furthermore, I do not just want to know whether someone clicks on the tweet, but especially, which of th

0
E
3 months ago
I
Isam
asked in Custom Code

Exporting Data using wep API call to SPSS format

Hi,I noticed that data exported manually to spss format is a little different than the data exported using API call using PowerShellfor example, my survey includes a file upload field, when I download the data using the browser (manually), I get a column with the file name, file size and file type, but when I download the data using PowerShell and call the web API, these columns came empty for the same dataset. also my script fails when I include some parameters in the call body for example  adding (surveyMetadataIds) to the body cause the script to fail do some parameters apply to only some data format? Thanks

0
I
3 months ago
A
asantoro
posted in Custom Code

Enable Text Selection

When a survey is accessed publicly, the text results generated on the very last page cannot be selected. I want for users of the survey to be able to select the entirety of text that is generated as a summary response from the publicly available page, not from within the account. I also realize there is an option to download a PDF, but this will not work for the process I am trying to improve.From what I can tell, Qualtrics has incorporated some code in their page to disallow text selection, even though it’s a really poor choice for security and usability. Has anyone found a workaround/force enabled text selection? Or know if it is code in javascript communicating with CSS?

0
A
3 months ago
ManfredBM
Level 5 ●●●●●
ManfredBMLevel 5 ●●●●●
asked in Custom Code

Auto-close mobile feedback screen

Hi,is there a way to automatically close the window/screen of a mobile feedback intercept after the completion of the questionnaire? I’ve tried to use a timer on the end-of-survey message, but this doesn’t work for mobile intercepts. Basically, I would like to trigger a tap on the “x” that’s displayed on the top-left of the mobile screen. Thanks,Manfred

0
ManfredBM
Level 5 ●●●●●
3 months ago
P
pavdit
asked in Custom Code

Defining touchend/ click event for .track element of slider question

Hello all!I am new to Qualtrics and web design. Thanks to this forum, I was able to create my very first JS code for my slider questions. But! After four days of intense learning to use the coding I have now identified a problem that might devalue all my efforts so far.I was testing my survey on a smartphone touchscreen and noticed that when I scroll the page, it is very easy to accidentally select an answer on the slider axis. This can easily invalidate my data from respondents, as they might not notice that they touched the axis and selected a different answer. Alternatively, they might get frustrated and not finish the survey.I noticed that when I choose different type of question like multiple choice question, the behavior on touchscreen is as desired – finger does not trigger selection when touching the answer option and then moving the finger, also long press and release at the same position on the answer does not trigger selection. I believe these two parameters might define wha

0
P
3 months ago
J
Jro95
asked in Custom Code

JavaScript Not Working on Mobile Devices

I have a JavaScript in my survey to calculate the difference between the date entered and the current date. It is working perfectly on a web browser, but not working on mobile devices.  The current code is as follows:Qualtrics.SurveyEngine.addOnPageSubmit(function(){ const currentDate = Qualtrics.SurveyEngine.getEmbeddedData("currentDate"); const currentQuestionValue = this.getChoiceAnswerValue(); const dateDifference2 = new Date(currentQuestionValue).getTime() - new Date(currentDate).getTime() ; Qualtrics.SurveyEngine.setEmbeddedData("dateDifference2", dateDifference2); console.log("Current Date: " + currentDate) console.log("Current Question Value: " + currentQuestionValue) console.log("Date Difference2 : " + dateDifference2)}); Anyone know how to adjust the code to make it compatible with phones? 

0
J
3 months ago
J
Level 1 ●
Jason Ling
asked in Custom Code

piping current date time for teams notification

I have my account set to GMT +8 and recently set up a workflow for Microsoft teams notification whereby the Survey End Date is piped in as part of the message.  ${rm://Field/EndDate} Unfortunately this piped text turns up in UTC instead of GMT +8 / respondent’s local time. Is there a way around this? i.e storing the date and time from the respondent’s location

0
J
Level 1 ●
3 months ago
D
DrGold
asked in Custom Code

Getting drag & drop items to disappear or resize after they were dropped

HI, I am trying to make drag & drop questions more user-friendly on mobile. A key UX issue is that an item resizes and overlays the groups once it is dropped. Has someone any ideas for a code which modifies an item once it was dropped to achieve either of:making the item disappear  preventing the item from resizing to a more narrow width I am pretty sure the drop event can be modified, e.g. from Jacobz1Qualtrics.SurveyEngine.addOnload(function() {    // Function to handle the item drop event    function handleDropEvent(event) {        event.preventDefault();        var data = event.dataTransfer.getData("text");        var originalItem = document.getElementById(data);

0
D
3 months ago
R
Level 1 ●
romanopLevel 1 ●
asked in Custom Code

Javascript only activates when going back and forward again

My javascript works, the only issue is that it only works when first going back to the page that has the questions and then press next again.  Each script is set to one question that has javascript. All QID questions are on one page, the survey also goes automatically to the next page after selecting an option for each multiple choice (single choice) question.Qualtrics.SurveyEngine.addOnPageSubmit(function () { var answer = "${q://QID212/ChoiceGroup/SelectedChoices}"; if (answer == 'Kromstraat 72/72a' || answer == 'Logeerboerderij') { Qualtrics.SurveyEngine.setEmbeddedData('Filter2_Logeren', answer); Qualtrics.SurveyEngine.setEmbeddedData('Filter16', 'Zelf doen'); }});Qualtrics.SurveyEngine.addOnPageSubmit(function () { var answer = "${q://QID250/ChoiceGroup/SelectedChoices}"; if (answer == 'Ja') { Qualtrics.SurveyEngine.setEmbeddedData('Filter2_NSO', 'Xieje'); Qualtrics.SurveyEngine.setEmbeddedData('Filter16', 'Zelf doen'); }});Qualtrics.S

0
R
Level 1 ●
3 months ago
B
benmiller314
asked in Custom Code

Conditionally pull a second value from contact list based on answer selection

In the survey I am building, respondents may select multiple options from a list of titles, each of which is associated with one or more dates. The list of titles and their dates is different for each respondent, and will be stored in a contact list.Based on the subset of titles a respondent selects, I would like to retrieve all the relevant dates so I can ask questions pertaining to those dates. Is there a good way to reference and then filter the embedded data from the contact list based on selected values? I suspect JavaScript will be important here, but it’s not my strong suit. To clarify, suppose we had a contact list formatted like this:email address titles dates one@example.com “Yes, this is an example.” || “Another example might look like this.” 2021 || 2018 two@example.com “I have a lot of titles to my name.” || “This title is not like the others.” || “Another example might look like this.” 2017 || 2022 || 2018  I am then posing a question like, “Which of these

0
B
3 months ago
B
Blexa62
asked in Custom Code

open link in a new tab window

Hello, I did use the target option and used the New Window (_blank), it works in my editor of the survey, however it doesn't  work in the preview nor in the published survey. The published html code is missing the target=_blank.this is in my survey editor :<a href="https://google.com" rel="noopener noreferrer" target="_blank">link</a> this is from published survey:Can you help me with this?

0
B
3 months ago
N
ntyulina
asked in Custom Code

Adding reaction time and number of audio playback times to each multiple choice question

Hi! I’ve been struggling with setting embedded data fields in the survey flow, so that they show up in the report. I have a number of multiple choice questions within one block (“Main Survey”), and I want to see both the reaction time (it is called cumulative reaction time) and the number of times an audio has been played for each of those questions. Here is my JS code (I’ve set a number of alerts to check if the code works, and it does give me correct values): Qualtrics.SurveyEngine.addOnload(function() {    // Get the audio element on the page    var QuestionID = this.questionId;    var audioElement = document.querySelector('audio');    // Check if the audio element is found    if (audioElement) {        // Set up variables to store cumulative reaction time and playback count        var cumulativeReactionTime = 0;        var played = false;         var playbackCount = 0;        var firstPlayEnded = 0;        // Event listener to capture the end of audio playback        audioElement.a

0
N
3 months ago
C
cape19ah
asked in Custom Code

Javascript Help - Want to show respondents how their result deviated from the actual result

Hi Everyone,My friend and I are currently creating a survey for our master project. To shortly describe the essence of the survey: we aim to provide the respondents with financial information (namely Revenue, Costs and Net Earnings), where they then need to predict the revenue and costs for the forthcoming year. Once they have done that, we would like the survey to display how far off they were (in percentage). We have tried to adjust the java script to incorporate it, but it just constantly says the answer deviated 100%. Do you know how to display how far off the respondents were once they have completed the survey?. We possess the unique IDs for input fields. However, it seems that it makes the deviation before the respondents have given their answer (hence the deviation of 100%). The code (sorry for the Danish phrases):Qualtrics.SurveyEngine.addOnReady(function() {    // Define the actual numbers    var actualOmsaetning = 100;    var actualOmkostninger = -80;    var actualAaretsResu

0
C
3 months ago
C
chloeeee12311
asked in Custom Code

How to fix the survey height

Hi I am seeking for a solution for making the survey without scrolling down. I used the dynamic theme, and the survey heigh sometime is shorter or longer according to the content. However, when the content is more then the height will excess one window range, then it need to be scroll down for checking the remain content. However, I would love to make sure my survey can be appeared within one window range.I have checked for this :  #SurveyEngineBody {-webkit-text-size-adjust: 100%;}  Then try to adjust 100% to 50%, but it doesn’t work for me. Could anyone give me some solutions or tips ?  

0
C
3 months ago
N
Nofar
asked in Custom Code

JavaScript for uploaded Video

Hello, I want to create a JavaScript script for an uploaded video (from the library) that will address the following issues:1. The video should appear automatically (autoplay).2. The size should fit various screens, especially laptops, cellphones, and tablets.3. Participants will not be able to click on the next button until the video reaches its end.For issue 1, I'm using this code:```html<video autoplay loop=true style="pointer-events: none; width: 80%">    <source src="my video" type="video/mp4" />    Sorry, your browser doesn't support embedded videos.</video>```For issue 3, I haven't used any code. Instead, I added another "timing" question to the page and delayed the display of the next button until the end of the video (I inserted the time it should stop).The problems I'm encountering are:a. The video continues to play despite the next button appearing at the end of the segment. The video loops, and I want to stop the looping and end playback when the video's t

0
N
3 months ago
D
Level 1 ●
DanielSpitzLevel 1 ●
asked in Custom Code

How can I set a timer to expel participants that takes too more or less than 20 mintues?

Hello,I have a problem with my experiment.I have a part in my experiment when participants have to wait for 20 minutes before proceeding to the next part. But since they do it from home and are paid for their participation, I would like to screen out and expel those who try to cheat their way and take less or more time to return.What I originally tried was setting embedded data variables:t1 - the time they reached the part where they had to wait (for example 14:20).t2 - the time they clicked to move to the next part (for example 14:40).t3 - subtracting t1 from t2 to get how much time they waited.This is the equation I created: $e{e://Field/t1 - e://Field/t2}Then I tried to set logic rules that if t3 is smaller than 17 or bigger than 25, they would be screened out. But it didn’t work.What did I do wrong? Is there a better option?Have a good weekend.Best,Daniel

0
D
Level 1 ●
3 months ago
B
Level 2 ●●
bhaemilyLevel 2 ●●
asked in Custom Code

Adding Timepicker to allow specific dates and times within a question

Hi there,I would like to know about how to set specific dates and times as options through JavaScript. While I’ve come across many articles explaining how to set up time, I haven’t found any that mentioned how to set specific dates and times “within the same question”.I’m curious if this is feasible and how it can be accomplished. Below is the code I’ve written so far, and currently, it allows setting dates, but I’m having trouble specifying the time：  I’ve reviewed some articles which indicates how to set up time picker, but it’s not in the same question with specific dates, and most important, we could not assign specific times through it. Any help or step-by step go through would be much appreciated, thanks in advance!

0
B
Level 2 ●●
3 months ago
R
raihanalam64
asked in Custom Code

Embedding a Third-Party Punishment Game

Hi, I was wondering if anyone has been able to create/knows how to create a repeated measures third-party punishment game? I have SMARTIQS template for it here: https://smartriqs.com/demos/but wasn’t sure how to get it to play multiple rounds (same assignments, allocation amounts don’t roll over but start from the beginning again). 

0
R
3 months ago
D
DBAC
asked in Custom Code

Utilising JavaScript for 2-tier Org Hierarchy function

I am experimenting with Qualtrics EX program for employee pulse surveys. These are run via an anonymous link that is distributed to all employees to complete. The first question that employees are asked is to select their “Group” and “Division” these are pre-set via an org hierarchy.The problem with this is, while you can force a response to the question, you cannot force a response on both levels. As in, if someone was to select their “Group”, then they are not forced to select their “Division” because the response requirement has been met. This can create incorrect results if someone fails to select their “Division”The only solution I can see while maintaining the Anonymous link, is to utilise JavaScript to create a 2nd force response in the one question, but I can’t seem to get it to work.This is what has been created so far. I have replaced the Group and Division names with dummy and divvy for this example. Note not every “Group” has a Division, Dummy3 is just a Group. “orgname” is

0
D
3 months ago
E
em_tee
posted in Custom Code

CSS code to change color of radio button in matrix question

Hello,In my organization’s 508 compliance review, they found issues with the color of hover-over highlighting across the questionnaire and around our radio buttons in matrix questions.We need to modify the hover-over to change colors, consistent with the recommendations from our 508 team. Would you be able to help me with codes to change the color of the hover-over focus highlighting across the questionnaire to be color contrast 508-compliant, to color code #3D7AB7 ? In this case, I would also need to change the text color of the radio buttons and question text to be white, #FFFFFF.  Additionally, the matrix radio buttons in our survey have a unique “shadow” around them that is not 508 compliant (see image). I want to remove the “shadow” and change button to have a white, #FFFFFF color when focused on/hovered over. I have not had any luck working with codes to remove the shadow/change the color of the button when hovered over/focused.  Alternatively, do you know of a way to remove the

0
E
3 months ago
V
Level 1 ●
Vi86Level 1 ●
asked in Custom Code

Javascript with multiple choice question, shopping cart scenario

Hello everybody,I am new to javascript. I am trying to imitate a shopping cart scenario. I have a multiple choice question where people are shown several products with price/kg. They are asked to select as many products as they prefer to buy. I am trying to dynamically show the amount of money they are spending based on the options they select at the bottom of the page, similar as in online purchases. After the multiple choice question I added a text question and under “Question behaviour” I wrote the script in the javascript. However, it is not working as the question which should show the total amount of money spent is not being updated. Thankk you very much if you respond!!! The script is:Qualtrics.SurveyEngine.addOnload(function() {    // Specify the question ID for the Multiple Choice question    var multipleChoiceQuestionId = 'QID1'; // Replace with your actual question ID    // Mapping of monetary values to choices    var monetaryValues = {        '1': 4.25,        '2': 2.10,   

0
V
Level 1 ●
3 months ago
U
ucychat
asked in Custom Code

Javascript Integration: Help Needed

Hi people,We had embedded the following javascript to embed a video and an emotion slider in our Qualtrics survey. Details of the javascript are below:Define various parameters, such as the URL of a video, its name, duration, time interval for sampling, and initialize vectors to store user input data Define a custom slider function (mySliderFunction) to create a graphical slider with a button that users can drag to provide input. The slider is visually represented on an HTML canvas using the Raphael library. Disable the next button on the survey page initially. Load a video element on the page with the specified video URL. Create an HTML canvas using Raphael and set up the endpoints of the slider. Initialize the slider on the canvas using the previously defined slider function. Play the video, set up a timer to capture user input at regular intervals. After a specified duration, stop the timer, save the captured data as embedded Qualtrics survey data,  display a message on the can

0
U
3 months ago

Productivity playlist

Terms & Conditions