SanabhiG/science-bowl-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Science Bowl buzzer system

Browse Source
This commit is contained in:
SanabhiG
2026-01-20 23:00:07 -06:00
commit e4f1e17edb
8 changed files with 885 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
display.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Bowl - Moderator Display</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="display-body">
<div class="display-container">
<div class="scoreboard">
<div class="player-score player-1">
<h3>🔴 Player 1</h3>
<div class="score" id="score1">0</div>
</div>
<div class="player-score player-2">
<h3>🔵 Player 2</h3>
<div class="score" id="score2">0</div>
</div>
<div class="player-score player-3">
<h3>🟢 Player 3</h3>
<div class="score" id="score3">0</div>
</div>
<div class="player-score player-4">
<h3>🟡 Player 4</h3>
<div class="score" id="score4">0</div>
</div>
</div>
<div class="buzzer-indicator" id="buzzerIndicator">
<div class="buzzer-lights">
<div class="light player-1" id="light1"></div>
<div class="light player-2" id="light2"></div>
<div class="light player-3" id="light3"></div>
<div class="light player-4" id="light4"></div>
</div>
<div class="buzzed-player" id="buzzedPlayer"></div>
</div>
<div class="question-section">
<div class="question-header">
<span class="question-category" id="questionCategory">CATEGORY</span>
<span class="question-number">Question <span id="questionNum">1</span>/25</span>
</div>
<div class="question-text" id="questionText">
Click "New Question" to start
</div>
</div>
<div class="answer-section" id="answerSection" style="display: none;">
<h3>Player Answer:</h3>
<div class="player-answer" id="playerAnswer"></div>
<h3>Correct Answer:</h3>
<div class="correct-answer" id="correctAnswer"></div>
</div>
<div class="controls">
<button id="newQuestion" class="control-btn primary">New Question</button>
<button id="activateBuzzer" class="control-btn" disabled>Activate Buzzers</button>
<button id="markCorrect" class="control-btn success" style="display: none;">✓ Correct (+4)</button>
<button id="markIncorrect" class="control-btn danger" style="display: none;">✗ Incorrect (-4)</button>
<button id="showAnswer" class="control-btn" style="display: none;">Show Answer</button>
<button id="resetGame" class="control-btn warning">Reset Game</button>
</div>
<div class="category-filter">
<label>
<input type="checkbox" class="category-checkbox" value="PHYSICS" checked> Physics
</label>
<label>
<input type="checkbox" class="category-checkbox" value="CHEMISTRY" checked> Chemistry
</label>
<label>
<input type="checkbox" class="category-checkbox" value="BIOLOGY" checked> Biology
</label>
<label>
<input type="checkbox" class="category-checkbox" value="MATH" checked> Math
</label>
<label>
<input type="checkbox" class="category-checkbox" value="EARTH SCIENCE" checked> Earth Science
</label>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/9.17.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.1/firebase-database-compat.js"></script>
<script src="config.js"></script>
<script src="display.js"></script>
</body>
</html>