From 9af0c928eac7971c3e4e3a3485ee2d4f20a2f790 Mon Sep 17 00:00:00 2001 From: "Jakob L. Kreuze" Date: Sat, 19 Jul 2025 15:19:26 -0400 Subject: Progression after reveal --- flashcards.html | 10 ++--- script.js | 121 ++++++++++++++++++++++++++++++++++++++------------------ style.css | 16 +++----- 3 files changed, 92 insertions(+), 55 deletions(-) diff --git a/flashcards.html b/flashcards.html index 1dba5e8..50f3f4d 100644 --- a/flashcards.html +++ b/flashcards.html @@ -19,11 +19,11 @@ -
- - - - +
+ + + +
diff --git a/script.js b/script.js index 94a2fa3..d6f3415 100644 --- a/script.js +++ b/script.js @@ -2,67 +2,95 @@ * State file processing * ***********************************************************************/ -function makeDeck(cards) { - let today = new Date(); - // Granularity only at the day level. - today.setHours(0, 0, 0, 0); - return cards.filter((card) => { - return (new Date(card.scheduled)) <= today; - }); -} - -function pad(n) { - return n < 10 ? '0' + n : n; -} - function statusString() { const now = Date.now(); const elapsedSeconds = Math.floor((now - window.started) / 1000); const minutes = Math.floor(elapsedSeconds / 60); const seconds = elapsedSeconds % 60; - return `Card ${window.index + 1} of ${window.deck.length} scheduled for review, ${window.cards.length} total + const pad = (n) => n < 10 ? '0' + n : n; + return `Card ${window.index + 1} of ${window.cards.length} scheduled for review, ${window.allCards.length} total Current session: ${pad(minutes)}:${pad(seconds)}`; } -function showCard(card) { - const front = document.getElementById('flashcard-front'); - const back = document.getElementById('flashcard-back'); +function loadCard(card) { + window.card.revealed = false; + window.card.front.innerHTML = card.front; + window.card.front.style.display = "block"; + window.card.back.innerHTML = card.back; + window.card.back.style.display = "none"; + window.buttons.style.display = "none"; +} + +function flipCard() { + window.card.revealed = true; + + // Reveal the "back". + if (window.card.front.style.display !== "block") { + window.card.front.style.display = "block"; + window.card.back.style.display = "none"; + } else { + window.card.front.style.display = "none"; + window.card.back.style.display = "block"; + } - front.innerHTML = card.front; - back.innerHTML = card.back; + // Reveal the buttons. + window.buttons.style.display = "flex"; } -function toggleCard() { - const front = document.getElementById('flashcard-front'); - const back = document.getElementById('flashcard-back'); +function rateCard(difficulty) { + if (!window.card.revealed) { + return; + } + // if (difficulty === "forgot") { - if (front.style.display === "block") { - front.style.display = "none"; - back.style.display = "block"; + // } + if (++window.index < window.cards.length) { + loadCard(window.cards[window.index]); } else { - back.style.display = "none"; - front.style.display = "block"; + clearInterval(window.updateInterval); + window.statusInfo.innerHTML = "Session complete!"; + window.flashcard.style.display = "none"; + window.buttons.style.display = "none"; } } +// Todo: check if card is revealed before allowing button inpt. + function loadCards(data) { - const statusInfo = document.getElementById('status-info'); + document.getElementById('flashcard').style.display = "block"; - window.cards = data; - window.deck = makeDeck(window.cards); + window.allCards = data; window.index = 0; window.started = Date.now(); + window.statusInfo = document.getElementById('status-info'); + window.buttons = document.getElementById('button-container'); + window.card = { + front: document.getElementById('flashcard-front'), + back: document.getElementById('flashcard-back') + }; + + document.getElementById('rating-button-forgot') + .addEventListener('click', () => rateCard('forgot')); + document.getElementById('rating-button-hard') + .addEventListener('click', () => rateCard('hard')); + document.getElementById('rating-button-medium') + .addEventListener('click', () => rateCard('medium')); + document.getElementById('rating-button-easy') + .addEventListener('click', () => rateCard('easy')); - // Temporary - showCard(window.cards[0]); - - setInterval(() => { statusInfo.innerText = statusString() }, 1000); - // Add an event listener for the spacebar press - window.addEventListener('keydown', (event) => { - if (event.code === 'Space') { - toggleCard(); - } + let today = new Date(); + // Granularity only at the day level. + today.setHours(0, 0, 0, 0); + window.cards = data.filter((card) => { + return (new Date(card.scheduled)) <= today; }); + + // Temporary + loadCard(window.cards[0]); + + window.updateInterval = setInterval(() => { + window.statusInfo.innerText = statusString() + }, 1000); } /*********************************************************************** @@ -105,3 +133,18 @@ window.addEventListener("load", (event) => { reader.readAsText(file); // Read the file as text }); }); + +window.addEventListener('keydown', (event) => { + // console.log(event.code); + if (event.code === 'Space') { + flipCard(); + } else if (event.code === 'Digit1' || event.code === "Numpad1") { + rateCard('forgot') + } else if (event.code === 'Digit2' || event.code === "Numpad2") { + rateCard('easy') + } else if (event.code === 'Digit3' || event.code === "Numpad3") { + rateCard('medium') + } else if (event.code === 'Digit4' || event.code === "Numpad4") { + rateCard('hard') + } +}); diff --git a/style.css b/style.css index bb2a135..38c4c42 100644 --- a/style.css +++ b/style.css @@ -8,8 +8,8 @@ body { font-family: Arial, sans-serif; } -.button-container { - display: flex; +#button-container { + display: none; justify-content: center; gap: 1rem; padding: 1rem; @@ -72,16 +72,10 @@ body { } #flashcard { + display: none; padding: 16px; background: #fff; border-radius: 4px; - filter: drop-shadow(5px 5px 10px gray); - box-shadow: 5px 5px 10px gray; -} - -#flashcard-front { - display: block; -} -#flashcard-back { - display: none; + filter: drop-shadow(2px 2px 5px gray); + box-shadow: 2px 2px 5px gray; } -- cgit v1.3