ahmad/games
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init: initialize project - 2 games

Browse source
This commit is contained in:
Ahmad EL Masri 2025-06-05 06:32:33 +02:00
commit 4740d0003b
Signed by: ahmad
GPG key ID: 592CDF2A42C69D74
7 changed files with 1784 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

109
tictactoe/index.html Normal file
View file

@ -0,0 +1,109 @@
<!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>