Hi all,
I need to hide and show my scale question using the slider. I also need to hide the handle until someone clicks on the slider. I tried using the code below but when it shows the question, no handle appears and there's no place to click in the scale:
Qualtrics.SurveyEngine.addOnload(function()
{
var q = jQuery("#"+this.questionId);
q.find(".handle").css('visibility', 'hidden');
q.find(".track").on("click , touchstart", function() {
jQuery(this).find(".handle").css('visibility', 'visible');
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var q = jQuery("#"+this.questionId);
q.find(".handle").css('visibility', 'hidden');
q.find(".track").on("click , touchstart", function() {
jQuery(this).find(".handle").css('visibility', 'visible');
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
var q = jQuery("#"+this.questionId);
q.find(".handle").css('visibility', 'hidden');
q.find(".track").on("click , touchstart", function() {
jQuery(this).find(".handle").css('visibility', 'visible');
});
});
Qualtrics.SurveyEngine.addOnload(function()
{
this.getQuestionContainer().hide(); // Hide the question as soon as the page loads
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var delayTime = 11000 //This is the time of delay
var that = this;
setTimeout(function(){that.getQuestionContainer().show()}, delayTime);// Function to show the question
});
Then I tried to get ride of the hide the handle part of code, as below, and the handle appears in the question, but on the far left side of the slider (it should be in the middle) and I can only slide it to the left where there isn't no scale. Screenshot attached.
Qualtrics.SurveyEngine.addOnload(function()
{
this.getQuestionContainer().hide(); // Hide the question as soon as the page loads
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var delayTime = 11000 //This is the time of delay
var that = this;
setTimeout(function(){that.getQuestionContainer().show()}, delayTime);// Function to show the question
});
Is there a way to effectively hide and show the scale question? Also, combining both hide and show function and hide handle function?
Any help appreciated, thank you so much!
Hide and show a slider question using the invisible handle
+1
+46musresearch
The code you included does work if I am understanding the need here.
Qualtrics.SurveyEngine.addOnload(function()
{
var q = jQuery("#"+this.questionId);
q.find(".handle").css('visibility', 'hidden');
q.find(".track").on("click , touchstart", function() {
jQuery(this).find(".handle").css('visibility', 'visible');
});});
On questions load, it does make the handle invisible but when you click on the slider the handle does appear. Also, the slider works just as fine to move from extreme left to extreme right.
Would you like to give a visual of what you want when the question loads as well as on click?
I am currently using the "Classic " layout if it helps.
Preview:
+28Hi there, I was able to replicate the issue with the delay causing the slider to appear distorted. This issue also existed when I tried to use display:none and display:block css. Instead, I was able to get the slider to appear okay after the delay by using the property "content-visibility". Try adding the below JS to the OnReady section of your question's JavaScript:
var q="#"+this.questionId;
jQuery(q).css("content-visibility","hidden");
setTimeout(function () {
jQuery(q).css("content-visibility","visible");
},5000);
Also for the handle being hidden until clicked, I've adapted that code in another post to make it so that the handle also appears on mouse hover. It is configured for 3 slider statements, but configuring for more statements would be just creating new vars (track, handle, clicked), copy/pasting the code blocks, and updating the numbers for 4, 5, 6, etc.
var qid = this.questionId;
var track1 = document.getElementById(qid+'~1~track');
var handle1 = document.getElementById(qid+'~1~handle');
var clicked1 ="no"
var track2 = document.getElementById(qid+'~2~track');
var handle2 = document.getElementById(qid+'~2~handle');
var clicked2 ="no"
var track3 = document.getElementById(qid+'~3~track');
var handle3 = document.getElementById(qid+'~3~handle');
var clicked3 ="no"
jQuery("#"+qid+" .handle").css('visibility', 'hidden');
jQuery(track1).on("mouseenter", function() {
if(clicked1 == "no"){
jQuery(handle1).css('visibility', 'visible');
}
});
jQuery(track1).on("mouseleave", function() {
if(clicked1 == "no"){
jQuery(handle1).css('visibility', 'hidden');
}
});
jQuery(track1).on("click , touchstart", function() {
clicked1 = "yes"
});
jQuery(track1).on("click , touchstart", function() {
if(clicked1 == "yes"){
jQuery(handle1).css('visibility', 'visible');
}
});
jQuery(track2).on("mouseenter", function() {
if(clicked2 == "no"){
jQuery(handle2).css('visibility', 'visible');
}
});
jQuery(track2).on("mouseleave", function() {
if(clicked2 == "no"){
jQuery(handle2).css('visibility', 'hidden');
}
});
jQuery(track2).on("click , touchstart", function() {
clicked2 = "yes"
});
jQuery(track2).on("click , touchstart", function() {
if(clicked2 == "yes"){
jQuery(handle2).css('visibility', 'visible');
}
});
jQuery(track3).on("mouseenter", function() {
if(clicked3 == "no"){
jQuery(handle3).css('visibility', 'visible');
}
});
jQuery(track3).on("mouseleave", function() {
if(clicked3 == "no"){
jQuery(handle3).css('visibility', 'hidden');
}
});
jQuery(track3).on("click , touchstart", function() {
clicked3 = "yes"
});
jQuery(track3).on("click , touchstart", function() {
if(clicked3 == "yes"){
jQuery(handle3).css('visibility', 'visible');
}
});
+1https://community.qualtrics.com/XMcommunity/discussion/comment/51698#Comment_51698Hi Tom_1842 , this is really helpful, thank you so much! Now it works.
I still have one question though, do you know if there's a way to have the instructions (written part of the slider question - entry text) shown and just the sliders appearing after the delay? I'm using music clips in the written part, then a possible solution would be to split the instructions (with music clips) and the sliders in 2 different questions, but this would not be feasible as I'm using the randomizer. 
+28musresearch glad to hear! To display the Question Text and delay displaying the sliders, try updating the code to the below:
var q="#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div";
jQuery(q).css("content-visibility","hidden");
setTimeout(function () {
jQuery(q).css("content-visibility","visible");
},5000);
+1https://community.qualtrics.com/XMcommunity/discussion/comment/51779#Comment_51779Worked!!! Thank you so much again Tom_1842!!!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.