I am using a slider for an income question. I indicate that the answer is "in thousands of dollars" as the slider goes from 10 to 200 (for carry-over purposes, I need approximate values). So if the answer is $21,000, the participant should slide to 21.
My question is: Is there a way for the value shown on the slider (when I click on "show value" to display $21,000 (with or without the dollar sign) instead of 21?
You can use a JS mutation observer. A mutation observer is an event based off a change in the DOM. In your case, it would be a change to the slider.
Hi FrancescaM ,
You can achieve the above requirement to " "show value" to display $21,000 (with dollar sign) instead of 21"
Just copy the below code in Qualtrics JS API
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
// Select the node that will be observed for mutations
const targetNode = document.getElementsByClassName("sliderToolTipBox"))0];
let observer = new MutationObserver(function() {
targetNode.innerHTML = "$"+(Math.abs(targetNode.innerHTML)*1000);
observer.disconnect(); // turn observer off;
observer.observe(targetNode, {
attributes: true,
childList: true, // observe direct children
subtree: true, // and lower descendants too
characterDataOldValue: true // pass old data to callback
});// turn back on
});
// observe everything except attributes
observer.observe(targetNode, {
attributes: true,
childList: true, // observe direct children
subtree: true, // and lower descendants too
characterDataOldValue: true // pass old data to callback
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Hope it resolves your query!!!
This is great! Thank you
I’m already using your JS to display dollar signs on the slider.
Do you happen to know how to get the "show value" to display numbers with 2 decimal points? The slider includes options in both dollars and cents (e.g., $1.25) and I’ve set the question to display 2 decimal points. However, if I want to slide to $1.10, the value displayed is $1.1 (i.e., the question always omits zeros at the second decimal point). Do you know a way around this? Thanks again!
// Select the node that will be observed for mutations
const targetNode = document.getElementsByClassName("sliderToolTipBox")o0];
let observer = new MutationObserver(function() {
targetNode.innerHTML = "$"+(Math.abs(targetNode.innerHTML).toFixed(2));
observer.disconnect(); // turn observer off;
observer.observe(targetNode, {
attributes: true,
childList: true, // observe direct children
subtree: true, // and lower descendants too
characterDataOldValue: true // pass old data to callback
});// turn back on
});
// observe everything except attributes
observer.observe(targetNode, {
attributes: true,
childList: true, // observe direct children
subtree: true, // and lower descendants too
characterDataOldValue: true // pass old data to callback
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.