Enhancing tutorials with interactive components
Using some of Astro's tutorial components as inspiration for my own
Planted November 22, 2023
In his latest email, Kamran Ayub pointed out that long tutorials can be unhelpful for neuro-diverse readers. He mentioned having ways to keep track and gamify the process can be helpful.
I recently moved this site to Astro and was super impressed with their tutorial system. I’m going to try to implement some of those elements here.
Precheck
This is a component that Astro uses to show required knowledge. I think this is super helpful and can be used to link to other relevant tutorials.
Before we start, do you:
Awesome! Let's go!
Multiple Choice
Having quizzes throughout the article or at the end can be a good way to check for understanding.
-
Who are these section useful for?
Tracking progress
The Astro docs use localStorage for this which I think is a good idea. I’ll have a look at that one in a later article.
I want to call out that I’m using and adapting the work of the Astro team within the terms of their license. I plan on making these components even more my own over time but I wanted to give credit where credit is due.
The multiple choice component above is an example of a HTML Web Component and I want to explain and explore that in more detail soon.
Your next read?
