Moodle

Screenshot of what sugges changes would look like.

The green background colour is currently meant to indicate which is the correct answer to a question. However, if we add a tick to show that a particular answer is the correct one, we will be placing too much visual emphasis on that answer, and it now appears that we are saying that the student's response to the question was correct. The response in the above screenshot is actually "partially correct" (option 2 chosen, option 1 was the correct one). The display is misleading unless we look carefully and read the text.

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.

Hi Nick, Martin told me that you would be the best person to talk to regarding this.

OK, I've bounced this to my colleague Chetz, who did a lot of the Specification work. Hopefully have more tomorrow.

Have you got an example URL?

Cheers.

Hi, Chetz, I added you as a watcher to this one.

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.

Here's my idea, may look heavy but it contains visual and verbal cues...
1. A tick in brackets (icon or characters) with pale green background or dark green text indicates "The correct answer, not yours". 2. An arrow & cross, pale red background/ dark red text, and black border is "Your wrong answer". (3. "Your correct answer", arrow tick, pale green background, black border. 4. "Your partially correct" could use yellow/amber, with a black border.) Hidden text/alt text, help cursor and title attributes rounds things off.

(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>

Woops, one more issue. We can't use this for some question types that don't display all the possible answers for each question. For example, the matching question type. This type uses drop downs for the answers, so that only one answer at a time is shown (the one the student picked).

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

I suppose that in situations where we can't show all the correct answers for each question, we'll just show whether the student picked the correct one. I'll go ahead with this if no one objects.

Hi Vy-Shane, I'm not sure from your latest comment which approach you've decided to go ahead with. If you want me to test an example before you do a final implementation just let me know.

How about this:

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.

See attachment 2, quiz_feedback.gif, for an illustration.

I've gone through the question types and implemented the changes I outlined above. I've checked in the fixes to cvs HEAD.

Thank you very much for sorting out question type accessibility. That really needed doing, and I would not have had the time.

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.

Thanks for the suggestions Tim. I've checked in the suggested changes. Could you have a look and let me know if there's anything else that could be improved?

Great. Thanks.