GriffithCards
The following animated image shows the same vanilla Canvas course with the same collections as the previous example. However, this time the GriffithCards representation is being used. This representation generates a card for each object (aka Module) that belongs to the collection. It mirrors the widely used card UI design pattern.
Everything else (e.g. the navigation bar, include pages, and the modules belonging to the collection) is the same
The card component can help transform the vanilla Canvas module into a design and context specific object by displaying additional attributes, including (but not limited to): a textual description; a label and sequence number; associated dates; and, a card image.
Progress ring
Canvas module requirements are used to track what module items a student has completed. To complete the module students must complete all the requirements.
GriffithCards can add a progress ring to each card representing a module. The progress ring provides a visual representation of the percentage of a module's requirements a student has completed. Fro example, the following animated image demonstrates
- the visual design of the GriffithCards progress ring.
- the presence of a tooltip that allows students to hover over the progress ring to see a summary of # of requirements completed and the total number to be completed.
- how the progress ring is updated when a student completes a requirement.
Use student view to see the progress ring
Teacher or designer views will not show the progress ring, unless student view is used.