#CSS3 Transforms to improve the #moodle quiz https://www.youtube.com/watch?v=Vv2EG9KLXKk

The basic styling of Moodle has definitely moved on since the days of 1.9, with SVG icons and some CSS rollovers on course page resources. However, the individual activities still lag behind considerably with quizzes, WIKIs and forums still looking pretty much the same as they always have. With quizzes being used much more frequently now I decided to have a look to see if I could make them look slightly more appealing, without having to add images to individual questions.
Looking at how Smartphone apps behave now and the ease of implementing some CSS3 transitions I decided to add an animated glow and increase in text size on rollover and selection of multiple choice answers. At the same time I added very small rounded corners to various elements.

This is the code I have so far (it needs Opera specific transforms etc to work everywhere, but hardly any of our students use it):-

.que input, .que textarea, .que .answer div{
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;}

.que .content input:focus, .que .content textarea:focus+label, .que .content input label:focus {
outline:none;
background-color: #EFF;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

.que .content .answer div:hover{box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
font-weight: bold; }
.que .content .answer div{
margin-bottom: 6px;
}

.que .formulation{
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}