DavoCorleone/PythonLearning-Game
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Python Learning Game</title>7 <style>8 9 .music-controls {10 position: fixed;11 bottom: 20px;12 right: 20px;13 background: rgba(48, 105, 152, 0.9);14 padding: 10px;15 border-radius: 10px;16 display: flex;17 align-items: center;18 gap: 10px;19 z-index: 1000;20 }21 22 .music-controls button {23 width: 40px;24 height: 40px;25 border-radius: 50%;26 display: flex;27 align-items: center;28 justify-content: center;29 font-size: 20px;30 }31 32 .volume-slider {33 width: 100px;34 margin: 0 10px;35 }36 * {37 margin: 0;38 padding: 0;39 box-sizing: border-box;40 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;41 }42 43 body {44 background: #1a1a1a;45 color: #fff;46 min-height: 100vh;47 display: flex;48 flex-direction: column;49 align-items: center;50 }51 52 .container {53 max-width: 1200px;54 width: 90%;55 margin: 2rem auto;56 }57 58 .header {59 text-align: center;60 margin-bottom: 2rem;61 padding: 1rem;62 background: linear-gradient(45deg, #306998, #FFE873);63 border-radius: 10px;64 box-shadow: 0 4px 6px rgba(0,0,0,0.1);65 }66 67 .game-container {68 display: grid;69 grid-template-columns: 1fr 1fr;70 gap: 2rem;71 margin-bottom: 2rem;72 }73 74 .code-editor {75 background: #2d2d2d;76 padding: 1rem;77 border-radius: 10px;78 min-height: 400px;79 position: relative;80 }81 82 .code-editor textarea {83 width: 100%;84 height: 250px;85 background: #1a1a1a;86 color: #fff;87 padding: 1rem;88 border: none;89 border-radius: 5px;90 resize: none;91 font-family: monospace;92 }93 94 .preview {95 background: #2d2d2d;96 padding: 1rem;97 border-radius: 10px;98 min-height: 400px;99 }100 101 .challenge {102 background: #333;103 padding: 1rem;104 border-radius: 5px;105 margin-bottom: 1rem;106 }107 108 .button-group {109 display: flex;110 gap: 1rem;111 margin-top: 1rem;112 }113 114 button {115 background: #306998;116 color: white;117 border: none;118 padding: 0.5rem 1rem;119 border-radius: 5px;120 cursor: pointer;121 transition: all 0.3s ease;122 }123 124 button:hover {125 opacity: 0.9;126 transform: translateY(-2px);127 }128 129 .hint-button {130 background: #FFE873;131 color: #333;132 }133 134 .solution-button {135 background: #4B8BBE;136 }137 138 .progress-bar {139 width: 100%;140 height: 20px;141 background: #333;142 border-radius: 10px;143 margin: 1rem 0;144 overflow: hidden;145 }146 147 .progress {148 width: 0%;149 height: 100%;150 background: linear-gradient(45deg, #306998, #FFE873);151 transition: width 0.5s ease;152 }153 154 .score {155 position: absolute;156 top: 1rem;157 right: 1rem;158 background: #306998;159 padding: 0.5rem 1rem;160 border-radius: 20px;161 }162 163 .hint-box, .solution-box {164 background: #3a3a3a;165 padding: 1rem;166 border-radius: 5px;167 margin-top: 1rem;168 display: none;169 }170 171 .hint-box.show, .solution-box.show {172 display: block;173 animation: fadeIn 0.3s ease;174 }175 176 .solution-box {177 border-left: 3px solid #306998;178 }179 180 @keyframes fadeIn {181 from { opacity: 0; transform: translateY(-10px); }182 to { opacity: 1; transform: translateY(0); }183 }184 185 @media (max-width: 768px) {186 .game-container {187 grid-template-columns: 1fr;188 }189 }190 </style>191</head>192<body>193 <div class="container">194 <div class="header">195 <h1>Python Learning Game</h1>196 <p>Learn Python through interactive challenges!</p>197 </div>198 199 <div class="game-container">200 <div class="code-editor">201 <div class="score">Score: <span id="score">0</span></div>202 <div class="challenge" id="challenge"></div>203 <textarea id="code" placeholder="Write your Python code here..."></textarea>204 <div class="button-group">205 <button onclick="checkCode()">Run Code</button>206 <button class="hint-button" onclick="showHint()">Show Hint (-2 points)</button>207 <button class="solution-button" onclick="showSolution()">Show Solution (-5 points)</button>208 </div>209 <div class="hint-box" id="hint-box"></div>210 <div class="solution-box" id="solution-box"></div>211 </div>212 213 <div class="preview">214 <h3>Output</h3>215 <div id="output"></div>216 <div class="progress-bar">217 <div class="progress" id="progress"></div>218 </div>219 </div>220 </div>221 </div>222 223 <script>224 const pythonChallenges = {225 basics: {226 title: "Python Basics",227 generate: () => {228 const tasks = [229 {230 description: "Create a variable 'message' with the value 'Hello Python!'",231 hint: "In Python, you can create a string variable using quotes",232 solution: "message = 'Hello Python!'",233 test: (code) => code.includes('message') && code.includes('Hello Python!')234 },235 {236 description: "Create a variable 'number' with the value 42",237 hint: "Python numbers don't need quotes",238 solution: "number = 42",239 test: (code) => code.includes('number') && code.includes('42')240 }241 ];242 return tasks[Math.floor(Math.random() * tasks.length)];243 }244 },245 246 functions: {247 title: "Functions",248 generate: () => {249 const num1 = Math.floor(Math.random() * 10) + 1;250 const num2 = Math.floor(Math.random() * 10) + 1;251 return {252 description: `Create a function 'add_numbers' that returns the sum of ${num1} and ${num2}`,253 hint: "Define a function using 'def' and use the return keyword",254 solution: `def add_numbers():\n return ${num1} + ${num2}`,255 test: (code) => code.includes('def add_numbers') && code.includes('return') && 256 code.includes(`${num1}`) && code.includes(`${num2}`)257 };258 }259 },260 261 loops: {262 title: "Loops",263 generate: () => {264 const n = Math.floor(Math.random() * 5) + 3;265 return {266 description: `Create a for loop that prints numbers from 1 to ${n}`,267 hint: "Use range() function with a for loop",268 solution: `for i in range(1, ${n + 1}):\n print(i)`,269 test: (code) => code.includes('for') && code.includes('range') && 270 code.includes('print') && code.includes(`${n}`)271 };272 }273 }274 };275 276 const challenges = Object.keys(pythonChallenges).reduce((acc, key) => {277 const template = pythonChallenges[key];278 for(let i = 0; i < 2; i++) {279 const challenge = template.generate();280 acc.push({281 title: template.title,282 ...challenge283 });284 }285 return acc;286 }, []);287 288 challenges.sort(() => Math.random() - 0.5);289 290 let currentChallenge = 0;291 let score = 0;292 293 function loadChallenge() {294 const challenge = challenges[currentChallenge];295 document.getElementById('challenge').innerHTML = `296 <h3>${challenge.title}</h3>297 <p>${challenge.description}</p>298 `;299 document.getElementById('hint-box').classList.remove('show');300 document.getElementById('solution-box').classList.remove('show');301 }302 303 function showHint() {304 const challenge = challenges[currentChallenge];305 const hintBox = document.getElementById('hint-box');306 hintBox.innerHTML = challenge.hint + '<div class="penalty-warning">(-2 points)</div>';307 hintBox.classList.add('show');308 score = Math.max(0, score - 2);309 document.getElementById('score').textContent = score;310 }311 312 function showSolution() {313 const challenge = challenges[currentChallenge];314 const solutionBox = document.getElementById('solution-box');315 solutionBox.innerHTML = `<pre>${challenge.solution}</pre><div class="penalty-warning">(-5 points)</div>`;316 solutionBox.classList.add('show');317 score = Math.max(0, score - 5);318 document.getElementById('score').textContent = score;319 }320 321 function checkCode() {322 const code = document.getElementById('code').value;323 const challenge = challenges[currentChallenge];324 325 if (challenge.test(code)) {326 score += 10;327 document.getElementById('score').textContent = score;328 document.getElementById('output').innerHTML = `329 <div style="color: #90EE90">Success! Challenge completed!</div>330 `;331 332 if (currentChallenge < challenges.length - 1) {333 currentChallenge++;334 document.getElementById('code').value = '';335 loadChallenge();336 }337 338 const progress = ((currentChallenge) / challenges.length) * 100;339 document.getElementById('progress').style.width = progress + '%';340 } else {341 document.getElementById('output').innerHTML = `342 <div style="color: #FFB6C1">Try again! Your code didn't pass the test.</div>343 `;344 }345 }346 347 loadChallenge();348 </script>349<div class="music-controls">350 <button onclick="toggleMusic()" id="musicToggle">▶</button>351 <input type="range" class="volume-slider" min="0" max="100" value="50" oninput="adjustVolume(this.value)">352</div>353 354<script src="https://www.youtube.com/iframe_api"></script>355 356<div class="music-controls">357 <button onclick="toggleMusic()" id="musicToggle">⏸</button>358 <input type="range" class="volume-slider" min="0" max="100" value="50" oninput="adjustVolume(this.value)">359</div>360 361<script>362 let player;363 let isMusicPlaying = true;364 function onYouTubeIframeAPIReady() {365 player = new YT.Player('youtube-player', {366 videoId: '4xDzrJKXOOY', 367 playerVars: {368 autoplay: 1,369 controls: 0,370 loop: 1,371 modestbranding: 1,372 rel: 0,373 showinfo: 0,374 mute: 0,375 },376 events: {377 onReady: (event) => {378 event.target.playVideo();379 player.setVolume(50); 380 },381 },382 });383 }384 function toggleMusic() {385 const btn = document.getElementById('musicToggle');386 if (isMusicPlaying) {387 player.pauseVideo();388 btn.textContent = '▶';389 } else {390 player.playVideo();391 btn.textContent = '⏸';392 }393 isMusicPlaying = !isMusicPlaying;394 }395 function adjustVolume(value) {396 player.setVolume(value);397 }398</script>399<div id="youtube-player" style="display:none;"></div>400 401</body>402</html>