Hi all,
I've been trying to make a series of bipolar sliders with images included on either end and am trying to figure out the best approach. I originally just had different questions with a slider in each question (see below). However...
... This created a lot of empty space between the sliders such that you had to keep scrolling back up to the top to look at the picture again. So I'm trying to figure out whether I can have my three sliders in a single slider question to make this slider set more compact. I tried the solution given here (https://www.qualtrics.com/community/discussion/15246/problem-with-slider-with-text-on-both-ends-and-randomization#latest), which I was able to make work. However, I wasn't sure how to insert the link and correct size for my smiley faces into the custom javascript.
Alternatively, if someone has suggestions for keeping what I currently have (three different slider questions) but just making everything more compact, I would love to hear your thoughts.
Thanks for your help,
Bradley
Include images in slider set with multiple labels
+4Best answer by ahmedA
The problem was that you were using JS along with the code that I provided. Hence, things were getting messed up. You can either delete your exising JS and just use the code above, or use this JS (which you can adjust easily):
Qualtrics.SurveyEngine.addOnload(function () {
let enc_start = '
enc_left = '
enc_center = '
enc_right = '
enc_end = "";
let left_texts = [
"😥 Completely Unpleasant(0)",
"😥 Completely Tense(0)",
"😥 Scared(0)",
],
center_texts = ["Neutral(0)", "Neutral(0)", "Neutral(0)"],
right_texts = [
"Completely pleasant (100) 😀 ",
"Completely calm (100) 😀",
"Not scared at all (100) 😀",
];
for (let i = 0; i < 3; i++) {
let final_html =
enc_start +
enc_left +
left_texts[i] +
enc_center +
center_texts[i] +
enc_right +
right_texts[i] +
enc_end;
jQuery(".statement-container").eq(i).html(final_html);
}
});
You could try using HTML emojis.
And formatting your statements like this:
😥 Completely Unpleasant(0)Neutral(0) Completely Pleasant(100)😀
This should all be in one line. If you want line breaks, use
+4Hi ahmedA ,
Thanks for your help. Where do I put this code? It didn't work in the Javascript editor. Sorry, I'm new to this!
+4I was able to create this (below) using this code below "add on load":
jQuery(".statement-container div").eq(0).append("Completely pleasant (100)");
jQuery(".statement-container div").eq(1).append("Completely calm (100)");
But I don't know how to get the emojis to be in the correct spot. Thanks again.
Change this
jQuery(".statement-container div").eq(0).append("Completely pleasant (100)"); to
jQuery(".statement-container div").eq(0).append("Completely pleasant (100) 😀 ");You need to put the code I shared as the statement. Where it says, click to add statement 1 etc.
+4Hmm, we're getting closer! The emojis are showing up but everything is bunched together on one side for some reason...
I am using the following code for the Javascript editor:
/*Place your JavaScript here to run when the page loads*/
jQuery(".statement-container div").eq(0).append("Completely pleasant (100) 😀 ");
jQuery(".statement-container div").eq(1).append("Completely calm (100) 😀");
jQuery(".statement-container div").eq(2).append("Not scared at all (100) 😀");
});
And the following code I am adding to each "choice" statement, with the labels changed for each choice:
Any suggestions? Thanks so much for your help.
Bradley
+4Sure thing, see here: https://ncsu.qualtrics.com/jfe/form/SV_77MMoGmcsmGwP1s
It's a bit jumbled as I'm trying to sort out the best way to ask these questions but you can see what the goal is. Thanks again.
I will need the preview link...the one with the jumbled code.
This is the published link, so it doesn't have the changes in progress.
Click on preview and share the link of the tab that opens up.
+4Ah, ok great - here is that link. https://ncsu.qualtrics.com/jfe/preview/SV_77MMoGmcsmGwP1s?Q_CHL=preview&Q_SurveyVersionID=current
https://www.qualtrics.com/community/discussion/comment/37015#Comment_37015brad7280 The survey link you have shared still contains your old code. Please paste the code which jumbles up the labels.
As you can see from my screenshot, I don't see them as jumbled. So I need to see why is it happening for you, if you are pasting the same code.
+4ahmedA whoops, sorry now it should work: https://ncsu.qualtrics.com/jfe/preview/SV_77MMoGmcsmGwP1s?Q_CHL=preview&Q_SurveyVersionID=current
Thanks so much for your help here.
The problem was that you were using JS along with the code that I provided. Hence, things were getting messed up. You can either delete your exising JS and just use the code above, or use this JS (which you can adjust easily):
Qualtrics.SurveyEngine.addOnload(function () {
let enc_start = '
enc_left = '
enc_center = '
enc_right = '
enc_end = "";
let left_texts = [
"😥 Completely Unpleasant(0)",
"😥 Completely Tense(0)",
"😥 Scared(0)",
],
center_texts = ["Neutral(0)", "Neutral(0)", "Neutral(0)"],
right_texts = [
"Completely pleasant (100) 😀 ",
"Completely calm (100) 😀",
"Not scared at all (100) 😀",
];
for (let i = 0; i < 3; i++) {
let final_html =
enc_start +
enc_left +
left_texts[i] +
enc_center +
center_texts[i] +
enc_right +
right_texts[i] +
enc_end;
jQuery(".statement-container").eq(i).html(final_html);
}
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.