Highlighting the correct answer

Highlighting the correct answer

by ahmad my -
Number of replies: 10

Hello everyone!

I am wondering whether there is any way to highlight the correct answer in green instead of placing a check mark in front of the correct or incorrect answer . To be more specific, Moodle often shows the correct answer by placing a check mark for the correct or incorrect answer  and writes the correct answer but I want to highlight the correct answer in green and the incorrect one in red.  The following picture shows they way I mean:

My Required css

I will appreciate it if somebody could write some css codes for those.

Attachment sample 2.JPG
Average of ratings: -
In reply to ahmad my

Re: Highlighting the correct answer

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
You might give people a head start if you are using chrome by right clicking and using Developer tools to find out what the CSS is around about those ticks/crosses.
Average of ratings: Useful (1)
In reply to Marcus Green

Re: Highlighting the correct answer

by Ahmad MY -

Thank you so much for your reply. This is what is stated:

Attachment Highlighting.JPG
Average of ratings: -
In reply to ahmad my

Re: Highlighting the correct answer

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Have you considered simply showing the students the correct answer? This is controlled by the "Review options" when you define the quiz, showing the "Right answer."

I know of no way to highlight the correct answers, but others here might.
Average of ratings: Useful (1)
In reply to ahmad my

Re: Highlighting the correct answer

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Something like this will work:
#page-mod-quiz-review .answer .correct {background: #32CD32;}
#page-mod-quiz-review .answer .incorrect {background: #FF3333; color: #FFFFFF;}
Average of ratings: Useful (3)
In reply to Jon Bolton

Re: Highlighting the correct answer

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
I like your reply much better than mine, Jon. I tried your suggestion and it worked! Personally, I can't say that I like the effect, but I think that it does take care of Ahmad's request. Incidentally, I am using Boost, Moodle 3.8.2+.
Average of ratings: -
In reply to Jon Bolton

Re: Highlighting the correct answer

by ahmad my -

Thank you so much for your help.

I add the codes in In ENLIGHTLITE THEME SETTING, General / MISCELLANEOUS ITEMS / Custom SCSS but nothing has happened. I am wondering Whether I have pasted them on the right place or not.


Attachment Adding css.JPG
Average of ratings: -
In reply to ahmad my

Re: Highlighting the correct answer

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Assuming you’re actually using the Enlightlite theme, then yes, that would be the place to add it.

Did you purge the caches after you'd added it? Site admin > Development > Purge caches, then click on “Purge all caches”.
Average of ratings: -
In reply to Jon Bolton

Re: Highlighting the correct answer

by ahmad my -
Thank you so much.
I did it but unfortunately nothing happened.  I also check marked Theme designer mode but it was useless.
Attachment purge.JPG
Attachment tick.JPG
Average of ratings: -
In reply to ahmad my

Re: Highlighting the correct answer

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
I've just installed the latest version of Enlightlite on a test (latest build, freshly installed) Moodle, and it appears that the custom CSS is not rendering.

As a workaround, go to Site admin > Appearance > Additional HTML and add this to the "Within HEAD" section.

<style>
#page-mod-quiz-review .answer .correct {background: #32CD32;}
#page-mod-quiz-review .answer .incorrect {background: #FF3333; color: #FFFFFF;}
</style>
Average of ratings: -
In reply to Jon Bolton

Re: Highlighting the correct answer

by ahmad my -
Thank you so much. I checked it on different themes and it rendered on Klass theme. Is it possible to remove the question bar and show the correct answer in green instead of writing down the correct answer. For instance in question 3 it showed in red the selected answer but it didn't highlight the correct answer in green.

I mean something like question number 7
Attachment dd.JPG
Attachment remove.JPG
Average of ratings: -