CODEWITHSUNDEEP
jquery
user1281921
user1281921

Reputation: 163

Jquery counting on multiple pages

Im trying to make multiple quizes that will keep track of each quiz on each page.

So, far i only have 1 counter which cant keep track of which page the quiz are answered.

All of my quizes are in the ID tag ="jquiz" so i only have to use one stylesheet. How would i implement mulitple counters to my code

edit: updated code 

 $(".jquiz li ul li").click(function(){

    if (!($(this).parent("ul").hasClass("answered"))) {

        // removes unanswered class and adds answered class so they cannot change answer
        $(this).parent("ul").addClass("answered");

        // runs if they clicked the correct answer
        if ($(this).hasClass("correct")) {
            //adds one to quiz total correct tally
            count++;
             }


             //score check
            if ($('ul.answered').length == 3) {
            $('#page1mark').fadeIn('slow');
            $('#page1total').html('You got a '+count+' out of '+3+' on the page 1quiz.');
        }

        if ($('ul.answered').length == 6) {
            $('#page2mark').fadeIn('slow');
            $('#page2total').html('You got a '+count+' out of '+3+' on the page 2 quiz.');
        }

        if ($('ul.answered').length == howmanyquestions) {
            $('#jquizremarks').fadeIn('slow');
            $('#jquiztotal').html('You got a '+count+' out of '+howmanyquestions+' on the total quiz.');
        }
    }
}};


   //---------The html
        <!-- page1--->
    <ol class="jquiz"> //how do i add IDs to each class in a page?
         <li>
            <p>Cake is yum</p>
                 <ul>
                 <li class="correct">True</li>
                <li>False</li>
    </ul>
    </li>
  </ol>

Upvotes: 1

Views: 219

Answers (1)

Rafael Verger
Rafael Verger

Reputation: 1761

You must not have two html elements with the same ID. So, to do what you want the html elements should be of same classes with differents IDs, so:

  1. Replace id="jquiz" in ol element for class="jquiz"
  2. Change the jquery selector used for count how many questions exists; from $("#jquiz > li") to $(".jquiz > li")
  3. Finally change the jquery selector that set the click handler; from $("#jquiz li ul li") to $(".jquiz li ul li")

Upvotes: 1

Related Questions