Code Viewer

The Code Viewer is the heart of CodeGrade, bringing together all tools to review, grade and display student code and feedback on it.

The CodeGrade Code Viewer is the online grading and reviewing environment especially designed for programming assignments. It provides teachers with numerous tools to make reviewing and grading more convenient and efficient and displays feedback and grade in a more intuitive way to the students. Additionally it provides students an intuitive environment to receive feedback in.

Code Viewer for Teachers

The Code Viewer consists of up to five tabs: Code, Feedback Overview, and optionally AutoTest, Teacher Revision and Peer Feedback.

The Code tab shows an overview of all handed in code and other files. It is possible to browse through all handed in files and folders.

Supported archives are automatically extracted by CodeGrade after handing in.

The Code Viewer displays the selected file with correct highlighting, optional whitespace characters and line numbering. Furthermore, it can render Jupyter Notebooks (version 3 and higher), markdown and HTML files, and display PDF and image files. Optional feedback generated by "Code Quality" steps in the AutoTest of this assignment is indicated by colored line numbers and backgrounds, the feedback generated by the linters can be displayed by a mouse over. The Code Viewer displays the selected file from the file browser, which shows an hierarchical overview of all submitted files.

The Feedback Overview tab provides a clear overview of all given feedback on the submission, this includes inline comments and general feedback.

The AutoTest tab shows an overview of the AutoTest results, if available.

The Teacher Revision shows the teacher revision, changes made or files added by the teachers via the FileSystem, if available.

The Peer Feedback tab gives an overview of all peer feedback given by this student, if Peer Feedback is turned on.

Additional features in the Code Viewer aid the grading and reviewing process. These features are described below.

File browser

The file browser shows a hierarchical overview of all submitted files. Optionally it can also show suggested changes by the teacher, or generated files from AutoTest.

Files indicated with diff have a teacher revision. If available, the teacher's revision can be viewed by expanding the Teacher revision tree. Files that were not changed by the teacher have a slightly faded color, to make it easier to spot which files have changed.

When a teacher revision is available, there is also a Teacher diff category in the file browser, which can be used to view a line-by-line diff of the files changed by the teacher. You can go to the diff viewer by clicking the diff label next to changed files.

The file browser may also have a category for AutoTest generated files when the AutoTest was configured to generate output for review.

Inline comments

Most feedback in CodeGrade is given directly in lines of code, this feedback is visible within the code in the Code Viewer.

Course Feedback

While giving feedback it can be useful to see the feedback a student got for other assignments in the course. An overview of all feedback given in the course can be found in the Feedback tab on the right side of the page.

The search field at the top can be used to filter on feedback. It searches through both authors of a comment, and the content of a comment. If you want a term in your query to match only on the author, prefix it with author:. To match only the content of a comment, prefix it with comment:. For example, author:Tim comment:include will only match comments written by Tim that contain the word include.

The filter searches through both general and inline feedback. To specifically search through the general feedback you can use the general: prefix. inline: searches only through inline feedback.

Only assignments and feedback from the current course are found in the Course Feedback tab.

Rubrics

If a rubric is available for the assignment it can be found under the Rubric button on the bottom right corner. As a teacher, rubric items can be selected or scores can be given for categories that are not automatic. Selecting other rubric items will automatically update the grade, this is linear to the points of the rubric.

Make sure to save your rubric to submit the grade generated by it and not lose your changes.

General feedback and grade

A final grade can be given using the input field underneath the Code Viewer.

Final grades generated by the rubric can be manually overridden by the teacher.

Additional general feedback, applying to the submission as a whole, can be given by clicking the General Feedback button in the top right corner.

Grade History

A detailed overview of the previous grades to the current submission can be found under the Grade History button. This overviews specifies the grade, grader, date and time and whether this grade was automatically generated from the rubric. Students can normally not see the grade history overview.

Each individual update of the rubric score will add a new entry in the grade history overview.

Download feedback or assignment

It is sometimes necessary to manually download the submission or its feedback. These can both be separately downloaded using the Download button. The assignment can be downloaded as archive. An overview of all feedback, including inline feedback and general grade and feedback can be download as plain text file.

Make sure pop-ups from CodeGrade are allowed in your browser if downloading fails.

Deleting a submission

CodeGrade offers the functionality to remove submissions, this can be done using the Delete button.

Deleting a submission will result in effectively removing all information about the submission (including plagiarism and AutoTest results) and is irreversible!

Code Viewer for Students

Handed in programming assignments can be viewed using CodeGrade's Code Viewer. The Code Viewer in essence provides an overview of your handed in files and the feedback gotten on them.

Up to five tabs are available in the Code Viewer for students: Code, Feedback overview, and optionally AutoTest, Teacher Revision and Peer Feedback.

The final grade is displayed on the bottom of the screen, if available. If a rubric is available for the assignment it can be found under the Rubric button, next to this final grade.

Asking a question

Students can also comment on their own code in the same way to ask a question to the teacher.

By default, students can ask questions on their own code. Turn this off by disabling the Add inline comments to own submissions permission for students.

Preferences

The Code Viewer settings can be found under the Preferences button. And allows for configuring:

  • Whitespace characters' visibility.

  • Programming language syntax highlighting (usually

    should be left default).

  • Font size of the text in the Code Viewer.

  • Showing or hiding inline feedback.

  • Amount of context lines.

  • Theme to light or dark.

The font and theme settings are saved site-wide and can also be set on the Profile page.