https://github.com/lightsenpai7/one-piece-quiz-game
A quiz game with a One Piece theme made with React.js
https://github.com/lightsenpai7/one-piece-quiz-game
css html javascript onepiece reactjs
Last synced: 4 months ago
JSON representation
A quiz game with a One Piece theme made with React.js
- Host: GitHub
- URL: https://github.com/lightsenpai7/one-piece-quiz-game
- Owner: LightSenpai7
- Created: 2022-04-02T21:43:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-09T12:37:33.000Z (10 months ago)
- Last Synced: 2025-03-02T20:17:31.972Z (8 months ago)
- Topics: css, html, javascript, onepiece, reactjs
- Language: CSS
- Homepage: https://onepiecequizgame.netlify.app
- Size: 378 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚓ One Piece Quiz Game
A modern and interactive quiz game built with React, featuring questions about the popular anime/manga series One Piece. Test your knowledge about the Straw Hat crew, their adventures, and the One Piece world!
## 🎯 Overview
Challenge yourself with questions about One Piece while enjoying a modern, responsive interface with smooth animations and real-time feedback. Perfect for both new fans and seasoned veterans of the series!
## 🌟 Features
- Modern UI with glassmorphism design
- Responsive layout for all devices
- Interactive quiz questions about One Piece
- 30-second timer for each question
- Real-time score tracking
- Smooth animations and transitions
- Custom feedback based on performance
- Mobile-friendly interface
## 🚀 Live Demo
Experience the quiz: [One Piece Quiz Game](https://onepiecequizgame.netlify.app)
## 🛠️ Technical Stack
- **Frontend:** React.js 18.0.0
- **Styling:** Modern CSS3, Custom Properties
- **Animations:** CSS Transitions & Keyframes
- **Design:** Responsive & Mobile-first
- **State Management:** React Hooks
- **Build Tool:** Create React App
## ✨ Core Features
### Quiz Engine
- Dynamic question rendering
- Timer system with auto-progression
- Score calculation and tracking
- Performance-based feedback
### User Interface
- Glassmorphism design elements
- Responsive layout system
- Custom animations
- Touch-friendly controls
### Performance
- Optimized rendering
- Smooth transitions
- Fast load times
- Efficient state management
## 🎮 Game Features
### Questions
- 7 challenging One Piece questions
- Multiple choice answers
- Instant feedback
- Timer countdown
### Scoring System
- Point tracking
- Performance analysis
- Custom feedback messages
- Final score display
## 💻 Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/Quiz-Game-React.git
```
2. Install dependencies:
```bash
cd Quiz-Game-React
npm install
```
3. Start development server:
```bash
npm start
```
## 📱 Responsive Design
Optimized for:
- 📱 Mobile phones (320px+)
- 📱 Tablets (768px+)
- 💻 Desktops (1024px+)
- 🖥️ Large screens (1440px+)
## 🎨 Customization
### Modifying Questions
```javascript
// In App.js
const questions = [
{
questionText: 'Your question here',
answerOptions: [
{ answerText: 'Option 1', isCorrect: true },
{ answerText: 'Option 2', isCorrect: false },
// ...
],
},
// ...
];
```
### Styling
```css
/* In App.css */
:root {
--primary-color: #ffd700;
--secondary-color: #ff4d4d;
/* ... */
}
```
## 🌐 Browser Support
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers
## 🤝 Contributing
1. Fork the repository
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
## 🙏 Acknowledgments
- One Piece created by Eiichiro Oda
- React.js development team
- All contributors and testers
---