Tuesday, March 8, 2016

Vertical layout for matching question in Moodle Lesson

Moodle Lesson is one of the most interesting and flexible of the 14 activities that are available on a stock Moodle site. One of the things you can do in a Lesson is include questions. But I'm not very pleased with the layout of the matching type question. This is an example of how a matching question appears in a Moodle Lesson:










The first two matching pairs look okay but there's a sort of alignment problem with the third. The problem might become worse if you have an even longer item in the left column of the matching pair. And what's with the right aligned text? Maybe it works for short items in the left column but not when you have longer items.

I thought the whole thing would look cleaner and simpler in a vertical layout: question, answer, question, answer, and so on. Like this:













If you want to present matching questions in the same way on your Moodle, try adding the CSS given below in your theme settings:

.mform .fitem div.fitemtitle {text-align:left; float:none; width:100%;}
.mform .fitem .felement {margin-left: 0px;} 



(This works in Moodle 2.6. Not tested in other versions.)

No comments:

Post a Comment