An interactive anime quiz experience with dual-theme modes and dynamic particle effects
🌐 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature
The Shield of Wrath Quiz is a fan-made interactive quiz application celebrating The Rising of the Shield Hero anime series. Built with pure HTML, CSS, and JavaScript, it features dynamic dual-theme modes, canvas-based particle animations, and an engaging user experience to test your knowledge of Naofumi Iwatani's journey through betrayal, redemption, and heroism.
This quiz captures the essence of the series through:
- 🔥 Dual Theme System – Switch between Wrath Mode (fire particles) and Shield Mode (ice particles) with smooth transitions
- 📝 15 Challenging Questions – Carefully crafted questions covering characters, legendary weapons, kingdoms, and pivotal plot moments
- ⏱️ Three Difficulty Levels – Adaptive time challenges (Easy: 45s, Medium: 30s, Hard: 20s per question)
- 🎨 Interactive Animations – 140+ canvas particles, SVG graphics with dynamic gradients, and glassmorphism UI
- 🏆 Achievement System – Unlock badges for perfect scores, speed runs, and consistent performance
- ⌨️ Full Keyboard Support – Complete navigation without touching your mouse
- 💾 Smart Persistence – Remembers your theme preference across sessions
- ⚡ Dynamic Theme Toggle – Seamlessly switch between Wrath Mode (red/orange fire aesthetics) and Shield Mode (cyan/teal ice aesthetics) with persistent storage
- 🎬 Canvas Particle System – 80 fire particles or 60 ice particles with realistic physics and sine wave movements
- 🌈 SVG Animations – Animated shield logo with pulsing core, dynamic gradients, and glow effects
- ✨ Glassmorphism Design – Modern frosted glass effects with backdrop blur
- 📊 Animated Progress Ring – Circular score display with smooth stroke animation
- 🎭 Smooth Transitions – CSS custom properties enable seamless theme switching
- 📝 15 Curated Questions – Questions span the entire Shield Hero universe including:
- Four Legendary Heroes and their weapons
- Main characters and companions (Raphtalia, Filo, Melty)
- Kingdom politics and betrayals
- Curse Series and special abilities
- Wave mechanics and major events
- ⏱️ Timed Challenges – Difficulty-based countdown with visual warnings at 5 seconds
- 🎯 Real-time Feedback – Instant visual validation showing correct/incorrect answers
- 🏆 Achievement Badges – Earn recognition for:
- 🏆 Perfect Score (15/15)
- ⭐ Excellent Performance (12+)
- ⚡ Speed Demon (complete under 5 minutes)
- 💪 Persistence (8+ correct)
- ⌨️ Keyboard Navigation – Full accessibility with arrow keys (↑/↓ for options, ←/→ for questions) and Enter to confirm
- 📱 Fully Responsive – Optimized layouts for desktop (1920px), tablet (768px), and mobile (320px+)
- 🚀 Performance Optimized – 60fps rendering with RequestAnimationFrame
- 💾 LocalStorage Integration – Theme preference persistence
- ♿ Accessibility Ready – Semantic HTML, ARIA attributes, high contrast ratios
|
Frontend
|
Graphics & Animation
|
|
Data & Storage
|
Performance
|
Shield-of-Wrath/
│
├── index.html # Main quiz structure with 15 questions
├── style.css # Dual-theme styling with CSS variables (600+ lines)
├── main.js # Quiz logic + particle animation systems (500+ lines)
├── README.md # Project documentation
│
└── asset/
├── favicon.png # Browser favicon (32x32)
├── og-image.png # Social media preview (1200x630)
├── shieldhero.png # Wrath mode background (1920x1080)
├── shieldmode.jpg # Shield mode background (1920x1080)
└── Cursor.cur # Custom cursor asset
- A modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
- Optional: Local web server for development
1️⃣ Clone the repository:
git clone https://github.com/Divyansh3105/Shield-of-Wrath.git2️⃣ Navigate to project directory:
cd Shield-of-Wrath3️⃣ Launch the quiz:
Option A: Direct Browser Launch
# Simply double-click index.html
# Or right-click → Open with → Your BrowserOption B: Local Development Server
# Using Python 3
python -m http.server 8000
# Using Node.js http-server
npx http-server -p 8000
# Using PHP
php -S localhost:80004️⃣ Access the application:
Open your browser and navigate to: http://localhost:8000
- Enter Your Hero Name – Personalize your quiz experience
- Select Difficulty Level:
- 🟢 Easy – 45 seconds per question (Recommended for beginners)
- 🟡 Medium – 30 seconds per question (Balanced challenge)
- 🔴 Hard – 20 seconds per question (For true Shield Hero fans!)
- Click "Begin Your Quest" to start
Mouse Controls:
- Click on answer options to select
- Use "Previous" and "Next" buttons to navigate
- Click theme toggle button to switch modes
Keyboard Controls:
↑/↓– Navigate between answer options←/→– Move between questionsEnter– Confirm selection and advance- Works seamlessly without mouse!
- ⚡ Wrath Mode (Default) – Fire theme with ascending red/orange particles
- 🛡️ Shield Mode – Ice theme with descending cyan/teal particles
- Click the theme toggle button to switch
- Your preference is automatically saved
- Animated Score Display – Circular progress ring with percentage
- Answer Review – See all questions with correct answers highlighted
- Achievement Badges – Unlock based on your performance
- Performance Stats – View your completion time
- Retry Option – Take the quiz again to improve
This project was developed as a portfolio showcase to demonstrate:
- ✅ Proficiency in vanilla JavaScript without frameworks or libraries
- ✅ Advanced Canvas API implementation for particle systems
- ✅ CSS custom properties for dynamic theming
- ✅ Responsive web design principles and mobile-first approach
- ✅ Performance optimization techniques (60fps animations)
- ✅ LocalStorage API for state persistence
- ✅ Modern glassmorphism UI design
- ✅ Color theory application in dual-theme systems
- ✅ Animation principles – timing, easing, and visual feedback
- ✅ Typography and visual hierarchy
- ✅ User experience (UX) design patterns
- ✅ Clean, maintainable code structure
- ✅ Semantic HTML5 markup
- ✅ Accessibility considerations (WCAG guidelines)
- ✅ Cross-browser compatibility testing
- ✅ Version control with Git/GitHub
- ⚡ Load Time: < 1 second (on standard connection)
- 🎬 Frame Rate: Consistent 60fps animation
- 📦 Bundle Size: ~50KB (HTML + CSS + JS)
- 📱 Mobile Performance: Optimized for low-end devices
- ♿ Accessibility Score: 95+ (Lighthouse)
- 🎨 PageSpeed Insights: 90+ performance score
- 🎵 Background music toggle with Shield Hero OST
- 🔊 Sound effects for correct/incorrect answers
- 🎥 Embedded character introduction videos
- ✨ More particle types (lightning, holy light)
- 🌐 Leaderboard system with Firebase integration
- 👥 User authentication and profile system
- 📊 Question categories (Characters, Plot, World, Abilities)
- 🎲 Random question mode
- 📈 Progress tracking across multiple attempts
- 🎨 Additional themes (Spear Hero, Bow Hero, Sword Hero)
- 🌍 Multi-language support (English, Japanese)
- 📱 Progressive Web App (PWA) with offline support
- 🏆 Global leaderboard with social sharing
- 🔄 Weekly challenge mode with new questions
- 🎮 Custom quiz builder for users
- 💬 Community submissions for questions
- 🤝 Multiplayer mode (real-time competitive)
- 🎯 Achievement system with unlockable themes
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- 🐛 Report bugs or issues
- 💡 Suggest new features or enhancements
- 📝 Add more quiz questions
- 🎨 Design new themes
- 🌍 Translate to other languages
- 📖 Improve documentation
Fire theme with ascending red particles
Ice theme with descending cyan particles
Clean, readable questions with intuitive selection
Animated score with achievement badges
- Safari: Minor particle rendering differences on older versions
- Firefox: Slight delay in theme transition (< 0.1s)
- Mobile: Custom cursor not visible (using default pointer)
Report issues: GitHub Issues
Distributed under the MIT License. See LICENSE file for more information.
This means you can:
- ✅ Use commercially
- ✅ Modify and distribute
- ✅ Use privately
- ✅ Sublicense
- 📚 Original Series: The Rising of the Shield Hero by Aneko Yusagi
- 🎬 Anime Adaptation: Kinema Citrus Studio
- 🎨 Design Inspiration: Modern glassmorphism trends
- 💻 Development Tools: VS Code, Chrome DevTools, Git
- 🌟 Community: Thanks to all contributors and testers
✨ This is a fan-made tribute quiz and is not affiliated with or endorsed by:
- The official The Rising of the Shield Hero franchise
- Aneko Yusagi (original author)
- Kinema Citrus (animation studio)
- Media Factory or any associated publishers
This project is created for educational and portfolio purposes only, with deep respect for the original work.
