How to get a slider's value in Qualtrics using jQuery?

Question

I need to get the value of a slider in Qualtrics to display (a transformation of) it to the user.

Here is the page I am working on, so you can understand what follows. I have tried many different things, none of which works. My first idea was of course:

var val = $j('#QID11~1~toolTip').text();
$j('#value').text(val)

Nothing shows up. Then, I tried to use the input:

var val = $j("input").attr("value");
$j('#value').text(val);

(Or alternatively, $j('#QID11~1~result') instead of $j("input"), or .val() instead of .attr("value")) Same thing: nothing shows up.

However, interestingly, when I replace attr("value") by e.g. attr("type"), the type ("hidden") shows up. It seems that, as the value is not set when the page first loads, jQuery cannot find it.

Can someone give me an hand on this?

Answer 1

You can do it using prototypejs like this:

Qualtrics.SurveyEngine.addOnload(function() {
    var current = $('current');
    var result1 = $(this.questiondId + "~1~result");
    new Form.Element.Observer(result1, 0.25, function() {
        current.update(result1.getValue());
    });
});

The corresponding question text to display the current value is:

Current value is: <span id="current">0</span>%

Update (Screen shots as requested):

Answer 2

Here is an alternative, also using prototypejs over jquery:

Qualtrics.SurveyEngine.addOnload(function()
{
    var result = $(this.questiondId + '~1~result');
    document.observe( 'mousemove', function(){
        $('SliderValue').update(result.value);
    });

});

Be sure to include the following in the html of the question somewhere:

The value is currently: <span id="SliderValue">0</div>

I get the feeling that most of the trouble you were having was calling things onload with no method to observe the change, On loading, the answer will have no value, you need to watch as this value changes somehow. Tom's method above polls the form field every 0.25 seconds, while my method runs any time the mouse moves. Either of these methods should work for your needs.

Answer 3

The problem looks like the tildes, as described in the answers to this question. Try:

var val = $j('#QID11\\~1\\~toolTip').text();
$j('#value').text(val)

Answer 4

Obviously way after the fact, but I was having this same issue and stumbled upon this question. I've managed to figure out something that works so figured I'd share in case someone also stumbles upon this page. I was trying to get the value of the slider to show up on the page in real-time, as well as 100 minus the value of the slider (to present the slider from both "ends", since I was using it as a way to allocate money between two people, each one represented as on either end of the slider; this explains the "endupdate" function). It may have very well been likely that the posts above were missing the

document.getElementById("result").innerHTML=result;

portion of things to display the value with

<span id="result">0</span>

wherever desired on the HTML of the question text.

Qualtrics.SurveyEngine.addOnload(function() {
/*Place your JavaScript here to run when the page loads*/
var result=0;
var otherend= 0;

this.questionclick = function(event,element){
    result = this.getChoiceValue(1);
    endupdate();
    document.getElementById("otherend").innerHTML=otherend;
    document.getElementById("result").innerHTML=result;
}

function endupdate() {
    otherend=100-result;
}
});