Th\u1ebb l\u1eadt<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n <style>\n .flashcard-wrapper {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #e9ecef;\n margin: 0;\n padding: 0;\n display: flex;\n align-content: center;\n flex-direction: column;\n height: 100vh;\n }\n .flashcard-wrapper .page-container {\n display: flex;\n flex: 1;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n position: relative;\n }\n .flashcard-wrapper .menu-container {\n flex: 1;\n max-height: 100vh; \/* Gi\u1edbi h\u1ea1n chi\u1ec1u cao c\u1ee7a menu *\/\n overflow-y: auto; \/* T\u1ea1o thanh cu\u1ed9n d\u1ecdc *\/\n padding: 10px; \/* \u0110\u1ec3 tr\u00e1nh thanh cu\u1ed9n \u0111\u00e8 l\u00ean n\u1ed9i dung *\/\n align-items:center ;\n margin: 10px; \/* Kho\u1ea3ng c\u00e1ch gi\u1eefa menu v\u00e0 n\u1ed9i dung ch\u00ednh *\/\n padding-bottom: 50px;\n justify-content: center;\n }\n .flashcard-wrapper .card-container {\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n gap: 15px;\n }\n .flashcard-wrapper .card {\n background-color: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n width: calc(33.333% - 0px);\n padding: 10px;\n text-align: center;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .flashcard-wrapper .card:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n background: #800000; \n }\n .flashcard-wrapper .card h3 {\n margin: 0px;\n font-size: 1.2em;\n color: #0f2819; \n }\n .flashcard-wrapper .card p {\n margin: 0px;\n color: #666;\n }\n .flashcard-wrapper .pronounce-text {\n display: none;\n }\n .flashcard-wrapper .card:hover h3,\n .flashcard-wrapper .card:hover p {\n color: white;\n }\n .flashcard-wrapper .buttons-container {\n display: flex;\n justify-content: center;\n gap: 60px;\n margin-top: 15px;\n }\n .flashcard-wrapper .button {\n background-color: #0f2819;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 10px;\n cursor: pointer;\n font-size: 1em;\n transition: background-color 0.3s;\n }\n .flashcard-wrapper .button:hover {\n background-color: #800000;\n }\n .flashcard-wrapper .flip-card {\n flex: 3;\n height: 400px;\n perspective: 1000px;\n margin-bottom: 20px;\n }\n .flashcard-wrapper .flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n }\n .flashcard-wrapper .flip-card.flipped .flip-card-inner {\n transform: rotateY(180deg);\n }\n .flashcard-wrapper .flip-card-front, .flip-card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-radius: 12px;\n padding: 20px;\n box-sizing: border-box;\n transform: rotateY(0deg);\n }\n .flashcard-wrapper .flip-card-front {\n background-color: #0f2819;\n color: white;\n }\n .flashcard-wrapper .flip-card-back {\n background-color: #800000; \n color: white;\n transform: rotateY(180deg);\n }\n .flashcard-wrapper .flip-card-content {\n font-size: 2em;\n margin-bottom: 20px;\n transform: rotateY(0deg);\n }\n .flashcard-wrapper .flip-card-id {\n position: absolute;\n top: 10px;\n left: 10px;\n font-size: 1.2em;\n font-weight: bold;\n }\n .flashcard-wrapper .play-audio-button {\n position: absolute;\n bottom: 10px;\n font-size: 1.5em;\n cursor: pointer;\n transition: color 0.3s;\n }\n .flashcard-wrapper .play-audio-button:hover {\n color: #800000;\n }\n .flashcard-wrapper .flip-button {\n position: absolute;\n right: 10px;\n bottom: 10px;\n background-color: #fff;\n border: none;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n cursor: pointer;\n font-size: 1.2em;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s;\n }\n .flashcard-wrapper .flip-button:hover {\n background-color: #f0f0f0;\n }\n .flashcard-wrapper .flip-button i {\n color: #0f2819;\n }\n .random-button {\n position: absolute;\n top: 10px;\n right: 2px;\n padding: 2px 10px;\n background-color: #f8f9fa;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 24px;\n color: black;\n }\n .random-button.active {\n background-color: #800000;\n color: white;\n }\n .flashcard-wrapper .menu-button {\n display: none;\n background-color: #0f2819;\n color: white;\n border: none;\n padding-bottom: 5px;\n border-radius: 5px;\n cursor: pointer;\n text-align: left;\n font-size: 1.2em;\n margin-bottom: 15px;\n transition: background-color 0.3s;\n }\n .flashcard-wrapper .menu-button:hover {\n background-color: #800000;\n }\n\n .flashcard-wrapper .card.selected {\n background-color: #800000 !important;\n color: white;\n z-index: 1000; \/* \u0110\u1ea3m b\u1ea3o th\u1ebb \u0111\u01b0\u1ee3c ch\u1ecdn hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng *\/\n }\n \n .flashcard-wrapper .card.selected h3 {\n color: white;\n }\n .flashcard-wrapper .card.completed {\n background-color: #7a9c59;\n color: white;\n }\n .flashcard-wrapper .card.completed h3 {\n color: white;\n }\n \n\n @media screen and (min-width: 768px) and (max-width: 1024px) {\n .flashcard-wrapper .menu-container {\n max-height: 60vh; \/* Gi\u1edbi h\u1ea1n chi\u1ec1u cao ch\u1ec9 tr\u00ean tablet *\/\n }\n }\n\n @media (max-width: 768px) {\n .flashcard-wrapper .page-container {\n flex-direction: column;\n max-height: 50vh;\n margin: 0px;\n margin-bottom: 80px;\n }\n .flashcard-wrapper .menu-container {\n display: none;\n width: 90%;\n max-height: 80vh; \/* Gi\u1edbi h\u1ea1n chi\u1ec1u cao tr\u00ean mobile *\/\n position: absolute;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n top: 60px; \/* \u0110i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed menu *\/\n margin-left: 5px;\n padding-left: 25px;\n background-color: #fff;\n z-index: 1000; \/* \u0110\u1ea3m b\u1ea3o menu hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng *\/\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .flashcard-wrapper .menu-container.active {\n display: block;\n left: 15px;\n right: 15px;\n }\n .flashcard-wrapper .flip-card {\n width: 100%;\n margin: 0px;\n }\n .flashcard-wrapper .menu-button {\n display: block;\n width: 100%;\n margin-bottom: 55px;\n }\n .flashcard-wrapper .card-container {\n padding-top: 20px;\n text-align: center;\n }\n .flashcard-wrapper .buttons-container {\n width: 100%;\n justify-content: space-between;\n }\n .flashcard-wrapper .flip-button {\n width: 20px;\n height: 20px;\n cursor: pointer;\n font-size: 1em;\n }\n .popup {\n display: none;\n position: fixed;\n width: 90%;\n left: 10px;\n right: 10px;\n justify-content: space-between;\n gap: 40px;\n top: 25%;\n bottom: 25%;\n }\n\n }\n .popup {\n display: none;\n position: fixed;\n top: 50%;\n left: 50%;\n color: #800000;\n text-align: center;\n align-items: center;\n font-size: 1.2em;\n transform: translate(-50%, -50%);\n background-color: white;\n padding: 20px;\n border-radius: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n z-index: 1000;\n }\n .popup button {\n margin: 15px;\n background: #0f2819;\n color: white;\n padding: 5px 15px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n }\n .popup button:hover {\n background-color: #800000;\n color: white;\n }\n \n <\/style>\n<\/head>\n<body>\n <div class=\"flashcard-wrapper\">\n <div class=\"page-container\">\n <button class=\"menu-button\" onclick=\"toggleMenu()\">\u2630 Danh s\u00e1ch th\u1ebb<\/button>\n <div class=\"menu-container\" id=\"cardSelector\">\n <div class=\"card-container\">\n \n <\/div>\n <\/div>\n <div class=\"flip-card\" id=\"flipCard\">\n <div class=\"flip-card-inner\">\n <div class=\"flip-card-front\">\n <div id=\"reading\">Hiragana<\/div>\n <div class=\"flip-card-content\" id=\"vocab\">T\u1eeb v\u1ef1ng<\/div>\n <div class=\"flip-card-id\" id=\"cardnumberFront\"><\/div>\n <button class=\"random-button\" onclick=\"toggleRandomMode()\"><i class=\"fa fa-random\"><\/i><\/button>\n <i class=\"fa fa-volume-up play-audio-button\" onclick=\"playAudio(this)\" aria-hidden=\"true\"><\/i>\n <audio id=\"audioPlayer\"><\/audio>\n <\/div>\n <div class=\"flip-card-back\">\n <div class=\"flip-card-content\"> \n <div id=\"meaning\">Ngh\u0129a<\/div>\n <div id=\"pronounce\" class=\"pronounce-text\"><p>V\u00ed d\u1ee5\uff1a<\/p><\/div>\n <div id=\"exmeaning\" class=\"pronounce-text\"><\/div>\n <\/div>\n <div class=\"flip-card-id\" style=\"color:white;\" id=\"cardnumberBack\"><\/div>\n <\/div>\n <\/div>\n <button class=\"flip-button\" onclick=\"flipCard()\"><i class=\"fa fa-arrow-right\"><\/i><\/button>\n <div class=\"buttons-container\">\n <button class=\"button\" onclick=\"previousVocab()\">L\u00f9i l\u1ea1i<\/button>\n <button class=\"button\" onclick=\"nextVocab()\">Ti\u1ebfp theo<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"popup\" id=\"completionPopup\">\n <p>B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh th\u1ebb <span id=\"completedDeckNumber\"><\/span>!<\/p>\n <button onclick=\"restartDeck()\">H\u1ecdc l\u1ea1i<\/button>\n <button onclick=\"nextDeck()\">Ti\u1ebfp theo<\/button>\n <\/div>\n <div class=\"popup\" id=\"premiumPopup\">\n <p>B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c<\/p>\n <button onclick=\"closePremiumPopup()\">\u0110\u00f3ng<\/button>\n <button onclick=\"contactUs()\">Li\u00ean h\u1ec7<\/button>\n <\/div>\n <script>\n var currentCard = 0;\n var currentDeck = 0;\n var vocabList = [];\n var decks = [];\n var isRandom = false;\n\n function loadData() {\n var url = 'https:\/\/script.google.com\/macros\/s\/AKfycbxvuB6Os5HbIb9XFF1FOn3YMeNL0N3LtyCUL43mX89967OfUPA0nxe08OtDZCcvRo-paw\/exec?action=getVocabList';\n fetch(url)\n .then(response => response.json())\n .then(data => {\n vocabList = data;\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n displayVocab(currentCard);\n } else {\n alert('Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u');\n }\n })\n .catch(error => console.error('Error:', error));\n }\n\n function createDecks() {\n const chunkSize = 50;\n for (let i = 0; i < vocabList.length; i += chunkSize) {\n decks.push(vocabList.slice(i, i + chunkSize));\n }\n }\n\n function displayDeckSelector() {\n const cardContainer = document.querySelector('.card-container');\n cardContainer.innerHTML = '';\n decks.forEach((deck, index) => {\n const card = document.createElement('div');\n card.className = 'card';\n card.innerHTML = `<h3>Th\u1ebb ${index + 1}<\/h3>`;\n \n card.addEventListener('click', () => {\n if (index === 0) { \/\/ Only allow card #1\n currentDeck = index;\n currentCard = 0;\n displayVocab(currentCard);\n highlightSelectedCard(card);\n if (window.innerWidth <= 768) {\n toggleMenu();\n }\n } else {\n showPremiumPopup();\n }\n });\n cardContainer.appendChild(card);\n });\n }\n\n function highlightSelectedCard(selectedCard) {\n const cards = document.querySelectorAll('.card');\n cards.forEach(card => card.classList.remove('selected'));\n selectedCard.classList.add('selected');\n }\n\n function displayVocab(index) {\n \/\/ Only allow viewing cards from deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n\n const deck = decks[currentDeck];\n const card = document.getElementById('flipCard');\n const woldNumber = deck[index].id;\n const totalWords = vocabList.length;\n card.classList.remove('flipped');\n document.getElementById('vocab').textContent = deck[index].vocab;\n document.getElementById('reading').textContent = deck[index].reading;\n document.getElementById('meaning').textContent = deck[index].meaning;\n document.getElementById('pronounce').textContent = deck[index].pronounce;\n document.getElementById('exmeaning').textContent = deck[index].exmeaning;\n const cardNumberText = `${woldNumber}\/${totalWords}`;\n document.getElementById('cardnumberFront').textContent = cardNumberText;\n document.getElementById('cardnumberBack').textContent = cardNumberText;\n document.getElementById('audioPlayer').src = deck[index].audioUrl;\n const playButton = document.querySelector('.play-audio-button');\n playButton.setAttribute('data-vocab', deck[index].pronounce);\n\n \/\/ Highlight the selected card in the menu\n const cards = document.querySelectorAll('.card');\n cards.forEach((card, i) => {\n if (i === currentDeck) {\n card.classList.add('selected');\n } else {\n card.classList.remove('selected');\n }\n });\n }\n\n function playAudio(element) {\n const text = element.getAttribute('data-vocab');\n synthesizeSpeech(text);\n }\n\n function synthesizeSpeech(text) {\n const voiceName = \/Mobi|Android|Mac|iPad|iphone\/i.test(navigator.userAgent) ? \"Kyoko\" : \"Google \u65e5\u672c\u8a9e\";\n const voices = speechSynthesis.getVoices();\n const selectedVoice = voices.find(voice => voice.name === voiceName) || voices.find(voice => voice.lang.startsWith('ja'));\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.voice = selectedVoice;\n utterance.rate = 0.8; \n speechSynthesis.speak(utterance);\n }\n\n function flipCard() {\n \/\/ Only allow flipping if it's deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n const card = document.getElementById('flipCard');\n card.classList.toggle('flipped');\n }\n\n function randomVocab() {\n const deck = decks[currentDeck];\n const randomIndex = Math.floor(Math.random() * deck.length);\n currentCard = randomIndex;\n displayVocab(currentCard);\n }\n\n function previousVocab() {\n \/\/ Only allow navigation in deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n\n if (isRandom) {\n randomVocab();\n } else {\n if (currentCard > 0) {\n currentCard--;\n displayVocab(currentCard);\n }\n }\n }\n\n function nextVocab() {\n \/\/ Only allow navigation in deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n\n if (isRandom) {\n randomVocab();\n } else {\n if (currentCard < decks[currentDeck].length - 1) {\n currentCard++;\n displayVocab(currentCard);\n } else {\n showCompletionPopup();\n }\n } \n }\n\n function toggleRandomMode() {\n isRandom = !isRandom;\n const button = document.querySelector('.random-button');\n button.classList.toggle('active', isRandom);\n }\n\n function toggleMenu() {\n const menuContainer = document.getElementById('cardSelector');\n menuContainer.classList.toggle('active');\n }\n\n function showCompletionPopup() {\n const popup = document.getElementById('completionPopup');\n const completedDeckNumber = document.getElementById('completedDeckNumber');\n completedDeckNumber.textContent = currentDeck + 1;\n popup.style.display = 'block';\n }\n\n function showPremiumPopup() {\n const popup = document.getElementById('premiumPopup');\n popup.style.display = 'block';\n }\n\n function closePremiumPopup() {\n const popup = document.getElementById('premiumPopup');\n popup.style.display = 'none';\n }\n\n function contactUs() {\n \/\/ Add your contact link here\n window.open(\"https:\/\/m.me\/100280956308183\", \"_blank\");;\n }\n\n function nextDeck() {\n const popup = document.getElementById('completionPopup');\n popup.style.display = 'none';\n showPremiumPopup(); \/\/ Show premium popup instead of allowing to proceed\n }\n\n function restartDeck() {\n const popup = document.getElementById('completionPopup');\n popup.style.display = 'none';\n currentCard = 0;\n displayVocab(currentCard);\n }\n\n window.addEventListener('load', function() {\n if (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = function() {\n const voices = speechSynthesis.getVoices();\n };\n }\n loadData();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb l\u1eadt \u2630 Danh s\u00e1ch th\u1ebb Hiragana T\u1eeb v\u1ef1ng Ngh\u0129a V\u00ed d\u1ee5\uff1a L\u00f9i l\u1ea1i Ti\u1ebfp theo B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh th\u1ebb ! H\u1ecdc l\u1ea1i Ti\u1ebfp theo B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c \u0110\u00f3ng Li\u00ean h\u1ec7<\/p>","protected":false},"author":2,"featured_media":0,"parent":3617,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3664","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/comments?post=3664"}],"version-history":[{"count":9,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3664\/revisions"}],"predecessor-version":[{"id":5806,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3664\/revisions\/5806"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3617"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=3664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3664,"date":"2024-09-23T11:35:53","date_gmt":"2024-09-23T04:35:53","guid":{"rendered":"https:\/\/tokuteigino.vn\/?page_id=3664"},"modified":"2025-04-04T10:24:43","modified_gmt":"2025-04-04T03:24:43","slug":"hoc-thu-tp-gino1-the-tu-vung","status":"publish","type":"page","link":"https:\/\/tokuteigino.vn\/ja\/hoc-thu\/hoc-thu-tp-gino-1\/hoc-thu-tp-gino1-the-tu-vung\/","title":{"rendered":"H\u1ecdc th\u1eed tp gino1 – th\u1ebb t\u1eeb v\u1ef1ng"},"content":{"rendered":"\n\n\n\n \n \n Th\u1ebb l\u1eadt<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n <style>\n .flashcard-wrapper {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #e9ecef;\n margin: 0;\n padding: 0;\n display: flex;\n align-content: center;\n flex-direction: column;\n height: 100vh;\n }\n .flashcard-wrapper .page-container {\n display: flex;\n flex: 1;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n position: relative;\n }\n .flashcard-wrapper .menu-container {\n flex: 1;\n max-height: 100vh; \/* Gi\u1edbi h\u1ea1n chi\u1ec1u cao c\u1ee7a menu *\/\n overflow-y: auto; \/* T\u1ea1o thanh cu\u1ed9n d\u1ecdc *\/\n padding: 10px; \/* \u0110\u1ec3 tr\u00e1nh thanh cu\u1ed9n \u0111\u00e8 l\u00ean n\u1ed9i dung *\/\n align-items:center ;\n margin: 10px; \/* Kho\u1ea3ng c\u00e1ch gi\u1eefa menu v\u00e0 n\u1ed9i dung ch\u00ednh *\/\n padding-bottom: 50px;\n justify-content: center;\n }\n .flashcard-wrapper .card-container {\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n gap: 15px;\n }\n .flashcard-wrapper .card {\n background-color: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n width: calc(33.333% - 0px);\n padding: 10px;\n text-align: center;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .flashcard-wrapper .card:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n background: #800000; \n }\n .flashcard-wrapper .card h3 {\n margin: 0px;\n font-size: 1.2em;\n color: #0f2819; \n }\n .flashcard-wrapper .card p {\n margin: 0px;\n color: #666;\n }\n .flashcard-wrapper .pronounce-text {\n display: none;\n }\n .flashcard-wrapper .card:hover h3,\n .flashcard-wrapper .card:hover p {\n color: white;\n }\n .flashcard-wrapper .buttons-container {\n display: flex;\n justify-content: center;\n gap: 60px;\n margin-top: 15px;\n }\n .flashcard-wrapper .button {\n background-color: #0f2819;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 10px;\n cursor: pointer;\n font-size: 1em;\n transition: background-color 0.3s;\n }\n .flashcard-wrapper .button:hover {\n background-color: #800000;\n }\n .flashcard-wrapper .flip-card {\n flex: 3;\n height: 400px;\n perspective: 1000px;\n margin-bottom: 20px;\n }\n .flashcard-wrapper .flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n }\n .flashcard-wrapper .flip-card.flipped .flip-card-inner {\n transform: rotateY(180deg);\n }\n .flashcard-wrapper .flip-card-front, .flip-card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-radius: 12px;\n padding: 20px;\n box-sizing: border-box;\n transform: rotateY(0deg);\n }\n .flashcard-wrapper .flip-card-front {\n background-color: #0f2819;\n color: white;\n }\n .flashcard-wrapper .flip-card-back {\n background-color: #800000; \n color: white;\n transform: rotateY(180deg);\n }\n .flashcard-wrapper .flip-card-content {\n font-size: 2em;\n margin-bottom: 20px;\n transform: rotateY(0deg);\n }\n .flashcard-wrapper .flip-card-id {\n position: absolute;\n top: 10px;\n left: 10px;\n font-size: 1.2em;\n font-weight: bold;\n }\n .flashcard-wrapper .play-audio-button {\n position: absolute;\n bottom: 10px;\n font-size: 1.5em;\n cursor: pointer;\n transition: color 0.3s;\n }\n .flashcard-wrapper .play-audio-button:hover {\n color: #800000;\n }\n .flashcard-wrapper .flip-button {\n position: absolute;\n right: 10px;\n bottom: 10px;\n background-color: #fff;\n border: none;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n cursor: pointer;\n font-size: 1.2em;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s;\n }\n .flashcard-wrapper .flip-button:hover {\n background-color: #f0f0f0;\n }\n .flashcard-wrapper .flip-button i {\n color: #0f2819;\n }\n .random-button {\n position: absolute;\n top: 10px;\n right: 2px;\n padding: 2px 10px;\n background-color: #f8f9fa;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 24px;\n color: black;\n }\n .random-button.active {\n background-color: #800000;\n color: white;\n }\n .flashcard-wrapper .menu-button {\n display: none;\n background-color: #0f2819;\n color: white;\n border: none;\n padding-bottom: 5px;\n border-radius: 5px;\n cursor: pointer;\n text-align: left;\n font-size: 1.2em;\n margin-bottom: 15px;\n transition: background-color 0.3s;\n }\n .flashcard-wrapper .menu-button:hover {\n background-color: #800000;\n }\n\n .flashcard-wrapper .card.selected {\n background-color: #800000 !important;\n color: white;\n z-index: 1000; \/* \u0110\u1ea3m b\u1ea3o th\u1ebb \u0111\u01b0\u1ee3c ch\u1ecdn hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng *\/\n }\n \n .flashcard-wrapper .card.selected h3 {\n color: white;\n }\n .flashcard-wrapper .card.completed {\n background-color: #7a9c59;\n color: white;\n }\n .flashcard-wrapper .card.completed h3 {\n color: white;\n }\n \n\n @media screen and (min-width: 768px) and (max-width: 1024px) {\n .flashcard-wrapper .menu-container {\n max-height: 60vh; \/* Gi\u1edbi h\u1ea1n chi\u1ec1u cao ch\u1ec9 tr\u00ean tablet *\/\n }\n }\n\n @media (max-width: 768px) {\n .flashcard-wrapper .page-container {\n flex-direction: column;\n max-height: 50vh;\n margin: 0px;\n margin-bottom: 80px;\n }\n .flashcard-wrapper .menu-container {\n display: none;\n width: 90%;\n max-height: 80vh; \/* Gi\u1edbi h\u1ea1n chi\u1ec1u cao tr\u00ean mobile *\/\n position: absolute;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n top: 60px; \/* \u0110i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed menu *\/\n margin-left: 5px;\n padding-left: 25px;\n background-color: #fff;\n z-index: 1000; \/* \u0110\u1ea3m b\u1ea3o menu hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng *\/\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .flashcard-wrapper .menu-container.active {\n display: block;\n left: 15px;\n right: 15px;\n }\n .flashcard-wrapper .flip-card {\n width: 100%;\n margin: 0px;\n }\n .flashcard-wrapper .menu-button {\n display: block;\n width: 100%;\n margin-bottom: 55px;\n }\n .flashcard-wrapper .card-container {\n padding-top: 20px;\n text-align: center;\n }\n .flashcard-wrapper .buttons-container {\n width: 100%;\n justify-content: space-between;\n }\n .flashcard-wrapper .flip-button {\n width: 20px;\n height: 20px;\n cursor: pointer;\n font-size: 1em;\n }\n .popup {\n display: none;\n position: fixed;\n width: 90%;\n left: 10px;\n right: 10px;\n justify-content: space-between;\n gap: 40px;\n top: 25%;\n bottom: 25%;\n }\n\n }\n .popup {\n display: none;\n position: fixed;\n top: 50%;\n left: 50%;\n color: #800000;\n text-align: center;\n align-items: center;\n font-size: 1.2em;\n transform: translate(-50%, -50%);\n background-color: white;\n padding: 20px;\n border-radius: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n z-index: 1000;\n }\n .popup button {\n margin: 15px;\n background: #0f2819;\n color: white;\n padding: 5px 15px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n }\n .popup button:hover {\n background-color: #800000;\n color: white;\n }\n \n <\/style>\n<\/head>\n<body>\n <div class=\"flashcard-wrapper\">\n <div class=\"page-container\">\n <button class=\"menu-button\" onclick=\"toggleMenu()\">\u2630 Danh s\u00e1ch th\u1ebb<\/button>\n <div class=\"menu-container\" id=\"cardSelector\">\n <div class=\"card-container\">\n \n <\/div>\n <\/div>\n <div class=\"flip-card\" id=\"flipCard\">\n <div class=\"flip-card-inner\">\n <div class=\"flip-card-front\">\n <div id=\"reading\">Hiragana<\/div>\n <div class=\"flip-card-content\" id=\"vocab\">T\u1eeb v\u1ef1ng<\/div>\n <div class=\"flip-card-id\" id=\"cardnumberFront\"><\/div>\n <button class=\"random-button\" onclick=\"toggleRandomMode()\"><i class=\"fa fa-random\"><\/i><\/button>\n <i class=\"fa fa-volume-up play-audio-button\" onclick=\"playAudio(this)\" aria-hidden=\"true\"><\/i>\n <audio id=\"audioPlayer\"><\/audio>\n <\/div>\n <div class=\"flip-card-back\">\n <div class=\"flip-card-content\"> \n <div id=\"meaning\">Ngh\u0129a<\/div>\n <div id=\"pronounce\" class=\"pronounce-text\"><p>V\u00ed d\u1ee5\uff1a<\/p><\/div>\n <div id=\"exmeaning\" class=\"pronounce-text\"><\/div>\n <\/div>\n <div class=\"flip-card-id\" style=\"color:white;\" id=\"cardnumberBack\"><\/div>\n <\/div>\n <\/div>\n <button class=\"flip-button\" onclick=\"flipCard()\"><i class=\"fa fa-arrow-right\"><\/i><\/button>\n <div class=\"buttons-container\">\n <button class=\"button\" onclick=\"previousVocab()\">L\u00f9i l\u1ea1i<\/button>\n <button class=\"button\" onclick=\"nextVocab()\">Ti\u1ebfp theo<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"popup\" id=\"completionPopup\">\n <p>B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh th\u1ebb <span id=\"completedDeckNumber\"><\/span>!<\/p>\n <button onclick=\"restartDeck()\">H\u1ecdc l\u1ea1i<\/button>\n <button onclick=\"nextDeck()\">Ti\u1ebfp theo<\/button>\n <\/div>\n <div class=\"popup\" id=\"premiumPopup\">\n <p>B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c<\/p>\n <button onclick=\"closePremiumPopup()\">\u0110\u00f3ng<\/button>\n <button onclick=\"contactUs()\">Li\u00ean h\u1ec7<\/button>\n <\/div>\n <script>\n var currentCard = 0;\n var currentDeck = 0;\n var vocabList = [];\n var decks = [];\n var isRandom = false;\n\n function loadData() {\n var url = 'https:\/\/script.google.com\/macros\/s\/AKfycbxvuB6Os5HbIb9XFF1FOn3YMeNL0N3LtyCUL43mX89967OfUPA0nxe08OtDZCcvRo-paw\/exec?action=getVocabList';\n fetch(url)\n .then(response => response.json())\n .then(data => {\n vocabList = data;\n if (vocabList.length > 0) {\n createDecks();\n displayDeckSelector();\n displayVocab(currentCard);\n } else {\n alert('Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u');\n }\n })\n .catch(error => console.error('Error:', error));\n }\n\n function createDecks() {\n const chunkSize = 50;\n for (let i = 0; i < vocabList.length; i += chunkSize) {\n decks.push(vocabList.slice(i, i + chunkSize));\n }\n }\n\n function displayDeckSelector() {\n const cardContainer = document.querySelector('.card-container');\n cardContainer.innerHTML = '';\n decks.forEach((deck, index) => {\n const card = document.createElement('div');\n card.className = 'card';\n card.innerHTML = `<h3>Th\u1ebb ${index + 1}<\/h3>`;\n \n card.addEventListener('click', () => {\n if (index === 0) { \/\/ Only allow card #1\n currentDeck = index;\n currentCard = 0;\n displayVocab(currentCard);\n highlightSelectedCard(card);\n if (window.innerWidth <= 768) {\n toggleMenu();\n }\n } else {\n showPremiumPopup();\n }\n });\n cardContainer.appendChild(card);\n });\n }\n\n function highlightSelectedCard(selectedCard) {\n const cards = document.querySelectorAll('.card');\n cards.forEach(card => card.classList.remove('selected'));\n selectedCard.classList.add('selected');\n }\n\n function displayVocab(index) {\n \/\/ Only allow viewing cards from deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n\n const deck = decks[currentDeck];\n const card = document.getElementById('flipCard');\n const woldNumber = deck[index].id;\n const totalWords = vocabList.length;\n card.classList.remove('flipped');\n document.getElementById('vocab').textContent = deck[index].vocab;\n document.getElementById('reading').textContent = deck[index].reading;\n document.getElementById('meaning').textContent = deck[index].meaning;\n document.getElementById('pronounce').textContent = deck[index].pronounce;\n document.getElementById('exmeaning').textContent = deck[index].exmeaning;\n const cardNumberText = `${woldNumber}\/${totalWords}`;\n document.getElementById('cardnumberFront').textContent = cardNumberText;\n document.getElementById('cardnumberBack').textContent = cardNumberText;\n document.getElementById('audioPlayer').src = deck[index].audioUrl;\n const playButton = document.querySelector('.play-audio-button');\n playButton.setAttribute('data-vocab', deck[index].pronounce);\n\n \/\/ Highlight the selected card in the menu\n const cards = document.querySelectorAll('.card');\n cards.forEach((card, i) => {\n if (i === currentDeck) {\n card.classList.add('selected');\n } else {\n card.classList.remove('selected');\n }\n });\n }\n\n function playAudio(element) {\n const text = element.getAttribute('data-vocab');\n synthesizeSpeech(text);\n }\n\n function synthesizeSpeech(text) {\n const voiceName = \/Mobi|Android|Mac|iPad|iphone\/i.test(navigator.userAgent) ? \"Kyoko\" : \"Google \u65e5\u672c\u8a9e\";\n const voices = speechSynthesis.getVoices();\n const selectedVoice = voices.find(voice => voice.name === voiceName) || voices.find(voice => voice.lang.startsWith('ja'));\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.voice = selectedVoice;\n utterance.rate = 0.8; \n speechSynthesis.speak(utterance);\n }\n\n function flipCard() {\n \/\/ Only allow flipping if it's deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n const card = document.getElementById('flipCard');\n card.classList.toggle('flipped');\n }\n\n function randomVocab() {\n const deck = decks[currentDeck];\n const randomIndex = Math.floor(Math.random() * deck.length);\n currentCard = randomIndex;\n displayVocab(currentCard);\n }\n\n function previousVocab() {\n \/\/ Only allow navigation in deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n\n if (isRandom) {\n randomVocab();\n } else {\n if (currentCard > 0) {\n currentCard--;\n displayVocab(currentCard);\n }\n }\n }\n\n function nextVocab() {\n \/\/ Only allow navigation in deck 0 (card #1)\n if (currentDeck !== 0) {\n showPremiumPopup();\n return;\n }\n\n if (isRandom) {\n randomVocab();\n } else {\n if (currentCard < decks[currentDeck].length - 1) {\n currentCard++;\n displayVocab(currentCard);\n } else {\n showCompletionPopup();\n }\n } \n }\n\n function toggleRandomMode() {\n isRandom = !isRandom;\n const button = document.querySelector('.random-button');\n button.classList.toggle('active', isRandom);\n }\n\n function toggleMenu() {\n const menuContainer = document.getElementById('cardSelector');\n menuContainer.classList.toggle('active');\n }\n\n function showCompletionPopup() {\n const popup = document.getElementById('completionPopup');\n const completedDeckNumber = document.getElementById('completedDeckNumber');\n completedDeckNumber.textContent = currentDeck + 1;\n popup.style.display = 'block';\n }\n\n function showPremiumPopup() {\n const popup = document.getElementById('premiumPopup');\n popup.style.display = 'block';\n }\n\n function closePremiumPopup() {\n const popup = document.getElementById('premiumPopup');\n popup.style.display = 'none';\n }\n\n function contactUs() {\n \/\/ Add your contact link here\n window.open(\"https:\/\/m.me\/100280956308183\", \"_blank\");;\n }\n\n function nextDeck() {\n const popup = document.getElementById('completionPopup');\n popup.style.display = 'none';\n showPremiumPopup(); \/\/ Show premium popup instead of allowing to proceed\n }\n\n function restartDeck() {\n const popup = document.getElementById('completionPopup');\n popup.style.display = 'none';\n currentCard = 0;\n displayVocab(currentCard);\n }\n\n window.addEventListener('load', function() {\n if (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = function() {\n const voices = speechSynthesis.getVoices();\n };\n }\n loadData();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Th\u1ebb l\u1eadt \u2630 Danh s\u00e1ch th\u1ebb Hiragana T\u1eeb v\u1ef1ng Ngh\u0129a V\u00ed d\u1ee5\uff1a L\u00f9i l\u1ea1i Ti\u1ebfp theo B\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh th\u1ebb ! H\u1ecdc l\u1ea1i Ti\u1ebfp theo B\u1ea1n c\u1ea7n mua kh\u00f3a h\u1ecdc \u0111\u1ec3 ti\u1ebfp t\u1ee5c \u0110\u00f3ng Li\u00ean h\u1ec7<\/p>","protected":false},"author":2,"featured_media":0,"parent":3617,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3664","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/comments?post=3664"}],"version-history":[{"count":9,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3664\/revisions"}],"predecessor-version":[{"id":5806,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3664\/revisions\/5806"}],"up":[{"embeddable":true,"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/pages\/3617"}],"wp:attachment":[{"href":"https:\/\/tokuteigino.vn\/ja\/wp-json\/wp\/v2\/media?parent=3664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}