Chinese Flash Cards<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #32744C; \/* SKILL deep green *\/\r\n --primary-light: #508E42; \/* SKILL medium green *\/\r\n --primary-dark: #4C4F26; \/* SKILL dark olive *\/\r\n --accent-green: #508E42; \/* Align accents *\/\r\n --medium-gray: #e0e0e0;\r\n --dark-gray: #707070;\r\n --warning-color: #3A7CA5; \/* Coherent blue for highlights and flip button *\/\r\n --dark-text: #333;\r\n --light-text: #666;\r\n --card-bg: rgba(255, 255, 255, 0.95);\r\n --bg-light: linear-gradient(135deg, #CFE2CF, #8DBEA2); \/* SKILL soft green gradient *\/\r\n --shadow: 0 15px 40px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Microsoft YaHei', '\u9ed1\u4f53', 'SimHei', Arial, sans-serif;\r\n }\r\n \r\n body {\r\n color: var(--dark-text);\r\n min-height: 100vh;\r\n padding: 20px;\r\n line-height: 1.6;\r\n }\r\n \r\n .container {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);\r\n overflow: hidden;\r\n }\r\n \r\n .header {\r\n background: linear-gradient(45deg, var(--primary-color), var(--primary-light));\r\n color: #ffffff;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .section {\r\n padding: 30px;\r\n }\r\n \r\n button {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .flashcard-controls {\r\n background: var(--card-bg);\r\n border-radius: 15px;\r\n box-shadow: var(--shadow);\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n \r\n .card-counter {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--primary-color);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .control-buttons {\r\n display: flex;\r\n gap: 15px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .control-btn {\r\n min-width: 120px;\r\n flex: 1;\r\n max-width: 200px;\r\n }\r\n \r\n .prev-btn {\r\n background: var(--dark-gray);\r\n color: white;\r\n }\r\n \r\n .next-btn {\r\n background: var(--accent-green);\r\n color: white;\r\n }\r\n \r\n .flip-btn {\r\n background: var(--warning-color);\r\n color: white;\r\n }\r\n \r\n .control-btn:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n }\r\n \r\n .control-btn:disabled {\r\n background-color: var(--medium-gray);\r\n cursor: not-allowed;\r\n }\r\n \r\n .flashcard-container {\r\n perspective: 1000px;\r\n margin: 0 auto;\r\n max-width: 800px;\r\n }\r\n \r\n .flashcard {\r\n background-color: #CFE2CF; \/* SKILL light background *\/\r\n text-align: center;\r\n color: black;\r\n margin: 0 auto;\r\n min-height: 400px;\r\n max-height: 800px;\r\n border-radius: 15px;\r\n box-shadow: var(--shadow);\r\n transition: transform 0.6s;\r\n transform-style: preserve-3d;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n \r\n .flashcard.flipped {\r\n transform: rotateY(180deg);\r\n }\r\n \r\n .card-face {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 400px;\r\n backface-visibility: hidden;\r\n border-radius: 15px;\r\n padding: 30px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n overflow-y: auto;\r\n box-sizing: border-box;\r\n }\r\n \r\n .card-front {\r\n background: linear-gradient(135deg, #CFE2CF, #8DBEA2); \/* SKILL palette *\/\r\n }\r\n \r\n .card-back {\r\n background: linear-gradient(135deg, #CFE2CF, #8DBEA2); \/* SKILL palette *\/\r\n transform: rotateY(180deg);\r\n text-align: left;\r\n }\r\n \r\n .chinese-word {\r\n font-size: 120px;\r\n font-weight: 700;\r\n color: #32744C; \/* SKILL title tone *\/\r\n margin: auto;\r\n }\r\n \r\n .back-content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n \r\n .field-group {\r\n margin-bottom: 25px;\r\n }\r\n \r\n .field-label {\r\n font-weight: 600;\r\n font-size: 18px;\r\n color: var(--primary-color);\r\n margin-bottom: 8px;\r\n }\r\n \r\n .pinyin-row, .example-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n .pinyin-text {\r\n font-size: 24px;\r\n color: #32744C; \/* SKILL tone *\/\r\n font-weight: 500;\r\n flex: 1;\r\n }\r\n \r\n .speaker-icon {\r\n width: 40px;\r\n height: 40px;\r\n background: var(--primary-color);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .speaker-icon:hover {\r\n background: var(--primary-dark);\r\n transform: scale(1.1);\r\n }\r\n \r\n .speaker-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: white;\r\n }\r\n \r\n .example-sentence {\r\n color: #508E42; \/* SKILL accent *\/\r\n font-size: 16px;\r\n line-height: 1.8;\r\n flex: 1;\r\n }\r\n \r\n .settings-panel {\r\n background: var(--card-bg);\r\n border-radius: 15px;\r\n box-shadow: var(--shadow);\r\n margin-top: 20px;\r\n padding: 20px;\r\n }\r\n \r\n .settings-header {\r\n color: var(--primary-color);\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n \r\n .settings-section h4 {\r\n color: var(--dark-text);\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n border-bottom: 2px solid var(--medium-gray);\r\n padding-bottom: 8px;\r\n }\r\n \r\n .color-options {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n gap: 15px;\r\n }\r\n \r\n .color-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px;\r\n border: 2px solid transparent;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .color-option:hover {\r\n border-color: var(--primary-color);\r\n background: rgba(250, 151, 94, 0.1);\r\n }\r\n \r\n .color-option.selected {\r\n border-color: var(--primary-color);\r\n background: rgba(250, 151, 94, 0.2);\r\n }\r\n \r\n .color-preview {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n border: 2px solid #fff;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n \r\n .color-name {\r\n font-size: 14px;\r\n color: var(--dark-text);\r\n font-weight: 500;\r\n }\r\n \r\n .error-message {\r\n background: #f8d7da;\r\n color: #721c24;\r\n padding: 15px;\r\n border-radius: 8px;\r\n margin: 20px 0;\r\n text-align: center;\r\n font-weight: 600;\r\n display: none;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .chinese-word {\r\n font-size: 80px;\r\n }\r\n \r\n .control-buttons {\r\n flex-direction: column;\r\n }\r\n \r\n .control-btn {\r\n max-width: none;\r\n }\r\n \r\n .pinyin-row, .example-row {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>Chinese Flash Cards<\/h1>\r\n <p>Learn Chinese characters with pronunciation and example sentences<\/p>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"flashcard-container\">\r\n <div id=\"flashcard\" class=\"flashcard\">\r\n <div class=\"card-face card-front\">\r\n <div id=\"chineseWord\" class=\"chinese-word\">\u963f<\/div>\r\n <\/div>\r\n <div class=\"card-face card-back\">\r\n <div class=\"back-content\">\r\n <div class=\"field-group\">\r\n <div class=\"field-label\">\u53d1\u97f3 (Pronunciation):<\/div>\r\n <div class=\"pinyin-row\">\r\n <div id=\"pinyin\" class=\"pinyin-text\">\u0101<\/div>\r\n <div class=\"speaker-icon\" onclick=\"event.stopPropagation(); playPronunciation();\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M3 9v6h4l5 5V4l-5 5H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"field-group\">\r\n <div class=\"field-label\">\u4f8b\u53e5 (Example Sentence):<\/div>\r\n <div class=\"example-row\">\r\n <div id=\"exampleSentence\" class=\"example-sentence\">\"\u5c9b\u5185\u6709\u7ec4\u5e26\u822c\u7684\u7011\u5e03,\u84dd\u5b9d\u77f3\u4f3c\u7684\u6e56\u6cca,\u56db\u5b63\u5e38\u9752\u7684\u68ee\u6797\u548c\u679c\u56ed,\u81ea\u7136\u666f\u8272\u5341\u5206\u4f18\u7f8e\u3002\u897f\u5357\u90e8\u7684\u963f\u91cc\u5c71\u548c\u65e5\u6708\u6f6d,\u53f0\u5317\u5e02\u90ca\u7684\u5927\u5c6f\u5c71\u98ce\u666f\u533a,\u90fd\u662f\u95fb\u540d\u4e16\u754c\u7684\u6e38\u89c8\u80dc\u5730\u3002\"<\/div>\r\n <div class=\"speaker-icon\" onclick=\"event.stopPropagation(); playExampleSentence();\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M3 9v6h4l5 5V4l-5 5H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flashcard-controls\">\r\n <div id=\"cardCounter\" class=\"card-counter\">Card 1 of 3<\/div>\r\n <p style=\"color: var(--light-text); margin: 10px 0; font-size: 14px;\">\r\n <strong>\u2191 \u2193<\/strong> - Flip card | <strong>\u2190 \u2192<\/strong> - Navigate cards | <strong>Click<\/strong> - Flip card\r\n <\/p>\r\n <div class=\"control-buttons\">\r\n <button id=\"prevBtn\" class=\"control-btn prev-btn\">\u2190 Previous<\/button>\r\n <button id=\"flipBtn\" class=\"control-btn flip-btn\">Flip Card<\/button>\r\n <button id=\"nextBtn\" class=\"control-btn next-btn\">Next \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"settings-panel\">\r\n <h2 class=\"settings-header\">Customize Your Flashcards<\/h2>\r\n <div class=\"settings-section\">\r\n <h4>Card Color Theme<\/h4>\r\n <div class=\"color-options\">\r\n <div class=\"color-option selected\" data-color=\"default\">\r\n <div class=\"color-preview\" style=\"background: linear-gradient(135deg, #CFE2CF, #8DBEA2);\"><\/div>\r\n <span class=\"color-name\">Default<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#222222\">\r\n <div class=\"color-preview\" style=\"background: #222222;\"><\/div>\r\n <span class=\"color-name\">Dark Charcoal<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#416D19\">\r\n <div class=\"color-preview\" style=\"background: #416D19;\"><\/div>\r\n <span class=\"color-name\">Forest Green<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#E5C287\">\r\n <div class=\"color-preview\" style=\"background: #E5C287;\"><\/div>\r\n <span class=\"color-name\">Warm Orange<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#d1ebed\">\r\n <div class=\"color-preview\" style=\"background: #d1ebed;\"><\/div>\r\n <span class=\"color-name\">Relaxing Blue<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"errorMessage\" class=\"error-message\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const chineseCardsData = [\r\n {\r\n chinese: \"\u963f\",\r\n pinyin: \"\u0101\",\r\n pronunciationUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/1_%E9%98%BF.mp3\",\r\n example: \"\u963f\u516c\u963f\u5a46\uff0c\u5272\u9ea6\u63d2\u79be\",\r\n exampleAudioUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/%E9%98%BF-%E4%BE%8B%E5%8F%A51.mp3\"\r\n },\r\n {\r\n chinese: \"\u6328\",\r\n pinyin: \"\u0101i\",\r\n pronunciationUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/2_%E6%8C%A8.mp3\",\r\n example: \"\u738b\u53cb\u5df2\u7ecf\u7b49\u5728\u95e8\u53e3\u51c6\u5907\u6328\u8bad\u4e86\",\r\n exampleAudioUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/%E6%8C%A8-%E4%BE%8B%E5%8F%A51.mp3\"\r\n },\r\n {\r\n chinese: \"\u77ee\",\r\n pinyin: \"\u01cei\",\r\n pronunciationUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/3_%E7%9F%AE.mp3\",\r\n example: \"\u770b\u5427\uff0c\u5c71\u4e0a\u7684\u77ee\u677e\u8d8a\u53d1\u7684\u9752\u9ed1\",\r\n exampleAudioUrl: \"https:\/\/github.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/raw\/refs\/heads\/main\/%E7%9F%AE-%E4%BE%8B%E5%8F%A51.mp3\"\r\n }\r\n ];\r\n\r\n let currentCardIndex = 0;\r\n let isFlipped = false;\r\n let currentAudio = null; \/\/ Track currently playing audio\r\n\r\n function init() {\r\n displayCurrentCard();\r\n setupEventListeners();\r\n updateUI();\r\n }\r\n\r\n function setupEventListeners() {\r\n document.getElementById('prevBtn').addEventListener('click', showPreviousCard);\r\n document.getElementById('nextBtn').addEventListener('click', showNextCard);\r\n document.getElementById('flipBtn').addEventListener('click', flipCard);\r\n document.getElementById('flashcard').addEventListener('click', flipCard);\r\n document.addEventListener('keydown', handleKeydown);\r\n\r\n document.querySelectorAll('.color-option').forEach(option => {\r\n option.addEventListener('click', () => changeColorTheme(option.dataset.color));\r\n });\r\n }\r\n\r\n function handleKeydown(event) {\r\n switch(event.key) {\r\n case 'ArrowLeft': showPreviousCard(); break;\r\n case 'ArrowRight': showNextCard(); break;\r\n case 'ArrowUp':\r\n case 'ArrowDown': flipCard(); break;\r\n }\r\n }\r\n\r\n function displayCurrentCard() {\r\n const card = chineseCardsData[currentCardIndex];\r\n document.getElementById('chineseWord').textContent = card.chinese;\r\n document.getElementById('pinyin').textContent = card.pinyin;\r\n document.getElementById('exampleSentence').textContent = card.example;\r\n \r\n isFlipped = false;\r\n document.getElementById('flashcard').classList.remove('flipped');\r\n }\r\n\r\n function showPreviousCard() {\r\n if (currentCardIndex > 0) {\r\n currentCardIndex--;\r\n displayCurrentCard();\r\n updateUI();\r\n }\r\n }\r\n\r\n function showNextCard() {\r\n if (currentCardIndex < chineseCardsData.length - 1) {\r\n currentCardIndex++;\r\n displayCurrentCard();\r\n updateUI();\r\n }\r\n }\r\n\r\n function flipCard() {\r\n isFlipped = !isFlipped;\r\n document.getElementById('flashcard').classList.toggle('flipped', isFlipped);\r\n \r\n \/\/ Auto-play pronunciation when card is flipped to the back side\r\n if (isFlipped) {\r\n \/\/ Small delay to ensure the card flip animation completes before playing audio\r\n setTimeout(playPronunciation, 300);\r\n }\r\n }\r\n\r\n function updateUI() {\r\n document.getElementById('cardCounter').textContent = `Card ${currentCardIndex + 1} of ${chineseCardsData.length}`;\r\n document.getElementById('prevBtn').disabled = currentCardIndex === 0;\r\n document.getElementById('nextBtn').disabled = currentCardIndex === chineseCardsData.length - 1;\r\n }\r\n\r\n function playPronunciation() {\r\n const card = chineseCardsData[currentCardIndex];\r\n if (card.pronunciationUrl) {\r\n \/\/ Stop any currently playing audio\r\n if (currentAudio) {\r\n currentAudio.pause();\r\n currentAudio.currentTime = 0;\r\n }\r\n \r\n currentAudio = new Audio(card.pronunciationUrl);\r\n currentAudio.play().catch(error => {\r\n console.error('Error playing pronunciation:', error);\r\n showError('Unable to play pronunciation. Please check your internet connection.');\r\n });\r\n \r\n \/\/ Clear reference when audio ends\r\n currentAudio.addEventListener('ended', () => {\r\n currentAudio = null;\r\n });\r\n }\r\n }\r\n\r\n function playExampleSentence() {\r\n const card = chineseCardsData[currentCardIndex];\r\n if (card.exampleAudioUrl) {\r\n \/\/ Stop any currently playing audio\r\n if (currentAudio) {\r\n currentAudio.pause();\r\n currentAudio.currentTime = 0;\r\n }\r\n \r\n currentAudio = new Audio(card.exampleAudioUrl);\r\n currentAudio.play().catch(error => {\r\n console.error('Error playing example sentence:', error);\r\n showError('Unable to play example sentence. Please check your internet connection.');\r\n });\r\n \r\n \/\/ Clear reference when audio ends\r\n currentAudio.addEventListener('ended', () => {\r\n currentAudio = null;\r\n });\r\n }\r\n }\r\n\r\n function changeColorTheme(color) {\r\n document.querySelectorAll('.color-option').forEach(option => {\r\n option.classList.remove('selected');\r\n });\r\n document.querySelector(`[data-color=\"${color}\"]`).classList.add('selected');\r\n applyColorTheme(color);\r\n }\r\n\r\n function applyColorTheme(color) {\r\n const cardFront = document.querySelector('.card-front');\r\n const cardBack = document.querySelector('.card-back');\r\n const chineseWordEl = document.getElementById('chineseWord');\r\n const pinyinEl = document.getElementById('pinyin');\r\n const exampleEl = document.getElementById('exampleSentence');\r\n const fieldLabels = document.querySelectorAll('.field-label');\r\n \r\n if (color === 'default') {\r\n \/\/ Default: use SKILL palette and a darker example sentence\r\n cardFront.style.background = 'linear-gradient(135deg, #CFE2CF, #8DBEA2)';\r\n cardBack.style.background = 'linear-gradient(135deg, #CFE2CF, #8DBEA2)';\r\n chineseWordEl.style.color = '#000000';\r\n pinyinEl.style.color = '#000000';\r\n exampleEl.style.color = '#000000';\r\n \/\/ Default theme: section labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#000000');\r\n } else if (color === '#222222') {\r\n \/\/ Dark Charcoal: lighten pinyin and example sentence\r\n cardFront.style.background = color;\r\n cardBack.style.background = color;\r\n chineseWordEl.style.color = '#FFFFFF';\r\n pinyinEl.style.color = '#FFFFFF';\r\n exampleEl.style.color = '#FFFFFF';\r\n \/\/ Labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#FFFFFF');\r\n } else if (color === '#416D19') {\r\n \/\/ Forest Green: use non-green for pinyin and example sentence\r\n cardFront.style.background = color;\r\n cardBack.style.background = color;\r\n chineseWordEl.style.color = '#FFFFFF';\r\n pinyinEl.style.color = '#FFFFFF';\r\n exampleEl.style.color = '#FFFFFF';\r\n \/\/ Section labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#FFFFFF');\r\n } else {\r\n cardFront.style.background = color;\r\n cardBack.style.background = color;\r\n chineseWordEl.style.color = '#000000';\r\n pinyinEl.style.color = '#000000';\r\n exampleEl.style.color = '#000000';\r\n \/\/ Labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#000000');\r\n }\r\n }\r\n\r\n function showError(message) {\r\n const errorEl = document.getElementById('errorMessage');\r\n errorEl.textContent = message;\r\n errorEl.style.display = 'block';\r\n setTimeout(() => {\r\n errorEl.style.display = 'none';\r\n }, 5000);\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', init);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Chinese Flash Cards Chinese Flash Cards Learn Chinese characters with pronunciation and example sentences \u963f \u53d1\u97f3 (Pronunciation): \u0101 \u4f8b\u53e5 (Example Sentence): \"\u5c9b\u5185\u6709\u7ec4\u5e26\u822c\u7684\u7011\u5e03,\u84dd\u5b9d\u77f3\u4f3c\u7684\u6e56\u6cca,\u56db\u5b63\u5e38\u9752\u7684\u68ee\u6797\u548c\u679c\u56ed,\u81ea\u7136\u666f\u8272\u5341\u5206\u4f18\u7f8e\u3002\u897f\u5357\u90e8\u7684\u963f\u91cc\u5c71\u548c\u65e5\u6708\u6f6d,\u53f0\u5317\u5e02\u90ca\u7684\u5927\u5c6f\u5c71\u98ce\u666f\u533a,\u90fd\u662f\u95fb\u540d\u4e16\u754c\u7684\u6e38\u89c8\u80dc\u5730\u3002\" Card 1 of 3 \u2191 \u2193 - Flip card | \u2190 \u2192 - Navigate cards | Click - Flip card \u2190 Previous Flip Card Next \u2192 Customize Your Flashcards Card Color Theme Default...<\/p>\n","protected":false},"author":748,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"redux-templates_canvas","meta":{"_expiration-date-status":"","_expiration-date":0,"_expiration-date-type":"","_expiration-date-categories":[],"_expiration-date-options":[]},"yoast_head":"\n<title>Resource 1 Chinese Flash Cards - Hong Kong Metropolitan University<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resource 1 Chinese Flash Cards\" \/>\n<meta property=\"og:description\" content=\"Chinese Flash Cards Chinese Flash Cards Learn Chinese characters with pronunciation and example sentences \u963f \u53d1\u97f3 (Pronunciation): \u0101 \u4f8b\u53e5 (Example Sentence):\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/\" \/>\n<meta property=\"og:site_name\" content=\"Hong Kong Metropolitan University\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-06T06:31:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n","yoast_head_json":{"title":"Resource 1 Chinese Flash Cards - Hong Kong Metropolitan University","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","og_locale":"en_US","og_type":"article","og_title":"Resource 1 Chinese Flash Cards","og_description":"Chinese Flash Cards Chinese Flash Cards Learn Chinese characters with pronunciation and example sentences \u963f \u53d1\u97f3 (Pronunciation): \u0101 \u4f8b\u53e5 (Example Sentence):","og_url":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","og_site_name":"Hong Kong Metropolitan University","article_modified_time":"2025-11-06T06:31:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","url":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","name":"Resource 1 Chinese Flash Cards - Hong Kong Metropolitan University","isPartOf":{"@id":"https:\/\/www.hkmu.edu.hk\/oetools\/#website"},"datePublished":"2025-10-14T06:22:44+00:00","dateModified":"2025-11-06T06:31:57+00:00","breadcrumb":{"@id":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Open Educational Tools","item":"\/oetools\/"},{"@type":"ListItem","position":2,"name":"Resource 1 Chinese Flash Cards"}]},{"@type":"WebSite","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/#website","url":"https:\/\/www.hkmu.edu.hk\/oetools\/","name":"Hong Kong Metropolitan University","description":"Open Educational Tools - Hong Kong Metropolitan University","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hkmu.edu.hk\/oetools\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30608"}],"collection":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/users\/748"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/comments?post=30608"}],"version-history":[{"count":24,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30608\/revisions"}],"predecessor-version":[{"id":30965,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30608\/revisions\/30965"}],"wp:attachment":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/media?parent=30608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Chinese Flash Cards<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #32744C; \/* SKILL deep green *\/\r\n --primary-light: #508E42; \/* SKILL medium green *\/\r\n --primary-dark: #4C4F26; \/* SKILL dark olive *\/\r\n --accent-green: #508E42; \/* Align accents *\/\r\n --medium-gray: #e0e0e0;\r\n --dark-gray: #707070;\r\n --warning-color: #3A7CA5; \/* Coherent blue for highlights and flip button *\/\r\n --dark-text: #333;\r\n --light-text: #666;\r\n --card-bg: rgba(255, 255, 255, 0.95);\r\n --bg-light: linear-gradient(135deg, #CFE2CF, #8DBEA2); \/* SKILL soft green gradient *\/\r\n --shadow: 0 15px 40px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Microsoft YaHei', '\u9ed1\u4f53', 'SimHei', Arial, sans-serif;\r\n }\r\n \r\n body {\r\n color: var(--dark-text);\r\n min-height: 100vh;\r\n padding: 20px;\r\n line-height: 1.6;\r\n }\r\n \r\n .container {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);\r\n overflow: hidden;\r\n }\r\n \r\n .header {\r\n background: linear-gradient(45deg, var(--primary-color), var(--primary-light));\r\n color: #ffffff;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .section {\r\n padding: 30px;\r\n }\r\n \r\n button {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .flashcard-controls {\r\n background: var(--card-bg);\r\n border-radius: 15px;\r\n box-shadow: var(--shadow);\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n \r\n .card-counter {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--primary-color);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .control-buttons {\r\n display: flex;\r\n gap: 15px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .control-btn {\r\n min-width: 120px;\r\n flex: 1;\r\n max-width: 200px;\r\n }\r\n \r\n .prev-btn {\r\n background: var(--dark-gray);\r\n color: white;\r\n }\r\n \r\n .next-btn {\r\n background: var(--accent-green);\r\n color: white;\r\n }\r\n \r\n .flip-btn {\r\n background: var(--warning-color);\r\n color: white;\r\n }\r\n \r\n .control-btn:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n }\r\n \r\n .control-btn:disabled {\r\n background-color: var(--medium-gray);\r\n cursor: not-allowed;\r\n }\r\n \r\n .flashcard-container {\r\n perspective: 1000px;\r\n margin: 0 auto;\r\n max-width: 800px;\r\n }\r\n \r\n .flashcard {\r\n background-color: #CFE2CF; \/* SKILL light background *\/\r\n text-align: center;\r\n color: black;\r\n margin: 0 auto;\r\n min-height: 400px;\r\n max-height: 800px;\r\n border-radius: 15px;\r\n box-shadow: var(--shadow);\r\n transition: transform 0.6s;\r\n transform-style: preserve-3d;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n \r\n .flashcard.flipped {\r\n transform: rotateY(180deg);\r\n }\r\n \r\n .card-face {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 400px;\r\n backface-visibility: hidden;\r\n border-radius: 15px;\r\n padding: 30px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n overflow-y: auto;\r\n box-sizing: border-box;\r\n }\r\n \r\n .card-front {\r\n background: linear-gradient(135deg, #CFE2CF, #8DBEA2); \/* SKILL palette *\/\r\n }\r\n \r\n .card-back {\r\n background: linear-gradient(135deg, #CFE2CF, #8DBEA2); \/* SKILL palette *\/\r\n transform: rotateY(180deg);\r\n text-align: left;\r\n }\r\n \r\n .chinese-word {\r\n font-size: 120px;\r\n font-weight: 700;\r\n color: #32744C; \/* SKILL title tone *\/\r\n margin: auto;\r\n }\r\n \r\n .back-content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n \r\n .field-group {\r\n margin-bottom: 25px;\r\n }\r\n \r\n .field-label {\r\n font-weight: 600;\r\n font-size: 18px;\r\n color: var(--primary-color);\r\n margin-bottom: 8px;\r\n }\r\n \r\n .pinyin-row, .example-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n .pinyin-text {\r\n font-size: 24px;\r\n color: #32744C; \/* SKILL tone *\/\r\n font-weight: 500;\r\n flex: 1;\r\n }\r\n \r\n .speaker-icon {\r\n width: 40px;\r\n height: 40px;\r\n background: var(--primary-color);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .speaker-icon:hover {\r\n background: var(--primary-dark);\r\n transform: scale(1.1);\r\n }\r\n \r\n .speaker-icon svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: white;\r\n }\r\n \r\n .example-sentence {\r\n color: #508E42; \/* SKILL accent *\/\r\n font-size: 16px;\r\n line-height: 1.8;\r\n flex: 1;\r\n }\r\n \r\n .settings-panel {\r\n background: var(--card-bg);\r\n border-radius: 15px;\r\n box-shadow: var(--shadow);\r\n margin-top: 20px;\r\n padding: 20px;\r\n }\r\n \r\n .settings-header {\r\n color: var(--primary-color);\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n \r\n .settings-section h4 {\r\n color: var(--dark-text);\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n border-bottom: 2px solid var(--medium-gray);\r\n padding-bottom: 8px;\r\n }\r\n \r\n .color-options {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n gap: 15px;\r\n }\r\n \r\n .color-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px;\r\n border: 2px solid transparent;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .color-option:hover {\r\n border-color: var(--primary-color);\r\n background: rgba(250, 151, 94, 0.1);\r\n }\r\n \r\n .color-option.selected {\r\n border-color: var(--primary-color);\r\n background: rgba(250, 151, 94, 0.2);\r\n }\r\n \r\n .color-preview {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n border: 2px solid #fff;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n \r\n .color-name {\r\n font-size: 14px;\r\n color: var(--dark-text);\r\n font-weight: 500;\r\n }\r\n \r\n .error-message {\r\n background: #f8d7da;\r\n color: #721c24;\r\n padding: 15px;\r\n border-radius: 8px;\r\n margin: 20px 0;\r\n text-align: center;\r\n font-weight: 600;\r\n display: none;\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .chinese-word {\r\n font-size: 80px;\r\n }\r\n \r\n .control-buttons {\r\n flex-direction: column;\r\n }\r\n \r\n .control-btn {\r\n max-width: none;\r\n }\r\n \r\n .pinyin-row, .example-row {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>Chinese Flash Cards<\/h1>\r\n <p>Learn Chinese characters with pronunciation and example sentences<\/p>\r\n <\/div>\r\n \r\n <div class=\"section\">\r\n <div class=\"flashcard-container\">\r\n <div id=\"flashcard\" class=\"flashcard\">\r\n <div class=\"card-face card-front\">\r\n <div id=\"chineseWord\" class=\"chinese-word\">\u963f<\/div>\r\n <\/div>\r\n <div class=\"card-face card-back\">\r\n <div class=\"back-content\">\r\n <div class=\"field-group\">\r\n <div class=\"field-label\">\u53d1\u97f3 (Pronunciation):<\/div>\r\n <div class=\"pinyin-row\">\r\n <div id=\"pinyin\" class=\"pinyin-text\">\u0101<\/div>\r\n <div class=\"speaker-icon\" onclick=\"event.stopPropagation(); playPronunciation();\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M3 9v6h4l5 5V4l-5 5H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"field-group\">\r\n <div class=\"field-label\">\u4f8b\u53e5 (Example Sentence):<\/div>\r\n <div class=\"example-row\">\r\n <div id=\"exampleSentence\" class=\"example-sentence\">\"\u5c9b\u5185\u6709\u7ec4\u5e26\u822c\u7684\u7011\u5e03,\u84dd\u5b9d\u77f3\u4f3c\u7684\u6e56\u6cca,\u56db\u5b63\u5e38\u9752\u7684\u68ee\u6797\u548c\u679c\u56ed,\u81ea\u7136\u666f\u8272\u5341\u5206\u4f18\u7f8e\u3002\u897f\u5357\u90e8\u7684\u963f\u91cc\u5c71\u548c\u65e5\u6708\u6f6d,\u53f0\u5317\u5e02\u90ca\u7684\u5927\u5c6f\u5c71\u98ce\u666f\u533a,\u90fd\u662f\u95fb\u540d\u4e16\u754c\u7684\u6e38\u89c8\u80dc\u5730\u3002\"<\/div>\r\n <div class=\"speaker-icon\" onclick=\"event.stopPropagation(); playExampleSentence();\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M3 9v6h4l5 5V4l-5 5H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flashcard-controls\">\r\n <div id=\"cardCounter\" class=\"card-counter\">Card 1 of 3<\/div>\r\n <p style=\"color: var(--light-text); margin: 10px 0; font-size: 14px;\">\r\n <strong>\u2191 \u2193<\/strong> - Flip card | <strong>\u2190 \u2192<\/strong> - Navigate cards | <strong>Click<\/strong> - Flip card\r\n <\/p>\r\n <div class=\"control-buttons\">\r\n <button id=\"prevBtn\" class=\"control-btn prev-btn\">\u2190 Previous<\/button>\r\n <button id=\"flipBtn\" class=\"control-btn flip-btn\">Flip Card<\/button>\r\n <button id=\"nextBtn\" class=\"control-btn next-btn\">Next \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"settings-panel\">\r\n <h2 class=\"settings-header\">Customize Your Flashcards<\/h2>\r\n <div class=\"settings-section\">\r\n <h4>Card Color Theme<\/h4>\r\n <div class=\"color-options\">\r\n <div class=\"color-option selected\" data-color=\"default\">\r\n <div class=\"color-preview\" style=\"background: linear-gradient(135deg, #CFE2CF, #8DBEA2);\"><\/div>\r\n <span class=\"color-name\">Default<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#222222\">\r\n <div class=\"color-preview\" style=\"background: #222222;\"><\/div>\r\n <span class=\"color-name\">Dark Charcoal<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#416D19\">\r\n <div class=\"color-preview\" style=\"background: #416D19;\"><\/div>\r\n <span class=\"color-name\">Forest Green<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#E5C287\">\r\n <div class=\"color-preview\" style=\"background: #E5C287;\"><\/div>\r\n <span class=\"color-name\">Warm Orange<\/span>\r\n <\/div>\r\n <div class=\"color-option\" data-color=\"#d1ebed\">\r\n <div class=\"color-preview\" style=\"background: #d1ebed;\"><\/div>\r\n <span class=\"color-name\">Relaxing Blue<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"errorMessage\" class=\"error-message\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const chineseCardsData = [\r\n {\r\n chinese: \"\u963f\",\r\n pinyin: \"\u0101\",\r\n pronunciationUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/1_%E9%98%BF.mp3\",\r\n example: \"\u963f\u516c\u963f\u5a46\uff0c\u5272\u9ea6\u63d2\u79be\",\r\n exampleAudioUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/%E9%98%BF-%E4%BE%8B%E5%8F%A51.mp3\"\r\n },\r\n {\r\n chinese: \"\u6328\",\r\n pinyin: \"\u0101i\",\r\n pronunciationUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/2_%E6%8C%A8.mp3\",\r\n example: \"\u738b\u53cb\u5df2\u7ecf\u7b49\u5728\u95e8\u53e3\u51c6\u5907\u6328\u8bad\u4e86\",\r\n exampleAudioUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/%E6%8C%A8-%E4%BE%8B%E5%8F%A51.mp3\"\r\n },\r\n {\r\n chinese: \"\u77ee\",\r\n pinyin: \"\u01cei\",\r\n pronunciationUrl: \"https:\/\/raw.githubusercontent.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/main\/3_%E7%9F%AE.mp3\",\r\n example: \"\u770b\u5427\uff0c\u5c71\u4e0a\u7684\u77ee\u677e\u8d8a\u53d1\u7684\u9752\u9ed1\",\r\n exampleAudioUrl: \"https:\/\/github.com\/oetools\/Putonghua-Pronunciation-Cards-Audios\/raw\/refs\/heads\/main\/%E7%9F%AE-%E4%BE%8B%E5%8F%A51.mp3\"\r\n }\r\n ];\r\n\r\n let currentCardIndex = 0;\r\n let isFlipped = false;\r\n let currentAudio = null; \/\/ Track currently playing audio\r\n\r\n function init() {\r\n displayCurrentCard();\r\n setupEventListeners();\r\n updateUI();\r\n }\r\n\r\n function setupEventListeners() {\r\n document.getElementById('prevBtn').addEventListener('click', showPreviousCard);\r\n document.getElementById('nextBtn').addEventListener('click', showNextCard);\r\n document.getElementById('flipBtn').addEventListener('click', flipCard);\r\n document.getElementById('flashcard').addEventListener('click', flipCard);\r\n document.addEventListener('keydown', handleKeydown);\r\n\r\n document.querySelectorAll('.color-option').forEach(option => {\r\n option.addEventListener('click', () => changeColorTheme(option.dataset.color));\r\n });\r\n }\r\n\r\n function handleKeydown(event) {\r\n switch(event.key) {\r\n case 'ArrowLeft': showPreviousCard(); break;\r\n case 'ArrowRight': showNextCard(); break;\r\n case 'ArrowUp':\r\n case 'ArrowDown': flipCard(); break;\r\n }\r\n }\r\n\r\n function displayCurrentCard() {\r\n const card = chineseCardsData[currentCardIndex];\r\n document.getElementById('chineseWord').textContent = card.chinese;\r\n document.getElementById('pinyin').textContent = card.pinyin;\r\n document.getElementById('exampleSentence').textContent = card.example;\r\n \r\n isFlipped = false;\r\n document.getElementById('flashcard').classList.remove('flipped');\r\n }\r\n\r\n function showPreviousCard() {\r\n if (currentCardIndex > 0) {\r\n currentCardIndex--;\r\n displayCurrentCard();\r\n updateUI();\r\n }\r\n }\r\n\r\n function showNextCard() {\r\n if (currentCardIndex < chineseCardsData.length - 1) {\r\n currentCardIndex++;\r\n displayCurrentCard();\r\n updateUI();\r\n }\r\n }\r\n\r\n function flipCard() {\r\n isFlipped = !isFlipped;\r\n document.getElementById('flashcard').classList.toggle('flipped', isFlipped);\r\n \r\n \/\/ Auto-play pronunciation when card is flipped to the back side\r\n if (isFlipped) {\r\n \/\/ Small delay to ensure the card flip animation completes before playing audio\r\n setTimeout(playPronunciation, 300);\r\n }\r\n }\r\n\r\n function updateUI() {\r\n document.getElementById('cardCounter').textContent = `Card ${currentCardIndex + 1} of ${chineseCardsData.length}`;\r\n document.getElementById('prevBtn').disabled = currentCardIndex === 0;\r\n document.getElementById('nextBtn').disabled = currentCardIndex === chineseCardsData.length - 1;\r\n }\r\n\r\n function playPronunciation() {\r\n const card = chineseCardsData[currentCardIndex];\r\n if (card.pronunciationUrl) {\r\n \/\/ Stop any currently playing audio\r\n if (currentAudio) {\r\n currentAudio.pause();\r\n currentAudio.currentTime = 0;\r\n }\r\n \r\n currentAudio = new Audio(card.pronunciationUrl);\r\n currentAudio.play().catch(error => {\r\n console.error('Error playing pronunciation:', error);\r\n showError('Unable to play pronunciation. Please check your internet connection.');\r\n });\r\n \r\n \/\/ Clear reference when audio ends\r\n currentAudio.addEventListener('ended', () => {\r\n currentAudio = null;\r\n });\r\n }\r\n }\r\n\r\n function playExampleSentence() {\r\n const card = chineseCardsData[currentCardIndex];\r\n if (card.exampleAudioUrl) {\r\n \/\/ Stop any currently playing audio\r\n if (currentAudio) {\r\n currentAudio.pause();\r\n currentAudio.currentTime = 0;\r\n }\r\n \r\n currentAudio = new Audio(card.exampleAudioUrl);\r\n currentAudio.play().catch(error => {\r\n console.error('Error playing example sentence:', error);\r\n showError('Unable to play example sentence. Please check your internet connection.');\r\n });\r\n \r\n \/\/ Clear reference when audio ends\r\n currentAudio.addEventListener('ended', () => {\r\n currentAudio = null;\r\n });\r\n }\r\n }\r\n\r\n function changeColorTheme(color) {\r\n document.querySelectorAll('.color-option').forEach(option => {\r\n option.classList.remove('selected');\r\n });\r\n document.querySelector(`[data-color=\"${color}\"]`).classList.add('selected');\r\n applyColorTheme(color);\r\n }\r\n\r\n function applyColorTheme(color) {\r\n const cardFront = document.querySelector('.card-front');\r\n const cardBack = document.querySelector('.card-back');\r\n const chineseWordEl = document.getElementById('chineseWord');\r\n const pinyinEl = document.getElementById('pinyin');\r\n const exampleEl = document.getElementById('exampleSentence');\r\n const fieldLabels = document.querySelectorAll('.field-label');\r\n \r\n if (color === 'default') {\r\n \/\/ Default: use SKILL palette and a darker example sentence\r\n cardFront.style.background = 'linear-gradient(135deg, #CFE2CF, #8DBEA2)';\r\n cardBack.style.background = 'linear-gradient(135deg, #CFE2CF, #8DBEA2)';\r\n chineseWordEl.style.color = '#000000';\r\n pinyinEl.style.color = '#000000';\r\n exampleEl.style.color = '#000000';\r\n \/\/ Default theme: section labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#000000');\r\n } else if (color === '#222222') {\r\n \/\/ Dark Charcoal: lighten pinyin and example sentence\r\n cardFront.style.background = color;\r\n cardBack.style.background = color;\r\n chineseWordEl.style.color = '#FFFFFF';\r\n pinyinEl.style.color = '#FFFFFF';\r\n exampleEl.style.color = '#FFFFFF';\r\n \/\/ Labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#FFFFFF');\r\n } else if (color === '#416D19') {\r\n \/\/ Forest Green: use non-green for pinyin and example sentence\r\n cardFront.style.background = color;\r\n cardBack.style.background = color;\r\n chineseWordEl.style.color = '#FFFFFF';\r\n pinyinEl.style.color = '#FFFFFF';\r\n exampleEl.style.color = '#FFFFFF';\r\n \/\/ Section labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#FFFFFF');\r\n } else {\r\n cardFront.style.background = color;\r\n cardBack.style.background = color;\r\n chineseWordEl.style.color = '#000000';\r\n pinyinEl.style.color = '#000000';\r\n exampleEl.style.color = '#000000';\r\n \/\/ Labels match text color\r\n fieldLabels.forEach(el => el.style.color = '#000000');\r\n }\r\n }\r\n\r\n function showError(message) {\r\n const errorEl = document.getElementById('errorMessage');\r\n errorEl.textContent = message;\r\n errorEl.style.display = 'block';\r\n setTimeout(() => {\r\n errorEl.style.display = 'none';\r\n }, 5000);\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', init);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Chinese Flash Cards Chinese Flash Cards Learn Chinese characters with pronunciation and example sentences \u963f \u53d1\u97f3 (Pronunciation): \u0101 \u4f8b\u53e5 (Example Sentence): \"\u5c9b\u5185\u6709\u7ec4\u5e26\u822c\u7684\u7011\u5e03,\u84dd\u5b9d\u77f3\u4f3c\u7684\u6e56\u6cca,\u56db\u5b63\u5e38\u9752\u7684\u68ee\u6797\u548c\u679c\u56ed,\u81ea\u7136\u666f\u8272\u5341\u5206\u4f18\u7f8e\u3002\u897f\u5357\u90e8\u7684\u963f\u91cc\u5c71\u548c\u65e5\u6708\u6f6d,\u53f0\u5317\u5e02\u90ca\u7684\u5927\u5c6f\u5c71\u98ce\u666f\u533a,\u90fd\u662f\u95fb\u540d\u4e16\u754c\u7684\u6e38\u89c8\u80dc\u5730\u3002\" Card 1 of 3 \u2191 \u2193 - Flip card | \u2190 \u2192 - Navigate cards | Click - Flip card \u2190 Previous Flip Card Next \u2192 Customize Your Flashcards Card Color Theme Default...<\/p>\n","protected":false},"author":748,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"redux-templates_canvas","meta":{"_expiration-date-status":"","_expiration-date":0,"_expiration-date-type":"","_expiration-date-categories":[],"_expiration-date-options":[]},"yoast_head":"\n<title>Resource 1 Chinese Flash Cards - Hong Kong Metropolitan University<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resource 1 Chinese Flash Cards\" \/>\n<meta property=\"og:description\" content=\"Chinese Flash Cards Chinese Flash Cards Learn Chinese characters with pronunciation and example sentences \u963f \u53d1\u97f3 (Pronunciation): \u0101 \u4f8b\u53e5 (Example Sentence):\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/\" \/>\n<meta property=\"og:site_name\" content=\"Hong Kong Metropolitan University\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-06T06:31:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n","yoast_head_json":{"title":"Resource 1 Chinese Flash Cards - Hong Kong Metropolitan University","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","og_locale":"en_US","og_type":"article","og_title":"Resource 1 Chinese Flash Cards","og_description":"Chinese Flash Cards Chinese Flash Cards Learn Chinese characters with pronunciation and example sentences \u963f \u53d1\u97f3 (Pronunciation): \u0101 \u4f8b\u53e5 (Example Sentence):","og_url":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","og_site_name":"Hong Kong Metropolitan University","article_modified_time":"2025-11-06T06:31:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","url":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/","name":"Resource 1 Chinese Flash Cards - Hong Kong Metropolitan University","isPartOf":{"@id":"https:\/\/www.hkmu.edu.hk\/oetools\/#website"},"datePublished":"2025-10-14T06:22:44+00:00","dateModified":"2025-11-06T06:31:57+00:00","breadcrumb":{"@id":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Open Educational Tools","item":"\/oetools\/"},{"@type":"ListItem","position":2,"name":"Resource 1 Chinese Flash Cards"}]},{"@type":"WebSite","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/#website","url":"https:\/\/www.hkmu.edu.hk\/oetools\/","name":"Hong Kong Metropolitan University","description":"Open Educational Tools - Hong Kong Metropolitan University","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hkmu.edu.hk\/oetools\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30608"}],"collection":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/users\/748"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/comments?post=30608"}],"version-history":[{"count":24,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30608\/revisions"}],"predecessor-version":[{"id":30965,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30608\/revisions\/30965"}],"wp:attachment":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/media?parent=30608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}