In custom eLearning development, user experience plays a critical role in learner engagement and retention.
One common challenge eLearning developer’s face is:
❌ The hotspot icon remains visible during quiz review, distracting learners and reducing clarity.
Click Preview to watch the video How to Remove the Hotspot Icon in Storyline 360 Quiz Review Using JavaScript
While hotspots are essential during interaction, they can distract learners during review especially in compliance training, assessments, or scenario-based learning.
What is Articulate Storyline 360?
Articulate Storyline 360 is a powerful eLearning authoring tool used by eLearning designers, L&D professionals and organizations to create interactive online courses, quizzes and simulations without needing advanced programming skills.
It is part of the Articulate 360 suite and is widely used in corporate training, compliance learning and custom eLearning development.
Understanding Storyline 360 Quiz Review Behavior
When a learner enters Review Mode, Storyline 360:
1. Highlights correct/incorrect answers
2. Displays feedback layers
3. Shows hotspot markers
Why Remove Hotspot Icons in Quiz Review?
| The Problem | The Solution |
|---|---|
By default, Storyline 360 displays hotspot icons during quiz review. This can:
|
Using JavaScript, you can create a cleaner, more controlled review experience:
|
Step-by-Step: Remove Hotspot Icon Using JavaScript
Step 1: Open Your Project
● Launch Articulate Storyline 360
● Open your .story file
Step 2: Convert Slide to Hotspot Interaction
● Go to Insert → Convert to Freeform
● Select Hotspot as interaction type
● Click OK
Step 3: Insert Image
● Go to Insert → Picture
● Select your image
● Click Open
Step 4: Create Hotspot Area
● Switch to Form View
● Select Rectangle shape
● Draw hotspot over required area
Step 5: Configure Review Feedback
● Go to Feedback section
● In Post-Quiz Review, type: Review
Step 6: Customize Review Layer
● Switch to Slide View → Review Layer
● Edit or remove the default “Review” text
● Add custom instructions if needed
Step 7: Preview Initial Functionality
● Click Preview
● Open Review mode
● Confirm hotspot is visible and working
Step 8: Add JavaScript Trigger
● Open Triggers panel
● Click Create New Trigger
● Set:
- Action: Execute JavaScript
- When: Timeline starts
- Object: This slide
document.querySelector(‘.hotspot-marker’).style.display = ‘none’;
Click OK to save.
Step 9: Test the Functionality
● Preview the slide again
● Enter Review mode
● Verify:
- Hotspot icon is hidden
- No interaction during review
Summary
By using a simple JavaScript trigger in Storyline 360, you can effectively control hotspot visibility during quiz review, ensuring a cleaner interface and better learning experience.
This approach enhances:
- Learner engagement
- Assessment integrity
- Visual design consistency
Frequently Asked Questions (FAQs)
What is a hotspot question in Storyline 360?
A hotspot question in Articulate Storyline 360 is an interactive assessment where learners click specific areas on an image to answer. It is commonly used in scenario-based learning and custom eLearning development.
Does JavaScript work in Storyline 360 courses published to LMS?
Yes, JavaScript works in Storyline 360 when published to SCORM or xAPI LMS environments, but it should always be tested in your LMS to ensure compatibility.
How do I use JavaScript in Storyline 360 to control interactions?
In Articulate Storyline 360, JavaScript allows you to control interactions beyond built-in triggers by accessing variables and modifying on-screen elements dynamically.
Basic Steps:
- Go to Triggers → Create New Trigger
- Select Execute JavaScript
- Set it to run When timeline starts (or based on an event)
- Add your script
Can I customize Storyline quizzes using JavaScript?
Yes, JavaScript enables advanced customization of Storyline quizzes beyond default features. You can hide answers during review mode, control feedback layers, restrict attempts and create adaptive learning experiences.
This is especially useful in custom eLearning development and compliance training.
How do I design clean review screens in eLearning courses?
To design clean review screens, remove unnecessary elements like hotspot icons, avoid revealing answers directly and use clear, concise feedback. Maintain consistent layouts, use layers for feedback and ensure accessibility with readable text and proper navigation. This improves learner experience and assessment clarity.
