Pergunta

Is there a quick easy way, from the code I have provided, to load the first question of the multiple choice quiz instead of showing the "Start Quiz" button?

(function($){

// Setup Sexy Quiz
$.slickQuiz = function(element, options) {
    var $element = $(element),
        element = element;

    var plugin = this;

    var defaults = {
        checkAnswerText:  'See Answer »',
        nextQuestionText: 'Next Question »',
        backButtonText: '',
        randomSort: true,
        randomSortQuestions: true,
        randomSortAnswers: true,
        preventUnanswered: false,
        completionResponseMessaging: false,
        disableResponseMessaging: false
    };

    // Reassign user-submitted deprecated options
    var depMsg = '';

    if (options && typeof options.disableNext != 'undefined') {
        if (typeof options.preventUnanswered == 'undefined') {
            options.preventUnanswered = options.disableNext;
        }
        depMsg += 'The \'disableNext\' option has been deprecated, please use \'preventUnanswered\' in it\'s place.\n\n';
    }

    if (depMsg != '') {
        if (typeof console != 'undefined') {
            console.warn(depMsg);
        } else {
            alert(depMsg);
        }
    }
    // End of deprecation reassignment

    plugin.config = $.extend(defaults, options);

    var selector = $(element).attr('id');

    var triggers = {
        starter:         '#' + selector + ' .startQuiz',
        checker:         '#' + selector + ' .checkAnswer',
        next:            '#' + selector + ' .nextQuestion',
        back:            '#' + selector + ' .backToQuestion'
    }

    var targets = {
        quizName:        '#' + selector + ' .quizName',
        quizArea:        '#' + selector + ' .quizArea',
        quizResults:     '#' + selector + ' .quizResults',
        quizResultsCopy: '#' + selector + ' .quizResultsCopy',
        quizHeader:      '#' + selector + ' .quizHeader',
        quizScore:       '#' + selector + ' .quizScore',
        quizLevel:       '#' + selector + ' .quizLevel'
    }

    // Set via json option or quizJSON variable (see slickQuiz-config.js)
    var quizValues = (plugin.config.json ? plugin.config.json : typeof quizJSON != 'undefined' ? quizJSON : null);

    var questions = plugin.config.randomSort || plugin.config.randomSortQuestions ?
                    quizValues.questions.sort(function() { return (Math.round(Math.random())-0.5); }) :
                    quizValues.questions;

    var levels = {
        1: quizValues.info.level1, // 80-100%
        2: quizValues.info.level2, // 60-79%
        3: quizValues.info.level3, // 40-59%
        4: quizValues.info.level4, // 20-39%
        5: quizValues.info.level5  // 0-19%
    }

    // Count the number of questions
    var questionCount = questions.length;

    plugin.method = {
        // Sets up the questions and answers based on above array
        setupQuiz: function() {
            $(targets.quizName).hide().html(quizValues.info.name).fadeIn(1000);
            $(targets.quizHeader).hide().prepend(quizValues.info.main).fadeIn(1000);
            $(targets.quizResultsCopy).append(quizValues.info.results);

            // Setup questions
            var quiz  = $('<ol class="questions"></ol>'),
                count = 1;

            // Loop through questions object
            for (i in questions) {
                if (questions.hasOwnProperty(i)) {
                    var question = questions[i];

                    var questionHTML = $('<li class="question" id="question' + (count - 1) + '"></li>');
                    questionHTML.append('<div class="questionCount">Question <span class="current">' + count + '</span> of <span class="total">' + questionCount + '</span></div>');
                    questionHTML.append('<h3>' + count + '. ' + question.q + '</h3>');

                    // Count the number of true values
                    var truths = 0;
                    for (i in question.a) {
                        if (question.a.hasOwnProperty(i)) {
                            var answer = question.a[i];
                            if (answer.correct) {
                                truths++;
                            }
                        }
                    };

                    // prepare a name for the answer inputs based on the question
                    var inputName  = 'question' + (count - 1);

                    // Now let's append the answers with checkboxes or radios depending on truth count
                    var answerHTML = $('<ul class="answers"></ul>');

                    var answers = plugin.config.randomSort || plugin.config.randomSortAnswers ?
                        question.a.sort(function() { return (Math.round(Math.random())-0.5); }) :
                        question.a;

                    for (i in answers) {
                        if (answers.hasOwnProperty(i)) {
                            var answer   = answers[i],
                                optionId = inputName + '_' + i.toString();

                            // If question has >1 true answers, use checkboxes; otherwise, radios
                            var input = '<input id="' + optionId + '" name="' + inputName
                                + '" type="' + (truths > 1 ? 'checkbox' : 'radio') + '" />';

                            var optionLabel = '<label for="' + optionId + '">' + answer.option + '</label>';

                            var answerContent = $('<li></li>')
                                .append(input)
                                .append(optionLabel);
                            answerHTML.append(answerContent);
                        }
                    };

                    // Append answers to question
                    questionHTML.append(answerHTML);

                    // If response messaging is NOT disabled, add it
                    if (!plugin.config.disableResponseMessaging) {
                        // Now let's append the correct / incorrect response messages
                        var responseHTML = $('<ul class="responses"></ul>');
                        responseHTML.append('<li class="correct">' + question.correct + '</li>');
                        responseHTML.append('<li class="incorrect">' + question.incorrect + '</li>');

                        // Append responses to question
                        questionHTML.append(responseHTML);
                    }

                    // Appends check answer / back / next question buttons
                    if (plugin.config.backButtonText && plugin.config.backButtonText != '') {
                        questionHTML.append('<a href="" class="button backToQuestion">' + plugin.config.backButtonText + '</a>');
                    }

                    // If response messaging is disabled or hidden until the quiz is completed,
                    // make the nextQuestion button the checkAnswer button, as well
                    if (plugin.config.disableResponseMessaging || plugin.config.completionResponseMessaging) {
                        questionHTML.append('<a href="" class="button nextQuestion checkAnswer">' + plugin.config.nextQuestionText + '</a>');
                    } else {
                        questionHTML.append('<a href="" class="button nextQuestion">' + plugin.config.nextQuestionText + '</a>');
                        questionHTML.append('<a href="" class="button checkAnswer">' + plugin.config.checkAnswerText + '</a>');
                    }

                    // Append question & answers to quiz
                    quiz.append(questionHTML);

                    count++;
                };
            };

            // Add the quiz content to the page
            $(targets.quizArea).append(quiz);

            // Toggle the start button
            $(triggers.starter).fadeIn(500);
        },

        // Starts the quiz (hides start button and displays first question)
        startQuiz: function(startButton) {
            $(startButton).fadeOut(300, function(){
                var firstQuestion = $('#' + selector + ' .questions li').first();
                if (firstQuestion.length) {
                    firstQuestion.fadeIn(500);
                }
            });
        },

        // Validates the response selection(s), displays explanations & next question button
        checkAnswer: function(checkButton) {
            var questionLI   = $($(checkButton).parents('li.question')[0]),
                answerInputs = questionLI.find('input:checked'),
                answers      = questions[parseInt(questionLI.attr('id').replace(/(question)/, ''))].a;

            // Collect the true answers needed for a correct response
            var trueAnswers = [];
            for (i in answers) {
                if (answers.hasOwnProperty(i)) {
                    var answer = answers[i];

                    if (answer.correct) {
                        trueAnswers.push(answer.option);
                    }
                }
            }

            // Collect the answers submitted
            var selectedAnswers = []
            answerInputs.each( function() {
                // If we're in jQuery Mobile, grab value from nested span
                if ($('.ui-mobile').length > 0) {
                    var inputValue = $(this).next('label').find('span.ui-btn-text').html();
                } else {
                    var inputValue = $(this).next('label').html();
                }

                selectedAnswers.push(inputValue);
            });

            if (plugin.config.preventUnanswered && selectedAnswers.length == 0) {
                alert('Choose the best possible answer.');
                return false;
            }

            // Verify all true answers (and no false ones) were submitted
            var correctResponse = plugin.method.compareAnswers(trueAnswers, selectedAnswers);

            if (correctResponse) {
                questionLI.addClass('correctResponse');
            }

            // If response messaging hasn't been disabled, toggle the proper response
            if (!plugin.config.disableResponseMessaging) {
                // If response messaging hasn't been set to display upon quiz completion, show it now
                if (!plugin.config.completionResponseMessaging) {
                    questionLI.find('.answers').hide();
                    questionLI.find('.responses').show();

                    $(checkButton).hide();
                    questionLI.find('.nextQuestion').fadeIn(300);
                    questionLI.find('.backToQuestion').fadeIn(300);
                }

                // Toggle responses based on submission
                if (correctResponse) {
                    questionLI.find('.correct').fadeIn(300);
                } else {
                    questionLI.find('.incorrect').fadeIn(300);
                }
            }
        },

        // Moves to the next question OR completes the quiz if on last question
        nextQuestion: function(nextButton) {
            var currentQuestion = $($(nextButton).parents('li.question')[0]),
                nextQuestion    = currentQuestion.next('.question'),
                answerInputs    = currentQuestion.find('input:checked');

            // If response messaging has been disabled or moved to completion,
            // make sure we have an answer if we require it, let checkAnswer handle the alert messaging
            if (plugin.config.preventUnanswered && answerInputs.length == 0) {
                return false;
            }

            if (nextQuestion.length) {
                currentQuestion.fadeOut(300, function(){
                    nextQuestion.find('.backToQuestion').show().end().fadeIn(500);
                });
            } else {
                plugin.method.completeQuiz();
            }
        },

        // Go back to the last question
        backToQuestion: function(backButton) {
            var questionLI = $($(backButton).parents('li.question')[0]),
                answers    = questionLI.find('.answers');

            // Back to previous question
            if (answers.css('display') === 'block' ) {
                var prevQuestion = questionLI.prev('.question');

                questionLI.fadeOut(300, function() {
                    prevQuestion.removeClass('correctResponse');
                    prevQuestion.find('.responses, .responses li').hide()
                    prevQuestion.find('.answers').show();
                    prevQuestion.find('.checkAnswer').show();

                    // If response messaging hasn't been disabled or moved to completion, hide the next question button
                    // If it has been, we need nextQuestion visible so the user can move forward (there is no separate checkAnswer button)
                    if (!plugin.config.disableResponseMessaging && !plugin.config.completionResponseMessaging) {
                        prevQuestion.find('.nextQuestion').hide();
                    }

                    if (prevQuestion.attr('id') != 'question0') {
                        prevQuestion.find('.backToQuestion').show();
                    } else {
                        prevQuestion.find('.backToQuestion').hide();
                    }

                    prevQuestion.fadeIn(500);
                });

            // Back to question from responses
            } else {
                questionLI.find('.responses').fadeOut(300, function(){
                    questionLI.removeClass('correctResponse');
                    questionLI.find('.responses li').hide();
                    answers.fadeIn(500);
                    questionLI.find('.checkAnswer').fadeIn(500);
                    questionLI.find('.nextQuestion').hide();

                    // if question is first, don't show back button on question
                    if (questionLI.attr('id') != 'question0') {
                        questionLI.find('.backToQuestion').show();
                    } else {
                        questionLI.find('.backToQuestion').hide();
                    }
                });
            }
        },

        // Hides all questions, displays the final score and some conclusive information
        completeQuiz: function() {
            var score     = $('#' + selector + ' .correctResponse').length,
                levelRank = plugin.method.calculateLevel(score),
                levelText = levels[levelRank];

            $(targets.quizScore + ' span').html(score + ' / ' + questionCount);
            $(targets.quizLevel + ' span').html(levelText);
            $(targets.quizLevel).addClass('level' + levelRank);

            $(targets.quizArea).fadeOut(300, function() {
                // If response messaging is set to show upon quiz completion, show it
                if (plugin.config.completionResponseMessaging && !plugin.config.disableResponseMessaging) {
                    $('#' + selector + ' .questions input').prop('disabled', true);
                    $('#' + selector + ' .questions .button, #' + selector + ' .questions .questionCount').hide();
                    $('#' + selector + ' .questions .question, #' + selector + ' .questions .responses').show();
                    $(targets.quizResults).append($('#' + selector + ' .questions')).fadeIn(500);
                } else {
                    $(targets.quizResults).fadeIn(500);
                }
            });
        },

        // Compares selected responses with true answers, returns true if they match exactly
        compareAnswers: function(trueAnswers, selectedAnswers) {
            if (trueAnswers.length != selectedAnswers.length) {
                return false;
            }

            var trueAnswers     = trueAnswers.sort(),
                selectedAnswers = selectedAnswers.sort();

            for (var i = 0, l = trueAnswers.length; i < l; i++) {
                if (trueAnswers[i] !== selectedAnswers[i]) {
                    return false;
                }
            }

            return true;
        },

        // Calculates knowledge level based on number of correct answers
        calculateLevel: function(correctAnswers) {
            var percent = correctAnswers / questionCount,
                level   = 0;

            if (plugin.method.inRange(0, 0.20, percent)) {
                level = 5;
            } else if (plugin.method.inRange(0.21, 0.40, percent)) {
                level = 4;
            } else if (plugin.method.inRange(0.41, 0.60, percent)) {
                level = 3;
            } else if (plugin.method.inRange(0.61, 0.80, percent)) {
                level = 2;
            } else if (plugin.method.inRange(0.81, 1.00, percent)) {
                level = 1;
            }

            return level;
        },

        // Determines if percentage of correct values is within a level range
        inRange: function(start, end, value) {
            if (value >= start && value <= end) {
                return true;
            }
            return false;
        }
    }

    plugin.init = function() {
        // Setup quiz
        plugin.method.setupQuiz();

        // Bind "start" button
        $(triggers.starter).bind('click', function(e) {
            e.preventDefault();
            plugin.method.startQuiz(this);
        });

        // Using 'live' instead of 'bind' since these triggers are generated
        // on the fly in setupQuiz and thus won't be available on page load

        // Bind "submit answer" button
        $(triggers.checker).live('click', function(e) {
            e.preventDefault();
            plugin.method.checkAnswer(this);
        });

        // Bind "back" button
        $(triggers.back).live('click', function(e) {
            e.preventDefault();
            plugin.method.backToQuestion(this);
        });

        // Bind "next question" button
        $(triggers.next).live('click', function(e) {
            e.preventDefault();
            plugin.method.nextQuestion(this);
        });
    }

    plugin.init();
}

$.fn.slickQuiz = function(options) {
    return this.each(function() {
        if (undefined == $(this).data('slickQuiz')) {
            var plugin = new $.slickQuiz(this, options);
            $(this).data('slickQuiz', plugin);
        }
    });
}

})(jQuery);
Foi útil?

Solução

Try this:

(function($){
// Setup Sexy Quiz
$.slickQuiz = function(element, options) {
    var $element = $(element),
         element = element;

    var plugin = this;

    var defaults = {
        checkAnswerText:  'See Answer &raquo;',
        nextQuestionText: 'Next Question &raquo;',
        backButtonText: '',
        randomSort: true,
        randomSortQuestions: true,
        randomSortAnswers: true,
        preventUnanswered: false,
        completionResponseMessaging: false,
        disableResponseMessaging: false
    };

    // Reassign user-submitted deprecated options
    var depMsg = '';

    if (options && typeof options.disableNext != 'undefined') {
        if (typeof options.preventUnanswered == 'undefined') {
            options.preventUnanswered = options.disableNext;
        }
        depMsg += 'The \'disableNext\' option has been deprecated, please use \'preventUnanswered\' in it\'s place.\n\n';
    }

    if (depMsg != '') {
        if (typeof console != 'undefined') {
            console.warn(depMsg);
        } else {
            alert(depMsg);
        }
    }
    // End of deprecation reassignment

    plugin.config = $.extend(defaults, options);

    var selector = $(element).attr('id');

    var triggers = {
        //starter:         '#' + selector + ' .startQuiz',
        checker:         '#' + selector + ' .checkAnswer',
        next:            '#' + selector + ' .nextQuestion',
        back:            '#' + selector + ' .backToQuestion'
    }

    var targets = {
        quizName:        '#' + selector + ' .quizName',
        quizArea:        '#' + selector + ' .quizArea',
        quizResults:     '#' + selector + ' .quizResults',
        quizResultsCopy: '#' + selector + ' .quizResultsCopy',
        quizHeader:      '#' + selector + ' .quizHeader',
        quizScore:       '#' + selector + ' .quizScore',
        quizLevel:       '#' + selector + ' .quizLevel'
    }

    // Set via json option or quizJSON variable (see slickQuiz-config.js)
    var quizValues = (plugin.config.json ? plugin.config.json : typeof quizJSON != 'undefined' ? quizJSON : null);

    var questions = plugin.config.randomSort || plugin.config.randomSortQuestions ?
                    quizValues.questions.sort(function() { return (Math.round(Math.random())-0.5); }) :
                    quizValues.questions;

    var levels = {
        1: quizValues.info.level1, // 80-100%
        2: quizValues.info.level2, // 60-79%
        3: quizValues.info.level3, // 40-59%
        4: quizValues.info.level4, // 20-39%
        5: quizValues.info.level5  // 0-19%
    }

    // Count the number of questions
    var questionCount = questions.length;

    plugin.method = {
        // Sets up the questions and answers based on above array
        setupQuiz: function() {
            $(targets.quizName).hide().html(quizValues.info.name).fadeIn(1000);
            $(targets.quizHeader).hide().prepend(quizValues.info.main).fadeIn(1000);
            $(targets.quizResultsCopy).append(quizValues.info.results);

            // Setup questions
            var quiz  = $('<ol class="questions"></ol>'),
                count = 1;

            // Loop through questions object
            for (i in questions) {
                if (questions.hasOwnProperty(i)) {
                    var question = questions[i];

                    var questionHTML = $('<li class="question" id="question' + (count - 1) + '"></li>');
                    questionHTML.append('<div class="questionCount">Question <span class="current">' + count + '</span> of <span class="total">' + questionCount + '</span></div>');
                    questionHTML.append('<h3>' + count + '. ' + question.q + '</h3>');

                    // Count the number of true values
                    var truths = 0;
                    for (i in question.a) {
                        if (question.a.hasOwnProperty(i)) {
                            var answer = question.a[i];
                            if (answer.correct) {
                                truths++;
                            }
                        }
                    };

                    // prepare a name for the answer inputs based on the question
                    var inputName  = 'question' + (count - 1);

                    // Now let's append the answers with checkboxes or radios depending on truth count
                    var answerHTML = $('<ul class="answers"></ul>');

                    var answers = plugin.config.randomSort || plugin.config.randomSortAnswers ?
                        question.a.sort(function() { return (Math.round(Math.random())-0.5); }) :
                        question.a;

                    for (i in answers) {
                        if (answers.hasOwnProperty(i)) {
                            var answer   = answers[i],
                                optionId = inputName + '_' + i.toString();

                            // If question has >1 true answers, use checkboxes; otherwise, radios
                            var input = '<input id="' + optionId + '" name="' + inputName
                                + '" type="' + (truths > 1 ? 'checkbox' : 'radio') + '" />';

                            var optionLabel = '<label for="' + optionId + '">' + answer.option + '</label>';

                            var answerContent = $('<li></li>')
                                .append(input)
                                .append(optionLabel);
                            answerHTML.append(answerContent);
                        }
                    };

                    // Append answers to question
                    questionHTML.append(answerHTML);

                    // If response messaging is NOT disabled, add it
                    if (!plugin.config.disableResponseMessaging) {
                        // Now let's append the correct / incorrect response messages
                        var responseHTML = $('<ul class="responses"></ul>');
                        responseHTML.append('<li class="correct">' + question.correct + '</li>');
                        responseHTML.append('<li class="incorrect">' + question.incorrect + '</li>');

                        // Append responses to question
                        questionHTML.append(responseHTML);
                    }

                    // Appends check answer / back / next question buttons
                    if (plugin.config.backButtonText && plugin.config.backButtonText != '') {
                        questionHTML.append('<a href="" class="button backToQuestion">' + plugin.config.backButtonText + '</a>');
                    }

                    // If response messaging is disabled or hidden until the quiz is completed,
                    // make the nextQuestion button the checkAnswer button, as well
                    if (plugin.config.disableResponseMessaging || plugin.config.completionResponseMessaging) {
                        questionHTML.append('<a href="" class="button nextQuestion checkAnswer">' + plugin.config.nextQuestionText + '</a>');
                    } else {
                        questionHTML.append('<a href="" class="button nextQuestion">' + plugin.config.nextQuestionText + '</a>');
                        questionHTML.append('<a href="" class="button checkAnswer">' + plugin.config.checkAnswerText + '</a>');
                    }

                    // Append question & answers to quiz
                    quiz.append(questionHTML);

                    count++;
                };
            };

            // Add the quiz content to the page
            $(targets.quizArea).append(quiz);

            // Toggle the start button
            // $(triggers.starter).fadeIn(500);
        },

        // Starts the quiz (hides start button and displays first question)
        startQuiz: function(startButton) {
            var firstQuestion = $('#' + selector + ' .questions li').first();
            if (firstQuestion.length) {
                firstQuestion.fadeIn(500);
            }
        },

        // Validates the response selection(s), displays explanations & next question button
        checkAnswer: function(checkButton) {
            var questionLI   = $($(checkButton).parents('li.question')[0]),
                answerInputs = questionLI.find('input:checked'),
                answers      = questions[parseInt(questionLI.attr('id').replace(/(question)/, ''))].a;

            // Collect the true answers needed for a correct response
            var trueAnswers = [];
            for (i in answers) {
                if (answers.hasOwnProperty(i)) {
                    var answer = answers[i];

                    if (answer.correct) {
                        trueAnswers.push(answer.option);
                    }
                }
            }

            // Collect the answers submitted
            var selectedAnswers = []
            answerInputs.each( function() {
                // If we're in jQuery Mobile, grab value from nested span
                if ($('.ui-mobile').length > 0) {
                    var inputValue = $(this).next('label').find('span.ui-btn-text').html();
                } else {
                    var inputValue = $(this).next('label').html();
                }

                selectedAnswers.push(inputValue);
            });

            if (plugin.config.preventUnanswered && selectedAnswers.length == 0) {
                alert('Choose the best possible answer.');
                return false;
            }

            // Verify all true answers (and no false ones) were submitted
            var correctResponse = plugin.method.compareAnswers(trueAnswers, selectedAnswers);

            if (correctResponse) {
                questionLI.addClass('correctResponse');
            }

            // If response messaging hasn't been disabled, toggle the proper response
            if (!plugin.config.disableResponseMessaging) {
                // If response messaging hasn't been set to display upon quiz completion, show it now
                if (!plugin.config.completionResponseMessaging) {
                    questionLI.find('.answers').hide();
                    questionLI.find('.responses').show();

                    $(checkButton).hide();
                    questionLI.find('.nextQuestion').fadeIn(300);
                    questionLI.find('.backToQuestion').fadeIn(300);
                }

                // Toggle responses based on submission
                if (correctResponse) {
                    questionLI.find('.correct').fadeIn(300);
                } else {
                    questionLI.find('.incorrect').fadeIn(300);
                }
            }
        },

        // Moves to the next question OR completes the quiz if on last question
        nextQuestion: function(nextButton) {
            var currentQuestion = $($(nextButton).parents('li.question')[0]),
                nextQuestion    = currentQuestion.next('.question'),
                answerInputs    = currentQuestion.find('input:checked');

            // If response messaging has been disabled or moved to completion,
            // make sure we have an answer if we require it, let checkAnswer handle the alert messaging
            if (plugin.config.preventUnanswered && answerInputs.length == 0) {
                return false;
            }

            if (nextQuestion.length) {
                currentQuestion.fadeOut(300, function(){
                    nextQuestion.find('.backToQuestion').show().end().fadeIn(500);
                });
            } else {
                plugin.method.completeQuiz();
            }
        },

        // Go back to the last question
        backToQuestion: function(backButton) {
            var questionLI = $($(backButton).parents('li.question')[0]),
                answers    = questionLI.find('.answers');

            // Back to previous question
            if (answers.css('display') === 'block' ) {
                var prevQuestion = questionLI.prev('.question');

                questionLI.fadeOut(300, function() {
                    prevQuestion.removeClass('correctResponse');
                    prevQuestion.find('.responses, .responses li').hide()
                    prevQuestion.find('.answers').show();
                    prevQuestion.find('.checkAnswer').show();

                    // If response messaging hasn't been disabled or moved to completion, hide the next question button
                    // If it has been, we need nextQuestion visible so the user can move forward (there is no separate checkAnswer button)
                    if (!plugin.config.disableResponseMessaging && !plugin.config.completionResponseMessaging) {
                        prevQuestion.find('.nextQuestion').hide();
                    }

                    if (prevQuestion.attr('id') != 'question0') {
                        prevQuestion.find('.backToQuestion').show();
                    } else {
                        prevQuestion.find('.backToQuestion').hide();
                    }

                    prevQuestion.fadeIn(500);
                });

            // Back to question from responses
            } else {
                questionLI.find('.responses').fadeOut(300, function(){
                    questionLI.removeClass('correctResponse');
                    questionLI.find('.responses li').hide();
                    answers.fadeIn(500);
                    questionLI.find('.checkAnswer').fadeIn(500);
                    questionLI.find('.nextQuestion').hide();

                    // if question is first, don't show back button on question
                    if (questionLI.attr('id') != 'question0') {
                        questionLI.find('.backToQuestion').show();
                    } else {
                        questionLI.find('.backToQuestion').hide();
                    }
                });
            }
        },

        // Hides all questions, displays the final score and some conclusive information
        completeQuiz: function() {
            var score     = $('#' + selector + ' .correctResponse').length,
                levelRank = plugin.method.calculateLevel(score),
                levelText = levels[levelRank];

            $(targets.quizScore + ' span').html(score + ' / ' + questionCount);
            $(targets.quizLevel + ' span').html(levelText);
            $(targets.quizLevel).addClass('level' + levelRank);

            $(targets.quizArea).fadeOut(300, function() {
                // If response messaging is set to show upon quiz completion, show it
                if (plugin.config.completionResponseMessaging && !plugin.config.disableResponseMessaging) {
                    $('#' + selector + ' .questions input').prop('disabled', true);
                    $('#' + selector + ' .questions .button, #' + selector + ' .questions .questionCount').hide();
                    $('#' + selector + ' .questions .question, #' + selector + ' .questions .responses').show();
                    $(targets.quizResults).append($('#' + selector + ' .questions')).fadeIn(500);
                } else {
                    $(targets.quizResults).fadeIn(500);
                }
            });
        },

        // Compares selected responses with true answers, returns true if they match exactly
        compareAnswers: function(trueAnswers, selectedAnswers) {
            if (trueAnswers.length != selectedAnswers.length) {
                return false;
            }

            var trueAnswers     = trueAnswers.sort(),
                selectedAnswers = selectedAnswers.sort();

            for (var i = 0, l = trueAnswers.length; i < l; i++) {
                if (trueAnswers[i] !== selectedAnswers[i]) {
                    return false;
                }
            }

            return true;
        },

        // Calculates knowledge level based on number of correct answers
        calculateLevel: function(correctAnswers) {
            var percent = correctAnswers / questionCount,
                level   = 0;

            if (plugin.method.inRange(0, 0.20, percent)) {
                level = 5;
            } else if (plugin.method.inRange(0.21, 0.40, percent)) {
                level = 4;
            } else if (plugin.method.inRange(0.41, 0.60, percent)) {
                level = 3;
            } else if (plugin.method.inRange(0.61, 0.80, percent)) {
                level = 2;
            } else if (plugin.method.inRange(0.81, 1.00, percent)) {
                level = 1;
            }

            return level;
        },

        // Determines if percentage of correct values is within a level range
        inRange: function(start, end, value) {
            if (value >= start && value <= end) {
                return true;
            }
            return false;
        }
    }

    plugin.init = function() {
        // Setup quiz
        plugin.method.setupQuiz();

        plugin.method.startQuiz(this);

        // Using 'live' instead of 'bind' since these triggers are generated
        // on the fly in setupQuiz and thus won't be available on page load

        // Bind "submit answer" button
        $(triggers.checker).live('click', function(e) {
            e.preventDefault();
            plugin.method.checkAnswer(this);
        });

        // Bind "back" button
        $(triggers.back).live('click', function(e) {
            e.preventDefault();
            plugin.method.backToQuestion(this);
        });

        // Bind "next question" button
        $(triggers.next).live('click', function(e) {
            e.preventDefault();
            plugin.method.nextQuestion(this);
        });
    }

    plugin.init();
}

$.fn.slickQuiz = function(options) {
    return this.each(function() {
        if (undefined == $(this).data('slickQuiz')) {
            var plugin = new $.slickQuiz(this, options);
            $(this).data('slickQuiz', plugin);
        }
    });
}

})(jQuery);

Outras dicas

After take a look at your plugin, I came with a solution. First, take a look at this snippet, this function will start your quiz. It take a selector to start button, hide that button and show the quiz.

// Starts the quiz (hides start button and displays first question)
    startQuiz: function(startButton) {
        $(startButton).fadeOut(300, function(){
            var firstQuestion = $('#' + selector + ' .questions li').first();
            if (firstQuestion.length) {
                firstQuestion.fadeIn(500);
            }
        });
    },

We will modify this function, remove the startButton argument because we don't need to hide it anymore, we also remove the part that hide the start button and keep the part that show the first question:

    startQuiz: function() {           
        var firstQuestion = $('#' + selector + ' .questions li').first();
        if (firstQuestion.length) {
            firstQuestion.fadeIn(500);
        }            
    },

Second, in plugin.init, found this code

    // Bind "start" button
    $(triggers.starter).bind('click', function(e) {
        e.preventDefault();
        plugin.method.startQuiz(this);
    });

This code bind the startQuiz function to start button. Since you want to show the quiz in start up, you can remove or comment this.

In plugin.method, notice the setupQuiz function. At the end of this function, it display the start button as following:

        // Toggle the start button
        $(triggers.starter).fadeIn(500);

Because you want to show the question instead of the start button, we will call to startQuiz method instead of show the start button, replace that line of code with follwo:

plugin.method.startQuiz();

and we finish with the modify. Now this plugin should show the first question instead of start button.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top