90 lines
3.8 KiB
HTML
90 lines
3.8 KiB
HTML
<!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> |