Мастер — кнопки «Начать сначала»

Я создал свой «мастер», и он работает так, как мне нужно, но мой вопрос заключается в том, как создать кнопку «Начать сначала» на страницах результатов, которая очистит все переключатели и отобразит начальный div?

В настоящее время у меня есть одна и та же кнопка внутри двух разделов результатов, но работает только первый. Помощь! (Выберите «Вопрос 1 — Ответ 1», затем «Вопрос 2 — Ответ 1 ИЛИ 2», чтобы перейти к тому, о чем я говорю.)

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

Кроме того, если у вас есть другая идея о том, как я могу реализовать этот мастер, который проще, пожалуйста, дайте мне знать.


person Dawn    schedule 16.06.2011    source источник
comment
Ваш код заставляет меня пожелать, чтобы вы знали, что такое DRY   -  person Raynos    schedule 17.06.2011
comment
@Raynos: Это хороший шаблон, хотя :-) Если серьезно (@OP), использование функций и других вещей, чтобы не повторяться, невероятно удобно!   -  person Bojangles    schedule 17.06.2011
comment
Ну, я не очень хорошо разбираюсь в этом типе программирования, и это похоже на дерево вопросов и ответов. Таким образом, ответ 1 может привести вас к вопросу 3, но ответ 2 может привести вас к вопросу 4 (если это имеет смысл), и так продолжается и продолжается. Я пытался найти способ построить это, и это единственный способ, который я мог придумать.   -  person Dawn    schedule 17.06.2011
comment
Есть ли способ очистить этот код? Я новичок в этом.   -  person Dawn    schedule 17.06.2011


Ответы (1)


Как вы, вероятно, прочитали в комментариях, ваш сценарий немного неправильный. Этот способ программирования никоим образом не динамичен... он может работать на каком-то уровне, но, как вы, вероятно, уже испытали, его ужасно поддерживать.

Для таких приложений вам нужно сделать основной плагин, который обрабатывает какой-то массив, содержащий вопросы и ответы. Это показалось мне интересной задачей, поэтому я создал плагин, основанный на параметрах ваших примеров. Он называется DawnWizard.

Я надеюсь, что вы поняли общую концепцию этого плагина и будете применять те же методы в своих следующих проектах :)

/*
 * 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);

[ Просмотреть вывод — Версия с комментариями ]

Как задать вопросы и ответы, вызвав его:

$('#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'
            ]
        }
    }
});

[ Просмотреть вывод — Версия с комментариями ]

person Kalle H. Väravas    schedule 18.09.2011
comment
Работали над этим с июня? :) Хорошая работа, и здорово, что вы комментируете все, чтобы ОП мог чему-то научиться, а не просто получить раздаточный материал. - person Wesley Murch; 18.09.2011
comment
@Wesley, мне нравится работать над старыми вопросами - без расового давления ^^ Кроме того, возможно, я получу значки и новые знания, делая это.. Но спасибо за голосование :) Я не был уверен, что использование массивов объектов было самый оптимальный способ.. но я проверил все остальные концепции, и это кажется наиболее эффективным способом. - person Kalle H. Väravas; 18.09.2011