Diff view between student submission and model answer

[Mikael-Lenander]

Description

What?

Shows the difference of the student submission and model submission in the inspect page in git style. Green lines indicate the lines that the student has "added" compared to the model solution and red lines indicate the lines that the student has "removed". The original line numbers of both files are displayed on the left in GitLab style. When the submission is copied or downloaded with buttons "Copy to clipboard" or "Download", the diff lines are included if the "Compare to model answer" button is checked.

Why?

Makes it easier for TAs to find bugs and catch plagiarism in students' submissions.

How?

Adds a new request param "model_diff" to SubmittedFileView that returns the diff of the submitted file and the model answer so that marker ' ' (two spaces) is prepended to the common lines and the marker '+ ' or '- ' is prepended to lines that are unique to the files. See https://docs.python.org/3/library/difflib.html for more details. If the exercise of the submission has a model answer, the submission files are fetched with the parameter "model_diff" in the inspect page.

When the submission files are loaded in assessment.js and "model_diff" is set, the original submission files are reconstructed by removing the '- ' lines and the markers. The original files are memoized with function getOriginalDataOrModelDiff to object loadedData. A new button "Compare to model answer" is added. It toggles between the original file and the diff file. This is achieved by selecting the other file from loadedData object and replacing the src table with the file contents. Function highlightCode in aplus.js reconstructs the table with the new data.

The diff file is shown only if the submission has a model answer (variable hasModelDiff) and the "Compare to model answer" button is checked (variable showModelDiff). Under these conditions, function highlightCode uses function getDiffRow to draw the diff view and param "model_diff" when downloading the submission file.

Fixes #1129

Testing

Remember to add or update unit tests for new features and changes.

• How to test your changes in A-plus
• How to test accessibility

What type of test did you run?

• [x] Accessibility test using the WAVE extension.
• [x] Django unit tests.
• [x] Selenium tests.
• [ ] Other test. (Add a description below)
• [x] Manual testing.

Submitted an assignment in O1 local instance. Compared it to the model answer. Changed file tabs. Copied files to clipboard and downloaded them. Inspected a submission that has no model answer.

Did you test the changes in

• [x] Chrome
• [ ] Firefox
• [ ] This pull request cannot be tested in the browser.

Think of what is affected by these changes and could become broken

Translation

• [x] Did you modify or add new strings in the user interface? (Read about how to create translation)

Programming style

• [x] Did you follow our style guides?
• [ ] Did you use Python type hinting in all functions that you added or edited? (type hints for function parameters and return values)

Have you updated the README or other relevant documentation?

• [ ] documents inside the doc directory.
• [ ] README.md.
• [ ] Aplus Manual.
• [ ] Other documentation (mention below which documentation).

Is it Done?

• [ ] Reviewer has finished the code review
• [ ] After the review, the developer has made changes accordingly
• [ ] Customer/Teacher has accepted the implementation of the feature

Clean up your git commit history before submitting the pull request!