Developer Corner | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago

Developer Corner

Discuss developer and custom (HTML, CSS, Javascript) solutions, best practices, & more

9431 Topics
G
Level 1 ●
GT87Level 1 ●
asked in Custom Code
Random number doesn't show in HTML + Javascript block

I have a survey in which I have the partecipant clic on a image and then will be shown a number generated with an embedded variable, at the starto of thee survey. So at the start of the survey i create 2 embedded variables in a block ‘randomNumber1’ and ‘randomNumber2’, two random numbers. Then some blocks below I create a block where i use Html to generate the text and to insert the image: <div class="container"> <p id="instruction"> This is a trial task.<br><br> What is requested of you is to roll the dice and report the outcome of the roll.<br><br> Every unit of the die is $10.<br><br> This means that the minimum amount to be donated by each participant is the minimum sum achievable from rolling the two dice, namely: 1 + 1 = 2 × $10 = $20.<br><br> The maximum amount that could be donated, on the other hand, corresponds to the maximum sum achievable from rolling two dice, which is: 6 + 6 = 12 × $10 = $120.<br><br> <u>Please note that only you will know the outcome of the roll: other

394
G
Level 1 ●
M
Level 1 ●
M414Level 1 ●
asked in Custom Code
Help with Custom Progress Bar

Hi everyone, I’m trying to manually control the progress bar in my survey to update at specific points (e.g., after certain key questions) rather than relying on Qualtrics’ default logic. My goal is to dynamically update the progress bar percentage and ensure it retains my custom settings across the survey. I’ve come across several posts and solutions, including Change value of the progress bar. From there, I used the following code: jQuery("div.ProgressBarFill").css("width", assignedProgress + "%"); This works initially for the specific questions where I add it, but as soon as I move to the next question, the progress bar reverts to Qualtrics' default logic. Since my survey has many questions, applying this code to every single one isn’t practical. Is there an easier way to dynamically override the progress bar logic throughout the survey, ensuring that the progress bar retains the custom percentage from the previous update until the next custom update is applied? Thank you in advance

1288
M
Level 1 ●
Paul_Farrell
Level 2 ●●
Paul_FarrellLevel 2 ●●
asked in Custom Code
Convert system captured End date to dd/MM/yyyy and drop time stamp

Hi, Would there be a piece of custom JS that would convert the system generated Survey End Date captured from a dd/MM/yyyy hh:mm:ss to just dd/MM/yyyy. For 99% of onward analysis outside of the Qualtrics platform where would look at results by date, we usually end up removing the hh:mm:ss element of end date within Excel to strip it out to a straight date format. Thanks in advance

272
Paul_Farrell
Level 2 ●●
Nanditha MM
Level 4 ●●●●
Nanditha MMLevel 4 ●●●●
asked in Website & App Insights
Mobile App Feedback Implementation Using SDK

Hi, I need more information regarding the mobile app feedback feature as we plan to implement it in one of our projects. How can we test the mobile app using SDK. Which app should we refer to for this. Additionally, what details should we provide to the client, apart from the Brand ID, Project ID, and snippet code once the deployment is complete. Thank you in advance.

210
Nanditha MM
Level 4 ●●●●
P
Level 1 ●
PhilBLevel 1 ●
asked in Website & App Insights
How do you access localStorage values as embedded data? They always return null.

I have a Website/App Insights with a Feedback button Intercept/Creative. Under Embedded Data I have Use Value from Javascript with the following value: window.localStorage.getItem("1") This line works when I run it in the browser console. However, this is reported as null in the Results of the Survey. Is this a scope issue, or is there another way to get Local Storage as Embedded Data?

6546
Adam_Jermain
Level 2 ●●
A
Level 3 ●●●
AineLevel 3 ●●●
asked in Custom Code
Code to set up a privacy policy popup

Hello community I need your help...Does anyone know or have an example of how to create a privacy policy popup in a survey project? From what I've been researching, you need to add CSS code and code in the JavaScript session of the survey ... Can you help me with that... Thank you very much!Regards

11311
A
Level 3 ●●●
B
Level 2 ●●
baharsenerLevel 2 ●●
asked in Custom Code
Custom code js works in question preview but not survey

I believe similar questions have been asked quite a bit, but I have not seen a solution. I made a drag-and-drop question, which works just fine when I preview the question but does not work if I preview the block, preview the survey, or take the survey. The JS portion of the code is below, and I would appreciate it if anyone has any insight on how I could make it work! Thank you! Qualtrics.SurveyEngine.addOnload(function () { const draggableIcons = document.querySelectorAll('#breakfast, #dinner'); draggableIcons.forEach(icon => { let isDragging = false; let offsetX, offsetY; // Start dragging icon.addEventListener("mousedown", (event) => { isDragging = true; offsetX = event.clientX - icon.getBoundingClientRect().left; offsetY = event.clientY - icon.getBoundingClientRect().top; icon.style.cursor = "grabbing"; // Change cursor on drag event.preventDefault(); document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); }); // Handle dragging functi

1257
A
Level 7 ●●●●●●●
B
Level 2 ●●
baharsenerLevel 2 ●●
asked in Custom Code
Broken images!

Hello, I am working on this custom html question, the images display fine in my preview but like broken images on the survey preview (adding in a screenshot). Does anyone know why this may be the case? I am also pasting my code below. <!-- Main Container with Background Image --> <div style="position: relative; width: 600px; height: 600px; background-image: url('https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VHOdoYnAyqTK5Lt'); background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid #ccc;"> <!-- Grid Cells --> <div class="grid-cell" data-location="R1C1" style="position: absolute; top: 40px; left: 20px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; box-sizing: border-box;"> </div> <div class="grid-cell" data-location="R1C2" style="position: absolute; top: 40px; left: 200px; width: 190px; height: 190px; border: 1px solid rgba(0, 0, 0

302
B
Level 2 ●●
MikeW
Level 5 ●●●●●
MikeWLevel 5 ●●●●●
asked in Custom Code
Javascript syntax to loop picking up values from previous question

I’m trying to loop through various variables from a previous side by side question to include as values in a matrix question. I’m using the code below. The commented out line works when there is just one value to include, but doesn’t work when I try and add loop using “/ + i + “. Is there syntax that does work/ another way of doing this? n.b. I’m not using piping as there will be hundreds of values for (var i = 1; i <= 3; i++) { //var previousValue = "${q://QID182#1/ChoiceTextEntryValue/1/1}";var previousValue = "${q://QID182#1/ChoiceTextEntryValue/1/" + i + "}"; jQuery("#QR\\~QID183\\~" + i + "\\~1\\~TEXT") // Target row i of new question .val(previousValue) // Set the value from the previous question .trigger("input") // Trigger an input event to update the field .trigger("change"); // Trigger a change event to notify of the change} Thanks

483
TomG
Level 8 ●●●●●●●●
I
ian_c_young
asked in Qualtrics API
Automating Qualtrics Survey Creation Using R statistical software

In Qualtrics I have a general survey template that I use to make hundreds of surveys. These surveys are almost identical with the only difference between them being certain words on the surveys vary between surveys (e.g., client name, various brand names, etc.). The questions and structure of the survey remain the same. Currently I have to duplicate a survey and the search and replace brand names, and repeat. I am most familiar coding in R and would love if possible to find a way I can automatically create these surveys in R using a package like httr2. My general thought is load in .qsf file of template into r. Make relevant changes to the qsf file for any number of surveys, and then have those surveys automatically created in my Qualtrics account. Has anyone done something like this and can give guidance on the workflow?

983
I
M
mdarbyo
asked in Custom Code
Hiding "Powered by Qualtrics"

Is there a way to hide the "Powered by Qualtrics" element at the bottom right of the page? I've tried a bunch of different combinations of custom CSS and nothing seems to be able to override the !important modifier for that element.

258320
MSobotta
Level 4 ●●●●
Aggarwal
Level 4 ●●●●
AggarwalLevel 4 ●●●●
asked in Website & App Insights
chat button and ask question button on the mobile

I just noticed while using community over phone that ask question button is hidden by the chat button. Are others also seeing same problem? ​@AlonsoC is it a known issue or is only on my Android?

492
Aggarwal
Level 4 ●●●●
S
strugglingstudent
asked in Custom Code
Need question to go automatically

I’m building a task on qualtrics where participants are shown images for a short amount of time and then asked 2 questions on a different page. I need the images to move automatically without having to click on any buttons. In addition, I need the arrow to disappear completely as it’s slightly distracting. I’ve tried the Look & Feel but it does not work for my purpose. Is there a way to hide this for certain questions but not for others?

625
S
S
QPN Level 2 ●●
sonpageQPN Level 2 ●●
asked in Custom Code
How to change the size of response buttons in a survey question

Qualtrics support says we can change via custom code the response buttons themselves in terms of size and look, but didn’t provide a specific solution. Does anyone know how I can change the size of these grey boxes containing Yes and No choices?

512
c.rose
Level 2 ●●
L
Lgimenez
asked in Integrations
Can't integrate react-native-qualtrics with my project

When I try to initialize Qualtrics on my project, I receive this message on my initializationResult.I'm using react-native-qualtrics 2.8.0 and react-native 0.71.18. {"message": "java.io.IOException: Invalid response received from requested url: https://zn3ht3bkhhugvqxf0-localiza.siteintercept.qualtrics.com/WRSiteInterceptEngine/AssetVersions.php?Q_InterceptID=SI_54to4ZtXOYPA7Z4&Q_CLIENTTYPE=MobileAndroidReactNative&Q_CLIENTVERSION=2.21.0&Q_DEVICEOS=14_34&Q_DEVICETYPE=samsung_SM-A155M. ResponseBody: okhttp3.internal.http.RealResponseBody@19133bd, ResponseCode:404", "passed": false}

490
L
Q
QualtricsIsFun
asked in Extension SDK
Dashboard page filter disabled when viewing via Embedded Insights Plug-in

Is anyone noticing that the page filter is disabled like this when you access them via the Embedded Insights plug-in recently? We checked the dashboard after logging in to Qualtrics and all the page filters still exist. Also tried accessing a few different dashboards and they all have this issue right now. We used to be able to use all the page filters in these dashboards via the Embedded Insights plug-in.

260
Q
M
mryan
asked in Integrations
Looking to have quotas for surveys automatically update in an Excel sheet - ideas

We will have multiple surveys with varying quota limits going at once. Currently, I’m manually entering the quotas in an excel sheet and trying to find some script, ideas users may have to automate this process. Workflow: Multiple surveys 4-5 going at once Export quotas or have Excel read the quota urls The data decrements in an Excel sheet for each demographic and study so we aren’t having to manually do it. I have tried scraping data with Excel and it has failed so far. Open to solutions and ideas. If it is something to post in the developers or another section, let me know. (my first post). Thank you!

463
TomG
Level 8 ●●●●●●●●
J
QPN Level 2 ●●
jake_dufinetzQPN Level 2 ●●
asked in Qualtrics API
Brainstorm: Generate Personal Links via API with Transaction Data

We are looking to distribute Qualtrics surveys using our customer facing mobile app’s in-app notification system. The app is expected to push a survey invite link to customers when they reach certain points of the customer journey, in real-time (think for example when a customer scans their ticket into an event venue). The survey invite needs to be tied to the customer and the specific transaction that triggered the invite, which is all stored within the notification system. At a high-level, we see two general ways of doing this: Anonymous link with URL parameters We can store the base anonymous URL in the push notification template, and then dynamically append the customer’s information + transaction data to the end of the URL so that it gets passed through to the survey response. (ie [AnonymousURL]?[TransactionField1]=[Value]&[TransactionField2]=[Value]...) While this path gets the base job done and is the simplest to implement, it has some cons: The customer could manually manipulat

962
Q
S
Sugra
asked in Custom Code
OnSubmit function in JS is working for preview & anonymous link but not working in website project

Hi Everyone, We have a survey which is used in a website feedback project. We have a javascript added in survey to Question Q2 which sets the value in ED depending on the answer choice selected by the customer We then use this embedded data in Q3 to display the value in the text of Question 3 in the survey so Q3 looks like this: How easy was it to ${e://Field/Q3CESText}? The logic applied is working perfectly fine when tested on the preview or anonymous link but it is not working when testing the survey on the client website through website project. That means the javascript is might not working when testing the survey on the mentioned website I tried testing with other test sites but it is not working on them as well Can anybody please help to find the cause? The javascript is fetching the value correctly on preview link: https://tuigroup.eu.qualtrics.com/jfe/preview/SV_1AlTOvB9aIxhDOR?Q_CHL=preview&Q_SurveyVersionID=current Below is the code we are using in Q2 to set the value of Emb

1903
Nanditha MM
Level 4 ●●●●
J
Level 2 ●●
Jilong_WuLevel 2 ●●
asked in Custom Code
JS codes works when preview question, but fail when preview whole block.

Dear all, I am design an experiment. My survey question is simple in nature, which is in text-entry type. I have created the html part for the description. <style> .bg_color{ background-color: #FCFC9C; } table.centered-table { width: 648px; margin: auto; border-collapse: collapse; text-align: center; } table.centered-table th, table.centered-table td { text-align: center; } table.centered-table th { border-bottom: 2px solid black; font-weight: bold; padding: 20px; } table.centered-table .border-white { border-bottom: 2px solid white; } table.centered-table .border-light { border-bottom: 2px solid #f1f1f1; } .gray-text { color: gray; } .red-text { color: red; } .blue-text { color: blue; } .transparent-button { background-color: transparent; border: none; padding: 20px; cursor: pointer; } </style> <table class="centered-table"> <thead> <tr> <th class="red-text" style="width: 20%;">Set A</th> <th class="border-white" style="width: 5%;"> </th> <th class="blue-text" style="width: 30%;">Set

672
B
Level 2 ●●
C
Level 2 ●●
COffermanLevel 2 ●●
asked in Custom Code
Rank order drag and drop horizontally aligned

Hi! I have seen this question asked multiple times on this forum, but I could not find a definitive answer. I would like to have the rank order question in the drag and drop modality, where the items are displayed horizontally. I know this problem needs some custom code, which I cannot seem to figure out (even with chatGPT). I am wondering if anyone else maybe encountered the same issue and could help me out with their custom code. Thank you very much in advance! <3

6179
B
Level 2 ●●
P
ppuente
asked in Qualtrics API
Create a New Response API and Embedded Data

I want to call the Create a New Response API to create survey responses from my application (https://api.qualtrics.com/f1cad92018d2b-create-a-new-response). I don’t see a way to add embedded data to that request. Is there a way to create add embedded data with a survey response creation request, or am I required to send a subsequent Update Response request (https://api.qualtrics.com/daed82306b1ea-update-response)?

1093
P
S
stephmo
asked in Custom Code
Making arrow on the next button larger

Hi all, I am trying to make the arrow on the next button larger. The posts I have found on here only change the size of the button itself but not the arrow. I also found this on the Qualtrics website: “Note that you can’t use HTML or make other rich content edits to the next and back button text” but do not completely understand what it is saying. In sum, is it even possible to enlarge the arrow? If so, how? ( Thank you for your help!

381
Aggarwal
Level 4 ●●●●
R
rgroth
asked in Custom Code
Hiding Next Button Until Requirements Met Using Javascript

I am trying to make it so my next button is hidden until a certain requirement is met (all the dropdown questions, created using HTML, have an option selected -- if no option is selected, the value for each dropdown is “”). With how it is right now, the next button is hidden, but selecting choices for each dropdown does not make the next button show up as needed. I’ve tried different iterations of this but can’t get it to make the next button show up. Qualtrics.SurveyEngine.addOnload(function() { //disable next button this.hideNextButton(); var requiredLeftDropdownIDs = [ "dropdown1_left", "dropdown2_left", "dropdown3_left", "dropdown4_left", "dropdown5_left", "dropdown6_left", "dropdown7_left", "dropdown8_left", "dropdown9_left", "dropdown10_left", "dropdown11_left", "dropdown12_left", "dropdown13_left", "dropdown14_left", "dropdown15_left", ]; allValid = true;requiredLeftDropdownIDs.forEach(function (id) { var dropdown = document.getElementById(id); if (dropdown.value == "") { allVal

441
Aggarwal
Level 4 ●●●●
C
cmcnulty
asked in Integrations
Posting a survey link to LinkedIn Via Qualtrics

Hi Folks- I can’t seem to find any posts around this particular issue and would appreciate any tips! I want to post a survey to my company’s LinkedIn page, and track how many responses came from LinkedIn. When I go to Distributions> Social Media> LinkedIn, I am able to create a post through Qualtrics, but the survey link does not populate on the post, even if I manually copy and paste the hyperlink into the body of the post. Do I need to be creating an embedded field ahead of time? Should I be using a certain type of link? Is there some mysterious option I’m not thinking of? We’re currently tracking sources with bitly links, but I’d love to be able to use a built in Qualtrics feature if that is an option. Thanks!

881
Aggarwal
Level 4 ●●●●

Read Me: How to use the new Experience Community 💜

Michael_Cooksey
Administrator
1 month ago

Motivational Playlist

Terms & Conditions