How can I make quizzes neater and more beautiful?

How can I make quizzes neater and more beautiful?

by Phuong Hoang -
Number of replies: 20

Most of us can see and agree that quiz appearance doesn't look beautiful, even ugly! However, no one dares to express their point of view because of 2 following reasons:

- No one helps you. (they read your post and ignore)

- Being criticized because people say the available appearance looks great - no need to change!

But I dare to say what I see and how I think. Just want moodle site to be better.

My question is: How can I get my quiz page like 1 of 3 following pictures? Just 1

+ My favorite


+ My second  choice


+ My third choice


Thanks in advance,


Average of ratings: Useful (1)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I always wonder why people asking for help start by insulting the very people that they want to help them?  

We are all volunteers, we are all very passionate about Moodle, and we spend a lot of our time simply trying to help others on this forum.

I actually would not have responded to this post but I actually like your option 1 design and tend to agree that it would be nice to clean up the quiz screen and think your proposed solution is an elegant one.  It would take some php coding to achieve but maybe Tim could be persuaded to look at it. 

If you willing to change core files and you ask, maybe someone will help you figure out the code changes required.  If not, you could put in a tracker request and see if you get some agreement and support from the community.

Average of ratings: Useful (2)
In reply to Emma Richardson

Re: How can I make quizzes neater and more beautiful?

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

Actually, it does not require any PHP magic. Just some CSS, which any theme designer could do. (Though it is also all done with renderers, so any theme designer could also change the HTML output by writing some PHP code if they want. See https://docs.moodle.org/dev/Overriding_a_renderer.)

I am rather disappointed that over the years there have not been more different designs created for the quiz in different themes.

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

Re: How can I make quizzes neater and more beautiful?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I will have to play with that.  I thought that actually moving that block contents to the question window might require php but if it can be done with css, I might just be able to figure that one out!

Average of ratings: -
In reply to Emma Richardson

Re: How can I make quizzes neater and more beautiful?

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

Well, I would not put the information inside the blue question box. Instead I would keep it as a separate grey box (or whatever colour) but make it horizontal above the question box, rather than to the left.

Note that the CSS to do that would be simple. What is more irritating is that first you will have to find all the CSS rules that standard Moodle applies to those boxes, and undo all those rules. But, still perfectly doable. Just use your browser developer tools tools.

Average of ratings: Useful (3)
In reply to Emma Richardson

Re: How can I make quizzes neater and more beautiful?

by Phuong Hoang -

Hi Emma, 

I don't mean to insult anyone. So sorry if I make you feel like that. I know you, Tim Hunt, Justin Hunt and many other moodlers are very passionate about Moodle. We are easy to realize that quiz screen hasn't been improved for more than 10 years. Why nobody complains or would like to change? Or they think that it's okay and no need to change. " If not, you could put in a tracker request and see if you get some agreement and support from the community." Summit a tracker request? NO, because I can foresee that few people care about it and I won't get much agreement. They don't need a change!

- I agree with Tim; "any theme designer can make it". The problem is that they are willing to spend time making it to contribute to our community.

+ P/S: I post this thread to express my view that our quiz screen is not so good. By the way, thanks Emma and Tim for reading what I posted. Sorry I can't do anything to change it.

Average of ratings: Useful (1)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Phuong, beauty is very much in the eye of the beholder, one persons ugly design is another persons clean and functional. I have thought in the past it would be nice to have some alternative layouts for the Quiz, or some adaptions of standard themes with customization for the quiz. For example I can imagine an adaption aimed at primary schools. 


The lovely thing about GPL software is that anyone with the interest and ability can do it. Creating theme or renderer customisations of the quiz is a project of complexity and size appropriate for an undergraduate project.

In English describing something as ugly is strong language, "Your lover is ugly" is fighting talk. "Your lover would look excellent in the new style of clothes I saw in the shop yesterday" is more likely to get a constructive conversation going.

Average of ratings: Useful (1)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by S. Ali -

Hello,

Something similar was done before with the Essential theme regarding a version of Option 1 - moving the items horizontally above the questions.

Perhaps it may be adapted to the theme you are using.

Hope this helps.

 

Regards,

s.ali

Average of ratings: Useful (2)
In reply to S. Ali

Re: How can I make quizzes neater and more beautiful?

by Phuong Hoang -

Hi S. Ali,

Your information's very useful. And it helps me a lot. That's not what I really want, it looks more beautiful than the original one. It's better if two blocks of a question into one.

Thank you so much 

Average of ratings: -
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Phuong Hoang -

Thanks to the links S. Ali shared and I figured some more. Here's my result;

quiz content

* It looks like one block and all question info. is in one line.smile

Thanks for everyone's help,

Average of ratings: Useful (4)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Please post the CSS you used so that we can all benefit!

Average of ratings: -
In reply to Emma Richardson

Re: How can I make quizzes neater and more beautiful?

by Phuong Hoang -

Hi Emma,

It's my pleasure. Here's the CSS I used;

.que .info {

float: none;

width: auto;

}

.que .info > div {

margin-left: 15px;

margin-right: 15px;

}

.que .info > div {

display: inline;

}

.que .content {

margin: 0 0 0 0;

width: auto;

}

.que .info {

    background-color: #eee;

    border: 1px solid #bce8f1;

    border-radius: 4px;

    margin-bottom: -5px;

    padding: 8px;

    }

.que h3.no {

    display: inline;

    font-size: 12px;

    line-height: 1;

    margin-left: 10px;

}

* To make it look like one block you should change:

- border: 1px solid #bce8f1;

- margin-bottom: -5px;

Good luck! And Enjoy your change!

Phoenix (phuong)

Average of ratings: Useful (14)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Hartmut Scherer -

Hi Phuong,

Thanks a lot for posting the CSS. I like using your "favorite" version in the theme Shoehorn. Again, thanks for sharing a great idea.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: How can I make quizzes neater and more beautiful?

by Phuong Hoang -

You're welcome! I hope moodle developers and theme designers will consider integrating this feature into moodle quizzes. If so, moodlers don't have to use MORE css anymore. 

Average of ratings: Useful (2)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Robin Leung -

Nice work on the CSS!

The menu is squished when it is in mobile view. Any way to make it mobile friendly as well?

Average of ratings: Useful (1)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Phuong, I have just marked your post as useful, but I wish I had a higher rating than that to give smile

Average of ratings: Useful (2)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

Thank you for sharing. Here is what we did with the Quiz's page. 

(mostly CSS fixes and also using the renderers, following Tim hunt's suggested a while ago)

moodle quiz attempt new design

Average of ratings: -
In reply to Nadav Kavalerchik

Re: How can I make quizzes neater and more beautiful?

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

We also have an uncompressed "quiz navigation" (fake) block, for teachers who like it this way.

moodle quiz navigation block - new design

Average of ratings: Useful (1)
In reply to Phuong Hoang

Re: How can I make quizzes neater and more beautiful?

by David Ordóñez -

HI every one,

Thanks for sharing CSS. I was reading about this thread in Moodle News.

In my opinion, every left side-block in every question is a distraction element more than functional.

I attached CSS i adapted from the original in this post.

This is the result in a production site:

Quiz example with css adapted for every question

Is any posibility to modify or define a new quiz layout in future moodle versions?

Thanks alot for sharing and sorry for my english.

David from México

Average of ratings: Useful (2)