A full-featured Jeopardy game application with admin dashboard for content management and interactive game board for playing trivia games. Built with Laravel 11 and PHP.
A complete Jeopardy Game Management System built with Laravel (PHP) featuring a professional admin panel and interactive player game board.
This skill guides you through building and managing a full-featured Jeopardy-style trivia game application. It includes an administrative dashboard for content management (categories, questions, images) and an interactive game board with scoreboard functionality for playing Jeopardy games.
1. **Verify Environment**
- Ensure PHP 8.1+ is installed
- Ensure Composer is installed
- Verify Laravel 11 requirements are met
2. **Scaffold the Laravel Project**
- Create new Laravel 11 project or work with existing codebase
- Set up SQLite database in `.env` file
- Run migrations to create database schema
3. **Install Required Dependencies**
- Install Laravel UI components if needed
- Set up any additional PHP extensions for image processing
- Configure file storage for question images
4. **Create Models and Migrations**
- `Category` model with order field for drag-and-drop positioning
- `Question` model with category relationship, value, question text, answer text, and image path
- `Game` model for game session management
- `GameResponse` model for tracking game interactions
- Ensure proper relationships: Category hasMany Questions
5. **Set Up Database Tables**
- Categories: id, name, order, timestamps
- Questions: id, category_id, value, question, answer, image_path, timestamps
- Games: id, session data, timestamps
- Game Responses: id, game_id, question_id, response data, timestamps
6. **Build AdminController**
- Dashboard method with statistics (total categories, questions, games played)
- Category CRUD operations
- Question CRUD operations with image upload handling
- JSON export endpoint (all categories and questions)
- JSON import endpoint with validation
- Category reordering endpoint for drag-and-drop
7. **Build GameController**
- Index method to display game board
- Load categories with questions ordered by value
- Generate 6-column board layout automatically
- API endpoints for score management
- Game state persistence logic
8. **Build CategoryController**
- List all categories ordered by position
- Create new category
- Update category (name, order)
- Delete category (with cascade to questions)
- Reorder categories via AJAX
9. **Build QuestionController**
- List questions filtered by category
- Create question with image upload
- Update question (text, answer, value, image)
- Delete question
- Handle image storage and deletion
10. **Admin Panel Views**
- Dashboard view with overview cards and statistics
- Categories index with drag-and-drop interface (using SortableJS or similar)
- Category create/edit forms
- Questions index with filtering and search
- Question create/edit forms with image upload preview
- Export/Import interface with download and upload buttons
11. **Game Board View**
- Professional Jeopardy styling with CSS variables
- 6-column responsive grid layout
- Category headers with gold text on blue background (#0200D4, #FFDD55)
- Question tiles with dollar values, clickable states
- Modal overlay for displaying question and answer
- Transition animations (flip, fade, slide)
12. **Scoreboard Component**
- 4 player cards with editable name fields
- Current score display for each player
- Plus/minus buttons for score adjustment
- Active player highlighting (visual indicator)
- Reset scores button
- Persistent storage using localStorage
13. **Implement JavaScript Functionality**
- LocalStorage integration for game state persistence
- Click handlers for question tiles (mark as used, show modal)
- Modal show/hide logic with question reveal, then answer reveal
- Score increment/decrement functions
- Player name editing with immediate save
- Board reset function (clear localStorage, reload)
- Scoreboard reset function (zero all scores)
- Active player toggle functionality
14. **Add Drag-and-Drop for Categories**
- Use SortableJS or native HTML5 drag-and-drop
- Visual feedback during drag (opacity, cursor)
- AJAX request to save new order on drop
- Update database order field
- Show success/error messages
15. **Image Upload Handling**
- File input with preview before upload
- Validate image types (jpg, png, gif)
- Store images in `storage/app/public/questions`
- Create symlink: `php artisan storage:link`
- Display images in question modal
- Handle image deletion when question is deleted
16. **Define Web Routes**
- `GET /` → GameController@index (player game board)
- `GET /admin` → AdminController@dashboard
- `GET /admin/categories` → AdminController@categories
- `POST /admin/categories` → AdminController@storeCategory
- `PUT /admin/categories/{id}` → AdminController@updateCategory
- `DELETE /admin/categories/{id}` → AdminController@deleteCategory
- `POST /admin/categories/reorder` → AdminController@reorderCategories
- `GET /admin/questions` → AdminController@questions
- `POST /admin/questions` → AdminController@storeQuestion (with file upload)
- `PUT /admin/questions/{id}` → AdminController@updateQuestion
- `DELETE /admin/questions/{id}` → AdminController@deleteQuestion
- `GET /admin/export` → AdminController@exportJson
- `POST /admin/import` → AdminController@importJson
17. **Apply Professional Jeopardy Theme**
- Primary blue: #0200D4
- Accent yellow: #FFDD55
- Navy background: #001F3F or similar
- Font: Bold sans-serif for headers (e.g., Impact, Arial Black)
- Question tiles: 3D effect with box-shadow
- Hover states: brightness increase, scale transform
- Smooth transitions: 0.3s ease for all interactive elements
18. **Implement Responsive Design**
- Mobile: stack columns, reduce font sizes
- Tablet: 3-column layout
- Desktop: 6-column layout
- Touch-friendly button sizes (minimum 44px)
- Accessible color contrast ratios
19. **JSON Export/Import**
- Export: Generate JSON with all categories and nested questions
- Include metadata: export date, version, record counts
- Import: Validate JSON structure before processing
- Handle conflicts: option to replace or merge
- Show import summary (categories added, questions added, errors)
20. **Game State Persistence**
- Save to localStorage on every state change
- Keys: `jeopardy_board_state`, `jeopardy_scores`, `jeopardy_players`
- Load state on page load
- Provide manual clear option
21. **Test Core Functionality**
- Admin: Create categories, add questions, upload images
- Admin: Reorder categories, export data, import data
- Game: Click tiles, view questions, reveal answers
- Scoreboard: Edit names, adjust scores, highlight active player
- Persistence: Refresh page, verify state is preserved
- Reset: Clear board, clear scores, verify clean state
22. **Run the Project**
```bash
php artisan serve
```
- Game Board: http://localhost:8000
- Admin Panel: http://localhost:8000/admin
23. **Documentation**
- README with setup instructions
- Database schema documentation
- API endpoint documentation for future extensions
- User guide for admin panel
- Gameplay instructions for players
1. Access admin panel at `/admin`
2. Create 6 categories (e.g., "History", "Science", "Sports", "Movies", "Geography", "Literature")
3. For each category, add 5 questions with values 200, 400, 600, 800, 1000
4. Optionally upload images for visual questions
5. Navigate to `/` to see the generated game board
1. Players enter their names in the scoreboard
2. Click a question tile to reveal the question
3. Read the question aloud or display on screen
4. Click "Show Answer" to reveal
5. Award points using +/- buttons for correct/incorrect answers
6. Highlight active player for turn tracking
7. Continue until board is complete
1. Drag categories to reorder them on the board
2. Edit questions inline or via edit form
3. Upload new images or replace existing ones
4. Export current game data as JSON backup
5. Import JSON to restore or load new game content
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/jeopardy-game-manager/raw