Assignment Grading UX

Special thanks to Greg Faller, Jikke Adema - Centre for Educational ICT (CEdICT), Flinders University for input into these requirements.

1. Responsive design

The proposed Student Grading Screen has three separate elements: a header at the top, an annotation form on the left of the screen and a marking form on the right.

The marking form in the right hand column includes the student submission information, online text submission, the rubric/marking guide/checklist and general feedback options. These areas are fully specified in sections 3 - 5.

Design should allow for a marker to be able to use this form on different devices; desktop, desktop with wide screen, laptop, tablet, mobile phone.

2. Layout

The proposed design is a significant departure from the standard, 2 or 3 column page layout, blocks for navigation / administration. The design aims to remove all extraneous information and ensure all screen real estate is focused on marking. A similar approach has been used in the recent grader report enhancement pages, with similar aims to maximise real estate. Therefore, some key design considerations are:

• Removing all blocks / headers from page
• Ensuring all regions can be resized based on the markers needs (e.g. expand grade section to make entering data into a rubric more manageable)
• All navigation / action buttons are always visible to the marker

2.0 Summary of the HTML structure (If you are a themer, read this bit!)

To hide everything other than the grading interface, this page uses the 'embedded' layout from your theme. This is more usually used for iframes.

The various areas of the page are all divs inside the <div role="main"> that comes from core_renderer::main_content()

<div role="main">
    <span id="user-notifications"></span>
    <span id="maincontent"></span>
    <div data-region="grading-navigation-panel" data-first-userid="48" data-courseid="56" data-showuseridentity="email"> ... </div>
    <div data-region="review-panel"> ... </div>
    <div data-region="grade-panel"> ... </div>
    <div data-region="grade-actions-panel"> ... </div>
    <div data-region="overlay" class="moodle-has-zindex"><h3>Saving changes... <img ... title=" Loading..." src="..."></h3></div>
</div>

The first three of those divs are positioned using postition: absolute;. Note that they have fixed heights, so if, in your theme, the things they contain come out with a very different height, you might need to override the heights set in the base theme.

The 4th div, grade-actions-panel, sticks to the bottom of the screen using position: fixed;.

Troubleshooting

• If the whole page layout seems broken, then check the <div role="main">, and all the other parent divs out to body. If any of those are given position: relative; or position: absolute;, then the whole page layout seems to explode, so make sure you avoid that.

2.1 Flexible layout

A marker should be able to change the width of the two columns (marking form / annotation form) depending on the intended use. For example if the marker wants more room to annotate the assignment, the divider between the columns can be moved to the right. If a marker does not need to see the submitted assignment, or if there is no file submission, the divider between the columns can be moved completely to the left. If possible, this customised placement of the annotation / marking form should be stored as a user preference so that the marker does not need to resize the columns to the desired position each time the Student Grading Form is loaded.

This flexibility should be extended to the sections within the marking form (student submission, grading, feedback and workflow) to enable the size of each section to be customised by the marker, by moving a divider up and down.

If the annotation is not able to be fully displayed, a horizontal scrollbar should appear to allow the marker to see the entire submission by scrolling.

2.2 Configurable layout

If there is no file submission, or if the file is not in a format that can be viewed in the annotation region, the form automatically opens with the right hand column using the entire screen width.

3. Header

The header is always visible and shows information about the topic, the assignment and the current student.

3.1 Layout of header information

The Header element should contain the following information. Items marked with a ‘*’ are new and do not already exist in the Student Grading Form. All other items are existing items (in core):

1. Previous / next * navigation icons correspond to the view from the assignment submission table (copy functionality of current Previous / Next buttons on the Student Grading Form)

2. Email * - icon with mailto:[student email address] to open email from student grading form

3. Student name - hyperlink to student profile

4. Extra user fields * - using core get_extra_user_fields.

5. Student # of # - information on where the marker is up to in their list of students to mark (using existing functionality)

6. Edit icon * - icon edit assignment from student grading form

7. Assignment name - hyperlink to return to assignment grading summary

8. Due date - assignment due date (or not included if due date not enabled)

9. Course shortname - hyperlink back to course homepage

10. View gradebook - hyperlink to course gradebook

11. Extra assignment information * - this information should either be collapsed by default, or hidden in a ‘tooltip’ / rollover. This information is secondary and would not be needed by the majority of markers. The solution must be available on all devices and not exclusively available to mouse / keyboard actions (i.e. this must be available to mobile users). This information should include:

• Due date (if enabled);
• Assignment cut-off date (if enabled); and
• Time remaining.

3.2 Student list

Specification 3.1, item 3. displays the current student being graded with a hyperlink to their profile. This item proposes to display a combo box of all of the students being graded separated into sections (based on the marker workflow statuses) and displaying the current student when not expanded. The list should correspond to the order students are displayed when using the ‘Next’ / ‘Previous’ action buttons:

If the assignment is using Marking workflow, the students in the list should be separated by marking workflow status.

When a new student is selected, Moodle should prompt the user of any unsaved changes and allow the user to prevent the page from progressing.

4. Marking form

The marking form is the right hand column of the student grading form. It consists of five sections, described below.

4.1. Student submission information

The first section in the marking form, ‘Submission’, shows the available student submission information. This is all current in core:

• Submission status: includes the students current submission status (No submission / Draft / Submitted) and period of lateness (if relevant) [submitted x days and x minutes late]
• Extension date: date of students extension (only displayed where relevant)
• Last modified: the last time and date the submission was modified
• Submission plugins: if enabled, run through each submission plugin and display submission as per current progress. Online text submissions should be collapsed by default
• Plagiarism: Results of plagiarism detection software (only displayed if this is used for

this assignment)

• Attempt number: If reattempts are enabled, list current attempt number
• More information housed in an expanding area (which remains open or closed for next student) including information:
  • Grading status
  • Time remaining
  • Editing status

4.2. Grading information

The second section in the marking form is the Grading information and contains the current grading method - point (including advanced grading methods) or scale. This functionality does not change from the current Student Grade Form.

The existing Student Grade Form has a current grade in gradebook entry. This should be incorporated into the grade entry as follows:

• If the grade is set to point or scale, the grade entry should display input box (point) / dropdown (scale) for a marker to enter a grade into, the maximum point value and then followed by static text displaying the current grade in the gradebook (if available) (using existing functionality):

• If the grade is locked or overridden in the gradebook, the grade entry should display the current point value / scale in the gradebook and inform the marker the grade has been locked or overridden:

• If the grade is set to an advanced grading method, the advanced grading form should be displayed. By default the grading form will occupy 1⁄3 of the screen, therefore it is important that a marker is able to expand a grading form to be able to easily mark using a rubric or marking guide. Therefore, the marker should be able to choose to ‘break out’ from the width of the marking guide column:

Expanded:

The grade section should disappear altogether when ‘None’ is selected as the grade.

4.3. General feedback options

The third section should contain any enabled feedback plugins (as per current functionality). This should also include the existing options to Notify users / Return feedback to all group members and reattempt options.

4.4. Workflows

The fourth section displays the marking workflow / allocation options (if enabled). This utilises existing functionality and would display when relevant:

• Marking workflow dropdown list
• Marking allocation dropdown list

4.5. Navigation

The action buttons section should appear and remain static in the bottom right hand section of the screen (when being viewed using the desktop layout). This contains the navigational buttons for the marker and it is important these buttons are easily accessible at all times. The Action Buttons consist of:

• Save button: saves the grade and feedback (where available)
• Cancel button: does not save grade and feedback changes (annotations are saved as draft), and returns the marker to the Assignment Submission Table.
• Previous and Next button: returns feedback/grade to the student and opens the previous or next student (as determined by get_grading_userid_list)
• A help icon with help string explaining what each action button does (help text to be provided)

5. Annotation form

The annotation form is the left hand column (occupying roughly 2⁄3 of the screen by default) and displays the EditPDF feedback tool.

5.1. Edit PDF

The left hand column should house the EditPDF tool. The functionality of EditPDF should remain, but should be embedded into the Annotation form rather than opening in a pop-up window.

The Annotation Toolbar should have the same options as the current Edit PDF option. Functionally, any feedback plugin should be able to display itself in a tab in this area of the page.

5.2. Notify users that EditPDF annotations have been saved

Moodle ref: Partly documented in MDL-46165

Using the old ‘assignfeedback_pdf’ plugin, markers had the option of saving their annotations as a draft before returning the annotated document to students. While this option does technically exist in the EditPDF tool, the process and messages delivered to the end user are not intuitive.

With EditPDF, a user is able to open the EditPDF window, annotate the document (annotations are saved synchronously) but when the EditPDF window is closed, an ‘Unsaved changes’ messages is displayed. This message is not technically correct. The only way to proceed without returning the annotations to the student is to press ‘Cancel’ in the student grading page. This process is confusing for marking staff and often causes anxiety at the thought of their ‘unsaved changes’ being lost.

This specification proposes a notification to users that all annotations have been saved in the EditPDF window. An auto-save feature was recently added to the Atto text editor which introduces a notification to the user that a draft of their work has been saved.

We’d like to introduce a similar notification (modifying the text to say ‘Draft annotations saved’) which appears on the bottom left of the EditPDF window. This notification would display periodically to inform markers their annotations have been saved.

6. Generic activity grading API

It would be desirable to have a generic grading API that all activities can use to display this new interface, with the area defined in section 5 provided by the activity module, and all other interface elements consistent.