Customising the image on a graphic slider
Best answer by TomG
+11
+27
+2+1+27+1+27
+4This is a SUPER helpful thread, thanks all so much. My issue is now the size of the images I need are constrained by the small size of the containing div for the default slider options (see attached image). Is there a way to increase the size capacity of the "containers" (I may not be saying this right) to accommodate for a custom graphic slider that has larger images? Essentially, I'm modifying the smiley-face graphic slider, which has a pretty small image size of 130x130 (but I believe it is even so the largest graphic slider available). Additionally, the images I want to use are more rectangular than square, which makes them appear even smaller.
Is there a way to increase the image size?
Thanks all,
Bradley
+2https://www.qualtrics.com/community/discussion/comment/25932#Comment_25932Just my 2 cents: you could use a normal slider scale and present an image in HTML to present images of any size. This post may be relevant for you.
+4https://www.qualtrics.com/community/discussion/comment/26141#Comment_26141Hi Nami!
Thanks so much. I actually looked at this post before posting my reply but, being a total beginner with this, I wasn't sure how to copy the code that you wrote out. Specifically, I wasn't sure what in the code I am supposed to keep as is and what I need to personalize for my own purposes. Right now, my code for using the graphic slider option to change the graphics looks like this:
Pastiebin.com
embed :: 5ede7267c2ba6
Would you be willing to show me how to take this code and use it in the way you outlined in that other post to use the normal slider scale, instead of the graphic slider?
Thank you so, so much for your help.
Bradley
+2Customizable_Graphic_Slider.qsfbrad7280 Here's what I came up so far
I used the following JS:
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*/
//////////////////////////////////////// for brad7280
// Get Image
var img = jQuery("#myImage");
currentQID = this.questionId
// Function to look for track changes in slider
// code inspired by https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-value
jQuery("input[type = hidden]").change(function() {
var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
console.log(answer)
// Images in order below
var images_list = [
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8941uMZP0xpe1yB',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4UAfkFtRClsDSFT',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdXIB07j1v0N3mJ',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_abXP7xumZW0LMQ5',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5vjllrLOlc1oFtH',
]
// Swap image according to answer (zero indexed, thus -1)
img[0].src = images_list[answer - 1]
});
});
Qualtrics.SurveyEngine.addOnUnload(function() {
/*Place your JavaScript here to run when the page is unloaded*/
});
In HTML I had the following below. Note that you can change the image size there:
Attached on this post is the .qsf export from Qualtrics. You can import the file and look for a block called "For brad7280".
+2Nami Thank you for the super helpful code. I was able to get it working but the images only work for the first choice/statment of the slider question- if I want to add another statement/question the images will no longer move with the slider. What am I doing wrong?
+2paca To change which slider is responsible for manipulating the image, change the number inside
eq()in the following line:
var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
Currently, it is
eq(0)and it refers to the first slider of the question. If you put
eq(1)it is going to refer to the second slider of the question (note that this is zero-indexed---the first position is 0)
If you have multiple images that you want to manipulate, you could copy the question. In this case, all questions will have one slider per question.
If you want to present multiple images in one question with multiple sliders, you will need to (a) change the HTML so that your images have unique id's (e.g., myImage1, myImage2) and (b) change the JS so that different sliders (eq(0), eq(1)) can manipulate the respective images in HTML (e.g., myImage1, myImage2)
Nami Thank you so much for your incredibly helpful thread! I'm attempting to create a task whereby people can essentially pick their preferred portion size of a variety of different foods. The code you've provided works perfectly if all of the sliders are on separate pages, but if I put them all on the same page it stops working. I've changed the HTML so that each image has a unique ID, and changed the JS 'eq' values for each question, but it still doesn't seem to be working. If it helps, I have six sliders on the same page, each representing a different food. I created the first slider using your code, before copying the question and changing the image/ items in the image list. Hoping you can help!
+2Customizable_Graphic_Slider.qsfbrad7280 Here's what I came up so far
I used the following JS:
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*/
//////////////////////////////////////// for brad7280
// Get Image
var img = jQuery("#myImage");
currentQID = this.questionId
// Function to look for track changes in slider
// code inspired by https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-value
jQuery("input[type = hidden]").change(function() {
var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
console.log(answer)
// Images in order below
var images_list = [
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8941uMZP0xpe1yB',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4UAfkFtRClsDSFT',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdXIB07j1v0N3mJ',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_abXP7xumZW0LMQ5',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5vjllrLOlc1oFtH',
]
// Swap image according to answer (zero indexed, thus -1)
img[0].src = images_list[answer - 1]
});
});
Qualtrics.SurveyEngine.addOnUnload(function() {
/*Place your JavaScript here to run when the page is unloaded*/
});
In HTML I had the following below. Note that you can change the image size there:
Attached on this post is the .qsf export from Qualtrics. You can import the file and look for a block called "For brad7280".
+1Hi, Realising this thread is several years old now, but would really appreciate some help with the Javascript. I can add images to the slider labels but the question is too crowded and its impossible to properly see the images, rendering them pointless!
Instead I would like to have a single image that changes as the slider is moved along (similar to
I have tried changing the script on a slider Q as per instructions above, but the images aren’t changing - scripting is not my forte! Any assistance gratefully received!
+4
- For the actual question text, I use this script (screenshot below)
<span style="color:#000000;"><span style="white-space: pre-wrap;">Sneak peak! This question is from an upcoming Module focused on <strong>Nature. </strong>Stay tuned!<br>
How interconnected are you with nature? </span></span>
<div><span style="color:#000000;"><span style="white-space: pre-wrap;"><i>Slide the scale to choose the picture which best describes your relationship to nature.</i></span></span></div>
<div style="text-align: center;"><img style="width: 225px; height: 225px;" src="https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4OTgrAxntUuzi50" id="myImage"></div>
<style type="text/css">.JFEScope .Skin .q-slider .statement-container { display: none; }
</style>
<style type="text/css">.Skin .q-slider ul.numbers {display:none}
</style>
- For the “question Javascript” I have this script (screenshot below):
Qualtrics.SurveyEngine.addOnReady(function() {
/*Place your JavaScript here to run when the page is fully displayed*/
// Assign the image on the HTML based on the image id. #myImage should correspond wi the `id=` parameter.
var img = jQuery("#myImage");
currentQID = this.questionId
// Function to look for track changes in slider
// code inspired by https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-value
jQuery("input[type = hidden]").change(function() {
// get the current position of the slider and assign it to `answer`
var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
// print out the answer to the browser console
console.log(answer) ;
// Create the list of Images 1-20 -- in order of presentation. Can be expanded or reduced according to the length of the slider question.
var images_list = [
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_eJnaKhEtzQ1l63c',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8CSs16GNdnE0pds',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4Obj9GbVSJ56c9E',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4OTgrAxntUuzi50',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_daHtgJfTXv4lKCy',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9nlvaNs1BgVG3RA',
'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_cA4CTLQoKgbOSLI',
]
// Swap the image according to the slider answer, so that the slider position 1 corresponds with the first image (zero indexed).
img[0].src = images_list[answer - 1]
});
});
From these two scripts you should be able to work out how to swap my images with yours. Just replace all my images (they all start with “https://ncsu...” with URLs for your images. You get the URL from uploading the image to your Qualtrics library.
+1Oh my goodness thank you so much! This is amazing. It is working, I think I just have some tweaks to do to get it all looking just right, but my images are showing and changing. Thank you
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.