Real Time Calculation with data from slider | XM Community
Skip to main content

Hello
I am trying to extract data from the slider and use it to calculate the equations below using Java. Is it possible to get the code to work in real time so that participants see the effect of moving the slider instantly reflected in the variables? I am trying to have it all in one block
Here is the design of my survey:

Screen Shot 2022-04-06 at 5.54.41 PM.png

Thank you

It looks like your post got cut off. Anyway, yes, it is possible; use a mutation observer.


Yes, just fetch the data as a pipe-in in the next question and then you can use it for math operation as illustrated above.


Hi felrafei and grahulp5 ,
Assumption: I do not know the reason for Q68 to be shown so at present I am removing it.
Further I am removing Page break after Q67 as real time code will not work with it.
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.png

The html code for Q43 will be as below:

Assuming Return To be equal to 100



Pretax Earnings:0




25% TAX To Be PAid:0




After TAX Earnings:0

The JS code to be applied at Q41 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.getElementsByClassName("test");
  const targetNode = document.getElementsByClassName("sliderToolTipBox"))0];
  let observer = new MutationObserver(function()  {


      tex0].innerText=100*Math.abs(targetNode.innerHTML);
texb1].innerText= text0].innerText*0.25;
texb2].innerText= text0].innerText-texx1].innerText;
      
  
  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*/


});
Here the same working in preview:

ezgif.com-crop.gif
Hope it resolves your query😊!!





Hi @qualtrics_nerd ,

I tried to mimic your previous code but there is nothing change in my second question. I tried to use slider to let respondents choose their best investment among 0-400 and then use formula “1*x+1.2*(400-x)” to calculate their received money. Here is my code. Can you please help me?

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.getElementsByClassName("test");
  const targetNode = document.getElementsByClassName("sliderToolTipBox")p0];
  let observer = new MutationObserver(function()  {


      tex0].innerText=Math.abs(targetNode.innerHTML);
tex)1].innerText= 400-texx0].innerText;
text2].innerText= 1*texT0].innerText+1.2*texe1].innerText;
      
  
  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
    
  });
  Best regards,

Tuan.


});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/


});


Leave a Reply