search

maths / moodle-qtype_stack

Stack question type for Moodle
GNU General Public License v3.0
142 stars 149 forks source link

Styling of PRT feedback #380

Closed georgekinnear closed 6 years ago

georgekinnear commented 6 years ago

I propose changing the CSS styling of the PRT feedback to make it less obtrusive.

In particular, adding "display: inline-block" to the appropriate div will make the boxes only take up the space they need, as in this example: image

Additionally, I wonder if we might revisit the colour used (I have proposed a more neutral tone in the image example), and consider adding tick/cross icons to the feedback by default.

timhunt commented 6 years ago

Re the colour change: In the Moodle question system, all feedback-y content uses that yellow colour. I think STACK should remain consistent with that. If you want to change the colour that you use for all feedback in Moodle, you should change the Moodle theme, not introduce inconsistency in STACK.

sangwinc commented 6 years ago

Ok, noted Tim. I already mentioned to George the colours came from you!

I do like the inline style though.

Issues.

  1. Inline style - do we need an option in the question, or can we rely on authors to use paragraphs? This might break old questions..... (This style will take space if it needs it of course.)
  2. Validation as well
  3. Icons
  4. Colour.
timhunt commented 6 years ago

Oh! I see that we are hard-coding the colour of the .stackprtfeedback class in styles.css. This is bad. Ideall, we would add a standard Moodle class name here. However, there does not seem to be one. This colour is hard-coded in a lots of other question types :-(. (.outcome is closest, but adds other styles that we don't necessarily want. Could be worth trying though.)

If we make this inline, there is alreay an option for qusetion authors to keep it separate: They can put the [[feedback:prt1]] token in a separate paragraph.

There are fairly standard Moodle tick/cross icons for use in questions (see the call to feedback_image in question/type/multichoice/renderer.php, for example). Again, you should probably use that).

timhunt commented 6 years ago

While I think of it, I created https://tracker.moodle.org/browse/MDL-62816

aharjula commented 6 years ago

While you do anything about this do try to remember #143 it probably could benefit from this too...

christianp commented 6 years ago

Just popping in to say that I recently rejigged the way Numbas displays feedback, and I got rid of as much inline feedback as possible, so you might learn from my experience. Part feedback for Numbas now looks like this:

image

The Numbas marking algorithms can produce a series of feedback items, similar to STACK's PRTs, which are displayed in a vertical list at the end of the part. If the feedback changes the awarded score, a tick or cross icon is shown to the side, as appropriate.

I don't know if this happens in STACK, but we have quite a few questions with input boxes arranged in tables, or other non-paragraph layouts, and having feedback right next to the input can thoroughly mess up the layout. Displaying feedback inline should at most be an option. Numbas even has an option to not display the icon next to the input, in case that messes up the layout.

If you just don't want the box to take up the full width, but are otherwise happy with it appearing underneath the input box, you could wrap it in a div with display: flex. (example)

timhunt commented 6 years ago

I am pretty sure I have seen research saying that feedback is more effective if it is close to the thing behing fed back on.

christianp commented 6 years ago

Yes, I'm sure that's true. Here, "close" just needs to be "before the next input box", not necessarily "inline with".

sangwinc commented 6 years ago

Thanks Christian,

We can move feedback around with tags so always having feedback next to the box is is not a problem. I'm going to play with the new style and see how I get on.

georgekinnear commented 6 years ago

Picking up on the various issues Chris identified...

  1. Inline - I think going with display: inline-block as the default is neater, and as has been noted authors can put the [[feedback:prt1]] token in a separate paragraph if they really want it on a new line.

  2. Validation - this currently appears in a white box which takes up quite a bit of space. Perhaps tidying that up is a separate issue!

  3. Icons - thanks Tim for pointing out the existing icons. I wonder if it would be helpful to have a new tokens like [[grade_correct]] which could be used when authoring feedback?

  4. Colour - I take Tim's point about the consistency of using yellow for feedback. Actually on our server the shade used for the PRT box is different from the other feedback which I think is what was making it stand out to me. I think the colour needs to be changed here: https://github.com/maths/moodle-qtype_stack/blob/171d73a67c83c5b476cd10905de63435c047b102/styles.css#L32 On our site, the correct .outcome colour is #fcf8e3 but I don't know how that can be made consistent with Moodle themes more generally.

sangwinc commented 6 years ago

Thanks George, Can I ask you to checkout the issue branch, address 1, 2, and 3? I'm not sure what to do about 4, either! If you are willing to make those changes I'll have a look at the demo site with them included.

sangwinc commented 6 years ago

I'm merging this branch back into version4.2 in time for the next release.