Moodle in English: Another nice quiz styling snippet

Another nice quiz styling snippet

by Tim Hunt - Saturday, 16 January 2016, 1:27 AM

As a bit of repayment to Gareth and Chris for sharing their nice quiz CSS layout code (which I am probably about to steal), I thought I would share some code we have been using at the OU for the quiz navigation block, which makes it look like this.

For comparison, here is how it looks now in standard Moodle:

The necessary CSS is below. You also need to put the three images in the attached zip into the pix folder of your theme.

/* Quiz navigation. */

.path-mod-quiz #mod_quiz_navblock .qn_buttons {

margin-right: -14px;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton {

font-size: 14px;

line-height: 25px !important;

font-weight: normal;

background-color: #fff;

height: 45px;

width: 35px;

border-radius: 4px;

border: 0;

margin: 0 5px 5px 0;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton .thispageholder {

border: 1px solid #999999;

border-radius: 4px;

z-index: 1;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.thispage .thispageholder {

border: 3px solid #1F536B;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.flagged .thispageholder {

background: transparent url([[pix:theme|flag-on]]) 20px 0px no-repeat;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton .trafficlight {

border: 0;

background: #fff none center 4px / 10px no-repeat scroll;

height: 20px;

margin-top: 25px;

border-radius: 0 0 4px 4px;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.notyetanswered .trafficlight,

.path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {

background-color: #fff;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {

background-color: #468847;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.blocked .trafficlight {

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.notanswered .trafficlight,

.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {

background-color: #b94a48;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {

background-color: #c09853;

}

.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,

.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,

.path-mod-quiz #mod_quiz_navblock .qnbutton.requiresgrading .trafficlight {

background-color: #999;

}

I think the obvious question is: do we want this in standard Moodle in time for 3.1?

pix.zip

Average of ratings:Useful (9)

Re: Another nice quiz styling snippet

by Mary Evans - Saturday, 16 January 2016, 4:27 AM

Thank Tim,

+1 to add these new styles to Moodle 3.1

But just one question is...

.qn_buttons

A class on its own or is this a mistake?

If it is correct, then why the negative margin?

.path-mod-quiz #mod_quiz_navblock .qn_buttons {
    margin-right: -14px;
}

Cheers

Mary

Average of ratings: -

Re: Another nice quiz styling snippet

by Tim Hunt - Sunday, 17 January 2016, 12:52 AM

.qn_buttons is the class on the div surrounding all the buttons. The negative margin is a cheat to make 6 buttons fit on each line. (It might be better to make each button 1px narrower.

Gareth, this is quite easy to override. It is just CSS. Probably not significantly easier or more difficult to override than the current CSS.

Any thoughts where this should go? quiz styles.css I guess? But an alternative would be to do it only in Clean theme.

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Sunday, 17 January 2016, 1:28 AM

Hi Tim,

Thanks for explaining the qn_buttons CSS role. As you say adding 1px to each button would be better.

Please DO NOT ADD to Clean theme that will cause more CSS in a theme, that is not a child of Clean, to be generated.

I think it would be safer in mod/quiz/style.css

That way a Theme can override or even add an "ON / OFF" switch.

Cheers

Mary

Average of ratings: -

Re: Another nice quiz styling snippet

by Germán Valero - Saturday, 16 January 2016, 8:40 AM

Tim,

This looks very nice. But when I tried to write about it in the Moodle Docs wiki, I could not get the syntax highlight. Can you please check https://docs.moodle.org/30/en/Quiz_FAQ#A_nice_OU_quiz_styling_snippet and correct as needed ? Thanks in advance.

Average of ratings: -

Re: Another nice quiz styling snippet

by Gareth J Barnard - Saturday, 16 January 2016, 8:19 PM

Thanks Tim.

Perhaps its time to be included in core as long as the theme can override as required.

Will it help to make Moodle's UI better from a usability point of view?

Average of ratings: -

Re: Another nice quiz styling snippet

by Ray Lawrence - Sunday, 17 January 2016, 8:36 PM

+1 for that.

Average of ratings: -

Re: Another nice quiz styling snippet

by Derek Chirnside - Monday, 18 January 2016, 2:56 AM

+1 for me also Tim.

I also like the horizontal top location of the question data as in Frankies post here: https://moodle.org/mod/forum/discuss.php?d=237589#p1033272

-Derek

Average of ratings: -

Re: Another nice quiz styling snippet

by Andy Chaplin - Monday, 18 January 2016, 1:57 AM

Hi Tim

This looks really nice. I'd certainly vote for this becoming the standard look.

One thing, which may be down to something I've done... I tried this on Morecandy running on 2.9. The borders on the question boxes were very thick - not like your image where they appear to be one pixel thick. I changed the following section:

.path-mod-quiz #mod_quiz_navblock .qnbutton.thispage .thispageholder {

border: 3px solid #1F536B;

}

and set the border to 1px. Now everything looks fine.

I don't know if this was just me, or it was to do with the theme or something else, but it might be useful for someone.

Thanks for sharing this,

Andy

Average of ratings: -

Re: Another nice quiz styling snippet

by Tim Hunt - Monday, 18 January 2016, 5:09 PM

A quiz can be split into multiple pages. The thick border indicates the questions on the current page.

Perhaps we should not do that if all the questions are on one page. There is a class on the .qn_buttons div in that case, so it should be possible.

Average of ratings: -

Re: Another nice quiz styling snippet

by Sam Suresh - Monday, 18 January 2016, 12:19 PM

Thanks for sharing Tim.

Nice and time saver!

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Tuesday, 19 January 2016, 8:12 AM

I like the new style. However, I can get any of this to work in my own moodle. Is this code "theme specific?" Should it work in CLEAN and MORE? I did move the picture, added the CSS, cleared the cache, and no luck.

Any suggestions? So I have to modify this CSS is some way? In Firefox, for example, I don't see the #mod_quiz_navblock part of the question block.

Average of ratings: -

Re: Another nice quiz styling snippet

by Tim Hunt - Tuesday, 19 January 2016, 2:46 PM

It definitely works in Clean. When I was preparing my post, and checking I had copied and pasted the right bits of CSS, I did that by putting the CSS in theme/clean/styles/custom.css, and that worked.

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Wednesday, 20 January 2016, 1:16 AM

Tim, maybe I am saying the wrong thing, or doing the wrong thing. What I tried was to go to Moodle's 3.0 themes, picked Clean, and copy/pasted the code into the dialog box (see graphic.) But maybe you are saying that I would have to add it to the ../custom.css code file. Am I correct?

If so, hmmm, how can I add it by using the dialog box for custom css?

Average of ratings: -

Re: Another nice quiz styling snippet

by Tim Hunt - Wednesday, 20 January 2016, 1:39 AM

I don't know why custom CSS would fail.

... Unless ... Did you remember to Purge all caches? (Is that necessary?)

Average of ratings: -

Re: Another nice quiz styling snippet

by Richard Oelmann - Wednesday, 20 January 2016, 2:46 AM

Yes it is necessary, but I think Rick said he's done that

But I don't think the [pix:theme|whitecircle] notation works in customcss. I think you need to specify the image location, or add Tim's css to the style files

Rick, Did you check the quiz settings themselves - things like correct and incorrect markers will only show up when you finish the quiz is finished and being reviewed unless the various options are set for answers to be shown while the test is in progress

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Wednesday, 20 January 2016, 4:51 AM

Yes, I purged the caches.

Yes, I submitted the quiz. My navigation icons are not looking like the new ones, so it could have something to do with the pix.

I even tried putting the code into the custom.css file for the theme, as Tim suggests.

Oh well, I can't have fun with this. But I do like what I see. I can wait for this to eventually become part of the standard moodle.

Average of ratings: -

Re: Another nice quiz styling snippet

by Richard Oelmann - Wednesday, 20 January 2016, 5:00 AM

Hmm, in that case I'm not sure what the issue is Rick.

I tested it in clean and adding the css to customcss setting worked, without the images, adding it to the style sheet itself worked with the images.

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Wednesday, 20 January 2016, 6:26 AM

Yep, I don't know. I went to my MoodleCloud course, copy/pasted Tim's code into the moodlecloud theme's custom css dialog box, purged the caches. It didn't work there either.

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Wednesday, 20 January 2016, 5:58 AM

Hi,

First of all the Custom CSS area in Clean or More themes settings pages do NOT need a Purge all caches to make the custom CSS added there to work. The callback mechanism takes care of that when the settings are saved. If there are errors in the markup these settings will halt an an error message will result in the area in that settings page being highlighted.

The fact it does not work is because of the background images, which Richard picked up on. To make these work you have to write the absolute URL of the image.

So assuming the three images are in theme/clean/pix folder the URL would be something like...

background-image: url(http://site address goes here/theme/clean/pix/whitecircle.svg);

Hope this helps...

Mary

Average of ratings:Useful (1)

Re: Another nice quiz styling snippet

by Rick Jerz - Wednesday, 20 January 2016, 6:50 AM

Mary, thanks, but still no luck. I did see a one line with a picture "locked" that is not in the pix.zip file. Don't know if all of the code needs to be correct.

Hmmm.

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Wednesday, 20 January 2016, 9:01 AM

Hi Rick,

Where did you add the images?

The images and CSS both need to go in your chosen theme.

You are doing something wrong.

Mary

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Wednesday, 20 January 2016, 9:35 AM

Yes you need to fix the CSS for the images...the one I posted was just an example.

so where you see

 [[pix:theme|imagename]]

change it to the long URL like my example with you cloud address and the correct image name for each instance of the button backgrounds.

url([[pix:theme|imagename]])

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Wednesday, 20 January 2016, 11:25 AM

Mary, thanks for your help.

1) I download pix.zip. There are three pictures: checkmark.svg, flag-on.svg, and white circle.svg. I move these files to my ../moodle3exp/theme/clean/pix folder, which already has favicon.co and screenshot.jpg in it.

2) I go to site admin | appearance | themes | clean, and in the custom css textbox, I copy Tim's code into it.

3) I edit Tim's code for the three places that he references the new pictures. I change the line from:

background: transparent url([[pix:theme|flag-on]]) 20px 0px no-repeat;

background: transparent url(http://www.rjerz.com/moodle3exp/theme/clean/pix/flag-on.svg) 20px 0px no-repeat;

Notice that I use the complete picture file name "flag-on.svg."

4) I am not sure what I need to do about this line, background-image: url([[pix:core|t/locked]]); , since it is of the form url[[pix:theme..., but it references a picture that is not in Tim's pix.zip file. In this step, I do not modify this line. I test to see if anything seems to be working. I test this by taking, and submitting a simple two question quiz. Along the way, it does not look like Tim's changes have taken effect.

5) I fine where the "locked" pix is. I see that it is in ../moodle3exp/pix/t, but there are two files. One is a .png and the other a .svg. So I change the line to use the .svg picture. My line looks like this:

This does not work.

6) I change the locked.svg to locked.png. This doesn't work.

7) I purge the cache. This doesn't change to Tim's

At this point, I have tried all that I can. Do you see anything in the lines of code that I have provided to you for where I use pix's?

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Wednesday, 20 January 2016, 6:36 PM

I can see that the images are installed correctly.

So the only other thing is Browser cache. Have you deleted that?

Try using your keyboard shortcut keys Ctrl + F5 which forces the screen to refresh.

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Wednesday, 20 January 2016, 10:02 PM

No, I had not tried emptying the Browser cache. I now tried, and I even tried from a completely different computer, and this did not help.

Well, maybe we should leave this topic unless Tim or Richard see an error in my method.

I really like the changes, and would support adding these to Core. I assume this change will be tested in Clean and More before being released.

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Wednesday, 20 January 2016, 11:05 PM

In that case try adding the CSS Tim posted into the clean/style/custom.css

You would need to Download that file via FTP then amend it and then save and upload back to the server.

You will need to "Purge all caches" again, because doing it this way it needs it.

In the mean time is there any chance I could access to your test site?

Thanks

Mary

Edited: 4:10pm just fixing lots of typos...My iPad Mini keyboard is tiny!

Average of ratings: -

Re: Another nice quiz styling snippet

by Mary Evans - Thursday, 21 January 2016, 1:27 AM

OK...

This is what I added...

.path-mod-quiz #mod_quiz_navblock .qn_buttons {
    margin-right: -14px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton {
    font-size: 14px;
    line-height: 25px !important;
    font-weight: normal;
    background-color: #fff;
    background-image: none;
    height: 45px;
    width: 35px;
    border-radius: 4px;
    border: 0;
    margin: 0 5px 5px 0;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton .thispageholder {
    border: 1px solid #999999;
    border-radius: 4px;
    z-index: 1;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.thispage .thispageholder {
    border: 3px solid #1F536B;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.flagged .thispageholder {
    background: transparent url(/moodle30/theme/clean/pix/flag-on.svg) 20px 0 no-repeat;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton .trafficlight {
    border: 0;
    background: #fff none center 4px / 10px no-repeat scroll;
    height: 20px;
    margin-top: 25px;
    border-radius: 0 0 4px 4px;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.notyetanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {
    background-color: #fff;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
    background-image: url(/moodle30/theme/clean/pix/checkmark.svg);
    background-color: #468847;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.blocked .trafficlight {
    background-image: url([[pix:core|t/locked;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.notanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
    background-color: #b94a48;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight {
    background-image: url(/moodle30/theme/clean/pix/whitecircle.svg);
    background-color: #c09853;
}
.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.requiresgrading .trafficlight {
    background-color: #999;
}

So looks like you only need the relative path from your Moodle instance to the image and NO http:// just one / is enough at the beginning.

Cheers

Mary.

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Sunday, 24 January 2016, 8:14 AM

Mary, I tried this, of course changing your green highlights to my moodle path, and it doesn't work.

I can't figure out why.

I take just one section of code that I think I should detect a change in the appearance of the buttons (shown below), and this does not change the appearance of my moodle. So something is strange.

.path-mod-quiz #mod_quiz_navblock .qnbutton {

font-size: 14px;

line-height: 25px !important;

font-weight: normal;

background-color: #fff;

height: 45px;

width: 35px;

border-radius: 4px;

border: 0;

margin: 0 5px 5px 0;

}

Average of ratings: -

Re: Another nice quiz styling snippet

by Tim Hunt - Sunday, 24 January 2016, 3:53 PM

If nothing seems to be working, you need to start by doing one single change, that is completely crazy, and get that working. E.g.

.path-mod-quiz #mod_quiz_navblock .qnbutton {
    font-size: 123px;
}

Try to choose something visually obvious, and have a distinctive number, so when you use the developer tools in your web browser to try to see what is going on, you can see which bit is your code.

Then, inspect the page with your browser, and try to work out whether the browser has seen that rule, and whether it is being applied.

Average of ratings: -

Re: Another nice quiz styling snippet

by Rick Jerz - Friday, 5 February 2016, 9:49 AM

Tim, I had a moment to return to this and some of the code is now working. Don't know why, but maybe it was a browser cache or something like that.

I hope to see some of your improvements get into moodle in the near future.

Average of ratings: -

Re: Another nice quiz styling snippet

by Stuart Lamour - Tuesday, 19 January 2016, 7:14 PM

Hi Tim, would changing the block title from quiz navigation to quiz progress make sense at this point?

Average of ratings: -

Re: Another nice quiz styling snippet

by Tim Hunt - Tuesday, 19 January 2016, 8:07 PM

I have not considered that before, and my initial reaction is that I don't like it. The purpose of that bit of UI is navigation. Displaying progress there is just opportunism (it seems to me) and whether it is visible depends on the quiz settings.

Do you have any evidence (e.g. usability testing) behind your suggestion?

Average of ratings: -

Re: Another nice quiz styling snippet

by Stuart Lamour - Wednesday, 20 January 2016, 1:03 AM

It does a few jobs i guess but unless the questions are each on separate pages its not the primary navigation.

Even then the next/previous are the navigation because they are beneath the question and that block will most likely be off screen.

Average of ratings: -

Re: Another nice quiz styling snippet

by Emma Richardson - Wednesday, 20 January 2016, 11:10 PM

Yes, we want this in core.

Average of ratings: -