109 lines
No EOL
4.3 KiB
HTML
109 lines
No EOL
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Educational Tic Tac Toe</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Educational Tic Tac Toe</h1>
|
|
|
|
<div class="game-info">
|
|
<div class="player-info">
|
|
<div id="player1" class="player active">
|
|
<span class="player-symbol">X</span>
|
|
<span class="player-name">Player 1</span>
|
|
<span class="player-score">0</span>
|
|
</div>
|
|
<div id="player2" class="player">
|
|
<span class="player-symbol">O</span>
|
|
<span class="player-name">Player 2</span>
|
|
<span class="player-score">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="game-controls">
|
|
<button id="resetBtn">Reset Game</button>
|
|
<button id="newGameBtn">New Game</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-board" id="gameBoard">
|
|
<div class="cell" data-index="0"></div>
|
|
<div class="cell" data-index="1"></div>
|
|
<div class="cell" data-index="2"></div>
|
|
<div class="cell" data-index="3"></div>
|
|
<div class="cell" data-index="4"></div>
|
|
<div class="cell" data-index="5"></div>
|
|
<div class="cell" data-index="6"></div>
|
|
<div class="cell" data-index="7"></div>
|
|
<div class="cell" data-index="8"></div>
|
|
</div>
|
|
|
|
<div id="questionModal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>Answer the question to make your move</h2>
|
|
<div id="timerContainer" class="timer-container">
|
|
<div id="timerBar" class="timer-bar"></div>
|
|
<div id="timerText" class="timer-text"></div>
|
|
</div>
|
|
<div id="questionText" class="question-text"></div>
|
|
|
|
<div id="answerOptions" class="answer-options">
|
|
<!-- Answer options will be inserted here dynamically -->
|
|
</div>
|
|
|
|
<div id="feedback" class="feedback"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gameOverModal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 id="gameResult">Game Over</h2>
|
|
<button id="playAgainBtn">Play Again</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings">
|
|
<h3>Game Settings</h3>
|
|
<div class="setting-group">
|
|
<label for="questionType">Question Type:</label>
|
|
<select id="questionType">
|
|
<option value="truefalse">True/False</option>
|
|
<option value="multiplechoice" selected>Multiple Choice</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-group">
|
|
<label for="questionLanguage">Language:</label>
|
|
<select id="questionLanguage">
|
|
<option value="english">English</option>
|
|
<option value="arabic" selected>Arabic</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-group">
|
|
<label for="questionCategory">Category:</label>
|
|
<select id="questionCategory">
|
|
<option value="math">Mathematics</option>
|
|
<option value="islamic" selected>Islamic</option>
|
|
<option value="beginners">Beginners Arabic</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-group">
|
|
<label for="questionTimer">Time Limit (seconds):</label>
|
|
<select id="questionTimer">
|
|
<option value="0">No Limit</option>
|
|
<option value="5" selected>5 Seconds</option>
|
|
<option value="10">10 Seconds</option>
|
|
<option value="15">15 Seconds</option>
|
|
<option value="30">30 Seconds</option>
|
|
</select>
|
|
</div>
|
|
<button id="applySettingsBtn">Apply Settings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="questions.js"></script>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html> |