🎓 MyHSB Learning - AI-Powered Quiz System Showcase

Learn how AI was used to build a modern learning platform

Features • Learning Guide • Architecture • AI Prompts • Contributing

---

📖 About This Repository

This is NOT the source code of the HSB Quiz application. Instead, this is a learning resource that documents:

• 🤖 How AI (Google Gemini) was used to develop the application
• 📐 The architecture and design decisions
• 💡 Effective prompts for AI-assisted development
• 🎨 UI/UX design patterns and implementation

Live Demo: Experience the actual application at myhsb.netlify.app

---

✨ Features Showcase

The HSB Quiz application demonstrates modern web development practices:

🎯 Multiple Learning Modes

Mode	Description	Time Limit
🧠 Practice	Unlimited questions, immediate feedback	None
⏰ Exam	Timed assessment (20/40/60 questions)	15-45 min
💬 AI Chat	Direct conversation with AI about IT topics	None

🤖 AI Assistant Integration

• Google Gemini AI powered responses
• Context-aware question explanations
• Smart suggestion system
• Markdown formatting support

🎨 Modern UI/UX

• Dark/Light Mode - Auto-detects system preference
• Responsive Design - Works on all devices
• Smooth Animations - Professional feel
• Progressive Web App - Install as mobile app

📚 Content Features

• 400+ Questions across 11 IT chapters
• Difficulty Levels - Easy, Medium, Hard
• Progress Tracking - Auto-save functionality
• Detailed Results - Review wrong answers

---

📚 Learning Guide

Who Is This For?

• 🎓 Students learning web development
• 👨‍💻 Developers exploring AI-assisted coding
• 🏫 Educators building learning platforms
• 🚀 Entrepreneurs creating EdTech products

What You'll Learn

1. AI-Assisted Development

   • How to prompt AI effectively for code generation
   • Best practices for code review with AI
   • Debugging strategies using AI

2. Modern Web Architecture

   • Single-page application patterns
   • Local storage for state management
   • Service Worker for offline support

3. UI/UX Implementation

   • CSS custom properties for theming
   • Responsive design without frameworks
   • Accessibility considerations

4. API Integration

   • Google Gemini API usage
   • Error handling and fallbacks
   • Rate limiting strategies

📖 Read the Full Learning Guide →

---

🏗 Architecture

┌─────────────────────────────────────────────────────────┐
│                    HSB Quiz System                       │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │   Practice  │  │    Exam     │  │   AI Chat   │     │
│  │    Mode     │  │    Mode     │  │    Mode     │     │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘     │
│         │                │                │             │
│         └────────────────┼────────────────┘             │
│                          ▼                              │
│  ┌──────────────────────────────────────────────────┐  │
│  │              Core Quiz Engine (app.js)            │  │
│  │  • Question shuffling (Fisher-Yates)             │  │
│  │  • State management                              │  │
│  │  • Timer system                                  │  │
│  │  • Progress tracking                             │  │
│  └──────────────────────────────────────────────────┘  │
│                          │                              │
│         ┌────────────────┼────────────────┐            │
│         ▼                ▼                ▼            │
│  ┌───────────┐    ┌───────────┐    ┌───────────┐      │
│  │  Local    │    │  Gemini   │    │  Service  │      │
│  │  Storage  │    │    API    │    │  Worker   │      │
│  └───────────┘    └───────────┘    └───────────┘      │
└─────────────────────────────────────────────────────────┘

📐 Read the Full Architecture Guide →

---

🤖 AI Prompts Collection

This project was developed with extensive AI assistance. Here are some effective prompts used:

UI Design Prompt Example

Create a modern quiz interface with:
- Glassmorphism design
- Dark/light mode support using CSS variables
- Smooth transitions and micro-animations
- Mobile-responsive layout
- Vietnamese language support

Feature Implementation Prompt

Implement a quiz shuffle system that:
- Uses Fisher-Yates algorithm for true randomness
- Caches shuffled options per question
- Maintains consistency during session
- Handles edge cases gracefully

📝 See All AI Prompts →

---

📁 Repository Structure

myhsb.netlify.app/
├── README.md              # This file
├── LICENSE                # MIT License
├── docs/
│   ├── LEARNING_GUIDE.md  # How to learn from this project
│   ├── ARCHITECTURE.md    # System design documentation
│   ├── AI_PROMPTS.md      # Collection of AI prompts used
│   └── FEATURES.md        # Detailed feature documentation
├── examples/
│   ├── ai-integration/    # AI API integration patterns
│   ├── quiz-logic/        # Quiz engine code samples
│   └── theme-system/      # Dark/light mode implementation
└── assets/
    └── screenshots/       # Application screenshots

---

🚀 Getting Started

For Learners

1. Explore the Live Demo

   • Visit myhsb.netlify.app
   • Try all three modes: Practice, Exam, AI Chat
   • Notice the UI/UX details

2. Study the Documentation

   • Start with LEARNING_GUIDE.md
   • Review the ARCHITECTURE.md
   • Try the prompts in AI_PROMPTS.md

3. Experiment with Examples

   • Check the examples/ folder
   • Try modifying the code snippets
   • Build your own variations

For Educators

• Use this as a case study for AI-assisted development
• Adapt the quiz format for your subject
• Reference the architecture for your projects

---

🤝 Contributing

We welcome contributions! Here's how you can help:

• 📝 Documentation - Improve explanations, add translations
• 💡 Examples - Add more code samples
• 🐛 Issues - Report documentation errors
• ⭐ Star - Show your support!

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💼 Author

NGÔ TRUNG KIÊN 🌐 kngo.netlify.app 📧 kiennt@hsb.edu.vn 🏫 Hanoi School of Business and Management (HSB) 📱 Faculty: Non-Traditional Security

---

🌟 If you find this helpful, please give it a Star! ⭐

📚 Happy Learning! 🎓

Made with ❤️ for students