Change quiz summary font color

Change quiz summary font color

by Ben Smith -
Number of replies: 13

I'd like for the unanswered questions to stand out more prior to submission of a quiz.  First, I have successfully hidden the answered questions using custom CSS for my theme, Essential.  

Second, I'd like to change the font of the unanswered question text to red/bold.  Here is the source:

<tr class="notyetanswered r0">
<td class="cell c0" style="text-align:left;"><a href="http://www.stemitest.com/mod/quiz/attempt.php?attempt=33&amp;page=6#">7</a></td>
<td class="cell c1 lastcol" style="text-align:left;">Not yet answered</td>

I assume there is a way to put in custom CSS for the class notyetanswered, any thoughts?

Moodle 2.6+ BTW.

 

Ben

Average of ratings: -
In reply to Ben Smith

Re: Change quiz summary font color

by Ben Smith -

Never mind.  Figured it out:

.notyetanswered{
color:red;
}

Sometimes just a tincture of time....

Average of ratings: -
In reply to Ben Smith

Re: Change quiz summary font color

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

shaken...not stirred 

tr.notyetanswered {color:red; font-weight: bold}

Average of ratings: -
In reply to Mary Evans

Re: Change quiz summary font color

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

smile

As a developer, it is nice when you see people actually using the classes you took the trouble to add the the HTML, the achieve some worthwhile effect.

You might want to also consider tr.invalid. That is similar to .notyetanswered, but is used in cases where the student has put in an answer, but there is a problem with it. For example answering some, but not all, parts of a matching question. Or, in some custom question types (e.g. the OU's pmatch) typing a sentence with a spelling mistake.

Average of ratings: -
In reply to Tim Hunt

Re: Change quiz summary font color

by Rodney Wolford -

I have been trying to use the already developed classes, but so far I have often been able to find them only by using firebug on a sample of code, then copying and applying it. Often opening the .css for a quiz or module doesn't seem to provide the specifics (at least to me) to know where I should be applying it. Is there any cheat sheet? Other options?

Thanks,

Rod

Average of ratings: -
In reply to Rodney Wolford

Re: Change quiz summary font color

by Ben Smith -

Follow up question. Is there any way to prevent the submit button from being visible if all questions have not yet been answered?  This is gonna be more than some CSS hacks... maybe an if/then statement, but I don't know where the hook is...  I suspect I'll have to go the PHP editing.

Average of ratings: -
In reply to Ben Smith

Re: Change quiz summary font color

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I think the only way you could do that is to override the quiz renderer method that displays the summary page.

However, I would encorage you not to do that. All that will happen is that Students will type in garbage into any questoins they have not answered, just so Moodle will let them submit. The summary page helps them avoid accidentally miss a question, but if they genuinely don't know the answer to one question, it is better for them to leave it blank. At least, it should be up to the student to have that option.

Average of ratings: -
In reply to Rodney Wolford

Re: Change quiz summary font color

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I am afraid that there is not a complete list of the CSS class names anywhere but in the code. The relevant code file is https://github.com/moodle/moodle/blob/master/question/engine/states.php, and you need to look at all the 'get_state_class' functions there to see what all the possibilities are.

That is not really very helpful, is it? If anyone is feeling community spirited, then summarising that into a page in the developer docs would be a useful contribution. Perhaps we should make a page linked to http://docs.moodle.org/dev/Overview_of_the_Moodle_question_engine with a title like "Hints for theming questions" or something like that.

Average of ratings: -
In reply to Tim Hunt

Re: Change quiz summary font color

by Rodney Wolford -

Well, I'm still a novice at this, but as I go through the .css and apply them for my own purposes, I would certainly make a stab at listing them in some manner that I would make available.

But, I'm not sure that would be helpful either. Seems like some format would need to precede any listing so that content was uniformly recorded and displayed. Best would be something like what is done with some of the sites that list html codes with examples.

In the meantime, I'm glad to know I wasn't missing some universal repository and I will continue to hunt and peck, finding the code I need using firebug one line at a time. Of course, I will also try to make use of states.php file as well.

Thanks,

Rod

Average of ratings: -
In reply to Rodney Wolford

Re: Change quiz summary font color

by Rodney Wolford -

I downloaded the states.php file and searched for the term "notyetanswered". It returns:

 public function get_state_class($showcorrectness) {

        return 'notyetanswered';

    }

In the code that Mary offered up she stated: tr.notyetanswered {color:red; font-weight: bold}

I don't understand where the tr comes from. Is the tr for table row. If so, isn't this a use of tables in styling which is to be avoided?

I am very new to this, and just trying to understand what is going on.

Regards,

Rod

Average of ratings: -
In reply to Rodney Wolford

Re: Change quiz summary font color

by Jon Witts -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Rod,

I believe that Mary is referring to a CSS rule targeted at the HTML TR element with a class of notyetanswered attached to it.

I am not sure what yo mean regarding "a use of tables in styling which is to be avoided" - My understanding of CSS is that this is the only way we should be styling tables (so long as your table is there to display tabular data of course wink )

Jon

Average of ratings: -
In reply to Rodney Wolford

Re: Change quiz summary font color

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

The use of tables for layout is generally to be avoided Rod - unless that is tabular based information as Jon says, in which case using a table to lay it out is perfectly correct. This advice comes from previous years of web design where tables were used to position items on the page, which is not their intended purpose and is better dealt with by correct positioning of the items in other ways.

But if a table is used (as it is here), then what Mary has written is the way to style the contents within that table. Its the difference between styling content which is correctly in a table, and using tables to style (layout) content which shouldn't be in one smile

Average of ratings: -
In reply to Richard Oelmann

Re: Change quiz summary font color

by Rodney Wolford -

Thanks for the responses. Clears it up for me. I have already experimented with it, so I know it works. Now I know it is how it is done and when it is appropriate to use the tr.

Best of the Holidays to you both,

Rod

Average of ratings: -
In reply to Ben Smith

Re: Change quiz summary font color

by Ronald de Caluwé -

Thx, I was looking for that.

Made it even nicer: 

tr.notyetanswered td.cell.c1.lastcol {color:red; font-weight:bold; font-size:130%;}

This way the question number stays the same...

Cheers!

Attachment Notyetanswered.jpg
Average of ratings: -