diff --git a/public/index.html b/public/index.html index d0d9c7ed986309f43c1a5ba54f6131821f607731..af429fd4aa34face2363f4ce3a9e0460055eaa23 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,26 @@ <div class="home-content"> <h1>Trivia Game</h1> <p>Select your options and click Play</p> + + <div id="gameSettings"> + <label for="numQuestions">Number of Questions:</label> + <input type="number" id="numQuestions" min="1" max="50" value="10"> + + <label for="category">Category:</label> + <select id="category"> + <option value="9">General Knowledge</option> + <option value="17">Science & Nature</option> + <option value="23">History</option> + </select> + + <label for="difficulty">Difficulty:</label> + <select id="difficulty"> + <option value="easy">Easy</option> + <option value="medium">Medium</option> + <option value="hard">Hard</option> + </select> + </div> + <button class="start-button" id="startGame">Play</button> </div> </section> @@ -29,7 +49,12 @@ <h2 id="question">Question will appear here</h2> <div id="options">Options will appear here</div> <p id="score">Score: 0</p> - <button id="nextQuestion" style="display:none;">Next Question</button> + </section> + + <section id="endGameArea" style="display:none;"> + <h2>Game Over!</h2> + <p id="winner">The winner is...</p> + <button id="resetGame">Play Again</button> </section> </main> <script src="/socket.io/socket.io.js"></script>