2

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?

bixiou
  • 124
  • 2
  • 10
  • Is there any context for how you are using this? I assume you are giving it a trigger on change or something similar, is that correct? – Anthony Rivas Jul 01 '16 at 19:35
  • I am coding a survey to determine the tax reform people want. This question asks the proportion of tax payers to advantage by a reform, using a slider between 0 and 100%. I want to display for each proportion, the corresponding income: below this income, people would gain after the reform. I hope I was clear. – bixiou Jul 01 '16 at 19:53
  • Ahh thanks by context i meant context for the js. ie. is this js included in some kind of trigger? – Anthony Rivas Jul 01 '16 at 20:14
  • Oh, my bad! Yes, in *Qualtrics.SurveyEngine.addOnload(function() { ... });* – bixiou Jul 02 '16 at 14:14

4 Answers4

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):

Question w/ html Question JS Question Options

T. Gibbons
  • 4,919
  • 2
  • 15
  • 32
  • I am not sure I understood well what you say, but it does not work. Do I let "questiondId"? or do I replace it? Do I have to add any other line? – bixiou Jul 02 '16 at 14:20
  • I get a lot of errors: "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined", even after calling prototypeJS. – bixiou Jul 02 '16 at 14:22
  • Works for me exactly as shown. No need to replace this.questionId or "call" prototypejs (Qualtrics already uses prototypejs). Example here: https://marketinview.qualtrics.com/jfe5/preview/SV_8IGvoJjnSx8uXl3 – T. Gibbons Jul 02 '16 at 18:53
  • Well, it doesn't work for me. Every 0.25 second, the Error message appears. – bixiou Jul 03 '16 at 14:32
  • I have called jQuery FYI. – bixiou Jul 03 '16 at 14:51
  • It could be that your choiceId isn't 1 (in "~1~result"), so you may need to change it to the correct value. – T. Gibbons Jul 03 '16 at 20:08
  • No, my choiceId is actually ~1~result (cf. the link on my post). I tried to reproduce what you wrote with the minimal setting (ad hoc survey, only this question) and it still does not work... – bixiou Jul 04 '16 at 16:46
  • No sure what your problem is...it obviously works in the example survey I posted the link for. You could just change your question to a Constant Sum - Slider type, and check the Show Values option. Then Qualtrics will do it for you without the need for JavaScript. – T. Gibbons Jul 04 '16 at 16:51
  • I don't like the Constant Sum option because it does not provide the graphical aspect that I want. My plan B is rather to include my own slider nearby, so the user can see on the other slider the link between percentage in the income distribution and income. – bixiou Jul 04 '16 at 18:01
  • Could you send me screenshots of your entire code? It is very frustrating to see things work in your example while I am struggling for hours trying to reproduce it, in vain. – bixiou Jul 08 '16 at 14:17
  • I also added a constant sum slider to the example survey to compare the two. They are very similar, but CS doesn't require any JS. – T. Gibbons Jul 08 '16 at 14:57
  • This is really weird. I have exactly the same code as you, without the same result... https://login.qualtrics.com/jfe/preview/SV_2iwML2KNYzBXPNP I have lots of errors: "prototype-1.7.1.js:537 Uncaught TypeError: Cannot read property 'tagName' of null" You confirm that your header is empty ? (In Look and Feel > Advanced) – bixiou Jul 08 '16 at 17:28
  • And concerning the constant sum, it does not help getting the value (I recall that I don't want to display the value itself, but rather of transformation of it). – bixiou Jul 08 '16 at 17:30
  • The thing is, you don't have exactly the same code. Same thing for Anthony's response. I'm out. – T. Gibbons Jul 10 '16 at 22:52
  • Too bad you're out :( I do have exactly the same code, I copy/pasted it... – bixiou Jul 11 '16 at 14:58
  • Maybe it is due to the way we access to the page ? Indeed, my URL is login.(...)/jfe/... whereas yours is marketinview.(...)/jfe5/... – bixiou Jul 11 '16 at 16:11
0

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.

Anthony Rivas
  • 952
  • 13
  • 21
  • It doesn't work either, but here the error is different: "Uncaught TypeError: Cannot read property 'value' of null" – bixiou Jul 07 '16 at 08:30
  • Can you link us to the test survey you are using? Sounds to me like you have the id wrong – Anthony Rivas Jul 07 '16 at 14:16
  • This is my test survey, with exactly the code you gave me: https://login.qualtrics.com/jfe/preview/SV_bKpSaf1tT8FzY7r – bixiou Jul 08 '16 at 13:27
0

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)
Community
  • 1
  • 1
Emerson
  • 47
  • 7
  • To debug, decouple the read and the write, as in `alert($j('#QID11\\~1\\~toolTip').text())` and `$j('#value').text('hardcoded')`. If one works but not the other, you've narrowed down the problem. – Emerson Aug 18 '16 at 03:34
  • The first one doesn't work. But don't worry, I've adopted an alternative strategy. – bixiou Aug 18 '16 at 14:02
0

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;
}
});
RRTG
  • 35
  • 8