Exploring The New Articulate Rise Custom Code Block With A Live Hand-Tracking Demo!

This project was inspired by the latest Articulate eLearning Heroes Challenge, which got me thinking about how far I could push the new Custom Code Block feature in Rise.

In order to enhance the British Sign Language (BSL) elearning activity I had in mind, I embedded a small React web application that uses the Mediapipe Hands JS library to track a learner’s hand positioning live via their webcam. From there, I built a simple “test yourself” activity for signing the letters A, B, and C – giving learners the chance to practise the signs themselves and receive instant feedback.

The Code Block itself opens up some incredible possibilities for eLearning developers to integrate more customised app-like user interfaces and interactivity as part of an online learning journey structure. Under the hood, this demo is powered by a custom BSL Hand Tracking eLearning System that fuses computer vision, machine learning logic, and web-first technologies:

• MediaPipe Hands runs real-time 21-point landmark detection per hand, streaming at 30+ FPS with sub-pixel accuracy, which I pipe into a custom React + TypeScript application.
• Each letter algorithm (A, B, C for now) is built on precise geometric calculations: normalised inter-landmark distances, circle formation checks, arc mathematics, and orientation validation. These allow the system to distinguish subtle differences between handshapes with confidence thresholds down to 0.05.
• A progressive multi-stage detection framework manages the learning flow (show_first_hand → show_second_hand → make_letter → success) while providing contextual feedback overlays.
• The canvas visualisation layer renders live hand landmarks, interaction highlights, and instruction prompts at 60 FPS with easing animations, glassmorphism styling, and colour-coded tracking for clarity.
• To keep it secure and LMS-ready, I’ve implemented frame-protection measures, CSP headers, and domain validation so the experience can be embedded safely inside Rise.

The result is a fully interactive, browser-based system where learners can practise sign language in real time, with recognition, feedback, and gamified reinforcement — all running directly inside a Rise course thanks to the new Custom Code Block.