An interactive web-based quiz game that challenges players to identify whether content is AI-generated or human-created across four engaging categories: Text, Images, Audio, and Video.
Features beautiful pond-themed UI, real-time scoring, and progressive difficulty.
One-click FREE deployment ready.
Share This Game
🎯 Challenge your perception. Can you tell the difference between AI and human creativity?
Important
This interactive game helps users understand the capabilities and limitations of AI-generated content. Perfect for educators, AI enthusiasts, and anyone curious about the future of content creation. Features include 4 content categories, 10 questions per category, and comprehensive performance analytics.
📑 Table of Contents
- 🤖 AI vs Human Guessing Game 👤Test Your Ability to Distinguish AI from Human Content - TOC -
Welcome to the AI vs Human Guessing Game! This project explores the fascinating boundary between AI-generated and human-created content. As AI technology rapidly advances, distinguishing between artificial and authentic content becomes increasingly challenging. This game provides an engaging platform to test and improve your detection skills across multiple content types.
Whether you're a student learning about AI, an educator teaching digital literacy, or simply curious about AI capabilities, this game offers valuable insights into the current state of generative AI technology.
Experience the game now at https://ai-human-game.chanmeng-dev.workers.dev/
Note
- Node.js >= 18.0 required for local development
- No external API keys needed
- Content files must be provided by users for custom deployment
- Works fully offline after setup
Tip
⭐ Star this repository to stay updated with new features and content categories!
⭐ Star History
Add star history chart after repository gains traction
Experience comprehensive AI detection training across four distinct content types. Each category presents unique challenges that test different aspects of your perception and analytical skills.
Available Categories:
- 📝 Text Content: Compare writing styles, grammar patterns, and creative expression
- 🖼️ Image Content: Analyze visual artifacts, composition, and artistic techniques
- 🎵 Audio Content: Detect differences in sound quality, voice patterns, and musical composition
- 🎬 Video Content: Identify motion patterns, visual effects, and editing styles
🔍 Category Details
Each category includes:
- 10 Question Pairs: Carefully curated AI vs Human comparisons
- Side-by-Side Display: Easy comparison interface
- Instant Feedback: Learn immediately after each answer
- Randomized Positioning: Left/right placement varies to prevent pattern guessing
- Progressive Difficulty: Questions increase in challenge
Engaging user experience with beautiful pond-themed UI, smooth animations, and comprehensive feedback system. Built with modern React practices for optimal performance.
Gameplay Features:
- 🎯 Single-Player Mode: Focus on improving your own skills
- 📊 Real-Time Scoring: Track your progress throughout the game
- 💡 Immediate Feedback: Learn from each question instantly
- 🏆 Performance Analytics: Detailed results and improvement suggestions
- 🎨 Custom Pond Theme: Unique visual design with Peaberry font
Beyond the core gameplay, this project includes:
- 🎨 Beautiful UI/UX: Custom pond-themed design with professional graphics
- 📱 Fully Responsive: Seamless experience across all devices
- ⚡ Lightning Fast: Optimized Next.js 16 with App Router
- 🔒 Privacy First: No data collection, all processing client-side
- 🎵 Sound Effects: Optional audio feedback for interactions
- 📊 Detailed Statistics: Comprehensive performance breakdowns
- 🔧 Highly Customizable: Easy content and question management
- 🌐 Offline Ready: Works without internet after initial load
✨ New categories and features are continuously being planned.
📸 View More Screenshots
[!TIP] The game features:
- 🏠 Home Screen: Engaging pond-themed welcome page
- 📋 Category Selection: Choose from Text, Images, Audio, or Video challenges
- 🎮 Game Interface: Side-by-side content comparison with intuitive controls
- ✅ Instant Feedback: Real-time response after each answer
- 📊 Results Page: Comprehensive performance analysis and statistics
- 🎯 Summary View: Track your progress across all categories
Visit the live demo to experience the full interface!
Next.js 16 |
React 19 |
TypeScript 5 |
Tailwind CSS |
Frontend Stack:
- Framework: Next.js 16 with App Router for optimal performance
- Language: TypeScript 5 for complete type safety
- Styling: Tailwind CSS with custom Peaberry font
- State Management: React Context API for game state
- Components: Custom UI components with pond theme
Development Tools:
- Package Manager: npm/yarn/pnpm
- Linting: ESLint with Next.js configuration
- Code Formatting: Prettier
- Version Control: Git
Tip
This tech stack was selected for rapid development, excellent developer experience, and easy deployment to multiple platforms.
graph TB
subgraph "Client Layer"
A[Next.js App] --> B[React Components]
B --> C[Game Context]
C --> D[Local State]
end
subgraph "Data Layer"
E[questions.json] --> F[Content Metadata]
G[Content Files] --> H[Media Assets]
end
subgraph "UI Components"
I[Home Page]
J[Category Selection]
K[Game Interface]
L[Results Page]
end
A --> I
A --> J
A --> K
A --> L
C --> E
K --> G
subgraph "Assets"
M[Text Files]
N[Images]
O[Audio Files]
P[Video Files]
end
G --> M
G --> N
G --> O
G --> P
sequenceDiagram
participant U as User
participant H as Home Page
participant C as Category Selection
participant G as Game Interface
participant R as Results Page
U->>H: Click "Play"
H->>C: Navigate to Categories
U->>C: Select Category (e.g., Text)
C->>G: Load 10 Questions
loop For Each Question (1-10)
G->>U: Display Content Pair
U->>G: Select Left or Right
G->>U: Show Immediate Feedback
G->>G: Update Score
end
G->>R: Navigate to Results
R->>U: Display Final Score
R->>U: Show Performance Breakdown
U->>R: Choose to Play Again or Return Home
graph LR
subgraph "App Router Pages"
A[page.tsx<br/>Home]
B[category/page.tsx<br/>Selection]
C[game/page.tsx<br/>Main Game]
D[results/page.tsx<br/>Summary]
E[summary/page.tsx<br/>Overall Stats]
end
subgraph "Components"
F[ContentDisplay.tsx<br/>Media Renderer]
end
subgraph "Context"
G[GameContext.tsx<br/>State Management]
end
subgraph "Data"
H[questions.json<br/>Question Metadata]
end
A --> B
B --> C
C --> D
D --> A
D --> E
C --> F
C --> G
C --> H
G --> A
G --> B
G --> C
G --> D
Important
Ensure you have the following installed:
- Node.js 18.0+ (Download)
- npm, yarn, or pnpm package manager
- Git (Download)
- Content files for the game (see Content Setup)
1. Clone Repository
git clone https://github.com/ChanMeng666/ai-human-game.git
cd ai-human-game2. Install Dependencies
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm (recommended)
pnpm install3. Add Content Files
Follow the Content Setup guide below to add your game content.
4. Start Development Server
npm run dev🎉 Success! Open http://localhost:3000 to play the game.
The game requires content files to function. Add your files following this structure:
graph TB
subgraph "Content Directory Structure"
A[public/content/]
A --> B[text/]
A --> C[images/]
A --> D[audio/]
A --> E[videos/]
B --> B1[human_1.txt to human_10.txt]
B --> B2[ai_1.txt to ai_10.txt]
C --> C1[human_1.jpg to human_10.jpg]
C --> C2[ai_1.jpg to ai_10.jpg]
D --> D1[human_1.mp3 to human_10.mp3]
D --> D2[ai_1.mp3 to ai_10.mp3]
E --> E1[human_1.mp4 to human_10.mp4]
E --> E2[ai_1.mp4 to ai_10.mp4]
end
📝 Text Content Requirements
Location: public/content/text/
Required Files (20 total):
human_1.txttohuman_10.txt- Human-written text samplesai_1.txttoai_10.txt- AI-generated text samples
Sample Content Provided:
- ✅
human_1.txt,human_2.txt - ✅
ai_1.txt,ai_2.txt
Content Guidelines:
- Plain text format (.txt)
- Similar length and topic to paired content
- Diverse writing styles and subjects
- 100-500 words per sample recommended
🖼️ Image Content Requirements
Location: public/content/images/
Required Files (20 total):
human_1.jpgtohuman_10.jpg- Human-created imagesai_1.jpgtoai_10.jpg- AI-generated images
Supported Formats: JPG, PNG, WebP
Image Guidelines:
- Resolution: 800x800px to 1920x1080px
- File size: < 5MB each for optimal loading
- Varied subjects and styles
- Similar composition to paired image
🎵 Audio Content Requirements
Location: public/content/audio/
Required Files (20 total):
human_1.mp3tohuman_10.mp3- Human-created audioai_1.mp3toai_10.mp3- AI-generated audio
Supported Formats: MP3, WAV
Audio Guidelines:
- Duration: 10-60 seconds
- Quality: 128kbps minimum
- Varied content types (speech, music, ambient)
- Similar style to paired audio
🎬 Video Content Requirements
Location: public/content/videos/
Required Files (20 total):
human_1.mp4tohuman_10.mp4- Human-created videosai_1.mp4toai_10.mp4- AI-generated videos
Supported Formats: MP4, WebM
Video Guidelines:
- Duration: 5-30 seconds
- Resolution: 720p or 1080p
- Codec: H.264 for MP4
- File size: < 20MB each
- Similar subject matter to paired video
ai-human-game/
├── app/ # Next.js App Router
│ ├── page.tsx # Home page - Game entry point
│ ├── category/page.tsx # Category selection interface
│ ├── game/page.tsx # Main game interface
│ ├── results/page.tsx # Results & immediate feedback
│ ├── summary/page.tsx # Overall performance summary
│ ├── layout.tsx # Root layout with GameProvider
│ └── globals.css # Global styles & Tailwind imports
├── src/
│ ├── components/
│ │ └── ContentDisplay.tsx # Dynamic content renderer
│ ├── context/
│ │ └── GameContext.tsx # Global game state management
│ ├── data/
│ │ └── questions.json # Question metadata & configuration
│ └── assets/ # Static assets
│ ├── fonts/ # Custom Peaberry font
│ └── images/ # UI graphics & pond theme
├── public/
│ ├── audio/ # Sound effects
│ │ ├── correct.mp3
│ │ └── wrong.mp3
│ └── content/ # Game content files
│ ├── text/ # Text content pairs
│ ├── images/ # Image content pairs
│ ├── audio/ # Audio content pairs
│ └── videos/ # Video content pairs
├── package.json # Dependencies & scripts
├── tsconfig.json # TypeScript configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── next.config.ts # Next.js configuration
├── wrangler.jsonc # Cloudflare Workers configuration
├── open-next.config.ts # OpenNext adapter configuration
└── README.md # This file
🔍 Key Files Explained
app/layout.tsx
- Root layout component
- Wraps entire app with GameProvider
- Loads global styles and fonts
src/context/GameContext.tsx
- Manages global game state
- Tracks current question, score, and answers
- Provides game control functions
src/data/questions.json
- Defines all game questions
- Maps content file paths
- Configures human position randomization
src/components/ContentDisplay.tsx
- Renders content based on type (text/image/audio/video)
- Handles different media formats
- Provides consistent display interface
flowchart TD
A[🏠 Home Screen] --> B[📋 Select Category]
B --> C{Choose Content Type}
C -->|Text| D[📝 Text Challenge]
C -->|Images| E[🖼️ Image Challenge]
C -->|Audio| F[🎵 Audio Challenge]
C -->|Video| G[🎬 Video Challenge]
D --> H[Compare Two Items]
E --> H
F --> H
G --> H
H --> I[Click Left or Right]
I --> J[Get Instant Feedback]
J --> K{More Questions?}
K -->|Yes| H
K -->|No| L[📊 View Results]
L --> M{Play Again?}
M -->|New Category| B
M -->|Same Category| H
M -->|Home| A
Step-by-Step Guide:
- 🏠 Start: Click "Play" on the home screen
- 📋 Choose Category: Select from Text, Images, Audio, or Video
- 👀 Compare: View two pieces of content displayed side-by-side
- 🖱️ Make Selection: Click the left or right button for human-created content
- ✅ Get Feedback: See immediately if your choice was correct
- 🔄 Continue: Progress through all 10 questions in the category
- 📊 Review Results: See your final score and performance analysis
- 🎮 Play Again: Try another category or replay to improve
Tip
Take your time with each question! There's no time limit, so analyze the content carefully before making your selection.
Points Structure:
- ✅ Correct Answer: +1 point
- ❌ Incorrect Answer: 0 points
- 🎯 Maximum Score: 10/10 per category
Performance Levels:
| Score | Level | Badge | Feedback |
|---|---|---|---|
| 10/10 | 🏆 Perfect! | Expert | You have an exceptional eye for detail! |
| 8-9/10 | 🌟 Excellent! | Advanced | Great job! You're really good at this. |
| 5-7/10 | 👍 Good! | Intermediate | Solid performance! Keep practicing. |
| 0-4/10 | 💪 Keep Trying! | Beginner | This is challenging! Don't give up. |
Statistics Tracked:
- Total questions answered
- Correct vs incorrect answers
- Success rate percentage
- Category-specific performance
- Answer patterns and tendencies
📊 Performance Analytics
The game tracks comprehensive statistics including:
- Overall Accuracy: Percentage of correct answers
- Category Breakdown: Performance by content type
- Improvement Tracking: Compare scores across attempts
- Common Mistakes: Patterns in incorrect answers
Edit src/data/questions.json to customize question text and content paths:
{
"id": 1,
"category": "text",
"humanContent": "/content/text/human_1.txt",
"aiContent": "/content/text/ai_1.txt",
"humanPosition": "left",
"description": "Which text was written by a human?"
}Customizable Fields:
description: Question prompt shown to usershumanPosition:"left"or"right"to vary content placementhumanContent: Path to human-created content fileaiContent: Path to AI-generated content file
Vary the humanPosition field across questions to prevent pattern-based guessing:
{ "id": 1, "humanPosition": "left" },
{ "id": 2, "humanPosition": "right" },
{ "id": 3, "humanPosition": "left" }Modify Colors: Edit tailwind.config.js for custom color schemes
Change Fonts: Replace font files in src/assets/fonts/
Update Theme: Modify app/globals.css for global style changes
Cloudflare Workers (Recommended)
The live demo is deployed at https://ai-human-game.chanmeng-dev.workers.dev/
Deployment via Wrangler CLI:
# Login to Cloudflare
npx wrangler login
# Build and deploy
npm run deployTip
The project uses @opennextjs/cloudflare adapter for deploying Next.js on Cloudflare Workers with edge performance and global CDN.
Other Platforms:
☁️ Alternative Deployment Options
Vercel:
npm i -g vercel
vercel --prodSelf-Hosted:
# Build for production
npm run build
# Start production server
npm start# Production build
npm run build
# Start production server
npm start
# Preview build locally
npm run build && npm startWarning
Ensure all content files are included in your deployment. Large media files may require CDN or external hosting for optimal performance.
🔧 Content Not Loading
Problem: Content files not displaying or 404 errors
Solutions:
- ✅ Verify files are in correct directories (
public/content/[category]/) - ✅ Check file naming:
human_1.txt,ai_1.jpg, etc. (lowercase, underscore) - ✅ Confirm file extensions match supported formats
- ✅ Check browser console for specific error messages
- ✅ Ensure file paths in
questions.jsonmatch actual files
Debug Command:
# List all content files
ls -R public/content/🎵 Audio/Video Not Playing
Problem: Media files won't play or show errors
Solutions:
- ✅ Verify file format is supported (MP3/WAV for audio, MP4/WebM for video)
- ✅ Check file encoding (H.264 for MP4, Opus for WebM)
- ✅ Test in different browsers (Chrome, Firefox, Safari)
- ✅ Reduce file size if loading is slow
- ✅ Check browser console for codec errors
Recommended Codecs:
- Video: H.264/AVC with AAC audio
- Audio: MP3 at 128kbps or higher
⚡ Performance Issues
Problem: Game loading slowly or lagging
Solutions:
- ✅ Optimize media file sizes (use compression tools)
- ✅ Implement lazy loading for large media
- ✅ Clear browser cache and reload
- ✅ Check network tab for slow-loading resources
- ✅ Consider using CDN for large content files
Optimization Tips:
# Install image optimization tool
npm install -g sharp-cli
# Optimize images
sharp -i input.jpg -o output.jpg --quality 80 --resize 1200🎨 Font Not Displaying
Problem: Custom Peaberry font not loading
Solutions:
- ✅ Verify
PeaberryBase.woff2exists insrc/assets/fonts/ - ✅ Check font declaration in
app/globals.css - ✅ Clear browser cache and hard refresh (Ctrl+Shift+R)
- ✅ Inspect element to verify font-family is applied
🔨 Build Failures
Problem: npm run build fails
Solutions:
# Clear npm cache
npm cache clean --force
# Remove node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
# Check for TypeScript errors
npm run type-check
# Check for linting issues
npm run lintThis project is open source and available under the MIT License.
What You Can Do:
- ✅ Use commercially
- ✅ Modify freely
- ✅ Distribute copies
- ✅ Private use
Credits:
- UI Theme & Assets: Based on OOPTriviaGame (Pond Ponder) by PowerPuff People
- Custom Font: Peaberry Base
- Framework: Next.js by Vercel
Chan Meng Creator & Lead Developer |
Chan Meng
LinkedIn: chanmeng666
GitHub: ChanMeng666
Email: [email protected]
Website: chanmeng.live
🤖 Challenging Human Perception in the Age of AI 🧠
Can you tell the difference? Test yourself today!
⭐ Star this repository • 🐛 Report Issues • 💡 Suggest Features • 🤝 Contribute
Made with ❤️ by Chan Meng
Perfect for educators, AI enthusiasts, and the curious mind