-
-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rework the feedback table #5102
Conversation
You may find some place to integrate these features at the card level:
|
Lena and me prefer option 3. We find extra border for 2 too hard. Green/red text on blue background doesn’t blend so well. |
My screenshot was a bad example. On "real" pages, the prominent background interferes too much with the diff background (like here). They are both "large areas with the same red/green" color, but have a different function (failing "similar things should look the same, similar looking things should function the same). The group status is not that important that we want such explicit focus (failing the squint test). Correct groups will be collapsed by default which will make the different enough. |
Not sure about the “collapse correct by default” yet, but may have to see it in practice. My fear is that will not be very supportive for students if the main focus is on what’s wrong, by hiding what is already OK. |
I approve of the new layout, this is a nice step forward! I do have some notes on the colors:
|
Thanks for the feedback. Here are the updates I've implemented: Scrollbars: This is indeed very ugly on windows (I didn't spot this while testing). I now set the Card borders: I reverted the colored borders and once again use the divider color (light gray). For targeted cards, the border is set to the primary color (dark blue). The width stays at 1px (as opposed to the 2px of the previous design). Multi-line alignment: This was a bug. I didn't test with descriptions that spanned multiple lines Regarding the changes I've not implemented: Update the icon font: This would require making the current font even bigger. It seems that iconify might be an alternative. I'll try to add this in a separate PR. We could then gradually migrate all icons. Card header color: I tried all dodona css variable colors as header and almost none "worked". Most were too prominent or didn't fit. Others (like the proposed darker gray) interfered with the other gray areas in the card content. I decided to stay with blue for now. The removal of the colored borders will probably also help make everything easier on the eyes. Tweak margins and padding: Increasing the content density by reducing white space doesn't seem necessary to me. Part of the goal of this PR was to make the hierarchy and content of the table clearer and reducing the density was an important part in this. In the previous design, you also had to scroll to see the entire table, so the difference is in the amount of scrolling. This is countered by the addition of the top summary which means that in many cases users won't have to scroll at all. However, I'm open to making adjustments to the spacing if we identify any regressions or UI glitches, such as with the multi-line descriptions. Because of the nested nature of the table and optional text and code that can show up almost everywhere, it's easy to miss a few cases. I'll do a few more tests on naos to see if I missed any cases. |
There is a bug with the left padding in this example: https://naos.dodona.be/nl/submissions/15701527/#tab-1-group-9 I like the new borders, with the primary color for targeted cards. I find it rather counter intuitive that it is impossible to close the targeted card. It is also impossible to remove focus from a card, except navigating to another one. I know this it caused by the target implementation but it doens't feel natural. (Not a priority to fix, would have bothered me less if I could close the card) The navigation help does not give any indication which one is already targeted. Definitely with al icons being the same (either wrong or correct) it can be easy to lose your position. I've noticed the tooltips after writing this => they do help with this problem, although it is still not optimal.
Did you also try |
I have tried setting the "currently selected card" by using :focus or :active, but both don't seem to work reliably. I think you would also expect something scroll-spy like for this. If you click an icon, the page scrolls to that card. If you then continue scrolling, it might be confusing if the clicked icon was still highlighted. If we were to add more JavaScript in a next iteration, we could opt to:
|
I was in the midst of evaluating a test when the new feedback table was rolled out, and now I feel seriously hampered by the fact that by default all the correct contexts are collapsed (and I also have no way to expand them all). I'm loosing quite some overview, especially because the bash judge (then one whose results I'm currently evaluating) puts every individual test in its own context. I'm now feeling terribly slowed down while evaluating submissions. |
This pull request partly reworks the feedback table according to #5101. The main goal was to make the debug button more prominent. In the old design, this was not possible since the feedback level that was associated with the debugger (
group
) did not have any UI.Changes
Cards with header
Every group now has its own card with a header. The header contains an incremental number of the group/test, the status in words, a debug button if relevant, and a button to collapse the card. Correct cards are collapsed by default, except if everything is correct. The toggle button that was used to hide correct "tests" was repurposed to collapse/expand correct cards.
Tab summary
In between the tabs and the feedback table, we showed 0, 1 or 2 toggle buttons in the old design. The empty space at the left is now used to add a summary of that tab. Every card is represented by a colored circle, indicating its status. These circles are clickable and link to the corresponding card. The card then scrolls into view, the border size is increased to 2px and expands if needed.
The height of this summary is fixed (to the height of the toggle buttons) and will show a vertical scroll bar if there would be too many tests.
Other changes
Implementation
Most of the changes are done in the feedback table renderer. Some of the html that is generated there could in theory move to javascript to reduce the time that is needed to generate a server response. This could probably be done in a later PR as we'll probably merge the pythia renderer at a later time.
Collapsing the cards is almost entirely done in css by adding/removing the
collapsed
class.If you test this, please try exercises with complex feedback tables. Since our format is very flexible, there are probably edge cases which I have missed.