Great thread! I tried the code myself and it did not work. I found that removing the format field fixes the issue. Just posting in case this info is useful. format: wNumb({ decimals: 0 })
paca 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)
Customizable_Graphic_Slider.qsfbrad7280 Here's what I came up so farI 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', 'http
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.
nbasavap I think this slider setup may achieve your specifications.Solution So FarI first created a slider question, followed by a Descriptive Text Question.In the slider question, I put the following JS code:Qualtrics.SurveyEngine.addOnload(function(){ /*Place your JavaScript here to run when the page loads*/ // Function to generate a random number between two numbers, inclusive function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }; var first_image_index = getRndInteger(0, 20) /// adjust this value according to the length of the slider question // set the slider choice to the randomly selected value. The first slider is choiceID = 1 this.setChoiceValue(choiceId = 1, value = first_image_index); });In the Descriptive Text question, I used the following JS code:(Again, swap the QID, and the images to match your survey)Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ //
> @Yolanda_B said: > Hi Nami,, I think the example listed is for the slider not the graphic slider. Has anyone had any success altering a graphic slider? I need to increase the side and change the image of the graphic slide. And possibly add text. I see! Just a note that you can swap the images in the `images_list ` to any images, providing the same function as the graphics slider. For example, you can swap the images in the `images_list` to the bigger images etc.
Looks like I forgot to attach the qualtrics export file in the previous comment. I'm attaching the file here.
Hi! I just made a customizable graphic scale for my colleague, and I thought this would be relevant to your question. This code is inspired by a previous answer elsewhere. Below is my javascript code. This code swaps the image in the question (as identified by `id=myImage`) to one of the images in the `images_list`, according to the slider position. You can specify the id of the image by going to the HTML view (`<img id="myImage"...`). The example code below is for a 20-point slider scale (thus there are 20 URLs for the images). You can change the list of images to whatever images that you want to present. I'm attaching the survey export file here in case you wanted to test it. Also, here's the link to the preview of the survey: https://delaware.ca1.qualtrics.com/jfe/preview/SV_1BKq3RmzPGMivZz?Q_SurveyVersionID=current&Q_CHL=preview ``` Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ // Assign the image
> @TomG said: > @markw & @jpardicusick, > > Yes, you can replace images in a graphical slider using JS. For example, to replace first image: > ``` > var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage'); > imgs[0].style.background = "url(https://image_url_goes_here) no-repeat"; > ``` Thanks for the answer! I think there was a typo in this answer (the single quote at the end of the first line should be a double quote). Below worked for me: var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage"); imgs[0].style.background = "url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) no-repeat";
Thanks for the answer! I saw that the HTML code had a bit of typo (lacking a double quote after `video-container`)--I'm correcting it here: HTML: ```<div class="video-container"> <!-- add your iframe or image here --></div>```
Already have an account? Login
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.
