adding colour to moodle quiz questions and feedback

adding colour to moodle quiz questions and feedback

by stephen mcconkey -
Number of replies: 9

Hi

In Moodle quizes is it possible to add one colour to the question background and a different colour to the correct feedback and a third colour to the incorrect feedback. I have been adding a table, putting the question in the table and then adding the colour to each table. Is there an easier way in moodle 2.

thanks

stephen

Average of ratings: -
In reply to stephen mcconkey

Re: adding colour to moodle quiz questions and feedback

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The best way to try this is try using Firebug which is a Firefox add-on.

You can read about how it works in Development: Firebug

How you use it is easy enough. In the page you want to check out the possibility of changing the b/ground colors, you point your cursor at the element you are interested in and right click gives you a pop-up menu at the bottom of which you will see Inspect Element. By selecting that option, your page splits into two halves. The top half is the original page, and the bottom  half gives you 2 views. On the left you have your page-source and bottom-right gives you the relevent CSS information.

This CSS section is the bit you need to concentrate on, as this allows you to change the current css to values/colors of your chooseing, so that you can see in an instance what it would look like.

If what you test proves to work, all you do is copy and paste the css from this 'Firebug' section into Notepad. When you have all the css you need then just copy and paste it into your theme's CSS file. Adding it to the bottom of the CSS file will ensure it is used.

NB: A note of caution, always use Notepad or a simple Text Editor to open your CSS files. By pasting to, and then copying from Notepad strips the code of any formatting from your webpage.

HTH

Mary

In reply to Mary Evans

Re: adding colour to moodle quiz questions and feedback

by stephen mcconkey -

Mary

Many thanks for prompt and detailed reply. I am very new to moodle but it seems anything is possible theme wise. How do I get to see the css files/code in my moodle? ( sorry for such a basic question.)

Stephen

In reply to stephen mcconkey

Re: adding colour to moodle quiz questions and feedback

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

OK.

This depends if you own the Moodle install or not.

If this is in a school/organisation setting then the IT dept would be your first port of call.

If it is your personal Moodle on a stand-alone package then you will need to hunt for it. This will either be on a server (hosted or local). But wherever it is it will be in the same place.

moodle/theme/themename of the theme you are using/style/this is where all the css file type are stored

so for clarity...if you are using Anomaly theme this is where you would look...

moodle/theme/anomaly/style/general.css

HTH

Mary

In reply to Mary Evans

Re: adding colour to moodle quiz questions and feedback

by stephen mcconkey -

Mary

My moodle is hosted for me and at this stage I cannot get at the CSS. The Moodle design is using the "Binarius" theme. Is it possible to colour quiz question feedback in this theme, as described above?

Many thanks

Stephen

In reply to stephen mcconkey

Re: adding colour to moodle quiz questions and feedback

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Well if the site is hosted for you, if you are the owner of the site you will have access either via the control panel or FTP or both surely?

If it is possible to colour a quiz question feedback, you can do that in any theme. However if you don't have direct access to the CSS files you have no way of adding the css.

Cheers

Mary

In reply to Mary Evans

Re: adding colour to moodle quiz questions and feedback

by stephen mcconkey -

Mary

Again thanks for such a swift response. So I can colour feedback boxes if I can get at the CSS?

Stephen

In reply to stephen mcconkey

Re: adding colour to moodle quiz questions and feedback

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

CSS is what styles the theme. Colors are added via CSS. So access to the CSS files is important.  If you get access to the CSS files then yes you should be able to colour the quiz feedback section. 

Here are some CSS selector ids and classes which make up the sort of thing you may need. I have just added block colours to show where the colour code goes. The first 2 are the headers so the color white in this case colours the text only. Whereas the last three are background specific.

If you do manage to get access to the core.css for the binarius theme, then open it using Notepad, copy and paste these into it. Save it and load it back to the server, to overwrite the one on the server.

That done You will need to clear Moodle cache by going to Site Administration > Development > Purge all caches.  That done...test to see if you get any bold red/green or blue backgrounds in the quiz feedback areas. If you do well all you need to do then is find the colour code for the color you want to use in the CSS. Like #D0F3D6 which is the color of the background it's in.

#page-mod-quiz-view .generalbox#feedback h2 { color: white;}
#page-mod-quiz-view .generalbox#feedback h3 { color: white;}

#page-mod-quiz-view #page .quizgradefeedback { background-color: red;}
#page-mod-quiz-view .generalbox#feedback { background-color: green;}
#page-mod-quiz-view .generalbox#feedback .overriddennotice { background-color: blue;}

HTH

Mary

In reply to Mary Evans

Re: adding colour to moodle quiz questions and feedback

by Azhar Ghani -

Hi Mary,

Kindly help for a CSS Rule for any text/word on the page in any colour..

eg.. "Pass" in Green Colour/Bold and "Fail" in Red Colour/Bold,   Quiz Overall FeedBack

Thanx

In reply to Azhar Ghani

Re: adding colour to moodle quiz questions and feedback

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

All the styles for QUIZ are found in the attached file. If you use Firebug you may be able to find the rule you need on the page you are talking about. When you find it you can add the rule directly to the theme CSS file, or if you have a Theme which allows you to add CSS in a custom settings page, you can add it there.

HTH

Mary