Record number of images viewed in image slideshow | XM Community
Skip to main content

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";
  }
  xlslideIndex-1].style.display = "block";
}
    
// Event listener for the previous and next buttons
prevBtn.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!

@pb7 You 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++) {
        xri].style.display = "none";
      }
      x

      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);
    });
});

 

@Nam Nguyen This worked perfectly! Thank you for the big help! 

@pb7 Happy to help 👍

Leave a Reply


Terms & Conditions