Rework home page

[bmesuere]

Right now, the home page contains

• A list of course cards for the courses you're subscribed to (grouped by AY, potentially with favorited on top)
• General stats like the number of submissions and solved exercises
• A list of upcoming deadlines over all courses
• A list of recent exercises over all courses

The list of courses is the most prominent, but might not be ideal for all users:

• Some users have a lot of courses (e.g., @pdawyndt has around 60), many of them not super relevant to show on the home page.
• Quite a lot of users only have a single course. Here, a lot of space is wasted and the home page doesn't show a lot of extra things.

In addition, we have a lot more data. The course cards now show some key numbers (submissions and users for teachers, submissions and solved exercises for students), but are they the most relevant? For teachers, maybe submissions in the last week is more relevant?

We added a lot of new features to Dodona over the years. Some of them could be added to the home page more prominently:

• Notifications
• (Open) questions (especially for teachers)
• Ongoing grading sessions (for teachers)
• Grading results (for students)

(Right now, this issue isn't super actionable, but since I wanted to give it a priority, making it a discussion was not an option)

[bmesuere]

The homepage currently is quite static and could do more to surface relevant information. Especially for users that are only subscribed to a single course, the home page is relatively empty. This could be improved by adding a row of "action cards" to the top of the home page:

• The leftmost card is "jump back in" and is shown in blue. This shows a recent exercise that wasn't yet correctly solved. If there are no such recent exercises, the card could lead to a recent incomplete series. Clicking on the card brings the user to the respective exercise, potentially with their last submission already loaded in the editor.
• Next, a number of relevant "deadline" cards are shown. These cards are sourced from all courses a student is subscribed to. The color of the card depends if the series status. It is green if the user successfully solved all exercises and red otherwise. For teachers, it could indicate how many students already completed the series.
• A maximum of 4 cards is shown.

Todo

• Include a marker/icon (bottom right?) to indicate the cards are clickable.
• Include a progress bar and more status information in the deadline cards. We do have to make sure all of the card types have the same height.

Open questions

• Should we always show these cards, or only on desktop screens?
• Are there other cards/actions we could show here?
• Can this replace part of the right sidebar?
• I'm not sure about the style of the action cards. An alternative could be to have white cards (with or without drop shadow) with a colored (more saturated) border instead.

Current mockup The html of this mockup can be found in 6120e84df2b972127fec09069562bbd36cef7476.

[jorg-vr]

I'll split this up into part which I'll try to address in separate prs. I'll add my current vision for each part here as well, so it is clear what I will try.

• [x] Put the most important and actionable content on top
  • These are the jump back in and series deadlines cards as mentioned above
  • I am not fully convinced of completely colored cards, so I'll try some different designs. Maybe explicitly adding a progress bar to the deadlines
• [x] Rethink course cards
  • Information I want on those cards:
    • Course name + professor
    • Progress indication (Progress bar?)
    • Number of users (As a teacher)
    • Jump back in (active exercise/series for this course)
    • Upcoming deadlines (With indication of completeness)
  • Find a solution for size differences eg:
• [x] Focus on the active academic year
  • Do we need to load all old/inactive courses on the home page? They can be found using the courses page, or maybe loaded using an extra button on the course page. But no need to load them all by default
• [x] Add a jump back in card for grading for teachers when relevant
  • Teacher will be more likely to jump into grading then into an exercise. we should look into replacing the jump back into with a link to a relevant grading page if they were partially through an evaluation
• [x] Add a card with unanswered questions to the right bar (For teachers)
  • This could replace the current card with deadlines
• [ ] Add a card with recent notifications to the right column
  • Not really sure about this one, but this is extra recent information that we could display

[bmesuere]

Some ideas we had while working on the current rework, which may or may not be used:

• for teacher course cards, some "live" statistics might be useful. Before we add those, we will experiment with adding better statistics on the course page #4340
• in the right sidebar, add some kind of activity feed? We should first think of what could be included here before we go in with it. Might be combined with the item below
• in the right sidebar certain cards that only show up when they need to be. We could probably rework the current notification implementation
  • for teachers: a card with open questions
  • for teachers: a card with registration approvals
  • for teachers: pending evaluations?
  • exports
  • for students: evaluation results
  • for students, questions that were answered
• in the right sidebar, a place to put "non urgent" messages, such as new dodona versions or feature highlights #4172
• if we would have a lot of content for the sidebar, we could double its size for users with only a single course
• a variant of the current "statistics" Maybe a little graph? a streak indicator?