A new student overview page with Vue.js

Description / Overview

This is for testing that the proposed overall setup (a Django REST backend with a Vue.js + Bootstrap 4 frontend) actually works and is delightful to work with. The exercise is to reimplement and enhance the two current student views. Namely, these are the overview page where the student can see a list of all submissions and a following detail view of each submission.

The estimated time acknowledges that time is required to get familiar with the used technologies.

Use cases

This is only for the student. The student view is necessary when the students requests to see they corrected and graded submission.

Links / references

chart.js for statistics.

Feature checklist

List view:

• A list of all submissions of the student that is logged in.
• Each list entry contains the title and score of the student. Additionally a badge is displayed when the student has seen this submissions aka. clicked on it.
• The overall score and the information if they have passed is displayed on the fron page.

Submissions detail view:

• Student sees exactly what they submitted during their exam.
• The submission is annotated with tutor feedback so it is clear which line(s) contain the students mistake if any.
• The results of test cases is displayed as well as the original task description.
• Title, score, overall score and the seen label have to be present.

Technical details:

• Some components of the submissions detail view are displayed to other users with more or less information. These have to be reusable.