Page freeze after adding javascript to the slider | XM Community
Question

Page freeze after adding javascript to the slider

  • 29 April 2024
  • 2 replies
  • 13 views
G
Badge +1

Hi there!

I’ve been trying to customise my slider using javascript, and this is my code:
 

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)+"%";
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*/

});

However, when I was previewing my survey, the page froze immediately once I tried to click onto the survey. 

 

I’m wondering if anyone knows what’s going on? Thank you so much!

2 replies

A
Rank
Userlevel 7
Badge +21

The code appears to add “%” to your slider value. I would recommend using CSS for that. Add this to your custom CSS:

	.Skin .horizontalbar .Slider .track div::after {
		content: "%";
	}

 

G
Badge +1

The code appears to add “%” to your slider value. I would recommend using CSS for that. Add this to your custom CSS:

	.Skin .horizontalbar .Slider .track div::after {
		content: "%";
	}

 

Hi! 

Thanks for responding. But I’ll need different display styles for different sliders. For example, this one below:

Qualtrics.SurveyEngine.addOnReady(function() {
    function observeTarget(targetNode) {
        let observer = new MutationObserver(function(mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    // Attempt to extract the numeric value directly from the targetNode's text
                    let matches = targetNode.textContent.match(/[\d.]+/);
                    if (matches && matches.length > 0) {
                        let numericValue = parseFloat(matches[0]);

                        // Ensure the numeric value is valid
                        if (!isNaN(numericValue)) {
                            let perYearValue = Math.abs(numericValue);
                            let perFortnightValue = perYearValue / 26;

                            // Update the targetNode's innerHTML with both annual and fortnightly values
                            targetNode.innerHTML = "$" + perYearValue + "/per year, $" + perFortnightValue.toFixed(2) + "/per fortnight";
                        } else {
                            console.error("Could not extract a numeric value from the targetNode textContent");
                        }
                    }
                    
                    observer.disconnect(); // Turn observer off

                    // Re-observe the target after updating its content
                    observer.observe(targetNode, {
                        attributes: true,
                        childList: true,
                        subtree: true,
                        characterDataOldValue: true
                    });
                }
            }
        });

        // Start observing the target node
        observer.observe(targetNode, {
            attributes: true,
            childList: true,
            subtree: true,
            characterDataOldValue: true
        });
    }

    // Get all elements with the class 'sliderToolTipBox'
    const targetNodes = document.getElementsByClassName("sliderToolTipBox");

    // Observe the first two elements with the class 'sliderToolTipBox'
    if (targetNodes.length >= 2) {
        observeTarget(targetNodes[0]); // Observe the first element
        observeTarget(targetNodes[1]); // Observe the second element
    }
});


Can I apply the CSS individually? Thanks!

Leave a Reply


Terms & Conditions