Example
Voice Note Interaction
In this example, you’ll have a chance to record a short audio note using your microphone. This is a simple way to reflect on what you’ve just learned or to capture your personal insights.
When prompted, please allow microphone access. Your recording will be saved directly to your computer — no data is uploaded or stored elsewhere. Each file will include the slide title and a note number so you can easily identify it later (for example, Slide_Note1.mp3, Slide_Note2.mp3...).
Example
2 Replies
This is a really cool interaction! It it done using javascript or with build in SL functionality?
Thank you, Keira! The animated text simulating a typing effect is actually a text entry field being dynamically filled with JavaScript, while it gently moves upward using a motion path. It's perfectly timed to stop when the video finishes and the typing animation is complete.
The voice note feature, where the learner can take notes using a microphone, is also powered by JavaScript. It took me a while to figure this out without relying on external services or server-based functionality, specifically to avoid some of the common issues discussed across the community.
It’s a web object that contains HTML, which can be modified at any time to adjust its size dynamically allowing the widget to expand or shrink based on the space it needs to occupy on the slide.I even took it a step further by experimenting with saving the audio recording locally on the learner’s computer, just like we do when saving text notes as a PDF or another document format.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.