Dear all,



we're trying to display, graphically and in real-time, the result of a transformation of a series of values inputted via sliders.

Ideally, the display would itself be another slider, which the respondent cannot move by itself but only via moving the input sliders. Other types of similar representation would also be fine!

Additionally, the output slider/object would change color within a certain acceptable range of values of the transformation variable.

This will be clearer by looking at the javascript we have so far is reported below.

The variable E is the one that should be represented graphically via an "output slider/object" (if such a thing even exists), which should turn green when E is in the acceptable range 100-120.

We'd really appreciate any help on this!

Thanks!



Qualtrics.SurveyEngine.addOnReady(function()

{

/*Place your JavaScript here to run when the page is fully displayed*/

var that=this.questionId;

// default for next button

jQuery('#NextButton').attr('disabled', true);

jQuery("<br><strong>Output <span id='OUT'>0 \\

</span></strong><br /><strong> <span id='OUT2' style='color:red'>Not enough. You cannot proceed in the survey if you do not collect the right amount of output.</span></strong>").insertAfter("table.sliderGrid");

jQuery(document).on('change', function(){

var A=parseInt(jQuery("[id='"+that+"~1~result']").val());

var B=parseInt(jQuery("[id='"+that+"~2~result']").val());

var C=parseInt(jQuery("[id='"+that+"~3~result']").val());

var D=parseInt(jQuery("[id='"+that+"~4~result']").val());

var E=A+B*2+C*3+D*4;

jQuery("#OUT").text(E);

if(E < 100){

jQuery("#OUT2").text("Not enough. You cannot proceed in the survey if you do not collect the right amount of output.");

document.getElementById('OUT2').style.color = "red";

jQuery('#NextButton').attr('disabled', true);

}

else{

if(E >= 100 && E <= 120){

jQuery("#OUT2").text("You have collected the right amount of output.");

//jQuery("#OUT2").style.color = "red";

document.getElementById('OUT2').style.color = "green";

jQuery('#NextButton').attr('disabled', false);

}

else{

jQuery("#OUT2").text("Too much. You cannot proceed in the survey if you do not collect the right amount of output.");

document.getElementById('OUT2').style.color = "red";

jQuery('#NextButton').attr('disabled', true);

}

}

});

});



Not sure how to mark the code text as "code" to ease reading.