Month: August 2020

It’s widely accepted that the most important part of learning and teaching is what the student does (Biggs, 2012). The spaces, tools and tasks in and through which students “do stuff” (i.e. learning, or not) are in some way designed by a teacher with subsequent learner adaptation (Goodyear, 2020).

Designing learning spaces, tools and tasks is not easy. Especially when digital technologies are involved. The low digital fluency of teachers is seen as a (for some the) significant challenge (Johnson et al, 2014). Hence the big focus on solutions such as requiring all teachers to have a formal teaching qualification. Formal “certification” programs such as the HEA. Or the focus on running workshops and producing online “how-to” support material. The focus on teacher knowledge tends to ignore the distributed and contextual nature of the knowledge required. It doesn’t just reside in the heads of the teachers but is distributed amongst the other agents (people, technologies, policies etc) in the institutional learning and teaching system (Jones et al, 2015).

When knowledge is distributed, it is also situated and highly contextual. As such, knowing the details of any learning and teaching model or theory has value still has to be translated into the design of learning activities within a specific learning and teaching context. The model’s suggestions needs to be adapted and customised to the specifics of the learning activity, including the specific discipline, the specific digital technologies, the specific institutional policies, the specific student cohort etc. This is hard and I don’t know of any institution that is helping meaningfully and sustainably make this problem easier in contextually and discipline specific ways.

This post will

1. Introduce a discipline specific learning activity.
2. Describe the learner and teacher experiences of engaging with current common implementations of that learning activity.
3. Illustrate how the learner and teacher experience is changed by a more discipline specific approach.
4. Explore some of the implications and next steps for this approach.

Watching films – a discipline-specific activity

A key activity for courses such as film analysis, history, direction etc. is watching films. Analysing existing films to see how certain theories and design principles have been leveraged and their impact. A necessary first step in such a learning activity is being able to source and watch the film. In an on-campus learning experience this is probably a face-to-face experience in a scheduled class. In a totally online learning experience this is commonly done via the course web site. Either way the teacher/institution typically organises access to the film and designs some activity around it.

This type of close analysis of a film typically only a part of a handful (or two) of courses at a university. If there’s any institutional support for this activity it is typically a small part of a broader process. e.g. legally (copyright) correct sourcing of films may be part of the library service. But typically, designing this learning activity draws more on the significant capabilities and expertise of the teacher. Not unlike most of the other activities specific to the other disciplines. Typically this appears to work in the face-to-face environment, but what happens when it goes online?

Watching films in an online course – the current solution

The following is a generic description summarising the practice I’ve observed at a couple of different institutions. I imagine it’s fairly typical. I’m sure there are much better examples of current practice. But my hypothesis is that those better examples were dependent upon an individual with a unique combination of knowledge and skills.

The learner experience

Somewhere on the course site the learner will discover that they need to watch a film (or two) this week. This may be via an announcement, a list of films in a course profile or course reading list, or some details in this week’s page on the course site. There will some details about the film (e.g. director, year of production etc.), perhaps a description of how to engage with the film, and there might be access to a digital version of the film.

Since many films are commercial, copyrighted artefacts. Providing digital access to the film is not straight forward. In some cases the institution may be able to provide access. In other cases the learners or teachers may have shared URLs enabling (probably legally dubious and short-lived) access. In other cases the student is left up to their own devices to gain access to the film. With the rise of streaming services this is significantly easier. However, the nature and diversity of the films used in such courses is such that no single streaming service will provide access. Increasing expense for learners. Also, not all such films will be available via streaming services.

Consequently, learners typically expend a fair bit of cognitive effort and time gaining access to films. A cognitive effort expense which may be seen as a part of the necessary and relevant learning for the course. But it may be a cognitive enegy expense that limits what the learner invests in the actual important learning activities involved in understanding and analysing the film. I have heard reports of learners in such courses being frustrated at having to expend this cognitive effort.

The teacher experience

The teacher of such a course faces four broad questions. Answering these questions is not sequential. My answer to question #1 may change depending on the answer to question #2. The four questions are:

1. Which films should the students engage with?
2. Can I provide access to those films?
3. How to point students to those films and what they need to do?
4. How well did those films/activities work and what do I need to change for next time?

Answering question #1 draws on the discipline knowledge of the teacher. All the other questions require knowledge that is not (solely) discipline knowledge.

Answering question #2 involves knowledge of copyright law and various institutional systems and processes. that the university’s library. Most provide a service that can legally gain digital access to films. Well, most films. Such a process is typically part of a broader process of providing resources for teaching (e.g. my current institution) which may feed into some sort of formal course reading list. I’ve yet to see such a formal course reading list that is useful for learning and teaching.

Answering question #3 requires pedagogical and technical knowledge to figure where, when and how to embed this information in a course site. It’s the teacher that needs this knowledge. They are provided with generic tools (announcements, discussion boards, and content editing), maybe the formal course reading list, and supported by generic technical and pedagogical advice about how to use the provided tools. None of this is specific to film watching.

Hence answers to question #3 are largely variable. See mention of learner frustration in the previous section. The most common solution I’ve seen is just a description of the films to watch such as the following simple example.

Answering question #4 requires knowledge of learner activity, learner outcomes, learner satisfaction with the experience of using the film watching activities. It also requires the knowledge and skills necessary to analyse, reflect, and re-design. All of this knowledge is rarely available in any way that could be considered systematic or deep. And a simple list like the above example doesn’t help.

Film Watching Options – a CASA solution

The following describes the Contextually Appropriate Scaffolding Assemblages (CASA) approach we’ve developed. Currently labelled – Film Watching Options. As the same suggestions this approach is specific to this learning activity. It aims to embed good answers to the four questions outlined above into a collection of technology and practices that make it easier for the teacher to design, use and maintain a better quality learning space.

This isn’t a perfect solution. The current solution provides some ok answers to the first three questions, but doesn’t really offer any insight on the fourth questions. There is work to do. But it’s looking better than existing solutions.

Learner perspective

With the Film Watching Options approach, the learner doesn’t just see the list of films as shown above. Instead they see the following showing off three different options

1. An embedded, ready to stream version of Animal Kingdom as provided by the institution.
2. A link to a streaming version of Tokyo Story available in an online Film Collection.
3. A link to a JustWatch search of streaming services available in Australia for Toy Story.

Option #3 illustrating what happens when the institution can’t provide access to a film and the learner has to go searching.

Teacher perspective

Currently the Film Watching Options feature is implemented as part of the Content Interface a Contextually Appropriate Scaffolding Assemblages (CASA) approach to using Microsoft Word to create and maintain course content. In this context, the teacher designing this learning space sees the following Word document when authoring. Notice the similarity between the Word document in the above below and the web page in the image above?

The idea is that when the teacher wants to provide film watching options to the learner they write (in Microsoft Word) the title of the film and then apply the Film Watching Options style. That’s why the film names in the above image are green. Prior to this the teacher, in collaboration with the library, will have create an Excel spreadsheet that has a table listing all the films in the course and if and where they are available online.

The technology perspective – how it works

From here the Film Watching Options and Content Interface CASA take over.

The Content Interface will translate the Word document edited by the teacher into the following HTML and embed it in the course site.

<h1>Film Watch Options - CASA</h1>

<p>This week watch and take note of the following films.</p>

<h3><em>Animal Kingdom</em> (Michôd, 2009)</h3>t
<div class="filmWatchingOptions">Animal Kingdom</div>

<h3><em>Tokyo Story</em> (Ozu, 1953)</h3>
<div class="filmWatchingOptions">Tokyo Story</div>

<h3><em>Toy Story</em> (Lasseter, 1995)</h3>
<div class="filmWatchingOptions">Toy Story</div>

When a learner views this page the Content Interface will find all the filmWatchingOptions elements and for each element

1. Call a web service to discover what options exist for watching this films (by checking the Excel spreadsheet maintained by the teacher).
2. Update the element to display the correct option.

Note: There wasn’t a “technology perspective” section for the current solution because it doesn’t actually do anything specific for this learning activity.

Next steps

Implementation within the Content Interface needs to be refined a touch. In particular, a lot more attention needs to be paid to figuring out if and how this approach can better help teachers answer question #4 above – How well did those films/activities work and what do I need to change for next time?

Longer term, I think there’s significant benefit from being gained implementing this type of approach using unbundled web components. Meaning I have to find time to engage with @btopro’s advice on learning more about web components.

Early implications

Even at this early stage there are two obvious early implications.

First, this makes it easier for the teacher to develop and improved learning space.

Second, these improvements provide affordances that generate unexpected outcomes. For example, the provision of the film specific JustWatch search helped me identify an oversight in a course. The course content listed a film as unavailable. The JustWatch search showed that the film was available via an institutional means. I was able to update the course content.

Broader possible implications

Design patterns have been suggested as a solution to the problem of educational design i.e.

There is a substaintial unmet demand for usable forms of guidance. In general, the demand from academic staff is for help with design – for customisable, re-usable ideas, not fixed, pre-packaged solutions. (Goodyear, 2005, p. 83)

One of the benefits of pattern languages is that they provide “a common language by which practitioners can share and discuss ideas” (Jones et al, 1999) associated with design. The object-oriented software design community is perhaps the best example of this. A community where practitioners use pattern names in design discussions.

Design patterns haven’t really entered mainstream practice in educational design practice. Perhaps because design patterns are bit too abstract/difficult for practitioners to embed in everyday practice. Perhaps picking up on Goodyear’s (2005) distinction between Long and short arc learning design. Some of the hypermedia design literature has previously made the connection between design patterns and constructive templates (Nanard, Nanard & Kahn, 1998). Constructive templates help make the connection between design and implementation. Perhaps this is (part of) the missing connection for design patterns in educational design?

What’s slowly evolving as part of the above work is the ability to start using names. In this case, film watching options is a nascent example of a name that is used to talk about this particular design/implementation solution. If it were implemented as an unbundled web component this would be reinforced further. Not to mention it would become even more customisable and reusable – echoing Goodyear’s description of the demand from teachers.

Might an approach like this implemented as web components help better bridge the gap between educational design and implementation? Might it provide a shared language that helps improve educational design? Might it help encourage the adoption of design patterns?

References

Biggs, J. (2012). What the student does: Teaching for enhanced learning. Higher Education Research & Development, 31(1), 39–55. https://doi.org/10.1080/07294360.2012.642839

Goodyear, P. (2005). Educational design and networked learning: Patterns, pattern languages and design practice. Australasian Journal of Educational Technology, 21(1). https://doi.org/10.14742/ajet.1344

Goodyear, P. (2009). Teaching, technology and educational design: The architecture of productive learning environments (pp. 1–37). http://www.olt.gov.au/system/files/resources/Goodyear%2C P ALTC Fellowship report 2010.pdf

Goodyear, P. (2020). Design and co-configuration for hybrid learning: Theorising the practices of learning space design. British Journal of Educational Technology, 51(4), 1045–1060. https://doi.org/10.1111/bjet.12925

Johnson, L., Adams Becker, S., Estrada, V., & Freeman, A. (2014). NMC Horizon Report: 2014 Higher Education Edition (No. 9780989733557). http://www.nmc.org/publications/2014-horizon-report-higher-ed

Jones, D., Stewart, S., & Power, L. (1999). Patterns: Using Proven Experience to Develop Online Learning. Proceedings of ASCILITE’1999. https://djon.es/blog/publications/patterns-using-proven-experience-to-develop-online-learning/

Jones, D., Heffernan, A., & Albion, P. R. (2015). TPACK as shared practice: Toward a research agenda. In D. Slykhuis & G. Marks (Eds.), Proceedings of Society for Information Technology & Teacher Education International Conference 2015 (pp. 3287–3294). AACE. http://www.editlib.org/p/150454/

Nanard, M., Nanard, J., & Kahn, P. (1998). Pushing Reuse in Hypermedia Design: Golden Rules, Design Patterns and Constructive Templates. 11–20.

2023 Update

Add the “magic script” to my WordPress install and we have…

Original

So look what I’ve done inside my Blackboard Learn sandpit site.

It probably doesn’t look that exciting. A bit of HTML and a couple of animated GIFS. Anyone could do that, right?

Not quite. Following explains why this is a bit of game changer and explores how it might be leveraged in work with Blackboard.

It’s not the what, it’s the how

…And what the how makes possible

The core of this image is enabled by four different web components

1. grid-place – provides an easy way to display the three SpongeBob images in a grid
2. meme-maker – overlays the meme-like words (i.e. ARE, YOU, READY?) onto the SpongeBob images (no image manipulation required)
3. hax-logo
4. type-writer – provides the “type-writer” animation of “Any tag you type here that is listed…”

A web component is a nicely encapsulated bit of code. Code that provides some specific functionality. For example, the ability to make a meme. i.e. take any image on the web and overlay words of my choosing on that image. (e.g. the three times SpongeBob’s happy dance gif was used in the image above.

No online meme maker was used in the construction of the above Blackboard-based content.

Instead – like all web components – I used a specially created HTML tag. Just like any other HTML tag, but provide this unique meme making functionality. What’s more I could use this functionality as many times as I want. For example, I could add a meme with happy dance SpongeBob saying “hello world”

To do this I would (and did) add the following HTML to my Blackboard page.

HTML
<p><meme-maker alt="happy dance GIF by SpongeBob SquarePants"
image-url="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif"
top-text="Hello" bottom-text="World"
imageurl="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif"
toptext="happy dance GIF by SpongeBob SquarePants"></p>
Which produces the following (all on the same Blackboard page).

Note: The meme-maker tag wouldn’t work without the p tag around it. Perhaps a Blackboard thing, or perhaps an artefact of the kludge I’ve used to get it to work in Blackboard.

The meme-maker web component includes code that knows how to take the values I’ve placed in the top-text and bottom-text attributes and overlay them onto the image I’ve specified in image-url. Change those attributes and I can create a new “meme”. For example, something a little more HAX.

But wait, there’s more

But I’m not limited to those four tags/web components. I can use any of the 560+ web components listed in this JSON file. A list that includes: various types of charts; more layout components like the grid; players for various types of multimedia; a discussion form; rich text editor; and, much, much more.

Thanks to the magic script I just include the right HTML tags and it all happens as if by magic.

TODO I do need to find out if and where the docs are for the various components. The NPM pages and git repo aren’t doing it for a lowly end user.

And it works anywhere on the web

Web components are based on web standards that are supported by all modern web browsers. Meaning that the magic script and the bit of content I’ve written above will work in any HTML hosted by any “content management system”.

e.g. view the content from Blackboard in this page from my personal website or view the original inspiration in this CodePen

How it works in Blackboard, currently

It’s a currently a horrendous kludge that’s not really usable. I certainly wouldn’t be using it as it stands (but more on that below). And I wouldn’t expect the average academic or educational developer to be lining up to use it as stands.

The main problem with how it works is the configuration of the TinyMCE editor in Blackboard. Configuration that ends up encoding the HTML elements for the web components into HTML entities. Meaning the web components don’t work.

The kludge to get the magic script to work goes like this

1. Add the magic script code into a Blackboard content item using TinyMCE.
2. Use TinyMCE to add the web component HTML into a Javascript string (which will get encoded as HTML entities by TinyMCE when saved).
3. Add a Javascript function to decode the string into the item.
4. Call that function and injectsthe decoded string into a specific DOM element.

Together this means that the magic script does it magic when the Blackboard page is viewed.

All this proves is that the magic script can work. Question now is…

How to better use this within Blackboard?

The method described above is usable for just about no-one. A better approach is required for broader, effective adoption.

HAX as a way of editing content (not currently possible)

HAX is the broader project from which the “magic script” originates. There is an 8 minute video that explains what and why HAX is. It describes HAX as providing a way to edit course material in a way that the editor understands what type of content/object is being edited and uses that knowledge to provide content appropriate editing operations. HAX is a way of embedding more design knowledge into the technology thereby reducing the amount of knowledge required of teachers and students.

All of this is enabled through the use of web components. HAX uses the magic script to know about what type of content it is editing and what it can do to that content. HAX itself is a component that can be added to any page, including within Blackboard.

For example, the following screenshot shows the use of HAX to add a horizontal line into the Blackboard page from above.

Of course, the edit I’m making to the Blackboard page is only visible to me while I’m looking at the page. Any change I make is not saved for later use. For that to happen HAX needs to be integrated into the authing process of the content management system (in this case Blackboard). The What is HAV? includes examples of this happening in various different content management systems including Grav, Drupal and variations of WordPress. This is achieved via changes to the content management systems editing process. For example, this Javascript for WordPress.

Something like this might be possible with Blackboard. JSHack is a Blackboard building block that enabled the injection of HTML/Javascript into Blackboard pages. Beyond what is possible by manually including HTML/Javascript via TinyMCE that I’ve used above.

But, I don’t have the ability to install Building Blocks into the institutional Blackboard. I’m not even going to try to make the case.

Without this ability, I can’t see how I can make the “HAX as editor” approach work. What follows are some other alternatives.

Make a Black(board) magic script (unlikely)

One potential approach might be to write an extension to the magic script specifically for Blackboard that would work something like this:

1. Add the magic script etc. to any Blackboard page via the Blackboard editor.
2. Author adds any of the web components by typing HTML into the Blackboard editor.
3. But on page load, the magic script would search the content items for any web component HTML entities and decode them.
   Not sure how challenging correctly finding all the HTML entities will be.
4. At this stage, the original magic script takes over and magic happens.

There are two problems with this approach:

1. High levels of knowledge.
   It requires authors to write HTML manually. Maybe some educational developers. But not many.
2. Can it be done.
   I’m not 100% convinced I could write Javascript to find all web component HTML entities and correctly decode them.

The Content Interface approach – partly implemented

The Content Interface is the attempted soluton to the content authoring problem as part of another attempt to share design knowledge for digital learning.

With the Content Interface authors use Microsoft Word (a tool many are comfortable with and which provides various authoring functionality) to create course materials. They use Word styles to semantically mark up the objects in their materials. The Word document is converted to HTML and pasted into Blackboard. A Javascript then transforms the semantically marked up HTML in various ways.

The simple approach – Implemented

One of the styles supported by the Content Interface is the embed style. It’s used to include HTML (e.g. the embed code for a YouTube video) in the Word document which is then turned into HTML in Blackboard that is displayed (e.g. the YouTube video). If the magic script Javascript is added to the Content Interface javascript then it should be possible to embed web component HTML in the Word document and have it displayed via the Content Interface.

The more useful approach – not yet

The Content Interface Javascript is currently hard coded to translate Word content with specific styles (e.g. Reading) into a specific collection of HTML and CSS. What is a web component but a way to package up code (Javascript), HTML and CSS into a more reusable form? Suggesting that parts of the Content Interface could be re-written to rely on the magic script and the associated web components. Bringing to the Content Interface all the advantages of web components.

In fact, the Content Interface itself could be rewritten as a web component. Enabling there to be multiple different Content Interface components designed to suit specific purposes. For example, as shown above the Content Interface currently used jQuery accordions to navigate through large course materials. Different components could be written to support different navigation styles. e.g. a parallax scrolling page or a choice like Microsoft Swa offers between vertical and horizontal navigation.

Same for the Card Interface – partially implemented

The Card Interface complements the Content Interface in the act of displaying modules of course materials. The Card Interface generates the “table of contents” of the modules. The Content Interface generates the module content. Given their common origins the two approaches for integrating the magic script with the Content Interface also work for the Card Interface.

The simple approach – sort of implemented

i.e. include the magic script with the Card Interface code and embed a web component. The problem with this approach is that the web component HTML has to be entered via TinyMCE (details about Cards are entered via TinyMCE into Blackboard content items) leading to the HTML entity problem…but it doesn’t. As shown in the following image.

This is actually an unexpected outcome. A bit of tidying up would enable this to work somewhat. But of questionable value.

The more useful approach – Card Interface as web component(s) – not yet

As with the Content Interface, the Card Interface could be reimplemented as a web component. Improving its structure and reusability. There could then be potentially a collection of related web components that provide different interfaces and functionality for the purpose of navigating between collection of objects.

What next?

HAX as an editing experience isn’t something I’ll be able to support in Blackboard. However, web components do offer great promise and require more exploration.

I need to

• Learn more about developing web components.
• Figure out how to roll out a CDN/magic script specific to my institution/work.
• Start thinking about productive ways to integrate web components into my daily work.
• Ponder the implications of web components in terms of the NGDLE/VLE and local strategic directions.