Improve Sensei Feedback

README.md

Dynamic Feedback for Sensei Multiple-Choice

This gist can partially implement a feature sorely needed in Sensei: The ability to indicate correct and incorrect answers, and a way to show feedback for both.

This has been a requested feature for years: http://ideas.woocommerce.com/forums/191508-sensei/suggestions/3582122-show-wrong-answers

How it Works

By adding some HTML to the feedback, and using this gist, you can show different text when an answer is correct, or incorrect. This is extremely useful with the autograde feature. Without it there is no indication what answers are right or wrong, or why.

Caveat

There is one shortcoming. Both correct and incorrect feedback will be in the HTML source. We're simply using css to display the appropriate one. If a clever user knew this they could view the source and see all the feedback, helping them pass the quiz. If you detect someone doing this, hire them immediately because they're going places.

Ok there may be another shortcoming. If you give a specific user feedback for a specific question, it might not show up. I don't use that feature so I didn't test.

Installing

In your child theme (you are using a child-theme, right?), copy the question-type-multiple-choice.php file to:

/wp-content/themes/{CHILD-THEME-NAME}/sensei/single-quiz/

Add the styles to your child theme's style.css file, located in the root of your child theme.

Add the "sensei_question_show_answers" filter to you child theme's functions.php file.

Usage

In the multiple-choice question's feedback add the following to show for correct answers:

<div class="correct">Flowers, puppies, chocolate chip cookies</div>

and the following to show for incorrect answers:

<div class="incorrect">Fire, death, raisin cookies</div>

Any text not in one of those two divs will show for both correct and incorrect answers.

With this you can finally give an explanation of why the correct answer is right, and hints on why the incorrect answer is wrong. And even if you do not use the feedback, the user will still be notified which answers are correct and incorrect.

Acknowledgments

This is based on an excellent idea by Diogenes Oliveira Junior, located here.

functions.php

/**
 * Add the following filter to your child theme's functions.php file
 */


/**
 * Hide sensei's rendering of answer_notes for questions types we've implemented our custom feedback.
 * The answer notes are shown in class-sensei-questions.php answer_feedback_notes() 
 */
add_filter('sensei_question_show_answers', 'show_answer_notes', 10, 5);
function show_answer_notes($show_answers, $question_id, $quiz_id, $lesson_id, $current_user_id) {
//	$question_data = Sensei_Question::get_template_data( sensei_get_the_question_id(), get_the_ID() );	// if you eliminate paremeters `10, 5` in `add_filter()` above
	$question_data = Sensei_Question::get_template_data( $question_id, $quiz_id );
	if ( $question_data['type'] == 'multiple-choice' ) {
		return false;
	}
	return true;
}

question-type-multiple-choice.php

<?php
/**
 * The Template for displaying Multiple Choice Questions.
 *
 * @author      Automattic
 * @package     Sensei
 * @category    Templates
 * @version     1.12.2
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Get the question data with the current quiz id
 * All data is loaded in this array to keep the template clean.
 */
$question_data = Sensei_Question::get_template_data( sensei_get_the_question_id(), get_the_ID() );

?>

<ul class="answers">

<?php
$count = 0;
foreach ( $question_data['answer_options'] as $option ) {

	$count++;

	?>

	<li class="<?php echo esc_attr( $option['option_class'] ); ?>">
		<input type="<?php echo esc_attr( $option['type'] ); ?>"
			   id="<?php echo esc_attr( 'question_' . $question_data['ID'] . '-option-' . $count ); ?>"
			   name="<?php echo esc_attr( 'sensei_question[' . $question_data['ID'] . ']' ); ?>[]"
			   value="<?php echo esc_attr( $option['answer'] ); ?>" <?php echo esc_attr( $option['checked'] ); ?>
				<?php echo is_user_logged_in() ? '' : ' disabled'; ?>
			/>

		<label for="<?php echo esc_attr( 'question_' . $question_data['ID'] . '-option-' . $count ); ?>">

			<?php echo wp_kses_post( apply_filters( 'sensei_answer_text', $option['answer'] ) ); ?>

		</label>

	</li>
<?php } // End For Loop ?>

</ul>


<?php
/**
 * Manually added to help indicate which answers are right and wrong.
 * In the 'Answer Feedback', you can add <div class="correct"></div><div class="incorrect"></div>.  The styles will
 * show just the feedback for correct and incorrect answers.
 */
$feedback = get_post_meta( $question_data["ID"], '_answer_feedback', true );

// if a correct answer
if ( $question_data["user_answer_entry"][0] !="" && $question_data["question_right_answer"][0] == $question_data["user_answer_entry"][0] ): ?>
	<div class="alert alert-success" role="alert">
		<?php echo "<div class='attention'>Correct!</div> $feedback"; ?>
	</div>
<?php
endif;

// if an incorrect answer
if ( $question_data["user_answer_entry"][0] !="" && $question_data["question_right_answer"][0] != $question_data["user_answer_entry"][0] ): ?>
	<div class="alert alert-warning" role="alert">
		<?php echo "<div class='attention'>Incorrect!</div> $feedback"; ?>
	</div>
<?php endif; ?>

style.css

.single-quiz .quiz-questions .alert { font-size:14px; padding:7px 14px; line-height:20px; }
.single-quiz .quiz-questions .alert-success .incorrect { display:none; }
.single-quiz .quiz-questions .alert-warning .correct { display:none; }