Update color scheme in grade range #507
Description
Type of Request
Fast Track Change (small, low-risk improvements)
Feature Description
Update color scheme in grade range
Summary
This initiative focuses on improving the usability of the studio when setting grade ranges.
Currently, when configuring the grade scheme of a course, grade range segments are colored differently to ease usability when scaling up and down. But this only applies with the default number of grade ranges I.e. five grade ranges A, B, C, D and F. When the edx-platform is configured to use more than five grade ranges, segments start to have a similar background, losing its original effect.
Current Behavior
Five colors are hard coded to fill a maximum of five grade ranges and exceeding five grade letters will result in visually borderless grade segments.
The default grade configuration is
DEFAULT_GRADE_DESIGNATIONS = ['A', 'B', 'C', 'D']
Resulting to the following UI
An example of a configuration with an extended grade segment could be
DEFAULT_GRADE_DESIGNATIONS = ['A+','A','A-', 'B+', 'B', 'B-', 'C', 'D']
Resulting to the following UI
Problem Statement
Configuring more than five grade letters cause adjacent segments to have similar background color resulting to the following problem
- Unable to separate segments visually
- Difficulty to find borders to expand/shring segments using the existing dragging feature
Proposed Solution
The proposed solution fills all segments with visually distinguishable colors. The overall aim is to enhance the user experience by making it easier for course authors to distinguish between the various grade levels they configure.
The following two approaches can be applied to achieve this:
- Without extending the existing five color options
loop over the existing five colors. Regardless of the number of configured grade letters, all segments will be colored. Colors will be repeated after five. - Dynamically generate colors ranging from Red - Green(Left to right)
Make the colors autogenerate and fill segments without limiting the number of segments. Demonstration of the
solution by Kshitij’s is accessible in this link .
Benefits
- Improved user experience
- Enhanced accessibility for colorblind individuals
Proposed change
The proposed changes will be implemented in Authoring mfe. Specifics of the proposed changes depend on the decision made to use on the alternatives provided at the proposed Solution Section.
If option 1 is used: - proposed changes
- Loop over existing colors when edx-platform is configured with more than five grade segments
Existing colors:
If option 2 is used: - Proposed changes
- Remove existing hardcoded colors and implement to autogenerate distinguishable colors
Scope
- The proposed solution results to changes in course grade setting UI ONLY
- There no expected backward compatibility issues
Associated Documentation
Documentation : https://docs.openedx.org/en/latest/educators/how-tos/grading/set_grade_range.html
Impact
Higher academic institutions such as universities usually have more than a five grade scale. As a case in Ethiopia, all universities (40 universities) have grade scales of 12 (A+,A,A-,B+,B,B-,C+,C,C-,D+,D and F). The proposed solution will improve usability of grade setting that have more than five grading scales.
Discussion
- We have identified several possible implementation approaches. However, we recognize that these may not be exhaustive. We therefore welcome feedback and suggestions from the community on additional or more effective ways to realize the solution.
- One of the key goals is to make the grade segments accessible to colorblind users. Since extending the color range from red to green (left to right) can introduce perceptual challenges, we particularly value community input on color‑safe alternatives and best practices.
Link to Product Proposal
Status
New
Proposed By
OpenCraft