bhad barbie /* עיצוב כללי */ * { box-sizing: border-box; font-family: 'Arial Hebrew', Arial, sans-serif; } body { direction: rtl; margin: 0; padding: 20px; background: linear-gradient(135deg, #f5f0e6 0%, #e6e6fa 100%); color: #333; line-height: 1.6; min-height: 100vh; } .header { text-align: center; margin-bottom: 30px; background: linear-gradient(135deg, #3a5e8c 0%, #2a4569 100%); color: white; padding: 25px; border-radius: 16px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); position: relative; overflow: hidden; } .header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); } .header h1 { margin: 0; font-size: 28px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .header p { margin: 10px 0 0; font-size: 18px; opacity: 0.9; } .games-container { max-width: 900px; margin: 0 auto; } .game-section { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 16px; padding: 25px; margin-bottom: 35px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border: 1px solid #e0e0e0; position: relative; overflow: hidden; } .game-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 100%); } h2 { color: #3a5e8c; border-bottom: 2px dashed #ccc; padding-bottom: 12px; margin-top: 0; display: flex; align-items: center; gap: 10px; } h2 i { font-size: 24px; color: #ff7e5f; } button { background: linear-gradient(135deg, #3a5e8c 0%, #2a4569 100%); color: white; border: none; padding: 14px 24px; border-radius: 8px; cursor: pointer; font-size: 17px; margin: 15px 0; transition: all 0.3s; width: 100%; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; gap: 10px; } button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.25); } button:active { transform: translateY(0); } /* עיצוב למשחק הזיכרון */ .memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 25px 0; } .memory-card { height: 110px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; transform-style: preserve-3d; transition: transform 0.5s; box-shadow: 0 4px 8px rgba(0,0,0,0.15); position: relative; } .memory-card .front, .memory-card .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 8px; padding: 12px; text-align: center; } .memory-card .front { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); font-size: 28px; color: #2a4569; } .memory-card .back { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); transform: rotateY(180deg); font-size: 17px; font-weight: bold; color: #2a4569; flex-direction: column; gap: 8px; } .memory-card .back i { font-size: 24px; color: #ff7e5f; } .memory-card.flipped { transform: rotateY(180deg); } .memory-card.matched .back { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); } /* עיצוב למשחק ההתאמות */ .matching-game { display: flex; flex-direction: column; gap: 12px; } .match-item { background: linear-gradient(135deg, #e8eeff 0%, #d9e6ff 100%); padding: 18px; border-radius: 10px; cursor: pointer; transition: all 0.3s; border: 2px solid #ccd9ea; display: flex; align-items: center; gap: 12px; } .match-item i { font-size: 20px; color: #3a5e8c; } .match-item.selected { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); transform: scale(1.02); } .match-item.matched { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); cursor: default; } /* עיצוב לחידון */ .quiz-container { margin: 25px 0; } .quiz-question { font-weight: bold; margin-bottom: 18px; font-size: 19px; color: #3a5e8c; padding: 15px; background: linear-gradient(135deg, #e8eeff 0%, #d9e6ff 100%); border-radius: 10px; border-left: 5px solid #3a5e8c; display: flex; align-items: center; gap: 12px; } .quiz-question i { color: #ff7e5f; font-size: 22px; } .quiz-options { display: flex; flex-direction: column; gap: 12px; } .quiz-option { padding: 15px; background: linear-gradient(135deg, #e8eeff 0%, #d9e6ff 100%); border-radius: 10px; cursor: pointer; transition: all 0.3s; border: 2px solid #ccd9ea; display: flex; align-items: center; gap: 12px; } .quiz-option i { font-size: 18px; color: #3a5e8c; } .quiz-option:hover { background: linear-gradient(135deg, #d9e6ff 0%, #c2d6ff 100%); transform: translateX(-5px); } .quiz-option.correct { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #1d4c3f; } .quiz-option.incorrect { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); color: #7a2c2c; } .quiz-feedback { margin-top: 18px; font-weight: bold; min-height: 28px; padding: 15px; border-radius: 8px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; } .feedback-correct { background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); color: #2c5116; } .feedback-incorrect { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); color: #721c24; } .score-display { text-align: center; font-size: 18px; margin: 15px 0; padding: 12px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); border-radius: 8px; color: #2a4569; font-weight: bold; } /* התאמה למובייל */ @media (max-width: 600px) { .memory-board { grid-template-columns: repeat(3, 1fr); } .memory-card { height: 90px; } .memory-card .back { font-size: 14px; } .game-section { padding: 18px; } .header h1 { font-size: 22px; } .header p { font-size: 16px; } h2 { font-size: 20px; } .quiz-question { font-size: 17px; } } /* אנימציות */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} } .bounce { animation: bounce 1s; } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.05);} 100% {transform: scale(1);} } .pulse { animation: pulse 0.5s; } /* עיצוב כפתורים נוספים */ .game-buttons { display: flex; gap: 15px; margin-top: 20px; } .game-buttons button { flex: 1; } .secondary-btn { background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) !important; } // משחק זיכרון – מונחים מפרשת כי תצא document.addEventListener('DOMContentLoaded', function() { const memoryCards = [ {text: 'בן סורר ומורה', emoji: '👦'}, {text: 'בן סורר ומורה', emoji: '👦'}, {text: 'שילוח הקן', emoji: '🐦'}, {text: 'שילוח הקן', emoji: '🐦'}, {text: 'יציאה למלחמה', emoji: '⚔️'}, {text: 'יציאה למלחמה', emoji: '⚔️'}, {text: 'אשת יפת תואר', emoji: '👰'}, {text: 'אשת יפת תואר', emoji: '👰'}, {text: 'לא תחסום שור', emoji: '🐂'}, {text: 'לא תחסום שור', emoji: '🐂'}, {text: 'יבום וחליצה', emoji: '💍'}, {text: 'יבום וחליצה', emoji: '💍'} ]; const memoryBoard = document.getElementById('memory-board'); const resetMemoryBtn = document.getElementById('reset-memory'); let hasFlippedCard = false; let lockBoard = false; let firstCard, secondCard; let matchedPairs = 0; function initializeMemoryGame() { memoryBoard.innerHTML = "; matchedPairs = 0; const shuffledCards = shuffleArray([…memoryCards]); shuffledCards.forEach((card, index) => { const cardElement = document.createElement('div'); cardElement.classList.add('memory-card'); cardElement.dataset.card = card.text; cardElement.dataset.index = index; // יצירת הצד הקדמי של הקלף const front = document.createElement('div'); front.classList.add('front'); front.innerHTML = ''; // יצירת הצד האחורי של הקלף const back = document.createElement('div'); back.classList.add('back'); back.innerHTML = ``; cardElement.appendChild(front); cardElement.appendChild(back); cardElement.addEventListener('click', flipCard); memoryBoard.appendChild(cardElement); }); } function flipCard() { if (lockBoard) return; if (this === firstCard) return; if (this.classList.contains('matched')) return; this.classList.add('flipped'); this.classList.add('pulse'); if (!hasFlippedCard) { // לחיצה ראשונה hasFlippedCard = true; firstCard = this; return; } // לחיצה שנייה secondCard = this; checkForMatch(); } function checkForMatch() { let isMatch = firstCard.dataset.card === secondCard.dataset.card; if (isMatch) { disableCards(); matchedPairs++; if (matchedPairs === memoryCards.length / 2) { setTimeout(() => { alert('🎉 כל הכבוד! השלמת את משחק הזיכרון בהצלחה!'); }, 500); } } else { unflipCards(); } } function disableCards() { firstCard.classList.add('matched'); secondCard.classList.add('matched'); firstCard.classList.add('bounce'); secondCard.classList.add('bounce'); resetBoard(); } function unflipCards() { lockBoard = true; setTimeout(() => { firstCard.classList.remove('flipped'); secondCard.classList.remove('flipped'); resetBoard(); }, 1000); } function resetBoard() { [hasFlippedCard, lockBoard] = [false, false]; [firstCard, secondCard] = [null, null]; } function shuffleArray(array) { for (let i = array.length – 1; i > 0; i–) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } resetMemoryBtn.addEventListener('click', initializeMemoryGame); initializeMemoryGame(); // משחק התאמות – פסוקים ופרשנויות const matchingPairs = [ { hebrew: '"כי יהיה לאיש בן סורר ומורה" (דברים כא, יח)', english: 'בן סורר ומורה – דיני בן הממרה פי הוריו', emoji: '👦' }, { hebrew: '"כי תצא למלחמה על אֹיביך" (דברים כא, י)', english: 'דיני אשת יפת תואר', emoji: '👰' }, { hebrew: '"לא תחסום שור בדישו" (דברים כה, ד)', english: 'איסור חסימת בהמה בעת עבודתה', emoji: '🐂' }, { hebrew: '"שלח תשלח את האם" (דברים כב, ז)', english: 'מצוות שילוח הקן', emoji: '🐦' } ]; const matchingGame = document.getElementById('matching-game'); const resetMatchingBtn = document.getElementById('reset-matching'); let selectedItems = []; let matchedItems = 0; function initializeMatchingGame() { matchingGame.innerHTML = "; selectedItems = []; matchedItems = 0; // יצירת מערך מעורב של המונחים בעברית ובאנגלית let allItems = []; matchingPairs.forEach(pair => { allItems.push({ text: `${pair.hebrew} ${pair.emoji}`, type: 'hebrew', pair: pair.english, emoji: pair.emoji }); allItems.push({ text: `${pair.english} ${pair.emoji}`, type: 'english', pair: pair.hebrew, emoji: pair.emoji }); }); // ערבוב המערך allItems = shuffleArray(allItems); // יצירת אלמנטים עבור כל פריט allItems.forEach(item => { const itemElement = document.createElement('div'); itemElement.classList.add('match-item'); itemElement.innerHTML = ` ${item.text}`; itemElement.dataset.type = item.type; itemElement.dataset.pair = item.pair; itemElement.addEventListener('click', selectItem); matchingGame.appendChild(itemElement); }); } function getIconForType(type) { return type === 'hebrew' ? 'quote-right' : 'comment-alt'; } function selectItem() { if (this.classList.contains('matched')) return; if (selectedItems.includes(this)) return; if (selectedItems.length >= 2) return; this.classList.add('selected'); selectedItems.push(this); if (selectedItems.length === 2) { checkMatchingPair(); } } function checkMatchingPair() { const [first, second] = selectedItems; if ((first.dataset.type !== second.dataset.type) && (first.dataset.pair === second.text.split(' ').slice(0, -1).join(' ') || second.dataset.pair === first.text.split(' ').slice(0, -1).join(' '))) { // התאמה נכונה first.classList.add('matched'); second.classList.add('matched'); first.classList.add('bounce'); second.classList.add('bounce'); matchedItems++; if (matchedItems === matchingPairs.length) { setTimeout(() => { alert('🎊 כל ההתאמות נמצאו! כל הכבוד!'); }, 500); } } setTimeout(() => { first.classList.remove('selected'); second.classList.remove('selected'); selectedItems = []; }, 1000); } resetMatchingBtn.addEventListener('click', initializeMatchingGame); initializeMatchingGame(); // חידון – שאלות על פרשת כי תצא const quizData = [ { question: "מה דינו של בן סורר ומורה?", options: ["מלקות", "סקילה", "כופר", "גירוש"], answer: "סקילה", emoji: "👦" }, { question: "מהי מצוות שילוח הקן?", options: ["שילוח ציפורים מהקן", "איסור לקיחת האם עם הבנים", "חובת נתינת צדקה", "שילוח עבדים"], answer: "איסור לקיחת האם עם הבנים", emoji: "🐦" }, { question: "מה אומרת התורה על חסימת שור בדישו?", options: ["מותר", "אסור", "מותר רק בשבת", "אסור רק במועד"], answer: "אסור", emoji: "🐂" }, { question: "מה דינה של אשת יפת תואר?", options: ["מותר להתחתן איתה לאחר תהליך", "אסור להתחתן איתה", "חייבת בגירוש", "מותר רק לאחר גיור"], answer: "מותר להתחתן איתה לאחר תהליך", emoji: "👰" }, { question: "מהי מצוות ייבום?", options: ["נישואי אח עם אשת אחיו המת", "נישואי אחות עם אחיינה", "נישואי דודים", "נישואי בני דודים"], answer: "נישואי אח עם אשת אחיו המת", emoji: "💍" } ]; const quizQuestion = document.getElementById('quiz-question'); const quizOptions = document.getElementById('quiz-options'); const quizFeedback = document.getElementById('quiz-feedback'); const nextQuestionBtn = document.getElementById('next-question'); const restartQuizBtn = document.getElementById('restart-quiz'); const scoreDisplay = document.getElementById('score-display'); let currentQuestion = 0; let score = 0; function loadQuestion() { resetState(); let question = quizData[currentQuestion]; quizQuestion.innerHTML = ` ${question.question} ${question.emoji}`; question.options.forEach(option => { const optionElement = document.createElement('div'); optionElement.classList.add('quiz-option'); optionElement.innerHTML = ` ${option}`; quizOptions.appendChild(optionElement); optionElement.addEventListener('click', selectAnswer); }); updateScoreDisplay(); } function updateScoreDisplay() { scoreDisplay.textContent = `ניקוד: ${score}/${currentQuestion}`; } function resetState() { quizFeedback.textContent = "; quizFeedback.className = 'quiz-feedback'; while (quizOptions.firstChild) { quizOptions.removeChild(quizOptions.firstChild); } } function selectAnswer(e) { const selectedOption = e.target.closest('.quiz-option'); const answer = quizData[currentQuestion].answer; if (selectedOption.textContent.replace('​', ").includes(answer)) { selectedOption.classList.add('correct'); quizFeedback.innerHTML = ` תשובה נכונה!`; quizFeedback.classList.add('feedback-correct'); score++; } else { selectedOption.classList.add('incorrect'); quizFeedback.innerHTML = ` תשובה לא נכונה. התשובה הנכונה היא: ${answer}`; quizFeedback.classList.add('feedback-incorrect'); // הדגשת התשובה הנכונה Array.from(quizOptions.children).forEach(option => { if (option.textContent.replace('​', ").includes(answer)) { option.classList.add('correct'); } }); } // השבתת הלחיצה על אפשרויות נוספות Array.from(quizOptions.children).forEach(option => { option.style.pointerEvents = 'none'; }); updateScoreDisplay(); } nextQuestionBtn.addEventListener('click', () => { currentQuestion++; if (currentQuestion = quizData.length * 0.7) { message = `👍 יישר כח! ציונך: ${score} מתוך ${quizData.length}`; } else { message = `📚 המשך ללמוד! ציונך: ${score} מתוך ${quizData.length}`; } quizQuestion.innerHTML = ` החידון הסתיים!`; quizOptions.innerHTML = "; quizFeedback.innerHTML = message; quizFeedback.className = 'quiz-feedback feedback-correct'; } }); restartQuizBtn.addEventListener('click', () => { currentQuestion = 0; score = 0; loadQuestion(); }); loadQuestion(); }); /* Google Fonts Import for Heebo – Make sure this is loaded by your theme or added to a custom CSS file */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap'); /* Base Styles */ body { margin: 0; padding: 0; font-family: 'Heebo', sans-serif; direction: rtl; background-color: #f8f8f8; /* רקע בהיר יותר לדף */ } .page { display: flex; flex-wrap: wrap; justify-content: center; /* ממורכז */ align-content: flex-start; padding: 20px; gap: 30px; /* רווח גדול יותר בין הקלפים */ max-width: 1200px; /* הגבלה לרוחב המרבי של דף */ margin: 20px auto; /* מרכוז הדף */ background-color: #fff; /* רקע לבן לדף הקלפים */ box-shadow: 0 0 15px rgba(0,0,0,0.05); /* צל עדין לדף */ border-radius: 12px; } .card { width: 100%; /* ברירת מחדל למובייל */ max-width: 380px; /* רוחב מרבי של קלף בודד */ height: auto; min-height: 420px; /* גובה מינימלי למניעת קלפים קצרים מדי */ padding: 25px; box-sizing: border-box; border-radius: 12px; box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* צל בולט יותר */ display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.2s ease-in-out; /* אנימציה בריחוף */ } .card:hover { transform: translateY(-5px); /* אפקט ריחוף */ } .card::before { content: "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2mm solid; border-image: linear-gradient(45deg, #FFD700, #FF69B4) 1; /* צבעי זהב וורוד עזים יותר */ pointer-events: none; border-radius: 10px; } .card-header { font-size: 1.4rem; /* גודל כותרת גדול יותר */ font-weight: bold; margin-bottom: 20px; text-align: center; color: #333; } .card-content { flex-grow: 1; font-size: 1rem; /* גודל טקסט קריא יותר */ line-height: 1.7; color: #555; } .card-content strong { color: #000; } .card-footer { font-size: 0.85rem; text-align: center; margin-top: 20px; color: #777; } .task-item { margin-bottom: 18px; /* רווח גדול יותר בין משימות */ } .task-question { font-weight: bold; margin-bottom: 5px; color: #444; } .task-answer { margin-top: 5px; padding-right: 15px; border-right: 3px solid #eee; /* קו הפרדה עדין לתשובה */ } /* התאמה למחשב שולחני (מעל 768px) */ @media (min-width: 768px) { .page { padding: 40px; justify-content: space-around; align-content: flex-start; } .card { width: 48%; /* 2 קלפים בשורה */ margin: 0; /* מנהל רווח דרך gap ב-page */ } } /* התאמה להדפסה על A4 */ @media print { body { background-color: white !important; margin: 0; padding: 0; font-size: 11pt; /* גודל גופן קטן יותר להדפסה */ } .page { width: 210mm; /* רוחב A4 */ height: 297mm; /* גובה A4 */ padding: 10mm; box-shadow: none; background-color: white; break-after: page; /* שבירת עמוד אחרי הדף */ display: grid; /* שימוש ב-grid לפיזור מדויק יותר */ grid-template-columns: repeat(2, 1fr); /* 2 עמודות */ grid-template-rows: repeat(2, 1fr); /* 2 שורות */ gap: 10mm; /* רווח בין הקלפים בהדפסה */ margin: 0; } .card { width: 85mm; /* רוחב קלף בהדפסה */ height: 110mm; /* גובה קלף בהדפסה */ margin: 0; padding: 5mm; box-shadow: none; /* מונע צל בהדפסה */ border: 1px solid #ddd; /* גבול עדין לקלפים בהדפסה */ border-radius: 5px; page-break-inside: avoid; /* מונע שבירה של קלף באמצע */ } .card::before { border: none; /* מסגרת מעוצבת לא תודפס */ } .card-header { font-size: 1.1rem; margin-bottom: 10px; } .card-content { font-size: 0.85rem; line-height: 1.5; } .card-footer { font-size: 0.75rem; margin-top: 10px; } } @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap'); body { font-family: 'Heebo', sans-serif; } .card-flip { perspective: 1000px; } .card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .card-flip.flipped .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 24px; } .card-back { transform: rotateY(180deg); } .progress-bar { transition: width 0.3s ease; } const flashcards = [ { question: "מה הנושא המרכזי של פרשת כי תצא?", answer: "הפרשה עוסקת בחוקים חברתיים ומוסריים רבים, כולל חוקי משפחה, צדק חברתי ויחסים בין אדם לחברו", icon: "❓", answerIcon: "✨" }, { question: "כמה מצוות יש בפרשת כי תצא?", answer: "בפרשת כי תצא יש 74 מצוות – זה המספר הגבוה ביותר מבין כל הפרשיות בתורה", icon: "🔢", answerIcon: "📊" }, { question: "מה החוק של 'שילוח הקן'?", answer: "אסור לקחת את האם יחד עם הביצים או הגוזלים. יש לשלח את האם ורק אז לקחת את הגוזלים", icon: "🐦", answerIcon: "🪶" }, { question: "מה המשמעות של 'לא תלבש שעטנז'?", answer: "אסור ללבוש בגד שעשוי מתערובת של צמר ופשתן יחד. זהו חוק שאין לו הסבר רציונלי ברור", icon: "👕", answerIcon: "🧵" }, { question: "מה החוק של 'מעקה לגג'?", answer: "חובה לעשות מעקה בגג הבית כדי למנוע נפילה. זהו חוק בטיחות חשוב לשמירה על חיי אדם", icon: "🏠", answerIcon: "🛡️" }, { question: "מה הדין של 'השבת אבידה'?", answer: "חובה להשיב חפץ אבוד לבעליו. אם לא מכירים את הבעלים, יש לשמור על החפץ עד שיבוא לתבוע אותו", icon: "🔍", answerIcon: "🤝" }, { question: "מה החוק של 'לא תחסום שור בדישו'?", answer: "אסור למנוע מבעל חיים לאכול מהתבואה שהוא דש. זהו חוק של צער בעלי חיים וצדק", icon: "🐂", answerIcon: "🌾" }, { question: "מה המשמעות של 'זכור את אשר עשה לך עמלק'?", answer: "מצווה לזכור את המעשה הרע של עמלק שתקף את ישראל מאחור כשיצאו ממצרים, ולמחות את זכרו", icon: "⚔️", answerIcon: "📜" } ]; let currentCard = 0; let knownCards = new Set(); let isFlipped = false; const flashcardElement = document.getElementById('flashcard'); const cardQuestion = document.getElementById('card-question'); const cardAnswer = document.getElementById('card-answer'); const cardIcon = document.getElementById('card-icon'); const answerIcon = document.getElementById('answer-icon'); const cardCounter = document.getElementById('card-counter'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const flipBtn = document.getElementById('flip-btn'); const markKnownBtn = document.getElementById('mark-known'); const resetBtn = document.getElementById('reset-btn'); const knownCount = document.getElementById('known-count'); const totalCount = document.getElementById('total-count'); const completionRate = document.getElementById('completion-rate'); function updateCard() { const card = flashcards[currentCard]; cardQuestion.textContent = card.question; cardAnswer.textContent = card.answer; cardIcon.textContent = card.icon; answerIcon.textContent = card.answerIcon; cardCounter.textContent = `${currentCard + 1} / ${flashcards.length}`; // Reset flip state isFlipped = false; flashcardElement.classList.remove('flipped'); // Update navigation buttons prevBtn.disabled = currentCard === 0; nextBtn.disabled = currentCard === flashcards.length – 1; // Update mark known button if (knownCards.has(currentCard)) { markKnownBtn.textContent = '✅ נלמד'; markKnownBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600'); markKnownBtn.classList.add('bg-green-500', 'hover:bg-green-600'); } else { markKnownBtn.textContent = '✅ יודע'; markKnownBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); markKnownBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600'); } } function updateProgress() { const known = knownCards.size; const total = flashcards.length; const percentage = Math.round((known / total) * 100); progressBar.style.width = `${percentage}%`; progressText.textContent = `${known} / ${total}`; knownCount.textContent = known; completionRate.textContent = `${percentage}%`; } function flipCard() { isFlipped = !isFlipped; flashcardElement.classList.toggle('flipped'); } // Event listeners flashcardElement.addEventListener('click', flipCard); flipBtn.addEventListener('click', flipCard); prevBtn.addEventListener('click', () => { if (currentCard > 0) { currentCard–; updateCard(); } }); nextBtn.addEventListener('click', () => { if (currentCard { if (knownCards.has(currentCard)) { knownCards.delete(currentCard); } else { knownCards.add(currentCard); } updateCard(); updateProgress(); }); resetBtn.addEventListener('click', () => { knownCards.clear(); currentCard = 0; updateCard(); updateProgress(); }); // Keyboard navigation document.addEventListener('keydown', (e) => { switch(e.key) { case 'ArrowRight': case 'ArrowUp': if (currentCard > 0) { currentCard–; updateCard(); } break; case 'ArrowLeft': case 'ArrowDown': if (currentCard < flashcards.length – 1) { currentCard++; updateCard(); } break; case ' ': case 'Enter': e.preventDefault(); flipCard(); break; } }); // Initialize updateCard(); updateProgress(); (function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'977c93ecc536c088',t:'MTc1NjY0MzgzMi4wMDAwMDA='};var a=document.createElement('script');a.nonce=";a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();