Untitled
<!DOCTYPE html> <html lang="he" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>משחק דקדוק בעברית</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f2f2f7; margin: 0; padding: 0; text-align: center; color: #1c1c1e; } h1 { background-color: #007aff; color: white; padding: 20px; margin: 0; font-size: 2.5em; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .question { font-size: 1.5em; margin-bottom: 20px; } .options button { width: 100%; padding: 15px; margin: 10px 0; font-size: 1.2em; background-color: #f2f2f7; border: 2px solid #007aff; border-radius: 10px; cursor: pointer; transition: background-color 0.3s; } .options button:hover { background-color: #e5f1ff; } #start { font-size: 1.5em; background-color: #007aff; color: white; padding: 15px 30px; border: none; border-radius: 10px; cursor: pointer; margin-top: 20px; } #start:hover { background-color: #005bb5; } #timer, #score { font-size: 1.5em; margin: 10px 0; } #timer strong, #score strong { color: #007aff; } #result { font-size: 1.3em; margin-top: 20px; font-weight: bold; } footer { margin-top: 20px; font-size: 1em; color: #8e8e93; } </style> </head> <body> <h1>משחק דקדוק בעברית</h1> <div id="score" style="display: none;"><strong>ניקוד:</strong> 0 / 10</div> <div id="timer" style="display: none;"><strong>זמן:</strong> 15 שניות</div> <div class="container"> <button id="start">התחל</button> <div id="quiz" style="display: none;"> <div class="question"></div> <div class="options"></div> </div> <div id="result"></div> </div> <footer>קרדיט לעומרי פיול ולתומר שלום</footer> <script> const allQuestions = [ { question: "מהו הקשר הלוגי במשפט: 'אני לומד כי יש לי מבחן'?", options: ["ניגוד", "סיבה", "ויתור", "זמן"], answer: "סיבה" }, { question: "מהי הצורה הנכונה של שם המספר: '_____ ילדים יצאו לטיול'?", options: ["שבעה", "שבע", "שביעית", "שביעי"], answer: "שבעה" }, { question: "מהו הצירוף השמני במשפט: 'הכלב הגדול רץ מהר'?", options: ["רץ מהר", "הכלב הגדול", "הכלב", "הגדול"], answer: "הכלב הגדול" }, { question: "איזה קשר לוגי מופיע במשפט: 'הלכתי לחנות למרות הגשם'?", options: ["תוצאה", "זמן", "ויתור", "ניגוד"], answer: "ויתור" }, { question: "איזה שם מספר מתאים: '_____ נשים הגיעו למסיבה'?", options: ["שבעה", "שבע", "שביעית", "שביעי"], answer: "שבע" }, { question: "איזו מילה היא צירוף שמני? 'בית הספר שלי הוא גדול מאוד'", options: ["בית הספר", "שלי", "הוא", "גדול מאוד"], answer: "בית הספר" }, { question: "איזה קשר לוגי יש במשפט: 'אני אוכל וגם שותה'?", options: ["זמן", "תוצאה", "תוספת", "ויתור"], answer: "תוספת" }, { question: "מהי הצורה הנכונה של שם המספר? '_____ חודשים חלפו מאז האירוע'", options: ["שתיים", "שניים", "שני", "שתי"], answer: "שניים" }, { question: "איזה קשר לוגי מתאים? 'הלכתי לישון כדי לנוח'?", options: ["סיבה", "מטרה", "זמן", "ניגוד"], answer: "מטרה" }, { question: "מהו הצירוף השמני במשפט: 'החתול היפה ישן בשקט'?", options: ["ישן בשקט", "החתול היפה", "החתול", "היפה"], answer: "החתול היפה" }, // הוספתי עוד כמה שאלות { question: "איזה קשר לוגי מופיע במשפט: 'הלכתי לים לפני שירד הגשם'?", options: ["זמן", "ויתור", "תוצאה", "מטרה"], answer: "זמן" }, { question: "מהו שם המספר הנכון: '_____ תפוחים נשארו בסל'?", options: ["שלושה", "שלוש", "שלישית", "שלישי"], answer: "שלושה" } ]; // מערבב את כל השאלות ובוחר 10 אקראיות const selectedQuestions = allQuestions.sort(() => Math.random() - 0.5).slice(0, 10); let currentQuestionIndex = 0; let score = 0; let timer = 15; let interval; const questionElement = document.querySelector(".question"); const optionsElement = document.querySelector(".options"); const scoreElement = document.getElementById("score"); const timerElement = document.getElementById("timer"); const resultElement = document.getElementById("result"); const startButton = document.getElementById("start"); const quizContainer = document.getElementById("quiz"); startButton.addEventListener("click", () => { startButton.style.display = "none"; scoreElement.style.display = "block"; timerElement.style.display = "block"; quizContainer.style.display = "block"; startQuiz(); }); function startQuiz() { showQuestion(); interval = setInterval(updateTimer, 1000); } function showQuestion() { if (currentQuestionIndex >= selectedQuestions.length) { clearInterval(interval); questionElement.innerHTML = "סיימת את החידון!"; optionsElement.innerHTML = ""; resultElement.innerHTML = `הניקוד שלך: ${score} מתוך ${selectedQuestions.length}`; return; } const currentQuestion = selectedQuestions[currentQuestionIndex]; questionElement.innerHTML = currentQuestion.question; optionsElement.innerHTML = ""; const shuffledOptions = [...currentQuestion.options].sort(() => Math.random() - 0.5); shuffledOptions.forEach((option) => { const button = document.createElement("button"); button.textContent = option; button.onclick = () => checkAnswer(option, currentQuestion.answer); optionsElement.appendChild(button); }); timer = 15; updateTimer(); } function checkAnswer(selected, correct) { if (selected === correct) { score++; resultElement.innerHTML = "<span style='color: green;'>תשובה נכונה!</span>"; } else { resultElement.innerHTML = "<span style='color: red;'>תשובה שגויה!</span>"; } scoreElement.innerHTML = `<strong>ניקוד:</strong> ${score} / ${selectedQuestions.length}`; currentQuestionIndex++; setTimeout(showQuestion, 1000); } function updateTimer() { timer--; timerElement.innerHTML = `<strong>זמן:</strong> ${timer} שניות`; if (timer === 0) { checkAnswer(null, selectedQuestions[currentQuestionIndex].answer); } } </script> </body> </html>
Leave a Comment