Solved

Help with sliders- text on either side of bar

Forum|Forum|2 years ago
April 28, 2023
9 replies
912 views

arts_or_crafts
Level 2 ●●

Hello all!

How can I create just two text labels on either side of a slider bar. I am trying to replicate a previous study (Scroggs 1980) where the questions looked like this:

However, mine will be with a slider from 1-100.

Is there anyone who can help, I will appreciate any guidance!

Bella :)

Best answer by Tom_1842

Hmm, I’m not sure what you are running into, but I’d recommend making a new question and then use the Edit Multiple to set the Statements with the below:

Intelligent
Dominant
Shy
Blunt
Warm
Sincere
Competent
Conforming
Attentive
Powerful
Unlikeable
Forceful
Nurturant
Attractive
Feminine

Then, in the question’s JavaScript, add the below:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
var qid = this.questionId;
var end1 = document.getElementById(qid+'~1~result');
var cont1 = document.getElementById(qid+'~1~ResultsTd');
var end2 = document.getElementById(qid+'~2~result');
var cont2 = document.getElementById(qid+'~2~ResultsTd');
var end3 = document.getElementById(qid+'~3~result');
var cont3 = document.getElementById(qid+'~3~ResultsTd');
var end4 = document.getElementById(qid+'~4~result');
var cont4 = document.getElementById(qid+'~4~ResultsTd');
var end5 = document.getElementById(qid+'~5~result');
var cont5 = document.getElementById(qid+'~5~ResultsTd');
var end6 = document.getElementById(qid+'~6~result');
var cont6 = document.getElementById(qid+'~6~ResultsTd');
var end7 = document.getElementById(qid+'~7~result');
var cont7 = document.getElementById(qid+'~7~ResultsTd');
var end8 = document.getElementById(qid+'~8~result');
var cont8 = document.getElementById(qid+'~8~ResultsTd');
var end9 = document.getElementById(qid+'~9~result');
var cont9 = document.getElementById(qid+'~9~ResultsTd');
var end10 = document.getElementById(qid+'~10~result');
var cont10 = document.getElementById(qid+'~10~ResultsTd');
var end11 = document.getElementById(qid+'~11~result');
var cont11 = document.getElementById(qid+'~11~ResultsTd');
var end12 = document.getElementById(qid+'~12~result');
var cont12 = document.getElementById(qid+'~12~ResultsTd');
var end13 = document.getElementById(qid+'~13~result');
var cont13 = document.getElementById(qid+'~13~ResultsTd');
var end14 = document.getElementById(qid+'~14~result');
var cont14 = document.getElementById(qid+'~14~ResultsTd');
var end15 = document.getElementById(qid+'~15~result');
var cont15 = document.getElementById(qid+'~15~ResultsTd');

jQuery(cont1).css({"text-align":"left"});
jQuery(end1).before("Unintelligent");
jQuery(end1).css({"display":"none"});

jQuery(cont2).css({"text-align":"left"});
jQuery(end2).before("Submissive");
jQuery(end2).css({"display":"none"});

jQuery(cont3).css({"text-align":"left"});
jQuery(end3).before("Sociable");
jQuery(end3).css({"display":"none"});

jQuery(cont4).css({"text-align":"left"});
jQuery(end4).before("Polite");
jQuery(end4).css({"display":"none"});

jQuery(cont5).css({"text-align":"left"});
jQuery(end5).before("Cold");
jQuery(end5).css({"display":"none"});

jQuery(cont6).css({"text-align":"left"});
jQuery(end6).before("Insincere");
jQuery(end6).css({"display":"none"});

jQuery(cont7).css({"text-align":"left"});
jQuery(end7).before("Incompetent");
jQuery(end7).css({"display":"none"});

jQuery(cont8).css({"text-align":"left"});
jQuery(end8).before("Independent");
jQuery(end8).css({"display":"none"});

jQuery(cont9).css({"text-align":"left"});
jQuery(end9).before("Inattentive");
jQuery(end9).css({"display":"none"});

jQuery(cont10).css({"text-align":"left"});
jQuery(end10).before("Weak");
jQuery(end10).css({"display":"none"});

jQuery(cont11).css({"text-align":"left"});
jQuery(end11).before("Likeable");
jQuery(end11).css({"display":"none"});

jQuery(cont12).css({"text-align":"left"});
jQuery(end12).before("Gentle");
jQuery(end12).css({"display":"none"});

jQuery(cont13).css({"text-align":"left"});
jQuery(end13).before("Neglectful");
jQuery(end13).css({"display":"none"});

jQuery(cont14).css({"text-align":"left"});
jQuery(end14).before("Unattractive");
jQuery(end14).css({"display":"none"});

jQuery(cont15).css({"text-align":"left"});
jQuery(end15).before("Masculine");
jQuery(end15).css({"display":"none"});

if (jQuery(window).width() > 480) {
jQuery(cont1).css({"min-width":"130px"});
jQuery(cont2).css({"min-width":"130px"});
jQuery(cont3).css({"min-width":"130px"});
jQuery(cont4).css({"min-width":"130px"});
jQuery(cont5).css({"min-width":"130px"});
jQuery(cont6).css({"min-width":"130px"});
jQuery(cont7).css({"min-width":"130px"});
jQuery(cont8).css({"min-width":"130px"});
jQuery(cont9).css({"min-width":"130px"});
jQuery(cont10).css({"min-width":"130px"});
jQuery(cont11).css({"min-width":"130px"});
jQuery(cont12).css({"min-width":"130px"});
jQuery(cont13).css({"min-width":"130px"});
jQuery(cont14).css({"min-width":"130px"});
jQuery(cont15).css({"min-width":"130px"});
}
});

Should look like the below:

+28

Tom_1842
Level 8 ●●●●●●●●
Forum|Forum|2 years ago
April 28, 2023

I have some code together in this post that can put labels on the right side of a slider.

arts_or_crafts
Author
Level 2 ●●
Forum|Forum|2 years ago
April 28, 2023

Okay brilliant thank you, I will give that a go!

arts_or_crafts
Author
Level 2 ●●
Forum|Forum|2 years ago
April 28, 2023

Unfortunately when I try to use this code it states “unexpected identifier”- I have provided an image to see if the issue can be identified.

+28

Tom_1842
Level 8 ●●●●●●●●
Forum|Forum|2 years ago
April 28, 2023

Looks like a }); was deleted. Try updating the whole thing with the below:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
var qid = this.questionId;
var end1 = document.getElementById(qid+'~1~result');
var cont1 = document.getElementById(qid+'~1~ResultsTd');
var end2 = document.getElementById(qid+'~2~result');
var cont2 = document.getElementById(qid+'~2~ResultsTd');
var end3 = document.getElementById(qid+'~3~result');
var cont3 = document.getElementById(qid+'~3~ResultsTd');

jQuery(cont1).css({"text-align":"left"});
jQuery(end1).before("Choice 1");
jQuery(end1).css({"display":"none"});

jQuery(cont2).css({"text-align":"left"});
jQuery(end2).before("Choice 2");
jQuery(end2).css({"display":"none"});

jQuery(cont3).css({"text-align":"left"});
jQuery(end3).before("Choice 3");
jQuery(end3).css({"display":"none"});

if (jQuery(window).width() > 480) {
jQuery(cont1).css({"min-width":"130px"});
jQuery(cont2).css({"min-width":"130px"});
jQuery(cont3).css({"min-width":"130px"});
}
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

arts_or_crafts
Author
Level 2 ●●
Forum|Forum|2 years ago
April 28, 2023

Ah I see! Apologies Friday brain! It has now accepted the code yet the actual sliders have not changed. Should I try and input my key terms into code?

+28

Tom_1842
Level 8 ●●●●●●●●
Forum|Forum|2 years ago
April 28, 2023

If you preview the survey, do you see words on the right side of the first 3 sliders?

arts_or_crafts
Author
Level 2 ●●
Forum|Forum|2 years ago
April 28, 2023

Ah ha it has partially worked! However for some reason the submissive did not input.

This is what my code looks like:

I presume I will only be able to see the end result in the preview of the survey?

Thank you for all your help!

+28

Tom_1842
Level 8 ●●●●●●●●
Answer
Forum|Forum|2 years ago
April 28, 2023

Hmm, I’m not sure what you are running into, but I’d recommend making a new question and then use the Edit Multiple to set the Statements with the below:

Intelligent
Dominant
Shy
Blunt
Warm
Sincere
Competent
Conforming
Attentive
Powerful
Unlikeable
Forceful
Nurturant
Attractive
Feminine

Then, in the question’s JavaScript, add the below:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
var qid = this.questionId;
var end1 = document.getElementById(qid+'~1~result');
var cont1 = document.getElementById(qid+'~1~ResultsTd');
var end2 = document.getElementById(qid+'~2~result');
var cont2 = document.getElementById(qid+'~2~ResultsTd');
var end3 = document.getElementById(qid+'~3~result');
var cont3 = document.getElementById(qid+'~3~ResultsTd');
var end4 = document.getElementById(qid+'~4~result');
var cont4 = document.getElementById(qid+'~4~ResultsTd');
var end5 = document.getElementById(qid+'~5~result');
var cont5 = document.getElementById(qid+'~5~ResultsTd');
var end6 = document.getElementById(qid+'~6~result');
var cont6 = document.getElementById(qid+'~6~ResultsTd');
var end7 = document.getElementById(qid+'~7~result');
var cont7 = document.getElementById(qid+'~7~ResultsTd');
var end8 = document.getElementById(qid+'~8~result');
var cont8 = document.getElementById(qid+'~8~ResultsTd');
var end9 = document.getElementById(qid+'~9~result');
var cont9 = document.getElementById(qid+'~9~ResultsTd');
var end10 = document.getElementById(qid+'~10~result');
var cont10 = document.getElementById(qid+'~10~ResultsTd');
var end11 = document.getElementById(qid+'~11~result');
var cont11 = document.getElementById(qid+'~11~ResultsTd');
var end12 = document.getElementById(qid+'~12~result');
var cont12 = document.getElementById(qid+'~12~ResultsTd');
var end13 = document.getElementById(qid+'~13~result');
var cont13 = document.getElementById(qid+'~13~ResultsTd');
var end14 = document.getElementById(qid+'~14~result');
var cont14 = document.getElementById(qid+'~14~ResultsTd');
var end15 = document.getElementById(qid+'~15~result');
var cont15 = document.getElementById(qid+'~15~ResultsTd');

jQuery(cont1).css({"text-align":"left"});
jQuery(end1).before("Unintelligent");
jQuery(end1).css({"display":"none"});

jQuery(cont2).css({"text-align":"left"});
jQuery(end2).before("Submissive");
jQuery(end2).css({"display":"none"});

jQuery(cont3).css({"text-align":"left"});
jQuery(end3).before("Sociable");
jQuery(end3).css({"display":"none"});

jQuery(cont4).css({"text-align":"left"});
jQuery(end4).before("Polite");
jQuery(end4).css({"display":"none"});

jQuery(cont5).css({"text-align":"left"});
jQuery(end5).before("Cold");
jQuery(end5).css({"display":"none"});

jQuery(cont6).css({"text-align":"left"});
jQuery(end6).before("Insincere");
jQuery(end6).css({"display":"none"});

jQuery(cont7).css({"text-align":"left"});
jQuery(end7).before("Incompetent");
jQuery(end7).css({"display":"none"});

jQuery(cont8).css({"text-align":"left"});
jQuery(end8).before("Independent");
jQuery(end8).css({"display":"none"});

jQuery(cont9).css({"text-align":"left"});
jQuery(end9).before("Inattentive");
jQuery(end9).css({"display":"none"});

jQuery(cont10).css({"text-align":"left"});
jQuery(end10).before("Weak");
jQuery(end10).css({"display":"none"});

jQuery(cont11).css({"text-align":"left"});
jQuery(end11).before("Likeable");
jQuery(end11).css({"display":"none"});

jQuery(cont12).css({"text-align":"left"});
jQuery(end12).before("Gentle");
jQuery(end12).css({"display":"none"});

jQuery(cont13).css({"text-align":"left"});
jQuery(end13).before("Neglectful");
jQuery(end13).css({"display":"none"});

jQuery(cont14).css({"text-align":"left"});
jQuery(end14).before("Unattractive");
jQuery(end14).css({"display":"none"});

jQuery(cont15).css({"text-align":"left"});
jQuery(end15).before("Masculine");
jQuery(end15).css({"display":"none"});

if (jQuery(window).width() > 480) {
jQuery(cont1).css({"min-width":"130px"});
jQuery(cont2).css({"min-width":"130px"});
jQuery(cont3).css({"min-width":"130px"});
jQuery(cont4).css({"min-width":"130px"});
jQuery(cont5).css({"min-width":"130px"});
jQuery(cont6).css({"min-width":"130px"});
jQuery(cont7).css({"min-width":"130px"});
jQuery(cont8).css({"min-width":"130px"});
jQuery(cont9).css({"min-width":"130px"});
jQuery(cont10).css({"min-width":"130px"});
jQuery(cont11).css({"min-width":"130px"});
jQuery(cont12).css({"min-width":"130px"});
jQuery(cont13).css({"min-width":"130px"});
jQuery(cont14).css({"min-width":"130px"});
jQuery(cont15).css({"min-width":"130px"});
}
});

Should look like the below:

arts_or_crafts
Author
Level 2 ●●
Forum|Forum|2 years ago
April 28, 2023

It worked, Hooray thank you very much!!! You have saved me a lot of pain and tears

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded