⚔️ Shield of Wrath Quiz – Wrath Edition 🛡️

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

• ⚡ 4 Hero Themes – Cycle through:
  • 🔥 Wrath Mode – Ascending red/orange fire particles
  • 🛡️ Shield Mode – Descending cyan/teal ice crystal particles
  • ⚡ Spear Mode – Golden lightning streak physics
  • 🏹 Bow Mode – Emerald green rising mana sparks
• 🌈 SVG & Canvas FX – Option selection fireworks, glowing shield logo, backdrop blur glassmorphism UI

• ⚡ Hero XP & Level Progression – Earn XP per quiz based on accuracy, speed, and combo streaks. Level up (Lv. 1 Novice $\rightarrow$ Lv. 10 Shield Hero Legend)
• 📖 Shield Hero Lore Codex – Interactive encyclopedia modal featuring character bios, weapon trees, and Curse Series lore
• ➕ Custom Question Builder – Create custom trivia questions saved in localStorage that merge into your quiz bank
• 🎲 Dynamic Question Bank – 25+ questions with option shuffling
• 🛡️ Hero Lifelines & Skills – Activate Air Strike Shield (50:50), Filo's Swiftness (+10s), and Raphtalia's Insight (Hint)
• ⚡ Quest Modes – Choose between Standard Campaign or Sudden Death
• 🔥 Combo Streak Multipliers – Build consecutive correct answer streaks (🔥 3x Combo)
• 📖 Post-Quiz Lore Review – Detailed answer review with anime lore explanations
• 🏆 Hall of Heroes Leaderboard – LocalStorage modal tracking top 10 historical quest performances
• 📜 HTML5 Canvas Certificate – Download a personalized high-resolution PNG certificate with your Hero Level and Title
• 🔗 Social Score Sharing – One-click score snippet copy for Discord/Twitter

• ⌨️ Keyboard Navigation – Full accessibility (↑/↓ choose, ←/→ navigate, 1/2/3 skills, Enter confirm)
• 📱 Fully Responsive – Optimized layout for desktop, tablet, and mobile devices
• 🚀 Zero Dependency Vanilla Stack – Pure HTML5, CSS3, and ES6+ JavaScript

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.git

2️⃣ Navigate to project directory:

cd Shield-of-Wrath

3️⃣ Launch the quiz:

Option A: Direct Browser Launch

# Simply double-click index.html
# Or right-click → Open with → Your Browser

Option 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:8000

4️⃣ 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 questions
• Enter – 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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. 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

• 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