Skip to content

Commit

Permalink
separating perQuestion and completion response messaging; closes #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@jewlofthelotus
jewlofthelotus committed Nov 3, 2013
1 parent 644815f commit b20f705
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 43 deletions.
34 changes: 20 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,47 @@ See js/slickQuiz-config.js to set up your quiz copy and questions.
To initialize your quiz:

$(function () {
$('#slickQuiz').slickQuiz();
var options = {
// see below
};
$('#slickQuiz').slickQuiz(options);
});


### Available Options

**`json`** (JSON Object) - your quiz JSON, pass this instead of setting quizJSON outside of the plugin (see js/slickQuiz-config.js)

**`checkAnswerText`** (String) - the text to use on the check answer button
**`checkAnswerText`** (String) *Default: 'Check My Answer!';* - the text to use on the check answer button

**`nextQuestionText`** (String) - the text to use on the next question button
**`nextQuestionText`** (String) *Default: 'Next »';* - the text to use on the next question button

**`backButtonText`** (String) - the text to use on the back button, if left null / blank (default) - no back button will be displayed
**`backButtonText`** (String) *Default: '';* - the text to use on the back button; if left null / blank (default) - no back button will be displayed

**`tryAgainText`** (String) - the text to use on the try again button, if left null / blank (default) - no try again button will be displayed
**`tryAgainText`** (String) *Default: '';* - the text to use on the try again button; if left null / blank - no try again button will be displayed

**`skipStartButton`** (Boolean) - whether or not to skip the quiz "start" button, defaults to false
**`skipStartButton`** (Boolean) *Default: false;* - whether or not to skip the quiz "start" button

**`numberOfQuestions`** (Integer) - the number of questions to load from the question set in the JSON object, defaults to null (all questions); Note: If you set this to an integer, you'll probably also want to set <code>randomSortQuestions</code> or <code>randomSort</code> to **true** to ensure that you get a mixed set of questions each page load.
**`numberOfQuestions`** (Integer) *Default: null;* - the number of questions to load from the question set in the JSON object, defaults to null (all questions); Note: If you set this to an integer, you'll probably also want to set <code>randomSortQuestions</code> or <code>randomSort</code> to **true** to ensure that you get a mixed set of questions each page load.

**`randomSortQuestions`** (Boolean) - whether or not to randomly sort questions ONLY, defaults to false
**`randomSortQuestions`** (Boolean) *Default: false;* - whether or not to randomly sort questions ONLY

**`randomSortAnswers`** (Boolean) - whether or not to randomly sort answers ONLY, defaults to false
**`randomSortAnswers`** (Boolean) *Default: false;* - whether or not to randomly sort answers ONLY

**`randomSort`** (Boolean) - whether or not to randomly sort questions AND their answers (overrides <code>randomSortQuestions</code> and <code>randomSortAnswers</code>), defaults to false. NOTE: this will be deprecated in a future release.
**`randomSort`** (Boolean) *Default: false;* - whether or not to randomly sort questions AND their answers (overrides <code>randomSortQuestions</code> and <code>randomSortAnswers</code>). NOTE: this will be deprecated in a future release.

**`preventUnanswered`** (Boolean) - prevents submitting a question with zero answers, defaults to false
**`preventUnanswered`** (Boolean) *Default: false;* - prevents submitting a question with zero answers

**`completionResponseMessaging`** (Boolean) - Hides all correct / incorrect response messages until the quiz is completed (nextQuestion button replaces checkAnswer button), defaults to false
**`perQuestionResponseMessaging`** (Boolean) *Default: true;* - Displays correct / incorrect response messages after each question is submitted.

**`completionResponseMessaging`** (Boolean) *Default: false;* - Displays all questions and selected answers with correct or incorrect response messages when the quiz is completed.

**`disableResponseMessaging`** (Boolean) - Hides all correct / incorrect response messages (nextQuestion button replaces checkAnswer button), defaults to false

#### Deprecated Options

**`disableNext`** (Boolean) - prevents submitting a question with zero answers, defaults to false. You should now use <code>preventUnanswered</code> instead.
**`disableNext`** - Prevents submitting a question with zero answers. You should now use <code>preventUnanswered</code> instead.

**`disableResponseMessaging`** - Hides all correct / incorrect response messages. You should now use <code>perQuestionResponseMessaging</code> and <code>completionResponseMessaging</code> instead.


## Advanced Usage
Expand Down
56 changes: 27 additions & 29 deletions js/slickQuiz.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/*!
* SlickQuiz jQuery Plugin
* http://github.com/QuickenLoans/SlickQuiz
* http://github.com/jewlofthelotus/SlickQuiz
*
* @updated October 15, 2013
* @updated November 2, 2013
* @version 1.5.1
*
* @author Julie Cameron - http://www.juliecameron.com
* @copyright (c) 2013 Quicken Loans - http://www.quickenloans.com
Expand All @@ -26,8 +27,8 @@
randomSortQuestions: false,
randomSortAnswers: false,
preventUnanswered: false,
completionResponseMessaging: false,
disableResponseMessaging: false
perQuestionResponseMessaging: true,
completionResponseMessaging: false
},

// Class Name Strings (Used for building quiz and for selectors)
Expand Down Expand Up @@ -90,6 +91,14 @@
depMsg += 'The \'disableNext\' option has been deprecated, please use \'preventUnanswered\' in it\'s place.\n\n';
}

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

if (depMsg !== '') {
if (typeof console != 'undefined') {
console.warn(depMsg);
Expand Down Expand Up @@ -190,7 +199,7 @@
questionHTML.append(answerHTML);

// If response messaging is NOT disabled, add it
if (!plugin.config.disableResponseMessaging) {
if (plugin.config.perQuestionResponseMessaging || plugin.config.completionResponseMessaging) {
// Now let's append the correct / incorrect response messages
var responseHTML = $('<ul class="' + responsesClass + '"></ul>');
responseHTML.append('<li class="' + correctResponseClass + '">' + question.correct + '</li>');
Expand All @@ -205,9 +214,8 @@
questionHTML.append('<a href="#" class="button ' + backToQuestionClass + '">' + 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) {
// If we're not showing responses per question, show next question button and make it check the answer too
if (!plugin.config.perQuestionResponseMessaging) {
questionHTML.append('<a href="#" class="button ' + nextQuestionClass + ' ' + checkAnswerClass + '">' + plugin.config.nextQuestionText + '</a>');
} else {
questionHTML.append('<a href="#" class="button ' + nextQuestionClass + '">' + plugin.config.nextQuestionText + '</a>');
Expand Down Expand Up @@ -320,20 +328,16 @@
questionLI.addClass(correctClass);
}

// 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();
// Toggle appropriate response (either for display now and / or on completion)
questionLI.find(correctResponse ? _correctResponse : _incorrectResponse).show();

$(checkButton).hide();
questionLI.find(_nextQuestionBtn).fadeIn(300);
questionLI.find(_prevQuestionBtn).fadeIn(300);
}

// Toggle responses based on submission
questionLI.find(correctResponse ? _correctResponse : _incorrectResponse).fadeIn(300);
// If perQuestionResponseMessaging is enabled, toggle response and navigation now
if (plugin.config.perQuestionResponseMessaging) {
$(checkButton).hide();
questionLI.find(_answers).hide();
questionLI.find(_responses).show();
questionLI.find(_nextQuestionBtn).fadeIn(300);
questionLI.find(_prevQuestionBtn).fadeIn(300);
}
},

Expand Down Expand Up @@ -373,12 +377,6 @@
prevQuestion.find(_answers).show();
prevQuestion.find(_checkAnswerBtn).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(_nextQuestionBtn).hide();
}

if (prevQuestion.attr('id') != 'question0') {
prevQuestion.find(_prevQuestionBtn).show();
} else {
Expand Down Expand Up @@ -425,8 +423,8 @@
$(_quizLevel).addClass('level' + levelRank);

$quizArea.fadeOut(300, function() {
// If response messaging is set to show upon quiz completion, show it
if (plugin.config.completionResponseMessaging && !plugin.config.disableResponseMessaging) {
// If response messaging is set to show upon quiz completion, show it now
if (plugin.config.completionResponseMessaging) {
$(_element + ' input').prop('disabled', true);
$(_element + ' .button:not(' + _tryAgainBtn + '), ' + _element + ' ' + _questionCount).hide();
$(_element + ' ' + _question + ', ' + _element + ' ' + _responses).show();
Expand Down

0 comments on commit b20f705

Please sign in to comment.