Articulate Storyline 360 offers robust features for eLearning content development, the transcript panel for video captions isn’t displayed automatically. Learners need to click the Transcript button to view captions, which can interrupt the learning flow.
Click Preview to watch how to automatically display the transcript panel in Articulate Storyline 360 using a simple JavaScript code.
In this article, you’ll learn a simple JavaScript trick to make the transcript panel appear automatically next to your videos. By implementing this, you’ll create a more engaging, accessible and professional e-learning course.
Why Auto Displaying the Transcript Panel Matters
Automatically displaying the transcript panel has several advantages:
1. Accessibility: Supports learners with hearing difficulties.
2. Enhanced Comprehension: Learners can read along while watching the video.
3. Improved Engagement: Reduces clicks, making the learning experience smoother.
4. Professional Presentation: Shows attention to detail in your course design.
Implementing this small tweak ensures your courses are inclusive and learner-friendly.
Step-by-Step Guide to Auto Show the Transcript Panel in Storyline 360 Project
1. Open Your Articulate Storyline 360 Project
Start by opening the project containing the video slide with closed captions. Previewing the slide will show that the transcript panel does not appear automatically.
2. Access the Triggers Panel
- Select the video slide.
- Open the Triggers panel in Storyline360 Project.
- Click Create a New Trigger and choose Execute JavaScript as the action.
3. Add the JavaScript Code
- Set the trigger to run When the timeline starts on this slide.
- Click the JavaScript editor, paste the below provided code and click OK.
const transcriptBtn = document.querySelector(‘.modern-video-control.video-transcript’);
if (transcriptBtn && !transcriptBtn.classList.contains(‘enabled’)) {
transcriptBtn.click();
}
4. Preview the Slide
Now, preview the slide again, the transcript panel appear automatically next to your video without any extra clicks.
5. Customize Transcript Panel Appearance
You can further customize the appearance and behavior of the Transcript Panel:
- Time Stamps: Click the three dots beside the close button and uncheck “Show timestamps” if you prefer.
- Auto Scroll: Turn it off if you want the panel to remain static.
- Resize/Reposition: Use the controls at the bottom to fit the panel to your layout.
Best Practices for Transcript Panels
1. Ensure Readability: Use clear fonts and contrast for the transcript.
2. Consistency: Keep the panel style uniform across all slides.
3. Test on Multiple Devices: Ensure the transcript panel displays correctly on desktops, tablets and mobile.
4. Combine With Captions: For maximum accessibility, ensure your video captions are synced and accurate.
Conclusion
Automatically displaying the transcript panel in Articulate Storyline 360 is a small but impactful improvement. With a simple JavaScript trigger, you can enhance accessibility, engagement and overall learner experience.
By following this guide, your elearning courses will not only look more professional but also become more inclusive for all learners. Implement this trick today and make your e-learning content easier to navigate, more user-friendly and highly effective.
Recommended Internal Links
To enhance your learning experience and expand your Storyline 360 skills, check out these related tutorials:
Automatically Generate Synchronized Video Transcripts in Storyline 360
– Automatically generate synchronized transcripts from closed captions for faster, more accurate development.
How to Apply Multiple Text Colors in Articulate Storyline 360 Using JavaScript
– Learn how to make your text visually engaging by applying multiple colors dynamically with JavaScript.
How to Set Scroll Panels and Customize Closed Captions in Storyline 360
– A step-by-step guide to creating scrollable panels and customizing closed captions for better accessibility.
Create Interactive Volume Controls in Storyline 360 with JavaScript in Just a Few Steps
– Add interactivity to your e-learning courses with custom volume controls for audio content.
Master Audio Controls in Storyline 360 with a Custom Mute/Unmute Button Using Simple JavaScript
– Learn to create a custom mute/unmute button to give learners full control over audio playback.
Frequently Asked Questions (FAQs)
Q1. What is the transcript panel in Articulate Storyline 360?
A. The transcript panel is a text-based display of your video captions in Storyline 360. It allows learners to read along with your video content, improving comprehension, accessibility and engagement. By default, this panel only opens when the learner clicks the Transcript button.
Q2. What is the difference between captions and the transcript panel?
A. Captions appear directly on the video as the content plays, while the transcript panel provides a full, scrollable text version of the video dialogue. The transcript panel allows learners to reference content at their own pace and enhances accessibility.
Q3. Who needs transcripts for e-learning videos?
A. Learners with hearing impairments, non-native speakers and anyone who prefers reading while watching videos benefit from transcripts. E-learning developers also need transcripts to meet accessibility guidelines and improve engagement.
Q4. What types of e-learning content benefit most from transcript panels?
A. Courses with narrated tutorials, complex demonstrations, step-by-step instructions or accessibility-focused content benefit most from transcript panels. They also help learners review material at their own pace.
