Question

im trying to get my jquiz class to count for 2 IDs for each page.
It only counts the first page correctly. The second page just displays the same score as the first page. Im not sure what im doing wrong

This is what i have:

JQuery:

$(".jquiz li ul li").click(function()
{
    var count1 = 0; //page1 counter
    var count2 = 0; //page2 counter

//right answer
if ($(this).hasClass("correct")) 
{

    if ($("#page1"))
        count1++; //page1 
    if ($("#page2"))
        count2++; //page2
}

 //page1 quiz counter display   
if ($('ul.answered').length == 3) 
{
    $('#page1mark').fadeIn('slow');
    $('#page1total').html('You got a '+count1+' out of '+3+' on the page1 quiz.');
}

//page2 quiz counter display        
if ($('ul.answered').length == 6) 
{
    $('#page2mark').fadeIn('slow');
    $('#page2total').html('You got a '+count2+' out of '+3+' on the page2 quiz.');
}

HTML: Note: the class jquiz is in the tag element OL. It wouldnt let me post the code

   <id="page1" class="jquiz">
   pizza is yum?
   <Ii class ="correct"> true</Ii> 

Answer 1

You’re going about it all wrong.

You should either be doing this whole code block for each quiz, localizing all selectors to that dom element, or you can do this in one event handler, but inside it find out what quiz was activated at the top first (using jQuery.closest('.jquiz')), and limit everything else to within that dom node.

Either way, it looks like each quiz has a different number of questions, so you should store the number of questions for each quiz in the dom, like this:

<ol id="page1" class="jquiz" data-questions="3">
    ....
</ol>

<ol id="page2" class="jquiz" data-questions="6">
    ....
</ol>

Then, here’s an example of the javascript updated with the first method I described above — setting up a separate callback for each quiz (I think the first method produces more readable code, and the efficiency cost is negligible here). This also incorporates the other above change I suggested:

// For each quiz...
$('.jquiz').each(function() {
    // Cache the current quiz element, limit all selectors below to this element
    var $quiz = $(this);

    // This is a local variable, so it there will be a different copy for each quiz
    var correct_answers = 0;

    // Create a callback for *this quiz*
    $quiz.find('li ul li').click(function() {
        //right answer
        if ($(this).hasClass("correct")) correct_answers++;

        //counter display   
        if ($quiz.find('ul.answered').length == $quiz.data('questions')) {
            $('#'+$quiz.attr('id')+'mark').fadeIn('slow');
            $('#'+$quiz.attr('id')+'total').html('You got a '+correct_answers+' out of '+$quiz.data('questions')+' on the '+$quiz.attr('id')+' quiz.');
        }
    });
});

Also, while not directly related to your question, this is worth noting. Looks like someone can just keep clicking on a correct item to increase their correct count indefinitely. Maybe instead of explicitly counting, just let the implicit count do the work. This is probably better even if the rest of your code prevents the possibility for such an incident:

// For each quiz...
$('.jquiz').each(function() {
    // Cache the current quiz element, limit all selectors below to this element
    var $quiz = $(this);

    // Create a callback for *this quiz*
    $quiz.find('li ul li').click(function() {
        //counter display   
        if ($quiz.find('ul.answered').length == $quiz.data('questions')) {
            var correct_answers = $quiz.find('li ul li.correct').length;
            $('#'+$quiz.attr('id')+'mark').fadeIn('slow');
            $('#'+$quiz.attr('id')+'total').html('You got a '+correct_answers+' out of '+$quiz.data('questions')+' on the '+$quiz.attr('id')+' quiz.');
        }
    });
});