Wizard - "Start Over" buttons

I have created my "wizard" and I have it working the way I need it to but my question is how to I create a "Start Over" button on the results pages that will clear all radio buttons and display the starting div?

Currently I have the same button inside 2 results divs, but only the first one works. Help! (Select "Question 1 - Answer 1" then "Qu开发者_开发问答estion 2 - Answer 1 OR 2" to get to what I am talking about.)

http://jsfiddle.net/dswinson/PXp7c/56/

Also if you have another idea on how I can implement this wizard that is easier please let me know.

As you probably read from the comments, your script is little bit wrong. This way of programming is not dynamic in any way..it might work on some level, but as you probably already experienced its horrible to maintain.

For such applications you need to make a core-plugin that handles some sort of an array, that contains the questions and answers. This seemed like an interesting challenge, so I created a plugin, that is based on your examples parameters. Its called DawnWizard.

I hope, that understand the general concept of this plugin and will apply the same methods on your next projects :)

/*
 * DawnWizard v1.0
 * Originally made for Dawn's question in StackOverflow
 * http://stackoverflow.com/questions/6378814/
 * 
 * Made by Kalle H. Väravas
 * http://stackoverflow.com/users/721553/
 * 
 * No direct copyright or licences.
 * Use however you want, just give me lots of +1 :)
*/
(function ($) {
    $.fn.exists = function () {return $(this).length > 0;}
    $.fn.DawnWizard = function (input_setup) {
        var default_setup = {
            title: 'Demo wizard',
            description: 'Welcome text..'
        };
        setup = jQuery.extend(default_setup, input_setup || {});
        var wizard_container = $(this);
        var questions_count = 0;
        jQuery.each(setup['questions'], function () {
            questions_count++;
        });
        load_startup = function () {
            results = [];
            wizard_container.empty().append(
                $('<h1>').html(setup['wizard']['title']),
                content_container = $('<div id="content">').append(
                    $('<p>').html(setup['wizard']['description']),
                    $('<button id="start_wizard" />').text('Start the Wizard')
                )
            );
            $('#start_wizard').click(function () {
                load_question(current_qid = 1);
            });
        };
        load_results = function () {
            content_container.empty().append(results_container = $('<p>'));
            jQuery.each(setup['questions'], function (i, question) {
                results_container.append($('<div>').text(explain_qid(i) + ' - ' + results[i]));
            });
            content_container.after($('<button id="start_over">').text('Start over'));
            current_qid = 1;
            $('#start_over').click(function () {
                load_startup(current_qid = 1);
            });
        };
        load_question = function (qid) {
            if (qid == 0) {
                load_startup();
                return;
            } else if (qid == questions_count + 1) {
                load_results();
                return;
            }
            content_container.empty().append(
                $('<p>').append(
                    $('<b id="question">').html(setup['questions'][qid]['question']),
                    questions = $('<ul>')
                ),
                $('<button id="previous">').text('Previous'),
                $('<button id="next">').text('Next')
            );
            jQuery.each(setup['questions'][qid]['answers'], function (i, answer) {
                questions.append($('<li><input type="radio" name="answer" value="' + answer + '"> ' + answer + '</li>'));
            });
            $('#previous, #next').click(function () {
                var action =  $(this).attr('id');
                var checked_answer = $('input[name=answer]:checked');
                if (action == 'previous') {
                    load_question(current_qid = current_qid - 1);
                } else if (action == 'next') {
                    if (checked_answer.size() > 0) {
                        insert_result(current_qid, checked_answer.val());
                        load_question(current_qid = current_qid + 1);
                    } else {
                        add_message('You forgot to check an answer!', 'error');
                    }
                }
            });
        };
        insert_result = function (qid, answer) {
            results[qid] = answer;
        };
        explain_qid = function (qid) {
            return setup['questions'][qid]['question'];
        };
        add_message = function (message, type) {
            if (jQuery.inArray(type, ['error', 'success'])) {
                return;
            }
            if (!$('#message').exists()) {
                content_container.before(
                    $('<div id="message" class="' + type + '">')
                    .text(message)
                    .fadeIn()
                    .delay(2000)
                    .fadeOut('normal', function () {
                         $(this).remove();
                     })
                );
            }
        };
        load_startup();
    };
}) (jQuery);

^{[ View output - Commented version ]}

How to set the questions and answers, calling it:

$('#put_wizard_here').DawnWizard({
    wizard: {
        title: 'Demo wizard',
        description: 'Welcome text..'
    },
    questions: {
        1: {
            question: 'Who is hotter?',
            answers: [
                'Miley', 'Selena', 'Mila'
            ]
        },
        2: {
            question: 'Who is the smartest?',
            answers: [
                'Kalle H. Väravas', 'Kalle\'s colleague'
            ]
        },
        3: {
            question: 'Coolest StackExchange?',
            answers: [
                'StackOverflow', 'Programmers', 'Gaming'
            ]
        }
    }
});

^{[ View output - Commented version ]}