Need help with slider value/Piped Text | XM Community
Skip to main content

Hello everyone, I am currently working on a survey for my final dissertation and I believe this is the right forum to be in.
I have added a question (type: slider) that shows the value. Under the slider, I have added a text that should help clarify the participant how much he/she send etc. Please have a look at the photo:
Picture 2.pngWhat I really want (on the very same page), is the 24 (or the value) to be right after "You chose to send: .. DKK" also!
Is that possible?
The part where it says: "The counterpart will receive: .. DKK" should be half the amount of the amount shown in the slider value. Can this also be solved?
Is this a problem that I can solve? It is very important for me that it is on the same page and not on the next page (I can solve the problem for the case where my text below the slider is on the next page).
I would appreciate any help! Thanks!

Yes, use a JavaScript Mutation Observer to change the displayed value as the slider is moved. There was a post earlier today on this same subject with some code.


Can you please link it TomG? And thanks for replying here.


Hi hariss
If you are still looking for the solution, you can achieve the above request using below codes:
Your question setup should be like below:
image.pngThe html code for Q40 will be as below:

You chose to send:0  DKK

The JS code to be applied at Q39 should be as below:
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*/
/*Place your JavaScript here to run when the page is fully displayed*/
// Select the node that will be observed for mutations
let tex=document.getElementById("test");
  const targetNode = document.getElementsByClassName("sliderToolTipBox"))0];
  let observer = new MutationObserver(function()  {
  tex.innerText=Math.abs(targetNode.innerHTML);
      
      
  
  targetNode.innerHTML =Math.abs(targetNode.innerHTML);
    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😊!!


Leave a Reply