Eye candy

Eye candy

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

Our graphic designers have come up with a really rather beautiful theme for the quiz. I just wanted to share it with you. This is from our test server, part way through an attempt at an interactive quiz, and showing one of our drag-and-drop questions.

Screen grab of the OU theme for the quiz

I am tempted to add that way of showing correct / partially correct / incorrent into standard Moodle for version 2.2. I think it is better than what we have  at the moment in the standard themes.

Average of ratings: Useful (5)
In reply to Tim Hunt

Re: Eye candy

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Lovely layout & cool colours!

Joseph

PS.- Will it eventually be made available to the moodle community?

In reply to Tim Hunt

Re: Eye candy

by Orestes Mas -
Picture of Translators
Really beautiful, but I can't figure out completely what certain shapes in "Questions" left column stand for (mainly the red upper-right triangle). Is there a legend anywhere?
In reply to Orestes Mas

Re: Eye candy

by Jean-Michel Védrine -

Hello Orestes,

It means the question is flagged by the student. It's already here in the "normal" Moodle, see Docs

But this one is a lot more beautiful !!

In reply to Tim Hunt

Re: Eye candy

by Bernard Boucher -

Hi Tim,

            please succumb to the temptation for 2.2 wink

We will have to add a choice to the posts Rate : Beautiful !

Thumbs up for your graphic designers!

 

Bernard

 

In reply to Tim Hunt

Re: Eye candy

by Ralf Hilgenstock -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Translators

hello Tim

thanks for sharing this here. Drag and drop questions are very often on the wishlists.

I'm a little bit undecided about the different visualizations for questions. A user should understand thedifferences without explanation. What different aspects are required?

  • unanswered (4) - is thick border required?
  • correct answered  (1)
  • incorrect answered (5)
  • partially correct (2)

But how is question 3 and 6 marked?

In reply to Ralf Hilgenstock

Re: Eye candy

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

Ralf, you are wrong about several of thses, but I think that is only because you are looking at a static image. Of course, in reality you would see a naigation panel that starts blank and fills up as you do things, which makes all of it really obvious.

The think border is for the question(s) on the current page.

For finished questions, green with tick is correct, orange with dot is partially correct, and plain red is wrong (or no answer given).

The red triangle is for flagged questions. Again, this only appears for the first time when you choose to flag a question, so it should be obvious what its meaning is when it is used.

What is not shown here is that in deferred feedback mode, the bottom half of the question button goes dark grey when you answer that question, so in a deferred feedback quiz, you can see at a glance which questions have have answered.

In reply to Tim Hunt

Re: Eye candy

by Ralf Hilgenstock -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Translators

Hi Tim,

that was exactly my intension. I think about different target groups (students in primary schools, not web experienced users) and the special situation during a  quiz attempt. Student concentrate on the attempt and are a little nervous. Now they see the symbols. Are the symbols self explanatory? Is it possible to understand them without tool tips?

Ralf

In reply to Ralf Hilgenstock

Re: Eye candy

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Ralf,

I think the best answer to that is to have plenty of "blank exam" practise so that the students can get used to the icons and their meanings, in a stress-less situation, before a real "exam situation".

Joseph

In reply to Ralf Hilgenstock

Re: Eye candy

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Good questions, Ralf. I expect all those "flags", shapes and colors have their own explanatory mouseover tooltips.

I think 2 and 6 have been marked ("flagged") by the student.

Maybe 3 is marked as "partially correct", orange being the color used for that type of student's answer.

Joseph

EDIT.- Well, Tim answered Ralf just as I was writing this message. I was about right.wink

In reply to Tim Hunt

Re: Eye candy

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

This looks very nicly thought out. My only concerns are with the shadowing effect round the question area. Is this done using CSS3 or is the page made up of different images? If the latter then these can, and do sometimes have a tendancy to lose the achived look. Same goes for the question 'flags' what happens if you have more than questions, will they line up nicely in rows, or will they get stuck under the page?

Even so...nice job...I like it!

Mary

 

In reply to Mary Evans

Re: Eye candy

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

The drop shadow is part of the OU theme that I would not propose to add to any of the standard Moodle Themes. The drop-shadow was originally done using CSS3, but then we decided our theme did not look any good without it, so we (well sam marshall) re-did it using background images for the benefit of IE users. However, a lot of the other CSS3 effects, like the rounded cornders, we just do without on IE7 and 8.

If you have more questions, the navigation buttons wrap onto multiple lines.

In reply to Tim Hunt

Re: Eye candy

by Maryel Mendiola -

It looks Awesome!

Congratulations Tim and Sam

smile

It is a high quality work!!

Now I admire you more  ;)

In reply to Tim Hunt

Re: Eye candy

by Lev Abramov -

Tim,

I want to second the motion. This should certainly become part of the core 2.2.

In the meantime, is there any chance some of the more enthusiastic types among us could try to incorporate this into our 2.X installations? wink

Lev

In reply to Lev Abramov

Re: Eye candy

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

Sure. It is just CSS. I will try to dig it out of our theme on Monday and post it here.

In reply to Tim Hunt

Re: Eye candy

by Jose Navas -

Sure Tim! it definetely be part of Moodle 2.2. It's a very nice looking theme for the Quiz

In reply to Jose Navas

Re: Eye candy

by Ali Hastie -

Hi Will this eye candy be available within Moodle 2.2 release? If not, where can i find the theme for this.

Thanks

Ali

In reply to Ali Hastie

Re: Eye candy

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

Sadly, I never got time to add this to Moodle 2.2.

Shortly, we will be moving the OU code to the Moodle 2.2 release, at which point I will have to make sure that hte OU theme is still working. Hopefully, doing that will be a good opportunity to remind myself how this is done, and extract the code and add it to at least some of the standard Moodle themes, for Moodle 2.3.

Average of ratings: Useful (1)