Increment score, jQuery quiz

Question

I have been developing a jQuery quiz and I have been able to add the value of each answer together, I would like to add a function to the quiz that would allow for specific values added to a set of variables after each question has been answered.

I have included a jsFiddle, you can see when each question is clicked its the third question before any value is registered, and if a forth question is added, the incremented value is added three times.

JSFiddle : http://jsfiddle.net/jamcrowe/ta7LZ/1/

            // Answers to each question add these values to finalResult
     var value = {
     'question0'   : { one: 1, two: 2, three: 3, four: 4 },
     'question1'   : { one: 1, two: 2, three: 3, four: 4 },
     'question2'   : { one: 1, two: 2, three: 3, four: 4 }
     };

          // The next question to present after each response
     var END = null;
     var nextQuestion = {
        'question0'   : { one: 'question1',   two: 'question1',  three: 'question1', four: 'question1',  },
       'question1'   : { one: 'question2',   two: 'question2',  three: 'question2', four: 'question2',  },
       'question2'  : { one: END,   two: END,  three: END, four: END,  },
   }; 

     // Show just the first question
     $('.ques').hide();
     $('#question0').fadeIn();

     var outcome = 0;

    $('.option').click(function(){

       increment();

       var answer = $(this).attr('value');
       var question = $(this).attr('name');

      outcome += value[question][answer];

      $('#' + question).delay(500).fadeOut(function(){
        var questionNext = nextQuestion[question][answer];
        if (questionNext == END){
            var finalResult = 'result ' + outcome;
            alert("Values added together : " + finalResult);
        }
        else {
            $('#' + questionNext).delay(2000).fadeIn(1000);
        }
    });

   });

    var online = 0;
    var creative = 0;
    var technical = 0;
    var analyst = 0;
   var managerial = 0;

    function  increment() {
    $('#q1a').click(function(){
        creative +=5;
        online ++;
        managerial ++;

    });
    $('#q2a').click(function(){
        creative +=5;
        online ++;
        managerial ++;

    });
    $('#q3a').click(function(){
        creative +=5;
        online ++;
        managerial ++;

    });
    $('#q4a').click(function(){
        creative +=5;
        online ++;
        managerial ++;

    });
    alert(creative);
    }

Answer 1

There's a two-part answer to what you're seeing:

First, every time you run the increment function, you bind a new click event to the divs with id q1a, q2a, q3a and q4a. What this means is that if you have multiple click events bound to one div, one click will run the event multiple times.

Next, these click events on q1a, q2a, etc. run AFTER the $('.option') click event. Therefore, when you see the second alert at 0 points, the variable creative is added to AFTER this alert is fired. You can see this by adding a console.log() statement inside your q2a click event like this:

$('#q2a').click(function(){
    creative +=5;
    online ++;
    managerial ++;
    console.log("q2a",creative);
});

Overall, you should either set up the click events inside of your increment function at the beginning of the script OR identify which div was clicked and add values according to this - DON'T add so many click events.

Hopefully this is helpful - I can answer further questions if you have any!