probability_game.html
<!DOCTYPE html> <html lang="he"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>גלגל ההסתברות</title> <style> body { font-family: Arial, sans-serif; text-align: center; direction: rtl; background-color: #f5f5f5; } #wheel { margin: 20px auto; width: 200px; height: 200px; border-radius: 50%; border: 5px solid #333; background: conic-gradient( red 0% 16.6%, blue 16.6% 33.3%, green 33.3% 50%, yellow 50% 66.6%, orange 66.6% 83.3%, purple 83.3% 100% ); } #question, #result, #score { margin-top: 20px; font-size: 18px; } button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007BFF; color: white; border: none; border-radius: 5px; } button:hover { background-color: #0056b3; } </style> </head> <body> <h1>גלגל ההסתברות</h1> <div id="wheel"></div> <div id="question"></div> <button id="spinButton">סובב את הגלגל</button> <div id="result"></div> <div id="score">ניקוד: 0</div> <script> const colors = ['אדום', 'כחול', 'ירוק', 'צהוב', 'כתום', 'סגול']; let score = 0; function getRandomInt(max) { return Math.floor(Math.random() * max); } function spinWheel() { const randomIndex = getRandomInt(colors.length); const chosenColor = colors[randomIndex]; document.getElementById('result').innerText = `הגלגל נעצר על ${chosenColor}`; askQuestion(chosenColor); } function askQuestion(color) { const randomQuestion = getRandomInt(2); let questionText = ''; if (randomQuestion === 0) { questionText = `מה ההסתברות שהגלגל ייעצר שוב על ${color}?`; } else { questionText = `מה ההסתברות שהגלגל ייעצר על צבע שונה מ-${color}?`; } document.getElementById('question').innerText = questionText; } document.getElementById('spinButton').addEventListener('click', () => { spinWheel(); score += 10; document.getElementById('score').innerText = `ניקוד: ${score}`; }); </script> </body> </html>
Leave a Comment