Record number of images viewed in image slideshow

Question

Hello,  Using information from previous posts (JS and css), I have coded an operational clickable image slideshow with 5 images. My code in JS is the following: Qualtrics.SurveyEngine.addOnReady(function(){    /*Place your JavaScript here to run when the page is fully displayed*/    var prevBtn = document.querySelector(".prev");var nextBtn = document.querySelector(".next");var slides = document.querySelectorAll(".mySlides");                var slideIndex = 1;showDivs(slideIndex);function plusDivs(n) {  showDivs(slideIndex += n);}function showDivs(n) {  var i;  var x = document.getElementsByClassName("mySlides");  if (n > x.length) {slideIndex = 1}  if (n < 1) {slideIndex = x.length} ;  for (i = 0; i < x.length; i++) {    x[i].style.display = "none";  }  x[slideIndex-1].style.display = "block";}    // Event listener for the previous and next buttonsprevBtn.addEventListener("click", function() {  plusDivs(-1);});nextBtn.addEventListener("click", function() {  plusDivs(1);});    });I want to ask respondents a series of questions relating to the images. However, I want to reveal these questions only after they have viewed ALL 5 images. Is there a way to modify the above code to record whether all 5 images have been displayed, which I could then import as an embedded data? Or the number of images displayed? Thanks!

Nam Nguyen · Accepted Answer

@pb7You can add some code to track how the function showDivs into a unique Set (so it make sure when respondent go back and forth, it will count correctly). Then it will raise a flag “allSlidesViewed” and give you the count “slidesViewedCount”. Test it and let me know if it’s work because i don’t have your slide set-up.Qualtrics.SurveyEngine.addOnReady(function() {    var prevBtn = document.querySelector(".prev");    var nextBtn = document.querySelector(".next");    var slides = document.querySelectorAll(".mySlides");    var slideIndex = 1;    var viewedSlides = new Set();     showDivs(slideIndex);    function plusDivs(n) {      showDivs(slideIndex += n);    }    function showDivs(n) {      var i;      var x = document.getElementsByClassName("mySlides");      if (n > x.length) {slideIndex = 1}      if (n < 1) {slideIndex = x.length} ;      for (i = 0; i < x.length; i++) {        x[i].style.display = "none";      }      x[slideIndex-1].style.display = "block";      viewedSlides.add(slideIndex);      if (viewedSlides.size === x.length) {        Qualtrics.SurveyEngine.setEmbeddedData("allSlidesViewed", "true");      }      Qualtrics.SurveyEngine.setEmbeddedData("slidesViewedCount", viewedSlides.size);    }    // Event listener for the previous and next buttons    prevBtn.addEventListener("click", function() {      plusDivs(-1);    });    nextBtn.addEventListener("click", function() {      plusDivs(1);    });});

pb7 · Answer

@Nam NguyenThis worked perfectly! Thank you for the big help!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded