This is a multiplayer quiz game webapp that dynamically generates questions using GPT-4. Players register using their GitHub handles and avatars. The game features a retro 70's game show aesthetic with a virtual host (Mona Woolery) powered by GPT-4.
- Dynamic question generation using GPT-4
- Player registration with GitHub handles and avatars
- Real-time multiplayer support using Socket.IO
- Retro 70's game show themed interface
- Virtual host (Mona Woolery) with witty commentary
- Score tracking and leaderboard
- Configurable number of questions and topics
Player View (frontend/src/PlayerView.js)
- Player registration with GitHub integration
- Real-time question display
- Answer submission
- Score tracking
- Round winner announcements
Game Show View (frontend/src/GameShowView.js)
- Current question display
- Player avatars
- Host quips and commentary
- Winner announcements
- Final leaderboard
Game Master View (frontend/src/GameMasterView.js)
- Game configuration (number of questions, topics)
- Game flow controls (start/end game, next question)
- Player list and score tracking
- Round monitoring
- Clone the repository:
git clone https://github.com/cheeragpatel/quiz-game.git
- Navigate to the project directory:
cd quiz-game
- Install the dependencies:
npm install
- Open the webapp in your browser.
- Navigate to the registration page.
- Enter your GitHub handle and submit the form.
- Your GitHub avatar will be displayed as your profile picture.
- Open the webapp in your browser.
- Navigate to the game master view.
- Use the controls to start/end the game and move to the next question.
- Configure the number of questions using the provided user interface element (text box or dropdown menu).
- Open the webapp in your browser.
- Navigate to the game show view.
- The current question and a progress bar for responses will be displayed.
- Once everyone has responded, the winner will be shown with a game show host styled quip.
- The game will then move to the next question.
- At the end, the scores will be tallied, and the winner will be displayed.
backend/questionGenerator.js
: Interacts with GPT-4 for question generation and fetches questions based on nerdy/geeky pop culture references.backend/virtualHost.js
: Implements a virtual host function using GPT-4 for dynamic hosting.
frontend/registrationForm.js
: Implements a registration form that accepts GitHub handles and fetches/displays GitHub avatars as profile pictures.frontend/gameShowView.js
: Implements a game show view with dynamic question display, progress bar, and winner display with a quip using GPT-4.frontend/gameMasterView.js
: Adds controls for the game master to start/end the game, move to the next question, and set the number of questions.
- Open the repository in a GitHub Codespace.
- Follow the installation steps to set up the project.
- Start the development server:
npm start
- Open the webapp in the Codespace browser.
- Open the webapp in your browser.
- Navigate to the registration page.
- Enter your GitHub handle and submit the form.
- Your GitHub avatar will be displayed as your profile picture.
- Open the webapp in your browser.
- Navigate to the game master view.
- Use the controls to start/end the game and move to the next question.
- Configure the number of questions using the provided user interface element (text box or dropdown menu).
- Ensure you have installed all dependencies by running
npm install
in the root directory. - Start the combined server using the following command:
npm start
- The frontend and backend servers will run simultaneously.