advanced enhanced-text: glossary mode

In the previous article I wrote about how the enhanced-text element works by taking in it's light dom, using the attributes selected to then send off to the end point. It also covered progressive enhancement, loading status and fail over.

In this article let's assume that's all there but focus on a complex replacement function that has the following requirements:

• We want to define key words in bodies of text
• Our content authors don't want to write the definition every time
• Our content authors don't want to maintain or form these references

To solve this challenge we start getting into a very implementation specific solution. This illustrates that enhanced-text can be both general purpose (vide-text) as well as highly specific to a platform (HAXcms) via the attributes we leverage.

Building the glossary

Did you know what the dl, dt, and dd tags do? What, you don't use them every day?! Me neither. But these tags semantically inform the description list. Think of it as HTML that's able to say "this is a series of terms and definitions related to a topic". Hiiiiiighly specific, so much so I never used it previously in 15+ years, however it's exactly what we need for building a glossary.

Here's the page leveraged to read terms off of: EdTechJoker Example Glossary.

<dl>
  <dt>Bill</dt>
  <dd>Eating Panera</dd>

  <dt>Coffee</dt>
  <dd>Black hot drink</dd>

  <dt>Milk</dt>
  <dd>Thing I am intolerant of</dd>

  <dt>Watchdogs</dt>
  <dd>awesome video game series</dd>

  <dt>Design</dt>
  <dd>A word that is constantly over defined</dd>
</dl>

Now obviously this is just for demonstration purposes but we are shooting to roll this out very soon as an option for courses that want to do this in context (the key will be how it's eventually visualized via requirements / discussion).

The video

I'll do another video once I do that as this implementation methodology is mostly proof of concept and early UX feedback suggests we'd rather have a tab that lists all the terms as opposed to replace them in context.

This video will go over:

• the general idea
• an example of how the backend and frontend work together to achieve the goal
• show how the wikipedia attribute can help mix additional context into results