mozilla / aestimia

[Archived] Assessment tool
5 stars 10 forks source link

Provide live thumbs up/down icon on submit assessment button w/ tooltip. #81

Closed toolness closed 11 years ago

toolness commented 11 years ago

This is intended to help resolve the problem of mentors accidentally rejecting submissions they intend to accept and vice versa, as mentioned in #75 and #76.

A modal yes/no dialog as suggested in #76 isn't ideal because users will most likely habituate to always confirming the action, thereby accidentally confirming it the one time they'd want to reject it. So instead, I added some JS that provides a live indication of whether the submission will be accepted or rejected based on what the mentor has filled out so far.

If not all the required rubric items are checked, a thumbs-down icon will appear on the "submit assessment" button; when the user hovers over the button, a tooltip will appear like so:

screen shot 2013-06-27 at 1 57 23 pm

If all required items are checked, however, a thumbs-up icon will appear with the following hover tooltip:

screen shot 2013-06-27 at 1 57 38 pm

If folks are still making the mistake this solution is intended to resolve, we should either implement the modal confirmation mentioned in #76 (which is easy to implement, yet inhumane) or the undo/revise functionality mentioned in #75 (which is hard to implement, yet humane).

Implementation note: I didn't add unit tests to submission-detail.js right now since the code is written in a way that it's ok if it throws exceptions (the functionality isn't critical to the functioning of the site), and it's also kind of hard to test regardless.

chloeatplay commented 11 years ago

I really like this solution, very elegant. And the thumps up, thumps down part is great. :thumbsup: :thumbsdown: :koala:

toolness commented 11 years ago

Awesome! Thanks, I will merge it in now.

threeqube commented 11 years ago

This is great @toolness :+1:

iamjessklein commented 11 years ago

Nice interaction design here.