Code Viewer
Tip
CodeGrade has a Help Center, with better guides, more videos and updated documentation. The documentation and guides on this website are deprecated and will not be updated in the future. Please click here to go to this page on the Help Center!
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 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.
Note
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 and optionally Continuous Feedback output.
The Teacher Revision shows the teacher revision, if available.
The Peer Feedback tab gives an overview of all peer feedback given by this student.
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.
Files indicated with diff have a teacher revision (created with the
filesystem). 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. See Automatically generated output for instructions on generating output in an AutoTest.
Inline feedback
Oftentimes, feedback for specific lines or blocks of code is desired to make specific errors clear to students. CodeGrade enables this with inline 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 dialog that appears and saved with the “Save” button.
To edit a previously placed inline comment, click on the at the top of the comment. You can view a list of all edits you made by clicking the icon.
Delete a comment by clicking on at the top, or by clicking the “Delete” button while editing a comment. Click “Cancel” while editing to revert any changes you have made and stop editing the comment.
Student questions
Students can also comment on their own code in the same way. This can be useful if they have questions about the assignment or their code. Teachers or teaching assistants assigned to a submission will be notified when this happens, so that they can swiftly act on such questions.
Both students and teachers can reply to comments by clicking on the “Click to reply…” box, allowing the entire discussion to be held in one place.
Note
Students need the permission “Add inline comments to own submissions” to be able to place comments on their own submissions. By default, this permission is enabled for the student role.
Snippets
It is not unusual that identical inline 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.
Note
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 top right corner of the feedback editing dialog. The latter makes it possible to save existing inline 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 key on your keyboard to autocomplete it to the saved comment.
New course snippets can be added by the teacher of a course on the course management page.
Note
It is in most cases recommended to use a short keyword for the snippet.
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 specifially
search through the general feedback you can use the general: prefix.
inline: searches only through inline feedback.
Rubrics
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.
Warning
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.
Note
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.
Note
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 inline feedback, general grade and feedback can be download as plain text file.
Note
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 red button.
Warning
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 viewed using CodeGrade’s Code Viewer. The Code Viewer in essence provides an overview of your handed in files and the feedback gotten.
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 button, next to this final grade.
Settings
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.
Showing or hiding inline feedback.
Amount of context lines.
Theme to light or dark.
Note
The font and theme settings are saved site-wide and can also be set on the Profile page.