Does the top navbar student group menu override the group selection menu inside the exercise form?

[markkuriekkinen]

Is this a real bug?

1. Student selects a group in the A+ top navbar.
2. Student makes some group exercises with the group.
3. Student moves on to another exercise that must be done alone. A+ warns the student that the exercise must be done alone (in the overlay inside the exercise frame).
4. Student clicks "show the exercise anyway" in the exercise overlay and selects "alone" in the group menu inside the exercise frame/form.
5. A+ does not allow the student to make the submission because "group submissions are not allowed".
6. Even more confusing, if the other group members have already completed the solo exercise, then the student is shown a warning like "Student B has already submitted to this exercise in another group". The student is not explicitly told to change the group selection in the top navbar.

This might not be a bug, but the user experience is confusing anyway. The student is expected to change the group in the top navbar before even opening the next exercise.

Internal ticket: https://rt.cs.aalto.fi/Ticket/Display.html?id=18683

[markkuriekkinen]

The user experience could be maybe improved with very small changes.

• The student should be very explicitly told to change the group selection in the top navbar if that is really necessary.
• The group selection should be made clearer: what is the difference between the top navbar menu and the group menu inside the exercise.
• If the exercise allows only solo submissions alone, then is it necessary to block the submission with confusing warnings about groups? The warning could simply emphasize that this exercise must be done alone. The group selection is unnecessary when there is only one possible selection.

[skulonen]

I would make the following changes to the UI:

• In solo exercises, when a group is selected from navbar:
  • Remove the modal warning.
  • Remove the group selection dropdown within the exercise (since the only option is to submit alone).
  • Either change the Submit button to say "Submit alone" or make the warning message at the top of the exercise more prominent, so it is very clear that each student has to make their own submission.
• In group exercises, when the user has not formed a group or the number of users in the group doesn't meet the requirements:
  • Keep the current modal warning but add more instructions for forming a group.
  • Disable/hide the submit button (since there is no way to submit the exercise in this situation).
• In exercises that allow submissions both alone and in groups, or groups of different sizes:
  • Add an info message bar above the exercise (where the group warning would be) that tells the required group size.

One thing that I find a bit confusing in the current UI is the fact that the exercises don't react when you switch groups from the navbar. After switching to an appropriate group, the exercises still display warnings about the group size. I think we should make the exercises react properly, or perhaps even get rid of the navbar group selection, since each exercise has its own group selection anyway.

[markkuriekkinen]

Nice ideas!

In addition, exercise UI (e.g., the blue exercise frame in chapter pages) does not highlight the group settings at all. This could be changed so that students always know which exercise allows groups and which do not (even after closing the warning overlay). Maybe the top bar of the frame should show the allowed group sizes?

If the navbar group menu is removed, what are the consequences? I think the original idea was that the navbar group menu remembers the choice when the user reloads the page or moves to other pages. But it should be possible to implement the same in the exercise-specific group menus.

We could talk about this after a daily.

[skulonen]

Two potential places to put the group size indicator:

In the exercise frame or as a notification box. Does the first option make the frame look a bit crowded? I suppose it could also be below the "Points"/"My submissions" items, but I'm afraid that that would make the frame even uglier.

[markkuriekkinen]

It is safer to put it in the exercise frame navbar since there is other code that depends on the contents of the exercise frame. Some courses manipulate the exercise contents with their own JavaScript/CSS code and the active elements JS in chapter.js does similar tricks.

[skulonen]

I just realized that there may be 3 info texts in the frame navbar, when there is a minimum number of points required. If we stack them vertically, the navbar stretches and the left-hand side looks ugly (especially with the hover effect). Maybe we could also stretch the left-hand side and center the labels vertically?

We could also spread the right-hand side texts horizontally instead of vertically, but they can't fit on a single line and would get wrapped under the left-hand side.

Edit: actually they fit on a single line just fine if the font is a bit smaller (like it originally was) and the resolution is 1080p. On smaller resolutions the entire right-hand side is placed under the left-hand side and I think it looks okay.

[markkuriekkinen]

The navbar may also contain buttons for the exercise template files (typically skeleton code) and the model solution. Teachers also see the "view all submissions" button. As far as I remember, the current navbar contents already stack both vertically and horizontally to some extent.

[skulonen]

I ended up with a layout like this:

I feel like the info texts are far more noticeable when stacked vertically and with the icons added. The buttons on the right-hand side are a bit weirdly placed, but that's how they were originally. I can try to align those better too, if that seems worthwhile.

[markkuriekkinen]

@skulonen the screenshot looks good to me! Remember to check how it looks on small screens too. Now I don't remember if the deadline text currently ever shows the late submission deadline after the normal deadline has passed, but if it does, then it would take some more space. Remember also that the group sizes are often flexible, i.e., the min and max group size settings allow multiple group sizes. For example,

• the same exercise may allow submitting either alone or in groups of 2 (min group size 1 and max group size 2)
• groups of either 2, 3, or 4 students could be allowed (min group size 2 and max group size 4)

[skulonen]

It might not be very easy to get rid of the group selector in the top navbar. The alternate group selector within the exercise frame is populated (using Javascript) by reading the contents of the navbar group selector. So if we remove the navbar group selector, we would need another way to feed the group choices to the Javascript code.

I think I'll focus on the other issues in this sprint for now and return to this later. I feel like the user experience is already improved somewhat by adding the group size indicator to the exercise frame.

@Mankro thanks for the comment! Yes, I checked it on a smaller screen size and spent the last hour fiddling with it to make it look good. And yes, I've taken into account the alternate group sizes. There are 5 alternate strings that may be displayed in the group size indicator (alone, group of X, group of X-Y, alone or group of X, alone or group of X-Y).

[markkuriekkinen]

OK! :+1:

[skulonen]

I merged two fixes related to this issue, to get them ready for 1.9. They don't fully resolve this issue, but improve the user experience.

1. The new exercise frame, pictured in my previous comment.
2. Got rid of two misleading warning messages in solo exercises:
   • The warning that another group member has already submitted the exercise. It is useless because group members are irrelevant in solo exercises.
   • The warning that you have previously submitted the exercise alone. It is useless because you can't submit in a group anyway.

[markkuriekkinen]

Recap:

• the top navbar group selection can be used when the group dropdown can not be added to the exercise submission form by chapter.js. This is the case in, at least, exercises with a custom frontend implemented in JavaScript, such as JSAV.
• When the exercise form includes the group dropdown (added by chapter.js), then the A-plus server uses the group selected in the form. It may be a different group than is selected in the top navbar.
• When the exercise is loaded, potential warnings about groups in the exercise overlay are based on the group selected in the top navbar since in that phase, there is no other method of defining the selected group.

For now, it is not worthwhile to try to remove the top navbar group selector.

What could still be done is to check/test that everything works as described again.