Question

I am creating a “whack-a-mole” style educational game for children where a question is given and they have to click on the right appearing number. For example when a sum like “2+2” is given the child must wait for a “4” to appear and click it. The question changes every time the correct answer is hit, but the problem is when the new question appears there is no right answer and every number you click adds to the wrong score. Can someone tell me why this keeps happening.

Here is the cases for the sums..

function correctlabels() {
    switch (Math.ceil(Math.random() * 9)) {
        case 1:
            check = sum1;
            $('#target').html('0 + 1 = ?');
            break;
        case 2:
            check = sum2;
            $('#target').html('1 + 1 = ?');
            break;
        case 3:
            check = sum3;
            $('#target').html('2 + 1 = ?');
            break;
        case 4:
            check = sum4;
            $('#target').html('2 + 2 = ?');
            break;
        case 5:
            check = sum5;
            $('#target').html('2 + 3 = ?');
            break;
        case 6:
            check = sum6;
            $('#target').html('3 + 3 = ?');
            break;
        case 7:
            check = sum7;
            $('#target').html('2 + 5 = ?');
            break;
        case 8:
            check = sum8;
            $('#target').html('2 + 6 = ?');
            break;
        case 9:
            check = sum9;
            $('#target').html('2 + 5 = ?');
            break;
    }

Here is a fiddle to show what I mean.. http://jsfiddle.net/pUwKb/8/

Answer 1

I think it’s because you never re-add ‘right’ classes.
Try changing this:

    $('.character').each(function (index, character) {
        if (!check(parseInt(this.getAttribute("value")))) {
            $(this).addClass("wrong");
            $(this).removeClass("right");
        }
    });

to this:

    $('.character').each(function (index, character) {
        if (!check(parseInt(this.getAttribute("value")))) {
            $(this).addClass("wrong");
            $(this).removeClass("right");
        } else {
            $(this).addClass("right");
            $(this).removeClass("wrong");
        }
    });

Nice game btw 🙂