Thanks in adv.
M
Best answer by TomG
View originalBest answer by TomG
View originalThis 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
https://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.
https://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
Customizable_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:
This is so helpful, thank you so much Nami !!! You are the best.
Nami 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?
paca To change which slider is responsible for manipulating the image, change the number inside
eq()in the following line:
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)
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!
Customizable_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".
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.