Code Viewer

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.

The Code Viewer is displayed after navigating to an individual submission. These can be found via the ‘Assignments’ menu and selecting the assignment to review.

Code Viewer for Teachers

The basic components of the Code Viewer are the Code Viewer itself and the file browser, which displays all the files handed in by the student.


Supported archives handed in are automatically extracted by CodeGrade.

The Code Viewer displays the selected code with correct highlighting, optional whitespace characters and line numbering. It furthermore supports PDF and image files. Optional feedback generated by linters is indicated by red line numbers, 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.

Files indicated with an asterisk have a teacher revision (optionally created with the filesystem). If available, the tabs above the hierarchical file view can be used to toggle between the student revision, teacher revision and the diff mode.

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

Inline feedback

Oftentimes, feedback for specific lines or blocks of code is wanted to make specific errors clear to students. CodeGrade enables this with the addition of line feedback.

Feedback on a specific line can be given by clicking on this line of code in the Code Viewer. Feedback can be written in the appeared dialog and saved with the button. Clicking on previously placed line for line feedback displays this same dialog and clicking the button will remove the comment.


It is not unusual that identical line feedback comments apply to multiple cases or students. Snippets can be used to efficiently but thoroughly cover all these reoccurring comments. Snippets are named saved comments that can be quickly added in the reviewing process.


Personal () snippets are saved to your CodeGrade account and can be used on any assignment in any course you grade. Course () snippets are set up for a specific course and are shared by all graders in that course.

New personal snippets can be added through the profile page and via the button in the line of line feedback dialog. The latter makes it possible to save existing line for line feedback comments. After clicking this button the snippet can be named and saved for future use. To use your saved snippet, simply type in the given name and press the Tab keyboard key to autocomplete it to the saved comment.

New course snippets can be added by the teacher of a course on the course management page.


It is in most cases recommended to use a short keyword for the snippet.

Overview mode

The overview mode can be enabled with or is automatically presented after the assignment is set to the ‘done’ state. As its name suggests, this mode provides an overview of the submission, given line feedback and changes made in the teacher revision. The line feedback and changes made in the teacher revision are sorted per file and are presented with a block of code around the feedback or change.


If a rubric is available for the assignment it can be found under the button. The matching rubric items can be selected per category in the rubric. Selecting other rubric items will automatically update the grade, this is linear to the points of the rubric.


Alterations in the rubric have to be manually saved with the ‘submit’ button (unless the incremental_rubric_submission config setting is enabled).

General feedback and grade

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


The grade generated with the rubric can be overwritten.

Additional general feedback can be given with the menu found under the button.

Grade History

A detailed overview of the previous grades to the current submission can be found under the 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 revision of the rubric 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 button. The assignment can be downloaded as archive. An overview of all feedback, including line feedback, linter comments 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.


Although it is possible to manually download individual submissions, we recommend using the filesystem.

Deleting a submission

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


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

Code Viewer for Students

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

If the assignment is finished and graded, the overview page is initially displayed. This page provides an overview of all line feedback given, and all files changed or added by your teacher to make your program work. All feedback or changes are presented with a block of code around it to add context. To toggle the overview mode and go back to the file browser, use the button.

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 button, next to this final grade. Further general feedback can be displayed using the button. An overview of all feedback, including line feedback, linter comments and general grade and feedback can be download as plain text file under the button.

Settings Tab

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

  • Whitespace characters’ visibility.
  • Programming language and its corresponding highlighting (usually should be left default).
  • Font size of the text in the Code Viewer.
  • Theme to light or dark.


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