Performing a Simple Math Operation in Real Time with Runtime Data in Qualtrics

Question

I have a single slider on a survey in Qualtrics, and need to present the value on the slider from both "ends" (so if the respondent has placed the handle at the value 55, I need to have a box with "55" and "45" shown below the slider, since the maximum value is 100, i.e. 100-55=45).

I've managed to show the value of the slider with the user's input (in the above example, the "55") with this following snippet of HTML in the text question, which places a box somewhere on the page with the slider's value:

<input class="SumInput InputText QID29 QWatchTimer" data-runtime-value="runtime.Choices.1.Value" id="QID29" name="QID29" type="text" value="" />

However, I can't get the other box that displays essentially 100 minus whichever the runtime.Choices.1.Value is to work (the "45"). I've tried simply "100-runtime.Choices.1.Value", "100"-"runtime.Choices.1.Value", the same without any quotations, and just about every possible math function for CSS/HTML. I know that technically HTML only displays and doesn't really do this kind of runtime calculation (I'm a novice so this is as far as I've gleamed), so if there was any Javascript snippet or some other piece of code that would show in real time 100 minus wherever the user has moved the handle on the slider to, that'd be fantastic. I'm assuming some sort of addOnClick function but have no clue how to refer to anything on the slider to do this.

It's such a simple task but for some reason has taken so far quite a bit. Any help is appreciated; thanks!

Answer 1

I've managed to figure this out for the particular example of the slider, though I think the following Javascript should work for presumably many question types, given using the correct getChoiceValue (i.e. changing the "1" to the number corresponding to the element on the page whose answer value you want to obtain):

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;
}
});

I then added the following in the HTML of the question text, wherever I wanted it to show up (I personally put it in a table so I could center things nicely on the page, along with some explanatory text):

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

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

Hope this saves somebody else some time and energy!