disabling radio buttons after some trys and change the form respectively

Question

<div class="question" id="question_0">
    <label>
        Something:
        <input type="radio" name="radyo" value="1" />
        <input type="radio" name="radyo" value="2" />
        <input type="radio" name="radyo" value="3" />
        <input type="radio" name="radyo" value="4" />
        <input type="radio" name="radyo" value="5" />
    </label>
</div>
<div class="question" id="question_1">
    <label>
        FFFF:
        <input type="radio" name="radyo" value="1" />
        <input type="radio" name="radyo" value="2" />
        <input type="radio" name="radyo" value="3" />
        <input type="radio" name="radyo" value="4" />
        <input type="radio" name="radyo" value="5" />
    </label>
</div>
<div class="question" id="question_2">
    <label>
        asdf:
        <input type="radio" name="radyo" value="6" />
        <input type="radio" name="radyo" value="2" />
        <input type="radio" name="radyo" value="3" />
        <input type="radio" name="radyo" value="4" />

    </label>
</div>
<button id="next" disabled="disabled">Next</button>

html

.question { display: none; }
#question_0 { display: block; } 

css

$(document).ready(function() {

    /*
     * question: What question the user is currently on
     * trys: The amount of tries for the CURRENT question
     * answers: The answers for each questions. Matches with radio button values
     */
    var question = trys = 0,
        answers = [1, 6, 2];




    // When the user tries to click the next button (only applies when not disabled)
    $('#next').click(function() {

        // If the next question exists, transition to it
        if ($('#question_' + ++question).length) {
            $('#next').attr('disabled', 'disabled');
            $('#question_' + (question - 1)).fadeOut('fast', function()
                { $('#question_' + ++question).fadeIn('fast'); });
            trys = 0;

        // Else submit the form
        } else alert('submit form');  //$('form').submit(); ???
    });  




    // When the user clicks on a radio button (tries to answer a question)
    $('input[type="radio"]').click(function() {

        // If the answer does not equal what the user clicked on
        if ($(this).val() != answers[question]) {
            $('#next').attr('disabled', 'disabled');  //Disable the button
            ++trys;
            if (trys >= 3) {  //If the user tried 3 times, they fucked up
                $('#question_' + question + ' input').attr('disabled', 'disabled');
                alert('you fucked up');
            } else alert('wrong');  //If the user still has more tries tell them they're wrong

        // Else enable the ability to go to the next question
        } else $('#next').removeAttr('disabled');
    });

});

javascript

hey i have this code. You first see something and when you click first radio button. You can click next. Otherwise you will see some error messages. After three wrong trys form input will be disabled. In the next section you will see another radio buttons. But this doesnt work well. I thought i have the answer in answers array but i dont understand why it doesnt work any tips?

Answer 1

Here are a few tips:

1. the "next" button handler should disable button after passing to the next stage;
2. check the radio button values to match any value for certain stage in your answers array;
3. show the first stage at beginning;