I'm looking for advice about how to go about (CSS) styling the input fields in the embedded cloze question type.
Using the current default Moodle 3.8 theme, a c-test in the embedded cloze question type looks like this:
The problem with this styling, as far as I can see, is that it makes the text difficult to read. This in turn makes the test more difficult to complete due to the increase in cognitive load which may, in turn, reduce the construct validity of the test, i.e. it's testing working memory capacity to such a degree that the meaning-form processing gets somewhat marginalised.
But with a little CSS styling we can make it easier to read & therefore easier to complete & probably more valid, like this:
The CSS is very simple:
padding: 0px 0px;
margin: 8px 0;
border-bottom: 2px solid;
And in each input field, I also changed the size="1" attribute to style="width: 12px;", size="2" attribute to style="width: 24px;", etc., so that the width of the fields more closely matches that of the missing characters, more or less.
However, in an ideal world, I'd like to get it to look more like this, i.e. an underscore for each missing character:
How close do you think I can get to this & how should I go about making these edits?
Do I need to develop a whole new theme, e.g. copy the standard theme & make the edits to the corresponding CSS code?
Does anyone know of a way to get the underscore effect? I'd be fine with developing an adaptation of the embedded cloze question type if that's what it'd take.
So, helpful Moodlers... What do you think? What advice do you have for me?