Canvas Collection: Purpose, How, and Functionality

post_title='Canvas Collections: why, how and what'
layout="post"
published=true
id=18226
link="https://djon.es/blog/2022/07/03/orchestrating-entangled-relations-to-break-the-iron-triangle-examples-from-a-lms-migration"
category="casa"
img_base_url="https://djplaner.github.io/memex/share/blog/2022/"

Why?

Canvas Collections is an open source exploration into enhancing the Canvas Modules view to improve the learning and teaching experience. Canvas Collections' purpose is to reduce the time and knowledge required to develop and maintain a Canvas course site that has a visible design intent, information architecture, and unique visual identity. By this Canvas Collections aims to aid in the creation of course sites that improve student wayfinding, efficacy, and experience.

How

Canvas Collections leverages the inherent flexibility and generativity provided by Canvas's design and API and insights gained from existing practice both in the Canvas Community and at Griffith University (Jones, 2019). This is used to provide functionality long requested by the Canvas Community to address acknowledged limitations (visually unappealing and poor findability) with the Canvas Modules view. Canvas Collections is designed to meet Griffith's principles for the selection and deployment of educational technological solutions (see Table 1).

Table - Canvas Collections evaluated against Griffith principles for ed tech selection and deployment

Requirement	Canvas Collections
Scalability	Canvas Collections can be installed in two ways Institutionally; or, Using standard Canvas and institutional practice (e.g. Griffith course site template) installed via the Canvas theme editor. It has been tested with Griffith's dev Canvas server. Individually. As a userscript in an individual's web browser and only seen by them. Typically for exploration or creating a visual home page.
Failsafe	Canvas Collections modifies the standard Canvas Module interface. If Canvas Collections is unavailable, no change is made and the the standard Canvas Module view is shown. When used individually to create a visual home page Canvas Collections is used by teaching staff to generate HTML that is pasted into a Canvas page. After this, Canvas Collections is not used.
Designed for academic use	Canvas Collections is explicitly designed to be used by academic staff without requiring an educational designer. It is an adaptation and enhancement to the Card Interface, widely used with minimal support by hundreds of Griffith courses and at other institutions across the world.
Opt-in	Whether Canvas Collections is used institutionally or individually, the teaching team for a course must opt-in to use Canvas Collections and can, at any time, opt-out.

Design and implementation

Canvas Collections is written in Javascript and re-arranges the vanilla Canvas Modules view by adding support for three additional abstractions, these are:

1. Collections � a way to group modules aligned with specific design intent.
2. Representations � select from different visual representations and user experiences (e.g. Figure 7) for each collection.
3. Meta-data � associate additional contextual and learning design oriented meta-data with each module for inclusion in representations to support design intent.

Data storage

The additional metadata and configuration information managed by Canvas Collections is stored as a JSON data structure in either a specially named page or file within the Canvas course. This means that the Canvas Collection data uses exactly the same methods and services as every other Canvas resource (e.g. learning content).

For Canvas Collections to work, the permissions on the page/file must be set to: teaching staff can read/write, and students can read.

Canvas Collections: Examples of Usage

The following examples of usage of Canvas Collections are drawn from a current Griffith University T2 Pilot course: 5254LAW, Canadian Administrative Law.

NOTE: As Canvas Collections is a work-in-progress what follows is illustrative of current, limited functionality. There is significant scope and plans for re-design and expansion. A key success factor of the pre-cursor Card Interface was the ability to evolve functionality in response to need.

After explaining the spectrum usage scenarios for Canvas Collections, the rest of this document uses screenshots to demonstrate the Canvas Collections experience for staff and students.

Possible Canvas Collections Usage Scenarios

Canvas Collections can currently be used in three different ways. Table 2 summarises these three methods and maps out the subsequent usage scenarios for staff and students. Regardless of method, students only experience Canvas Collection if staff configure it for the Canvas course.

Table - Mapping Canvas Collection Usage Scenarios

Method	Description	Staff	Students
Institutional	Institution installs Canvas Collections as part of their Canvas instance	Can choose to turn on Canvas Collections (Figure 2) and then configure Canvas Collections for the course. Then Canvas Collections will modify the Modules view.	If configured for course by teaching staff, Canvas Collections will modify the Modules view for all students (e.g. Figure 7)
Individual	Individual user installs Canvas Collections as a userscript in a particular web browser they use.	Opt-in by installing userscript and then choose to turn Canvas Collections on. Then configure Canvas Collections (e.g. Figure 4 and Figure 5) for the course. The userscript will then modify the Modules view for any user who has installed it.	If Canvas Collections configured for course by teaching staff, students who install the userscript will see a modified Modules view.
Offline (Claytons)	Using either institutional or individual methods, teacher uses Canvas Collection to generate HTML (e.g. Figure 5) which is then pasted into a Canvas page (e.g. Figure 6, Figure 10, Figure 11).	As per either institutional or individual methods teacher opts-in and then chooses if and how to paste HTML into the Canvas page.	If teaching staff paste Canvas Collections generated HTML into a Canvas page, all students will see it (Canvas Collections is not involved)

Teacher Experience with Canvas Collections

Whether using the institutional or individual method the teacher experience with Canvas Collections is the same.

Canvas Collections is off by default

Canvas Collections is initially turned off for all course sites. When turned off, Canvas Collections will make one small change to the teacher view of the Modules page. It adds an off/on switch, circled in red in Figure 1. This "switch" also includes links to a Tier 0 resource on Canvas Collections.

When turned off, Canvas Collections makes no change to the student view.

Figure 1 - Canvas Collections - turned off

Turn Canvas Collections on

Clicking on the switch circled in red in Figure 1 turns Canvas Collections on and modifies the Modules view. These changes are based on the existing Canvas Collections configuration. At a minimum, the teacher view will be modified to add the Canvas Collections configuration interface. If there is an existing Canvas Collections configuration, the teacher view will include visible evidence of Canvas Collections.

The configuration interface viewed by teaching staff consists of three parts, in summary (see below for more detail):

1. A course level configuration interface.
   The Canvas on switch (as shown in Figure 1) provides access to the course level configuration interface which can be expanded (Figure 3).
2. The actual Canvas Collections interface.
   This mirrors the Canvas Collections interface viewed by students (Figure 2).
3. A per module configuration interface.
   Each Canvas module has a configuration interface to modify how it is represented (Figure 4).

Figure 2 shows the result of turning on Canvas Collections in a configured course. The configuration interfaces are explained in more detail in following sections.

The "actual" Canvas Collections interface includes the collections navigation bar allowing navigation between different collections, and the current collection's representation. Different representations can be chosen for different collections, and the representation changed at any time.

Figure 2 - Canvas Collections - turned on (existing configuration)

Configure Canvas Collections for the course

There are configuration choices � the number and naming of collections; how each collection is represented; the order of collections etc. � that apply at the entire course level. These are configured via the expanded Canvas Collections on/off button. Figure 3 shows the expanded version of the on/off button, including the current configuration interface.

Figure 3 - Course level configuration of Canvas Collection

Configure Canvas Collections for an individual module

Scrolling further down the Modules page (underneath the current collection's representation) will show (in Teacher view) a list of the modules that belong to the current collection. In Teacher view, Canvas Collections will add a configuration interface for each module. Figure 4 illustrates this configuration interface (circled in red) in both expanded and collapsed modes. This interface is used to modify the module specific Canvas Collections metadata for each module. More detail on per module configuration options below.

Figure 4 - Module specific Collections' configuration

Create an "offline" (Claytons) Canvas Collection

Common advice within the broader Canvas Community is that creating a visual home page is a good way to improve the usability of a Canvas course site. Such advice is typically accompanied by advice on how to manually create such a page. Canvas Collections is designed to help automate this process. However, if Canvas Collections is not installed institutionally students cannot (easily) benefit from Canvas Collections. The "offline" (aka Claytons) use of Canvas Collections is intended to help this situation by enabling teaching staff to:

1. Copy HTML for a single collection into their browser's clipboard (Figure 5).
2. Paste that HTML into a Canvas page that can be viewed without Canvas Collections installed (Figure 6).

Figure - Using "Collections 2 Clipboard" button to copy collection HTML to the clipboard

The "offline" version of the Canvas Collection HTML (Figure 6) is stand-alone. It does not rely on Canvas Collections at all. It emulates much of the same functionality, but in a constrained way due to the limitations of the Canvas Rich Content Editor (RCE)

Figure - An "offline" version of the Course Content collection as the course landing page

Student Experience with Canvas Collections

Students only experience the visual representations generated by Canvas Collections (online or offline).

Student experience with Canvas Collections: online method

The Canvas Collections online method modifies the Modules view for the course. The modifications provide a way for students to navigate between collections of modules and access specific modules. Figure 7 shows the online Canvas Collections view for the course 5254LAW. The annotations in Figure 7 point out the main components of the Canvas Collections student experience. Table 3 describes each of these components. Figure 8 and Figure 9 show the student view for the Assessment and Teaching Staff collections visible in Figure 7.

Figure - Canvas Modules student view modified by Canvas Collections (online): Annotated

Table - Description of Canvas Collections student experience components

Component		Description
Collections Navigation Bar	A list of all collections. A module belongs to one collection. Clicking on different collections shows the representation of that collection (Cards in this case) and a list of all modules within that collection.
Current collection	The currently visible collection is highlighted in the navigation bar.
Module Date	Optionally, each module can have a date or date range associated with it (e.g. to indicate due date for an assignment, a starting date for a module etc). Dates can be specific or they can be specified using Griffith study period weeks. e.g. Figure 7 includes cards with dates specified as "Week 1". This is automatically converted to July 18 based on the University calendar and the Griffith course code within the Canvas course id.
Module Image	Each module can have an associated image specified by a URL
Module Name	The title of the card matches the name of the Canvas Module
Module label and number	Optionally, a module can have a label identifying the "type" of module (common examples include workshop, module, assignment) and a number.
Module Description	Each module can have an additional collection of HTML typically used to summarise the purpose and engage student activity.
Coming Soon	Optionally, unpublished modules (normally not visible to students) can be designated as coming soon. Allowing the students to see the overall planned structure, but not access the content.
Completion Progress	A visual summary of the student's progress against any requirements that have been configured for the module.

Figure - Assessment collection representation

Figure - Teaching staff collection representation

Student experience with Canvas Collections: offline method

The Canvas Collections offline method provides the ability for students to view individual Canvas pages that contain the representation of a single collection. These pages provide access to the corresponding Canvas modules. The Canvas Collections offline method semi-automates the widely recommended manual process of creating a visual home page.

The offline method is currently being used in T2 pilot courses as part of the course site template. Figure 6 shows a landing page integrated with the course site template for 5254LAW. This landing page contains a representation of the Course Content collection shown in Figure 7. Similarly, Figure 10 and Figure 11 show offline versions of the Assessment (Figure 8) and Teaching Staff (Figure 9) collections.

Figure - Offline representation of the 5254LAW assessment collection

Figure - Offline representation of the 5254LAW Teaching Staff collection

References

Jones, D. (2019). Exploring knowledge reuse in design for digital learning: Tweaks, H5P, CASA and constructive templates. In Y. W. Chew, K. M. Chan, & A. Alphonso (Eds.), Personalised Learning. Diverse Goals. One Heart. ASCILITE 2019 (pp. 139�148). https://djon.es/blog/2019/08/08/exploring-knowledge-reuse-in-design-for-digital-learning-tweaks-h5p-constructive-templates-and-casa/