Question screen in Quiz activity on smartphone

[maberdour]

Hi, I've been playing with the Quiz activity on smartphone and tablet this evening and there is a problem with the question layout on smartphone. There are three elements to a question screen: the 'Quiz navigation' which spans the screen width, and then below it there are two columns with the Question number / completion status / mark on the left and the actual question on the right. On a smartphone this is only really usable in landscape mode, because in portrait mode the question only has 50% screen width to display in.

So my question is: could the display be amended on smartphone resolutions so that the question number block appears ABOVE the question rather than to the LEFT of the question. This way the question could make full use of the screen width and would then be usable in portrait mode.

I am not not sure if this is controllable within the theme or requires core code amend, as I am not a developer. If it's core then let me know and I'll log it in the tracker, if it's theme related though, then I guess this Github log is the best place for it :-)

Thanks as ever, Mark

[ds125v]

It shouldn't be too hard. Quiz uses a lot of renderers, which (if they cover this area) would allow us to rewrite it. And even if it isn't in renderers then as long as the underlying HTML isn't too crazy then we can use CSS media queries to re-arrange things at small screen sizes.

The main thing holding me back from looking at it is that the test data generator doesn't seem to generate example quizzes. This has generally shoved Quiz related things down my To-Do list. If you're aware of a comprehensive downloadable demo course that would contain a full featured quiz that we could use for testing, then that would help this and probably many other Quiz related issues.

Actually, I had a quick look at a live Quiz in a non-responsive Bootstrap theme we've got running and based on the HTML it seems like this would work:

@media (max-width: 480px) { .que .info { float: none; width: 100%; } .que .content { margin: 0; } }

It's a bit of a guess as I can't test it properly but I'll check that in soon, once I can confirm that it works.

It's not "great" (e.g. the items in the gray box are still listed vertically which wastes space) but it gives a bit more room for the question and feeback text.

[maberdour]

Hi David,

There are lots of downloadable courses on the MOOCH site including this one which has a whole bunch of quizzes in it. Great for testing purposes.

http://hub.moodle.org/?courseid=544

David Scotson notifications@github.com wrote:

It shouldn't be too hard. Quiz uses a lot of renderers, which (if they cover this area) would allow us to rewrite it. And even if it isn't in renderers then as long as the underlying HTML isn't too crazy then we can use CSS media queries to re-arrange things at small screen sizes.

The main thing holding me back from looking at it is that the test data generator doesn't seem to generate example quizzes. This has generally shoved Quiz related things down my To-Do list. If you're aware of a comprehensive downloadable demo course that would contain a full featured quiz that we could use for testing, then that would help this and probably many other Quiz related issues.

Actually, I had a quick look at a live Quiz in a non-responsive Bootstrap theme we've got running and based on the HTML it seems like this would work:

@media (max-width: 480px) { .que .info { float: none; width: 100%; } .que .content { margin: 0; } }

It's a bit of a guess as I can't test it properly but I'll check that in soon, once I can confirm that it works.

It's not "great" (e.g. the items in the gray box are still listed vertically which wastes space) but it gives a bit more room for the question and feeback text.

— Reply to this email directly or view it on GitHub.

[ds125v]

Hi Mark,

I downloaded that course and made a few tweaks to the quiz display screen that I'd love your feedback on. It's committed to the dev branch currently.

If you get a chance then some general feedback on how close to "working" you feel the quiz stuff is in this theme, either mobile specific or generally, would be good. Quiz is a big area of Moodle, with lots of nooks and crannies. It would be good to have some confidence that we've not accidentally wrecked it while working on other stuff (in particular forms have a big overlap with Quizzes, since they use a lot of the same items, checkboxes, radio buttons etc.

And of course, if you have any specific bugs, feel free to file them.

[maberdour]

I'll see if I can download and install that dev branch tomorrow, thanks :-)

[ds125v]

Note the dev branch might temporarily lose support for versions other than 2.5, we'll need to set up a seperate branch to put workarounds that aren't needed in 2.5. I think it's working on 2.4 still, but i'm less confident that 2.3 will work with the latest changes.

[ds125v]

I just pushed two new branches "moodle_25_dev" and "moodle_all_dev". The first is just a rename of the 24_dev branch, the latter will try to stay in sync but remain compatible with as many moodle versions as possible. Let me know if you have any trouble with it on 2.3