This brings up a few issues:

1) How do we indicate the "best" answer visually without putting too much emphasis on that option? Background colour seems ideal, but can't be read by screen readers.

2) Should we indicate the state of the user's response visually? For example, green tick if the best option was chosen, yellow tick for a partially correct answer, and a red cross for a totally wrong answer.

3) Sometimes the green background colour is used to indicate that the user's response was at least partially correct. For example, see randomsamatch question type. This is not consistent since multichoice question type uses the green background colour to indicate which answer is the correct one, not whether the student has picked the correct answer.

We need a definite set of rules that can be used by all the different question types. I'm essentially looking for some feedback from the OU usability team here, on the best way to move forward.

Have you got an example URL?

Cheers.

You can see it on any Quiz, but I'll ask Vy if he can set up a quick example on test.moodle.com tomorrow to make it easy for you to look at. There's also the screenshot attached to this bug.

(Unicode dingbats for tick cross ✓ ✗ don't work on MSIE, so icons are the way.)

Style:
label { display: block; }
.accesshide { position:absolute; top:-1000px; }
.qcorrect, .qwrong, .qyou, .qnot { padding:0 5px 0 5px; margin:1px 0 2px; border:1px solid #e7e7e7; }
.qcorrect, .qwrong, .qyou { cursor: help; }
.qcorrect { background:#e7ffe7; }
.qwrong { background:#ffe7e7; }
.qyou { border:1px solid black; }

<label class="qcorrect" title="Correct answer"><input type="radio" name="q1" />a. Q1 &#x2713;<span class="accesshide">Correct answer</span></label>
<label class="qwrong qyou" title="Your wrong answer"><input type="radio" name="q1" checked="checked" />b. Q2 ←<img src="qcross.png" alt="Your wrong answer" /></label>
<label class="qnot"><input type="radio" name="q1" />c. Q3 </label>

I have set up a test quiz at http://test.moodle.com/mod/quiz/view.php?id=184

You can go through the questions and look at the feedback that is shown when the quiz is submitted. I've left some comments in the feedback.

Username/Password: admin/password

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.

But ...

I wish I had beed added as a watcher to this bug before anything was changed

The change has lots of bits of code like:

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" />'; }
}

There are a few problems with this:

1. It really sucks to have almost identical code copied between different question types. I would much prefer to have had some functions in questionlib.php like get_feedback_class($fraction), get_feedback_image($fraction), and so on that contain the necessary if statements and image HTML. This would be particularly valuable if, for example, you had an error in the logic of your if statements, or if you needed to change the image file names.

2. I think you do have an error in the logic of your if statements. Look at the if statement in the middle of print_question_grading_details() in question/type/questiontype.php. Notice the way it avoids doing exact comparisons of floating point numbers. We learned that that was necessary the hard way, when people reported bugs.

3. Your commit introduced some tabs, at least in shortanswer question type.