Pondering Hax Web Components and Blackboard#
post_title='Pondering if and how Hax & web components fit in Blackboard'
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
- grid-place - provides an easy way to display the three SpongeBob images in a grid
- meme-maker - overlays the meme-like words (i.e. ARE, YOU, READY?) onto the SpongeBob images (no image manipulation required)
- 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.
<p><meme-maker alt="happy dance GIF by SpongeBob SquarePants"
toptext="happy dance GIF by SpongeBob SquarePants"></p>
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".
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
- Add the magic script code into a Blackboard content item using TinyMCE.
- 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.
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:
- Add the magic script etc. to any Blackboard page via the Blackboard editor.
- Author adds any of the web components by typing HTML into the Blackboard editor.
- 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.
- At this stage, the original magic script takes over and magic happens.
There are two problems with this approach:
- High levels of knowledge. It requires authors to write HTML manually. Maybe some educational developers. But not many.
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.
The simple approach - Implemented#
The more useful approach - not yet#
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.
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.