TechFeud is a real-time, interactive, web-based trivia game inspired by "Family Feud." Designed specifically for classroom engagement and live presentations, it features a dual-screen architecture: a Game Board meant to be projected to the class, and a private Host Dashboard where the instructor controls the flow of the game.
- Real-Time Synchronization: Powered by Socket.io, every action the host takes instantly updates the projector screen without needing a page refresh.
- Projector-Optimized UI: High-contrast, dark-mode, aesthetic with smooth animations and responsive scaling.
- Built-In Sound Effects: No heavy MP3 files needed! Sound cues (correct dings, buzzer strikes, fanfare) are synthesized natively in the browser via the Web Audio API.
- Fast Money Mode: A specialized rapid-fire final round supporting two players and dynamic countdown timers.
- Picture Guess Mini-Game: An interactive visual round where teams guess the subject of an uploaded image, complete with hints and custom points.
- Live Playlist Queue: The host can queue an unlimited number of Normal Rounds, Oral Recitation questions, and Picture Guess rounds on the fly.
- Live Question Manager: A built-in CRUD dashboard allowing the host to create, edit, delete, and import custom questions and images dynamically.
- State Persistence: The game state and question banks are automatically saved to disk (
data/questions.json), preventing data loss during unexpected restarts.
The landing page where instructors choose between the Game Board, Host Dashboard, or Game Manual.
The projector-optimized display that students see — featuring the standby screen, live questions, scores, and strikes.
The instructor's private control panel for managing rounds, revealing answers, adding strikes, and awarding points.
The Fast Money / Oral Recitation mode where the host queues rapid-fire questions with custom point values.
The image-based mini-game editor where the host uploads pictures, sets answers, hints, and point values.
A comprehensive built-in manual explaining game mechanics, rules, and the TechFeud point system.
- Node.js (v14 or higher recommended)
- A modern web browser (Chrome, Edge, Firefox)
- Download the project and navigate to the project folder (e.g.,
C:\xampp\htdocs\TechFeud). - Install dependencies:
Open your terminal/command prompt in the project folder and run:
npm install
- Start the server:
(Alternatively, run
npm start
node server.js) - Open the game in your browser:
- Game Board (Projector):
http://localhost:3000/board.html - Host Dashboard (Private):
http://localhost:3000/host.html
- Game Board (Projector):
Tip: For a classroom setup, drag the Game Board tab to your extended display (projector) and press F11 for full screen. Keep the Host Dashboard on your laptop screen.
- Divide the class into two teams (Team A and Team B).
- Open the Host Dashboard, go to Settings, and rename the teams if desired.
- Ensure you have enough questions in your Question Bank.
- The Face-Off: One representative from each team comes to the front. The host reads the question. The first student to buzz in (or raise their hand) gets to answer.
- Control: If the student's answer is the #1 most popular answer on the board, their team takes control. If not, the other student gets a chance to guess a higher-ranked answer to steal control.
- Playing the Board: The team in control takes turns guessing the remaining hidden answers.
- Strikes (✕): If a student guesses an answer that is not on the board, the host clicks Add Strike. If the team accumulates 3 Strikes, they lose control of the board.
- Stealing: The opposing team now gets one single guess. If they guess any remaining answer correctly, the host clicks Steal for Team X, and that team steals all the banked points for the round! If they miss, the original team keeps the points.
- Awarding Points: Once all answers are revealed (or the round ends via a steal), the host clicks Award to Team X to finalize the score.
- The winning team selects two players. Player 2 leaves the room (or covers their ears).
- Player 1: The host starts the Fast Money timer (usually 20-30 seconds). Player 1 answers 5 rapid-fire questions. If they pass, the host can come back to it.
- Player 2: Player 2 returns. The timer is set slightly higher (e.g., 25 seconds). They answer the same 5 questions. If they duplicate Player 1's answer, they must guess again.
- Winning: If the combined score of Player 1 and Player 2 exceeds 200 points, the team wins the grand prize!
- The host selects a queued image to display on the Game Board.
- Teams race to identify the image based on the picture and an optional hint provided on-screen.
- The host controls strikes for incorrect guesses and can instantly reveal the hidden answer.
- The points assigned to the image are awarded to the winning team.
TechFeud is designed to be easily tailored to any subject (IT, Science, History, etc.). You can manage your questions directly from the Host Dashboard.
- Go to the Create Question or Picture Guess section in the Host Dashboard.
- Select whether the question is for a Normal Round, Oral Recitation, or upload an image for Picture Guess.
- For normal rounds, enter the question text and exactly 5 answers.
- Rule of 100: For Normal Rounds, the points for all 5 answers must exactly total 100. A live progress bar will turn green when you hit perfectly 100.
- Click Add to Bank.
Scroll down to the Question Bank section. You will see an Edit (✏️) and Delete (🗑️) button next to every question. Clicking Edit will load the question back into the editor for quick adjustments.
If you have generated questions using an AI tool (like ChatGPT), you can:
- Single Question Import: Click the
📥 Import JSON for Roundbutton in the editor and paste a raw JSON object. - Full Bank Upload: In the Settings section, upload a full
questions.jsonfile to completely overwrite the current bank.
Example Question JSON Format:
{
"question": "Name a popular programming language.",
"answers": [
{ "text": "Python", "points": 40 },
{ "text": "JavaScript", "points": 25 },
{ "text": "Java", "points": 15 },
{ "text": "C++", "points": 10 },
{ "text": "C#", "points": 10 }
]
}- Backend: Node.js, Express.js
- Real-Time Communication: Socket.io
- Frontend: Vanilla HTML5, CSS3 (CSS Variables, Flexbox/Grid), Vanilla JavaScript
- Storage: Local JSON file read/writes (No external database required)