Introduction

The LMS Canvas by Instructure comes with a decent set of styled elements to start with, but diving into the HTML editor is where you can really modify content, giving it a specific look and feel. Recently I have found that I am going to these customized elements more often to help achieve learning outcomes and provide a different look and feel for accessible course pages.

It is not limitless, however, or even as open as regular web development would be. Canvas has an HTML Editor Allowlist for elements, styles and classes (though some absent from this list will work if you give it a go!). Many of these are activated by using in-line class or style, but other attributes are also available.

Without further ado, here are three of the more popular elements I have been drawn to when creating courses over the past few terms.

Accessible Rich Internet Applications (ARIA)

Defined as

a set of attributes that define ways to make web content and web applications more accessible to people with disabilities
Source

These attributes are some of the most popular because they help with accessibility (particularly, screen readers) on the course site. Where native HTML5 elements are not available, these ARIA attributes help to explain what a particular piece of content does and how a learner should interact with it. By using these, we help to make courses open to a wider set of learners.

See the Canvas HTML Editor Allowlist for a full list of supported ARIA attributes.

Example 1: Element Togglers

You want to include an element on your course site that expands to reveal more content. You will need to make a screen reader aware that the content is there, and what it does. Using the following should get you off to a good start:

<span class="element_toggler" role="button" aria-controls="something" 
aria-label="longer description of the element" aria-expanded="false">
Click here to see the explanation</span>

<div id="something" style="display: none;">
The explanation.
</div>
aria-controls="something"
combines with id="something" later on in the code. The value must match the id value for it to work correctly. This is used to interact with the element.
aria-label="longer description of the element"
used to describe the functionality of the element if it is not explained prior to the interaction.
aria-expanded="false
used to tell the screen reader the button is initially closed.

Example 2: Descriptions

You have a particularly visual element on the page, and you want to write a larger piece of text for a screen reader to explain this. You can use aria-describedby and then link it to the id of an element (in the <span> below):

<p><img src="close_up.jpg" aria-describedby="close_up">
<br>
<span id="close_up">A close-up view of the rock target named "Máaz" from the SuperCam 
instrument on NASA's Perseverance Mars rover.</span> 
Analysis of SuperCam data shows that Máaz has a basaltic composition. 
It is either an igneous rock or consists of fine grains of igneous material 
that were cemented together in a watery environment.<br>
Full image and caption from 
<a href="https://www.jpl.nasa.gov/images/supercam-close-up-of-maaz">
NASA Jet Propulsion Labratory.</a> NASA/JPL-Caltech/LANL/CNES/CNRS
</p>

Device specific content

Next up, is hidden content. So you added the element_toggler above, but your learners with the Canvas Mobile App let you know they cannot click it!

Some of the projects I work on with these elements require an entirely different way of accessing the content on a mobile device.

A potential fix

Create different versions of the content by hiding each one depending on the device.

To do this, you will need to divide the content using two containers. Using the same element_toggler code from above, we can easily add a separate, but hidden part underneath for Canvas app users.

<span class="element_toggler" role="button" aria-controls="something" 
aria-label="longer description of the element" aria-expanded="false">
View the explanation</span>

<div id="something" style="display: none;">
The explanation.
</div>

<div class="hidden-desktop hidden-tablet hidden-phone">
The explanation.
</div>

The addition of the class="hidden-desktop hidden-tablet hidden-phone" attributes will hide this container for most users. As it is sitting outside of the element toggler, however, mobile app users do not need to click the element toggler to see the explanation! This provides a more accessible option for users of those devices.

Note: if you have access to the stylesheet for your institution, it would be more beneficial to add these changes there than on a per-page basis.

Anchoring to part of a page

If you have ever seen text content that says something similar to this…

As we discussed before…

As I mentioned previously…

Back in Module 3, we talked about…

…then you need to use this simple feature of the anchor element!

I use this a lot on course content that requires students to refer to previous material. Everyone will have heard of a hyperlink using the <a> tag, but you can also use this anchor to link to a certain part of the page. I regularly use it to send learners to particular headings or content that they would find relevant for assignments. If you set up your course from the start with this in mind, it can be a fast way to group revision material from certain parts of a page, or create more accessible navigation menus.

Give an element an id, like this:

<h3 id="section_2">Section 2</h3>

Then, when you want to send a learner back to that part of the page, just reference it by adding the id to the end of the page link with a `#`. For example:

<a href="https://yoursite/page#section_2">Section 2</a>

This will take the learner directly to the heading with the id of ‘section_2’, which you set up before.

You can even do this within the same page to jump to that part of the page. Just link it like this without the rest of the URL.

<a href="#section_2”>Section 2</a>

Conclusion

These are a sample of the elements, classes, and styles I have used to enhance content over the last few terms. With each, accessibility has been a must, which requires a bit of reflection on how learners would interact with the content. There are a lot more available, and you have a list in the Canvas HTML Editor Allowlist to start experimenting. By thinking of accessibility from the early stages of course design, more users can appreciate these page elements and content.

References

1. The Canvas Style Allowlist: [http://bit.ly/cnvs-allowlist]
2. “ARIA” from MDN Web Docs/Mozilla [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA]

Man Reading Touchscreen
Man Reading Touchscreen” | Image by Karolina Grabowska from Pixabay

Background

Five years ago, I wrote a small entry in the ORTESOL Newsletter about the then state of “adaptive software capable of teaching, testing, giving feedback, and most importantly, adjusting to student needs” (Chambers, 2015: 13). I mentioned a set of technologies colloquially referred to as the “Digital Aristotle”, or ‘Project Halo’ (Friedland et al., 2004), and the update to this six years later (Gunning et al., 2010). The Digital Aristotle was described as ‘an application that will encompass much of the world’s scientific knowledge and be capable of applying sophisticated problem-solving to answer novel questions’ (Friedland et al., 2004).

At the time, I was writing about a more grandiose piece of software that might one day replace the repetitive tasks of an ESOL classroom. The idea, or perhaps the concern about this technology for existing teachers was where they would fit in once a set of algorithms could replicate much of the day to day learning of a language course.

Five years on, I turn to how learning designers might be able to incorporate AI into course design.

Potential

First, a question: is there currently a program capable of teaching a course and adapting to student needs like an instructor? The answer is still no. Certain technology has, however, progressed to the point that portions of an online course can be enhanced by AI.

Adaptive Learning

Quite possibly the most exciting development in artificial intelligence for learning is that of adaptive learning. This concept has been in the works for a while with certain platforms utilizing algorithms to produce content that adapt to specific learner needs.

Instructure’s Canvas for instance, allows Instructional Designers to set up ‘Differentiated Assignments’ (Canvas Doc Team, How do I view differentiated assignments with different due dates in a course?, 2017) and ‘MasteryPaths’ (Canvas Doc Team, How do I use MasteryPaths in course modules?, 2020) which ‘allows targeted learning activities to be assigned to different users and sections’ (‘MasteryPaths’). Currently this is a manual process with course designers creating every assessment beforehand. The best students might not see the additional activities. It is not ‘intelligent’ in the way that course content is adapted specifically for a learner’s needs and on the fly. To do this requires large amounts of data and most importantly, AI training to see patterns, strengths, and weaknesses for a particular learner.

This is why Duolingo records progress at every step and offers learners a review of concepts the learner struggles with in previous activities. Platforms that provide an automated review often use large question banks and flag questions that learners initially, or continuously incorrectly answer. An intelligent AI could create novel questions based on learner goals, data from prior students, and information about the subject matter. An example of this is Google or Amazon’s ability to predict and offer products or suggestions based on the vast amount of information provided to them every single day. Certain training providers are currently working with application developers to produce tools capable of this on-the-fly feedback and adaptation.

Discussions

At the OLC Innovate 2020 conference, Kasey Gandham from Ed Tech company Paperback and Kim A. Scalzo, Executive Director of Open SUN, demonstrated how Paperback’s AI is being used with online discussions to help students write higher quality posts. As students write their discussion posts, the AI program checks for “close-ended questions, plagiarism, insufficient length, content about class logistics, profanity and abuse’ (Gandham & Scalzo, 2020). After this, if required, the post is moderated and the learner receives email feedback saying why and how to revise their post. The AI is also capable of suggesting posts to feature as the best of the week by analyzing, among other things, sentence depth and ‘curiosity score’.

More than a Quiz

The role and importance of ‘big data’ in online learning cannot be understated. Technology already exists that records the time learners interact with learning materials. It knows where they are clicking/tapping on the screen and how long activities hold learner attention. Using this data, AI could suggest, or even craft assessments that are adapted specifically to a single learner’s usage habits. Traditional quizzes which assess information retention could become only part of the larger formative assessment of the entire course, at every point in the course, without the learner even realizing any of this is happening.

Future

AI-enhanced design has the ability to transform Instructional Designers like never before. It could help us to modify our own design practices based on how learners are responding to course content. Through learner feedback, it could demonstrate which activities are most appealing and conducive to personalized learning goals. Big data’s role in recording learner interactions with content can provide insights into preferred learning styles and methods of instruction. Instructional Designers will have to continue adapting with the technology just as we have done in our everyday lives.

References

Canvas Doc Team. (2017, April 19). How do I view differentiated assignments with different due dates in a course? Retrieved July 02, 2020, from https://community.canvaslms.com/docs/DOC-10036-how-do-i-view-differentiated-assignments-with-different-due-dates-in-a-course

Canvas Doc Team. (2020, April 6). How do I use MasteryPaths in course modules? Retrieved July 02, 2020, from https://community.canvaslms.com/docs/DOC-26231-how-do-i-use-masterypaths-in-course-modules 

Chambers, P. (2015, Spring). “Digital Aristotle” and ESL: What does it mean for us?. ORTESOL Quarterly Newsletter, 38(1), P.12-13.

Friedland, N.S. et al. (2004). ‘Project Halo: Towards a Digital Aristotle’, American Association for Artificial Intelligence, 25(4), pp. 29-47. DOI: http:// dx.doi.org/10.1609/aimag.v25i4.1783.

Gandham, K. and Scalzo, K., A. (2020, June). USING AI IN DISCUSSION TO SCALE ACCESS TO QUALITY ONLINE EDUCATION. OLC Innovate 2020, Online Presentation. https://onlinelearningconsortium.org/olc-innovate-2020-session-page/?session=8486 

Gunning, D. et al. (2010). ‘Project Halo Update – Progress Toward Digital Aristotle’, Association for the Advancement of Artificial Intelligence, 31(3), pp. 33-58. DOI: http:// dx.doi.org/10.1609/aimag.v31i3.2302.