Untitled
unknown
plain_text
2 months ago
8.4 kB
5
Indexable
<!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>Editor is loading...
Leave a Comment