L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes for MDL-7467.

Browse Source 
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.
This commit is contained in:
vyshane
2006-12-14 02:32:32 +00:00
parent 07d9065d0b
commit e0c256473d
9 changed files with 131 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
question/type/match/display.html
+5 -2
View File
@@ -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>
question/type/match/questiontype.php
+8 -3
View File
@@ -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);
question/type/multianswer/questiontype.php
+29 -21
View File
@@ -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
}
question/type/multichoice/display.html
+1
View File
@@ -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">
question/type/multichoice/questiontype.php
+34 -10
View File
@@ -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);
question/type/shortanswer/display.html
+2 -1
View File
@@ -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">
question/type/shortanswer/questiontype.php
+19 -5
View File
@@ -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>');
}
question/type/truefalse/display.html
+2
View File
@@ -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) { ?>
question/type/truefalse/questiontype.php
+31 -8
View File
@@ -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';