How do I show a multiple sequence of images at the same time using javascript/jquery?

Question

I am trying to play multiple sequence of images using javascript. The problem is that I need to show for each question(for example, 20 questions) a sequence of images.

Right now, with my code, I can only show one animation per time, and I need to show all the animations at same time.

Here is a fiddle with my code: https://jsfiddle.net/Amonshy/mrjckfoe/6/


 Question 1.  
 
 
 
 
 

 Question 2.  
 
 
 
 
 

 Question 3.  
 
 
 
 
 

 Question 4.

And my javascript:

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
  setTimeout(carousel, 1500);
  }

I know that if I set a different class for each question, I can show each animation at the same time, example: https://jsfiddle.net/Amonshy/mrjckfoe/14/ (this is what I'm trying to achieve). However, the problem is that, a priori, I don't know the numbers of questions my quiz is going to have and I don't want to duplicate code like the example.

Solution:

Thanks to Sinan Guclu to help with the solution. Here is my javascript with my proposal solution:

var ary = new Uint8Array(50); 
carousel();

function carousel() {
    // Gets the question elements
  var questions = document.getElementsByClassName('question');

  for (var x = 0; x < questions.length; x++){
    var question = questions[x];
    // Gets the images within the questions
    var images = question.getElementsByClassName("mySlides");
    for (var i = 0; i < images.length; i++) {
        if(ary[x] < question.getElementsByClassName("mySlides").length)
        {
            images[i].style.display = "none";
        }
        else
        {
            ary[x]=0;
        }
    }
       if(ary[x] < question.getElementsByClassName("mySlides").length)
       {
         images[ary[x]].style.display = "block";
         ary[x] = ary[x] + 1;
       }
       else{
        ary[x] = 0;
       }
   }
   setTimeout(carousel, 1500);

}

Here is a working jsFiddle

Sinan Guclu · Accepted Answer

You could wrap the questions in

tags, wrap the number changing in a loop, that iterates though the the question classes:

var myIndex = 0;
carousel();

function carousel() {
        // Gets the question elements
        var questions = document.getElementsByClassName('question');
      var imageQty = questions[0].getElementsByClassName("mySlides").length;

      for (var x = 0; x < questions.length; x++){
        var question = questions[x];
        // Gets the images within the questions
        var images = question.getElementsByClassName("mySlides");
        for (var i = 0; i < images.length; i++) {
           images[i].style.display = "none";
        }

        images[myIndex].style.display = "block";
       }
       myIndex ++;
       if (myIndex > imageQty-1) {myIndex = 0}
       setTimeout(carousel, 1500); 
}

Wrap the questions in classes:


  Question 3.

Here is a working jsFiddle.

How do I show a multiple sequence of images at the same time using javascript/jquery?

Answers (2)

Related Questions