Hi,
I am currently working on my master thesis and therefore working on a qualtrics survey. I would like to include an image slideshow within my survey and haven't yet found a way to do so. An easy solution would be to add the different images and put page breaks between them but I would like to know if there is a more "sophisticated" way of doing that?
Thank you very much in advance!
Page 1 / 1
Hi @KatrinHa
If you are familiar with css/JS then it helps you create actual slide show with in survey. if you not familiar then try following link. https://w3schools.com/howto/howto_js_slideshow.asp
If you are familiar with css/JS then it helps you create actual slide show with in survey. if you not familiar then try following link. https://w3schools.com/howto/howto_js_slideshow.asp
Thank you very much! I will try this out.
> @YASH1T said:
> Hi @KatrinHa
>
> If you are familiar with css/JS then it helps you create actual slide show with in survey. if you not familiar then try following link. https://w3schools.com/howto/howto_js_slideshow.asp
Thanks again - unfortunately I can't get the slideshow to actually work. It is displayedcorrectly but nothing happens as I press the next button. From my understanding this problem means the JavaScript is not working properly. Do you know, how exactly to include the JavaScript in the survey? So far I copypasted the JavaScript code like this:
Qualtrics.SurveyEngine.addOnReady(function()
{
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
});
Do you know what may be wrong? Thank you very much in advance!
> Hi @KatrinHa
>
> If you are familiar with css/JS then it helps you create actual slide show with in survey. if you not familiar then try following link. https://w3schools.com/howto/howto_js_slideshow.asp
Thanks again - unfortunately I can't get the slideshow to actually work. It is displayedcorrectly but nothing happens as I press the next button. From my understanding this problem means the JavaScript is not working properly. Do you know, how exactly to include the JavaScript in the survey? So far I copypasted the JavaScript code like this:
Qualtrics.SurveyEngine.addOnReady(function()
{
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
});
Do you know what may be wrong? Thank you very much in advance!
@KatrinHa , Could you please share the .qsf export of the survey here (if possible) to investigate actual issue of behind js error or any other issue?
I also need to include an image slideshow in my senior thesis. Does anyone have any tips for how to do this? I don't know much about java I will admit.
This is an interesting problem. The w3 link YASH1T suggested includes javascript calls in the html for the
onlickin the next and previous buttons, but Qualtrics strips the javascript out of the html in the question. If you look at the developer pane in chrome, what you put in as
❮
❯
comes out in Chrome as
❮
❯
I think it may have something to do with this statement:
JavaScript is stripped from the question HTML. Use the JavaScript editor instead of the question HTML, as referenced in the Accessing the JavaScript Editor section above.
I know enough html/css/js to believe that this is a problem, but unfortunately not enough to fix it.
I've been looking into this, and I think an easy solution is to just embed an imgur album.
Here's the link to the code solution in case anyone looking for it
https://community.qualtrics.com/XMcommunity/discussion/17901/clickable-image-slideshow#latest
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.