Changes for MDL-7467.

The images show each possible answer's "correctness":

Green tick - correct answer
Amber tick - partially correct answer
Red cross - wrong answer

Each image will have the appropriate alt text.

The answer that the student has picked is highlited by changing the background colour: light green, light amber or light yellow, depending on the correctness of the chosen answer. In addition to this, the image for that answer is much bigger in size than for the other possible answers. The alt text for this image will indicate that this answer was picked.

This way, the visual cues, the relative importance of each answer (chosen/non-chosen), and the relative relationships (correct/wrong) are kept. The chosen answer is emphasised by the background highlighting, by the bigger size of the icon, and by the alt text as well. I think this covers all the bases.

diff --git a/question/type/match/display.html b/question/type/match/display.html
index e9c3101d75fdb2f5e79f7bdee5868418dbb63619..828262a7406494026c6a7afcdbef8f0765115503 100644 (file)
--- a/question/type/match/display.html
+++ b/question/type/match/display.html
@@ -17,11 +17,14 @@
         <td class="c1 control <?php echo $answer->class ?>">
           <?php echo $answer->control; ?>
         </td>
-<?php if (!empty($answer->feedback)) { ?>
+        <td>
+            <?php echo $answer->feedbackimg; ?>
+        </td>
+        <?php if (!empty($answer->feedback)) { ?>
         <td class="c0 feedback">
           <?php echo $answer->feedback; ?>
         </td>
-<?php } ?>
+        <?php } ?>
       </tr>
     <?php } ?>
   </table>

diff --git a/question/type/match/questiontype.php b/question/type/match/questiontype.php
index 766aa200c294f1f017b968c516e5f72602977603..fb382778f6c59dd89364412e0cb88cbbda2bcab5 100644 (file)
--- a/question/type/match/questiontype.php
+++ b/question/type/match/questiontype.php
@@ -284,10 +284,15 @@ class question_match_qtype extends default_questiontype {
                     and $options->correct_responses
                     and isset($correctanswers[$subquestion->id])
                     and ($correctanswers[$subquestion->id] == $response)) {
-                    $a->class = ' highlight ';
+                    $a->class = ' correct ';
+                                       $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_big.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                } else if ($response) {
+                    $a->class = ' incorrect ';
+                                       $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_big.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
                 } else {
-                    $a->class = '';
-                }
+                                       $a->class = ' ';
+                                       $a->feedbackimg = ' ';
+                               }
     
                 $a->control = choose_from_menu($answers, $menuname, $response, 'choose', '', 0,
                  true, $options->readonly);

diff --git a/question/type/multianswer/questiontype.php b/question/type/multianswer/questiontype.php
index c23b2f50c7a4ab2d1fd4db4dd34566749a098f2a..e8aa50bd4ca118314b55a4844cd1cabd2576ba88 100644 (file)
--- a/question/type/multianswer/questiontype.php
+++ b/question/type/multianswer/questiontype.php
@@ -237,6 +237,7 @@ class embedded_cloze_qtype extends default_questiontype {
             // Determine feedback popup if any
             $popup = '';
             $style = '';
+                       $feedbackimg = '';
             if ($options->feedback) {
                 $chosenanswer = null;
                 switch ($wrapped->qtype) {
@@ -278,19 +279,21 @@ class embedded_cloze_qtype extends default_questiontype {
                 if (!empty($chosenanswer) && $options->correct_responses) {
                     if (!isset($chosenanswer->fraction)
                             || $chosenanswer->fraction <= 0.0) {
-                        // The response must have been totally wrong:
+                        // The response must have been totally wrong.
                         $style = 'class="incorrect"';
-
+                                               $feedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_big.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
                     } else if ($chosenanswer->fraction >= 1.0) {
-                        // The response was correct!!
+                        // The response was correct.
                         $style = 'class="correct"';
-
+                                               $feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_big.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
                     } else {
-                        // This response did at least give some credit:
-                        $style = 'class="partialcorrect"';
+                        // This response did at least give some credit.
+                        $style = 'class="partiallycorrect"';
+                                               $feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_amber_big.gif" alt="'.get_string('partiallycorrect', 'quiz').'" width="16" height="16" />';
                     }
                 } else {
                     $style = '';
+                                       $feedbackimg = '';
                 }
             }
 
@@ -303,6 +306,7 @@ class embedded_cloze_qtype extends default_questiontype {
                     if (!empty($feedback) && $USER->screenreader) {
                         echo "<img src=\"$CFG->pixpath/i/feedback.gif\" alt=\"$feedback\" />";
                     }
+                                       echo $feedbackimg;
                     break;
                 case 'multichoice':
                     $outputoptions = '<option></option>'; // Default empty option
@@ -311,22 +315,26 @@ class embedded_cloze_qtype extends default_questiontype {
                                 ? ' selected="selected" ' : '';
                         $outputoptions .= "<option value=\"$mcanswer->id\" $selected>$mcanswer->answer</option>";
                     }
-                   // In the next line, $readonly is invalid HTML, but it works in
-                   // all browsers. $disabled would be valid, but then the JS for
-                   // displaying the feedback does not work. Of course, we should
-                   // not be relying on JS (for accessibility reasons), but that is
-                   //a bigger problem.
-                   echo "<select $popup $readonly $style name=\"$inputname\">";
-                   echo $outputoptions;
-                   echo '</select>';
-                   if (!empty($feedback) && $USER->screenreader) {
+                    // In the next line, $readonly is invalid HTML, but it works in
+                    // all browsers. $disabled would be valid, but then the JS for
+                    // displaying the feedback does not work. Of course, we should
+                    // not be relying on JS (for accessibility reasons), but that is
+                    // a bigger problem.
+                                       //
+                                       // The span is used for safari, which does not allow styling of
+                                       // selects.
+                    echo "<span $style><select $popup $readonly $style name=\"$inputname\">";
+                    echo $outputoptions;
+                    echo '</select></span>';
+                    if (!empty($feedback) && $USER->screenreader) {
                         echo "<img src=\"$CFG->pixpath/i/feedback.gif\" alt=\"$feedback\" />";
-                   }
-                   break;
-               default:
-                   error("Unable to recognize questiontype ($wrapped->qtype) of
-                          question part $positionkey.");
-                   break;
+                    }
+                                   echo $feedbackimg;
+                    break;
+                default:
+                    error("Unable to recognize questiontype ($wrapped->qtype) of
+                           question part $positionkey.");
+                    break;
            }
            echo "</label>"; // MDL-7497
         }

diff --git a/question/type/multichoice/display.html b/question/type/multichoice/display.html
index 83960bc132a6e282f0b73775b619618a68661ab2..5e4f66d6cd9fff20683ca1346c0ed1d9569b4772 100644 (file)
--- a/question/type/multichoice/display.html
+++ b/question/type/multichoice/display.html
@@ -20,6 +20,7 @@
         <td class="c1 text <?php echo $answer->class ?>">
           <label for="<?php echo $answer->id ?>">
             <?php echo $answer->text; ?>
+            <?php echo $answer->feedbackimg; ?>
           </label>
         </td>
         <td class="c0 feedback">

diff --git a/question/type/multichoice/questiontype.php b/question/type/multichoice/questiontype.php
index 01b2bc64faf75bb14acbd572fb7a1b4ba52c61e4..6e4d1f7a3c866a88a362eb8c76eb788871175991 100644 (file)
--- a/question/type/multichoice/questiontype.php
+++ b/question/type/multichoice/questiontype.php
@@ -283,34 +283,58 @@ class question_multichoice_qtype extends default_questiontype {
             $answer = &$answers[$aid];
             $qnumchar = chr(ord('a') + $key);
             $checked = '';
-
+                       $chosen = false;
+                       
             if ($question->options->single) {
                 $type = 'type="radio"';
                 $name   = "name=\"{$question->name_prefix}\"";
                 if (isset($state->responses['']) and $aid == $state->responses['']) {
                     $checked = 'checked="checked"';
+                                       $chosen = true;
                 }
             } else {
                 $type = ' type="checkbox" ';
                 $name   = "name=\"{$question->name_prefix}{$aid}\"";
-                $checked = isset($state->responses[$aid])
-                         ? 'checked="checked"' : '';
+                if (isset($state->responses[$aid])) {
+                                       $checked = 'checked="checked"';
+                                       $chosen = true;
+                               }
             }
 
             $a = new stdClass;
             $a->id   = $question->name_prefix . $aid;
+                       $a->class = '';
+                       $a->feedbackimg = '';
 
             // Print the control
             $a->control = "<input $readonly id=\"$a->id\" $name $checked $type value=\"$aid\"" .
                  " alt=\"" . s($answer->answer) . '" />';
 
-            // Print the text by the control highlighting if correct responses
-            // should be shown and the current answer is the correct answer in
-            // the single selection case or has a positive score in the multiple
-            // selection case
-            $a->class = ($options->readonly && $options->correct_responses &&
-                is_array($correctanswers) && in_array($aid, $correctanswers)) ?
-                'highlight' : '';
+                       if ($options->readonly) {
+                               // Means we need to display answer correctness.
+                               if ($answer->fraction == 1) {
+                                       if ($chosen) {
+                                               $a->class = 'correct';
+                                               $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_big.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                                       } else {
+                                               $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_small.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                                       }
+                               } else if ($answer->fraction > 0 && $answer->fraction < 1) {
+                                       if ($chosen) {
+                                               $a->class = 'partiallycorrect';
+                                               $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_amber_big.gif" alt="'.get_string('partiallycorrect', 'quiz').'" width="16" height="16" />';
+                                       } else {
+                                               $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_amber_small.gif" alt="'.get_string('partiallycorrect', 'quiz').'" width="16" height="16" />';
+                                       }
+                               } else {
+                                       if ($chosen) {
+                                               $a->class = 'incorrect';
+                                               $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_big.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                                       } else {
+                                               $a->feedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_small.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                                       }
+                               }
+                       }
 
             // Print the answer text
             $a->text = format_text("$qnumchar. $answer->answer", FORMAT_MOODLE, $formatoptions, $cmoptions->course);

diff --git a/question/type/shortanswer/display.html b/question/type/shortanswer/display.html
index d7f3f3829578b9f661755a7470cbbc35a9576c2f..6f1bbb478b20f1595db8743d1b13a73f7d072a15 100644 (file)
--- a/question/type/shortanswer/display.html
+++ b/question/type/shortanswer/display.html
@@ -12,7 +12,8 @@
   </div>
 
   <div class="answer">
-    <input type="text" <?php echo "$readonly $inputname $value"; ?> size="80"/>
+    <input type="text" class="<?php echo $class; ?>" <?php echo "$readonly $inputname $value"; ?> size="80"/>
+    <?php echo $feedbackimg; ?>
   </div>
   <?php if ($feedback) { ?>
     <div class="feedback">

diff --git a/question/type/shortanswer/questiontype.php b/question/type/shortanswer/questiontype.php
index c18c22d60af510c0f18f62b677dd5ed54019f311..114f5ab5d701a741c09fd0f2b7b8590a1998179d 100644 (file)
--- a/question/type/shortanswer/questiontype.php
+++ b/question/type/shortanswer/questiontype.php
@@ -146,14 +146,28 @@ class question_shortanswer_qtype extends default_questiontype {
         $inputname = ' name="'.$nameprefix.'" ';
 
         $feedback = '';
+               $class = '';
+               $feedbackimg = '';
+
         if ($options->feedback) {
             foreach($question->options->answers as $answer) {
-                if($this->test_response($question, $state, $answer)) {
-                    if ($answer->feedback) {
+                               if ($this->test_response($question, $state, $answer)) {
+                                       // Answer was correct or partially correct.
+                                       if ($answer->fraction == 1) {
+                                               $class = 'correct';
+                                               $feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_big.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                                       } else {
+                                               $class = 'partiallycorrect';
+                                               $feedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_amber_big.gif" alt="'.get_string('partiallycorrect', 'quiz').'" width="16" height="16" />';                                  
+                                       }
+                                       if ($answer->feedback) {
                         $feedback = format_text($answer->feedback, true, $formatoptions, $cmoptions->course);
                     }
                     break;
-                }
+                               } else {
+                                       $class = 'incorrect';
+                                       $feedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_big.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                               }
             }
         }
         
@@ -366,7 +380,7 @@ class question_shortanswer_qtype extends default_questiontype {
                     print_string('partiallycorrect', 'quiz');
                     // MDL-7496
                     if ($correctanswer) {
-                        echo ('<div class="correctness correct">');
+                        echo ('<div class="correctness">');
                         print_string('correctansweris', 'quiz', s($correctanswer));
                         echo ('</div>');
                     }
@@ -375,7 +389,7 @@ class question_shortanswer_qtype extends default_questiontype {
                     // MDL-7496
                     print_string('incorrect', 'quiz');                   
                     if ($correctanswer) {
-                        echo ('<div class="correctness correct">');
+                        echo ('<div class="correctness">');
                         print_string('correctansweris', 'quiz', s($correctanswer));
                         echo ('</div>');
                     }

diff --git a/question/type/truefalse/display.html b/question/type/truefalse/display.html
index 85ec4fc9aa5170ccd2872840e6f2b6651a1c02ca..e60642507a66942f544613ffbd6bc4c6865f3582 100644 (file)
--- a/question/type/truefalse/display.html
+++ b/question/type/truefalse/display.html
@@ -14,9 +14,11 @@
   <div class="answer">
     <span <?php echo $trueclass; ?>>
         <?php echo $radiotrue ?>
+        <?php echo $truefeedbackimg; ?>
     </span>
     <span <?php echo $falseclass; ?>>
         <?php echo $radiofalse ?>
+        <?php echo $falsefeedbackimg; ?>
     </span>
   </div>
     <?php if ($feedback) { ?>

diff --git a/question/type/truefalse/questiontype.php b/question/type/truefalse/questiontype.php
index ff28787019bbbdf42794b86c3c7cfec7cc6a5e8c..1877b11e09b710e2569f9469e96e2583d9287c9b 100644 (file)
--- a/question/type/truefalse/questiontype.php
+++ b/question/type/truefalse/questiontype.php
@@ -155,18 +155,41 @@ class question_truefalse_qtype extends default_questiontype {
         $falseanswer = &$answers[$question->options->falseanswer];
         $correctanswer = ($trueanswer->fraction == 1) ? $trueanswer : $falseanswer;
 
+               $trueclass = '';
+               $falseclass = '';
+               $truefeedbackimg = '';
+               $falsefeedbackimg = '';
+
         // Work out which radio button to select (if any)
         $truechecked = ($state->responses[''] == $trueanswer->id) ? ' checked="checked"' : '';
         $falsechecked = ($state->responses[''] == $falseanswer->id) ? ' checked="checked"' : '';
 
-        // Work out which answer is correct if we need to highlight it
-        if ($options->correct_responses) {
-            $trueclass = ($trueanswer->fraction) ? ' class="highlight"' : '';
-            $falseclass = ($falseanswer->fraction) ? ' class="highlight"' : '';
-        } else {
-            $trueclass = '';
-            $falseclass = '';
-        }
+        // Work out visual feedback for answer correctness.
+               if ($truechecked) {
+                       if ($correctanswer == $trueanswer) {
+                               $trueclass = ' class="correct"';
+                               $falseclass = '';
+                               $truefeedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_big.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                               $falsefeedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_small.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                       } else if ($correctanswer == $falseanswer) {
+                               $trueclass = '';
+                               $falseclass = ' class="correct"';
+                               $truefeedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_small.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                               $falsefeedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_big.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                       }
+               } else if ($falsechecked) {
+                       if ($correctanswer == $trueanswer) {
+                               $trueclass = '';
+                               $falseclass = ' class="incorrect"';
+                               $truefeedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_small.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                               $falsefeedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_big.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                       } else if ($correctanswer == $falseanswer) {
+                               $trueclass = ' class="incorrect"';
+                               $falseclass = '';
+                               $truefeedbackimg = '<img src="'.$CFG->pixpath.'/i/cross_red_big.gif" alt="'.get_string('incorrect', 'quiz').'" width="16" height="16" />';
+                               $falsefeedbackimg = '<img src="'.$CFG->pixpath.'/i/tick_green_small.gif" alt="'.get_string('correct', 'quiz').'" width="16" height="16" />';
+                       }
+               }
 
         $inputname = ' name="'.$question->name_prefix.'" ';
         $trueid    = $question->name_prefix.'true';