{"id":3816,"date":"2025-11-13T18:29:30","date_gmt":"2025-11-13T18:29:30","guid":{"rendered":"https:\/\/www.readingca.org.uk\/wordpress\/?p=3816"},"modified":"2026-04-16T17:59:30","modified_gmt":"2026-04-16T17:59:30","slug":"flash-card-game","status":"publish","type":"post","link":"https:\/\/www.readingca.org.uk\/wordpress\/flash-card-game\/","title":{"rendered":"Vegetable flashcards &#8211; \u852c\u83dc\u9583\u5361"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3816\" class=\"elementor elementor-3816\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63cddeab e-flex e-con-boxed e-con e-parent\" data-id=\"63cddeab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c3106d7 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"1c3106d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\naudio { display: none;}\r\n\/* Define a base button style *\/\r\n.container {\r\n    display: flex;\r\n    justify-content: center;\r\n    padding 20px;\r\n}\r\n.button {\r\n    width: 70px;\r\n    height: 40px;\r\n    border: none;\r\n    color: white;\r\n    padding: 5px 5px;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    font-size: 16px;\r\n    margin: 2px 2px;\r\n    cursor: pointer;\r\n    border-radius: 4px;\r\n}\r\n\r\n\/* Specific styles for different colored buttons *\/\r\n.button-white {\r\n    background-color: #ffffff;\r\n}\r\n.button-red {\r\n    background-color: #ff4c4c;\r\n}\r\n.button-green {\r\n    background-color: #4caf50;\r\n}\r\n.button-blue {\r\n    background-color: #2196f3;\r\n}\r\n.button-yellow {\r\n    background-color: #ffeb3b;\r\n    color: black; \/* Adjust text color for readability *\/\r\n}\r\n.bilingual-phrase {\r\n  border: 1px solid #ccc;\r\n  padding: 1em;\r\n  margin-bottom: 1em;\r\n  text-align: center;\r\n}\r\n.phrase-image {\r\n  max-width: 200px;\r\n  height: auto;\r\n  margin-bottom: 1em;\r\n}\r\n\r\n.highlight {\r\n    font-weight: bold;\r\n}\r\n.flashcard {\r\n  border: 2px solid #ccc;\r\n  padding: 1em;\r\n  margin: 1em 0;\r\n  text-align: center;\r\n  background: #f9f9f9;\r\n}\r\n.flashcard .phrase-image {\r\n  max-width: 200px;\r\n  height: auto;\r\n  margin-bottom: 1em;\r\n}\r\n.flashcard .reveal-button {\r\n  margin-top: 1em;\r\n  padding: 0.5em 1em;\r\n  background: #2196f3;\r\n  font-size: 16px;\r\n  color: white;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n.flashcard .reveal-button:hover {\r\n  background: #1976d2;\r\n}\r\n.next-button-wrapper {\r\n  text-align: center;\r\n  margin-top: 1em;\r\n}\r\n\r\n.card-action .button-group {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  margin-bottom: 0px;\r\n}\r\n\r\n.card-action button {\r\n  font-size: 16px;\r\n  padding: 6px 12px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 6px;\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n  cursor: pointer;\r\n  transition: background-color 0.3s ease;\r\n}\r\n\r\n.card-action button:hover {\r\n  background-color: #e0e0e0;\r\n}\r\n\r\n.pronunciation-recorder .button-group {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 10px;\r\n\r\n  \/* Pin to bottom of viewport *\/\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n\r\n  \/* Styling for visibility *\/\r\n  background: #f9f9f9;   \/* optional: give it a background *\/\r\n  padding: 10px;         \/* space around buttons *\/\r\n  border-top: 1px solid #ccc; \/* subtle divider *\/\r\n  z-index: 1000;         \/* keep it above other elements *\/\r\n}\r\n\r\n\r\n.pronunciation-recorder button {\r\n  font-size: 16px;\r\n  padding: 6px 12px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 6px;\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n  cursor: pointer;\r\n  transition: background-color 0.3s ease;\r\n}\r\n\r\n.pronunciation-recorder button:hover {\r\n  background-color: #e0e0e0;\r\n}\r\n\r\n#flashcard-container {\r\n  margin-bottom: 1em;\r\n}\r\n#next-flashcard {\r\n  padding: 0.5em 1em;\r\n  background: #4caf50;\r\n  color: white;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n#next-flashcard:hover {\r\n  background: #388e3c;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nfunction playAudioSegment(button) {\r\n    const filename = button.getAttribute('data-clip');\r\n    \r\n    const audio = new Audio(filename);\r\n    button.style.backgroundColor = '#ff4c4c'; \/\/ Active color\r\n    audio.play();\r\n\r\n    audio.addEventListener('ended', () => {\r\n        button.style.backgroundColor = '#4c8eff'; \/\/ Reset color\r\n    });\r\n}\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6ed6cf9 e-flex e-con-boxed e-con e-parent\" data-id=\"6ed6cf9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9eb271a elementor-widget elementor-widget-text-editor\" data-id=\"9eb271a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"color: #000000;\">\u852c\u83dc\u9583\u5361\u904a\u6232 &#8211;\u00a0<\/span><\/h3><h4><span style=\"color: #000000;\">\u5171\u4e94\u5341\u516d\u5f35<\/span><span style=\"color: #000000;\">\u9583\u5361\uff0c<\/span>\u5206\u56db\u7d44\uff0c\u6bcf\u7d44\u5341\u56db\u5f35\u3002<\/h4><p><span style=\"color: #000000;\"><!--StartFragment --><\/span><\/p><p><span style=\"color: #000000;\">\u5982\u4f55\u4f7f\u7528\u9583\u5361\u63d0\u5347\u62fc\u5b57\u8207\u767c\u97f3\u6280\u5de7<\/span><\/p><ol><li><span style=\"color: #000000;\"><strong>\u89c0\u770b\u9583\u5361\u6b63\u9762<\/strong><\/span><ul><li><span style=\"color: #000000;\">\u4f60\u6703\u770b\u5230\u4e00\u5f35\u5716\u7247\u548c\u5c0d\u61c9\u7684\u4e2d\u6587\u8a5e\u8a9e\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u5617\u8a66\u731c\u51fa\u4e26\u62fc\u5beb\u51fa\u76f8\u61c9\u7684\u82f1\u6587\u8a5e\u8a9e\u3002<\/span><\/li><\/ul><\/li><li><span style=\"color: #000000;\"><strong>\u6717\u8b80\u82f1\u6587\u8a5e\u8a9e<\/strong><\/span><ul><li><span style=\"color: #000000;\">\u6e05\u6670\u81ea\u4fe1\u5730\u8aaa\u51fa\u4f60\u731c\u7684\u82f1\u6587\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u6309\u4e0b <strong>\ud83c\udf99\ufe0f \u9304\u97f3<\/strong> \u6309\u9215\u4f86\u9304\u4e0b\u4f60\u7684\u767c\u97f3\u3002<\/span><\/li><\/ul><\/li><li><span style=\"color: #000000;\"><strong>\u64ad\u653e\u4f60\u7684\u9304\u97f3<\/strong><\/span><ul><li><span style=\"color: #000000;\">\u6309\u4e0b <strong>\u25b6\ufe0f \u64ad\u653e<\/strong> \u6309\u9215\u8046\u807d\u81ea\u5df1\u7684\u767c\u97f3\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u4ed4\u7d30\u8046\u807d\uff0c\u6aa2\u67e5\u662f\u5426\u6b63\u78ba\u3002<\/span><\/li><\/ul><\/li><li><span style=\"color: #000000;\"><strong>\u63ed\u793a\u6b63\u78ba\u7b54\u6848<\/strong><\/span><ul><li><span style=\"color: #000000;\">\u6309\u4e0b\u00a0\ud83e\udde0<\/span><b style=\"color: #000000;\">\u7b54\u6848<\/b><span style=\"color: #000000;\"> \u6309\u9215\u7ffb\u8f49\u9583\u5361\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u4f60\u5c07\u770b\u5230\u6b63\u78ba\u7684\u82f1\u6587\u62fc\u5b57\u3002<\/span><\/li><\/ul><\/li><li><span style=\"color: #000000;\"><strong>\u8046\u807d\u6a19\u6e96\u767c\u97f3<\/strong><\/span><ul><li><span style=\"color: #000000;\">\u6309\u4e0b \ud83d\udde3\ufe0f<strong>\u00a0\u767c\u97f3<\/strong> \u6309\u9215\u64ad\u653e\u6a19\u6e96\u97f3\u6a94\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u5c07\u4f60\u7684\u9304\u97f3\u8207\u6a19\u6e96\u767c\u97f3\u9032\u884c\u6bd4\u8f03\u3002<\/span><\/li><\/ul><\/li><li><span style=\"color: #000000;\"><strong>\u91cd\u8907\u7df4\u7fd2\uff0c\u6301\u7e8c\u9032\u6b65<\/strong><\/span><ul><li><span style=\"color: #000000;\">\u5982\u6709\u9700\u8981\uff0c\u53ef\u518d\u6b21\u9304\u97f3\u4e26\u6bd4\u8f03\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u5229\u7528\u5716\u7247\u3001\u97f3\u8a0a\u8207\u62fc\u5b57\u63d0\u793a\u52a0\u5f37\u8a18\u61b6\u8207\u767c\u97f3\u3002<\/span><\/li><\/ul><\/li><\/ol><p><span style=\"color: #000000;\"><!--EndFragment --><\/span><\/p><h4 style=\"text-align: center;\">\u00a0<\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a7d305b e-flex e-con-boxed e-con e-parent\" data-id=\"4a7d305b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57e2fdaa elementor-widget elementor-widget-shortcode\" data-id=\"57e2fdaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"flashcard_veg-1_container\" class=\"flashcard-wrapper\">\n       \n\t\t<div class=\"flashcard\">\n        <img decoding=\"async\" src=\"https:\/\/www.readingca.org.uk\/wordpress\/wp-content\/uploads\/2025\/10\/pak-choi.png\" alt=\"Pak choi\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u767d\u83dc<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Pak choi<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02ccp\u00e6k \u02c8t\u0283\u0254\u026a\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/veg-names\/vg-10.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button>\n        <\/div>\n        <button class=\"reveal-button\" onclick=\"this.previousElementSibling.style.display='block'; this.style.display='none';\">\ud83e\udde0\u7b54\u6848<\/button>\n    <\/div><script>\nlocalStorage.setItem('shownFlashcardIds_veg-1', JSON.stringify(['17']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_veg-1_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\t\n\t<div class=\"button-group\">\n   \n\t<button id=\"flashcard_veg-1_next\" data-ids=\"9,10,11,12,13,14,15,16,17,18,19,20,21,22\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_veg-1'); \t\t  location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n\t\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const button = document.getElementById('flashcard_veg-1_next');\n        const container = document.getElementById('flashcard_veg-1_container');\n        const progress = document.getElementById('flashcard_veg-1_progress');\n        const storageKey = 'shownFlashcardIds_veg-1';\n\n        const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim());\n\n        function updateProgress(shownIds) {\n            progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n        }\n\n        button.addEventListener('click', function() {\n          \n\t\t\t\n\t\t\tconst shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\nconst remainingIds = allIds.filter(id => !shownIds.includes(id));\n\t\t\t\n            if (remainingIds.length === 0) {\n    localStorage.setItem(storageKey, '[]');\n    container.innerHTML = `\n        <div class=\"next-button-wrapper\">\n            \u6240\u6709\u5b57\u5361\u5df2\u986f\u793a\uff0c\u91cd\u65b0\u958b\u59cb...\n            <br>\n            <button onclick=\"localStorage.removeItem('${storageKey}'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n        <\/div>`;\n    return;\n}\n\n            const randomId = remainingIds[Math.floor(Math.random() * remainingIds.length)];\n\n            fetch('https:\/\/www.readingca.org.uk\/wordpress\/wp-admin\/admin-ajax.php?action=get_flashcard_by_id&id=' + randomId)\n                .then(response => response.text())\n                .then(html => {\n                    container.querySelector('.flashcard').outerHTML = html;\n                    shownIds.push(randomId);\n                    localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                    updateProgress(shownIds);\n                });\n        });\n\n        updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-76fee8cc e-flex e-con-boxed e-con e-parent\" data-id=\"76fee8cc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ddbdf1b elementor-widget elementor-widget-shortcode\" data-id=\"3ddbdf1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"flashcard_veg-2_container\" class=\"flashcard-wrapper\">\n       \n\t\t<div class=\"flashcard\">\n        <img decoding=\"async\" src=\"https:\/\/www.readingca.org.uk\/wordpress\/wp-content\/uploads\/2025\/10\/mooli.png\" alt=\"Mooli\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u767d\u863f\u8514<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Mooli<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02c8mu\u02d0.li\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/veg-names\/vg-27.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button>\n        <\/div>\n        <button class=\"reveal-button\" onclick=\"this.previousElementSibling.style.display='block'; this.style.display='none';\">\ud83e\udde0\u7b54\u6848<\/button>\n    <\/div><script>\nlocalStorage.setItem('shownFlashcardIds_veg-2', JSON.stringify(['33']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_veg-2_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\t\n\t<div class=\"button-group\">\n   \n\t<button id=\"flashcard_veg-2_next\" data-ids=\"23,24,25,26,27,28,29,30,31,32,33,34,35,36\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_veg-2'); \t\t  location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n\t\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const button = document.getElementById('flashcard_veg-2_next');\n        const container = document.getElementById('flashcard_veg-2_container');\n        const progress = document.getElementById('flashcard_veg-2_progress');\n        const storageKey = 'shownFlashcardIds_veg-2';\n\n        const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim());\n\n        function updateProgress(shownIds) {\n            progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n        }\n\n        button.addEventListener('click', function() {\n          \n\t\t\t\n\t\t\tconst shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\nconst remainingIds = allIds.filter(id => !shownIds.includes(id));\n\t\t\t\n            if (remainingIds.length === 0) {\n    localStorage.setItem(storageKey, '[]');\n    container.innerHTML = `\n        <div class=\"next-button-wrapper\">\n            \u6240\u6709\u5b57\u5361\u5df2\u986f\u793a\uff0c\u91cd\u65b0\u958b\u59cb...\n            <br>\n            <button onclick=\"localStorage.removeItem('${storageKey}'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n        <\/div>`;\n    return;\n}\n\n            const randomId = remainingIds[Math.floor(Math.random() * remainingIds.length)];\n\n            fetch('https:\/\/www.readingca.org.uk\/wordpress\/wp-admin\/admin-ajax.php?action=get_flashcard_by_id&id=' + randomId)\n                .then(response => response.text())\n                .then(html => {\n                    container.querySelector('.flashcard').outerHTML = html;\n                    shownIds.push(randomId);\n                    localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                    updateProgress(shownIds);\n                });\n        });\n\n        updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1eb158e1 e-flex e-con-boxed e-con e-parent\" data-id=\"1eb158e1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e178616 elementor-widget elementor-widget-shortcode\" data-id=\"5e178616\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"flashcard_veg-3_container\" class=\"flashcard-wrapper\">\n       \n\t\t<div class=\"flashcard\">\n        <img decoding=\"async\" src=\"https:\/\/www.readingca.org.uk\/wordpress\/wp-content\/uploads\/2025\/10\/red-onion.png\" alt=\"Red onion\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u7d2b\u6d0b\u8525<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Red onion<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/red \u02c8\u028cn.j\u0259n\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/veg-names\/vg-32.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button>\n        <\/div>\n        <button class=\"reveal-button\" onclick=\"this.previousElementSibling.style.display='block'; this.style.display='none';\">\ud83e\udde0\u7b54\u6848<\/button>\n    <\/div><script>\nlocalStorage.setItem('shownFlashcardIds_veg-3', JSON.stringify(['38']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_veg-3_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\t\n\t<div class=\"button-group\">\n   \n\t<button id=\"flashcard_veg-3_next\" data-ids=\"37,38,39,40,41,42,43,44,45,46,47,48,49,50\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_veg-3'); \t\t  location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n\t\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const button = document.getElementById('flashcard_veg-3_next');\n        const container = document.getElementById('flashcard_veg-3_container');\n        const progress = document.getElementById('flashcard_veg-3_progress');\n        const storageKey = 'shownFlashcardIds_veg-3';\n\n        const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim());\n\n        function updateProgress(shownIds) {\n            progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n        }\n\n        button.addEventListener('click', function() {\n          \n\t\t\t\n\t\t\tconst shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\nconst remainingIds = allIds.filter(id => !shownIds.includes(id));\n\t\t\t\n            if (remainingIds.length === 0) {\n    localStorage.setItem(storageKey, '[]');\n    container.innerHTML = `\n        <div class=\"next-button-wrapper\">\n            \u6240\u6709\u5b57\u5361\u5df2\u986f\u793a\uff0c\u91cd\u65b0\u958b\u59cb...\n            <br>\n            <button onclick=\"localStorage.removeItem('${storageKey}'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n        <\/div>`;\n    return;\n}\n\n            const randomId = remainingIds[Math.floor(Math.random() * remainingIds.length)];\n\n            fetch('https:\/\/www.readingca.org.uk\/wordpress\/wp-admin\/admin-ajax.php?action=get_flashcard_by_id&id=' + randomId)\n                .then(response => response.text())\n                .then(html => {\n                    container.querySelector('.flashcard').outerHTML = html;\n                    shownIds.push(randomId);\n                    localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                    updateProgress(shownIds);\n                });\n        });\n\n        updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9a317d e-flex e-con-boxed e-con e-parent\" data-id=\"e9a317d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7684225 elementor-widget elementor-widget-shortcode\" data-id=\"7684225\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"flashcard_veg-4_container\" class=\"flashcard-wrapper\">\n       \n\t\t<div class=\"flashcard\">\n        <img decoding=\"async\" src=\"https:\/\/www.readingca.org.uk\/wordpress\/wp-content\/uploads\/2025\/10\/pea.png\" alt=\"Pea\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u9752\u8c46<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Pea<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/pi\u02d0\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/veg-names\/vg-50.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button>\n        <\/div>\n        <button class=\"reveal-button\" onclick=\"this.previousElementSibling.style.display='block'; this.style.display='none';\">\ud83e\udde0\u7b54\u6848<\/button>\n    <\/div><script>\nlocalStorage.setItem('shownFlashcardIds_veg-4', JSON.stringify(['54']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_veg-4_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\t\n\t<div class=\"button-group\">\n   \n\t<button id=\"flashcard_veg-4_next\" data-ids=\"51,52,53,54,55,56,57,58,59,60,61,62,63,64\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_veg-4'); \t\t  location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n\t\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const button = document.getElementById('flashcard_veg-4_next');\n        const container = document.getElementById('flashcard_veg-4_container');\n        const progress = document.getElementById('flashcard_veg-4_progress');\n        const storageKey = 'shownFlashcardIds_veg-4';\n\n        const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim());\n\n        function updateProgress(shownIds) {\n            progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n        }\n\n        button.addEventListener('click', function() {\n          \n\t\t\t\n\t\t\tconst shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\nconst remainingIds = allIds.filter(id => !shownIds.includes(id));\n\t\t\t\n            if (remainingIds.length === 0) {\n    localStorage.setItem(storageKey, '[]');\n    container.innerHTML = `\n        <div class=\"next-button-wrapper\">\n            \u6240\u6709\u5b57\u5361\u5df2\u986f\u793a\uff0c\u91cd\u65b0\u958b\u59cb...\n            <br>\n            <button onclick=\"localStorage.removeItem('${storageKey}'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n        <\/div>`;\n    return;\n}\n\n            const randomId = remainingIds[Math.floor(Math.random() * remainingIds.length)];\n\n            fetch('https:\/\/www.readingca.org.uk\/wordpress\/wp-admin\/admin-ajax.php?action=get_flashcard_by_id&id=' + randomId)\n                .then(response => response.text())\n                .then(html => {\n                    container.querySelector('.flashcard').outerHTML = html;\n                    shownIds.push(randomId);\n                    localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                    updateProgress(shownIds);\n                });\n        });\n\n        updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bc110ca e-flex e-con-boxed e-con e-parent\" data-id=\"bc110ca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b88b193 elementor-widget elementor-widget-shortcode\" data-id=\"b88b193\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div class=\"pronunciation-recorder\">\n        <div class=\"button-group\">\n            <button id=\"recorder_6a2341b60b1be_recordBtn\">\ud83c\udf99\ufe0f \u9304\u97f3<\/button>\n            <button id=\"recorder_6a2341b60b1be_playBtn\" disabled>\u25b6\ufe0f \u64ad\u653e<\/button>\n        <\/div>\n        <audio id=\"recorder_6a2341b60b1be_userAudio\"><\/audio>\n    <\/div>\n\n    <script>\n    (function(uid){\n        let mediaRecorder;\n        let recordedChunks = [];\n\n        const recordBtn = document.getElementById(uid + '_recordBtn');\n        const playBtn   = document.getElementById(uid + '_playBtn');\n        const userAudio = document.getElementById(uid + '_userAudio');\n\n        recordBtn.onclick = async () => {\n            \/\/ Stop recording if already active\n            if (mediaRecorder && mediaRecorder.state === 'recording') {\n                mediaRecorder.stop();\n                recordBtn.textContent = '\ud83c\udf99\ufe0f \u9304\u97f3';\n                return;\n            }\n\n            try {\n                \/\/ Request microphone access\n                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n\n                \/\/ Choose a supported format\n                let options = {};\n                if (MediaRecorder.isTypeSupported('audio\/webm')) {\n                    options.mimeType = 'audio\/webm';\n                } else if (MediaRecorder.isTypeSupported('audio\/mp4')) {\n                    options.mimeType = 'audio\/mp4';\n                } else if (MediaRecorder.isTypeSupported('audio\/wav')) {\n                    options.mimeType = 'audio\/wav';\n                }\n\n                mediaRecorder = new MediaRecorder(stream, options);\n                recordedChunks = [];\n\n                mediaRecorder.ondataavailable = e => {\n                    if (e.data.size > 0) recordedChunks.push(e.data);\n                };\n\n                mediaRecorder.onstop = () => {\n                    const blob = new Blob(recordedChunks, { type: options.mimeType });\n                    userAudio.src = URL.createObjectURL(blob);\n                    playBtn.disabled = false;\n                };\n\n                mediaRecorder.start();\n                recordBtn.textContent = '\u23f9\ufe0f \u505c\u6b62';\n\n            } catch (err) {\n                alert(\"Microphone access denied or unavailable: \" + err.message);\n            }\n        };\n\n        playBtn.onclick = () => {\n            userAudio.play().catch(err => {\n                alert(\"Playback failed: \" + err.message);\n            });\n        };\n    })('recorder_6a2341b60b1be');\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u9583\u5361\u904a\u6232\u76ee\u7684\uff1a\u8aaa\u51fa\u4e26\u62fc\u5beb\u51fa56\u7a2e\u852c\u83dc\u7684\u82f1\u6587\u540d\u7a31\u3002\u4f60\u5c07\u770b\u5230\u5361\u7247\u7684\u4e00\u5074\u986f\u793a\u4e00\u5f35\u852c\u83dc\u5716\u7247\u548c\u4e2d\u6587\u540d\u7a31\uff0c\u800c\u53e6\u4e00\u5074\u986f\u793a\u7b54\u6848\u3002\u8acb\u5617\u8a66\u62fc\u51fa\u82f1\u6587\u540d\u7a31\u4e26\u5927\u8072\u8b80\u51fa\u5176\u767c\u97f3\u3002\u7136\u5f8c\u9ede\u9078\u300c\u7b54\u6848\u300d\u4ee5\u78ba\u8a8d\u662f\u5426\u6b63\u78ba\u3002\u9ede\u9078\u300c\u4e0b\u4e00\u5f35\u300d\u53ef\u9032\u5165\u4e0b\u4e00\u5f35\u5361\u7247\u3002\u4e94\u5341\u516d\u5f35\u9583\u5361\u5206\u56db\u526f\u724c\uff0c\u6bcf\u526f\u724c\u5341\u56db\u5f35\uff0c\u4e26\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-3816","post","type-post","status-publish","format-standard","hentry","category-learning-english","tag-flashcards"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Joe Au","author_link":"https:\/\/www.readingca.org.uk\/wordpress\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"\u9583\u5361\u904a\u6232\u76ee\u7684\uff1a\u8aaa\u51fa\u4e26\u62fc\u5beb\u51fa56\u7a2e\u852c\u83dc\u7684\u82f1\u6587\u540d\u7a31\u3002\u4f60\u5c07\u770b\u5230\u5361\u7247\u7684\u4e00\u5074\u986f\u793a\u4e00\u5f35\u852c\u83dc\u5716\u7247\u548c\u4e2d\u6587\u540d\u7a31\uff0c\u800c\u53e6\u4e00\u5074\u986f\u793a\u7b54\u6848\u3002\u8acb\u5617\u8a66\u62fc\u51fa\u82f1\u6587\u540d\u7a31\u4e26\u5927\u8072\u8b80\u51fa\u5176\u767c\u97f3\u3002\u7136\u5f8c\u9ede\u9078\u300c\u7b54\u6848\u300d\u4ee5\u78ba\u8a8d\u662f\u5426\u6b63\u78ba\u3002\u9ede\u9078\u300c\u4e0b\u4e00\u5f35\u300d\u53ef\u9032\u5165\u4e0b\u4e00\u5f35\u5361\u7247\u3002\u4e94\u5341\u516d\u5f35\u9583\u5361\u5206\u56db\u526f\u724c\uff0c\u6bcf\u526f\u724c\u5341\u56db\u5f35\uff0c\u4e26\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002","rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Joe Au","author_link":"https:\/\/www.readingca.org.uk\/wordpress\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/www.readingca.org.uk\/wordpress\/category\/learning-english\/\" rel=\"category tag\">Learning English<\/a>","rttpg_excerpt":"\u9583\u5361\u904a\u6232\u76ee\u7684\uff1a\u8aaa\u51fa\u4e26\u62fc\u5beb\u51fa56\u7a2e\u852c\u83dc\u7684\u82f1\u6587\u540d\u7a31\u3002\u4f60\u5c07\u770b\u5230\u5361\u7247\u7684\u4e00\u5074\u986f\u793a\u4e00\u5f35\u852c\u83dc\u5716\u7247\u548c\u4e2d\u6587\u540d\u7a31\uff0c\u800c\u53e6\u4e00\u5074\u986f\u793a\u7b54\u6848\u3002\u8acb\u5617\u8a66\u62fc\u51fa\u82f1\u6587\u540d\u7a31\u4e26\u5927\u8072\u8b80\u51fa\u5176\u767c\u97f3\u3002\u7136\u5f8c\u9ede\u9078\u300c\u7b54\u6848\u300d\u4ee5\u78ba\u8a8d\u662f\u5426\u6b63\u78ba\u3002\u9ede\u9078\u300c\u4e0b\u4e00\u5f35\u300d\u53ef\u9032\u5165\u4e0b\u4e00\u5f35\u5361\u7247\u3002\u4e94\u5341\u516d\u5f35\u9583\u5361\u5206\u56db\u526f\u724c\uff0c\u6bcf\u526f\u724c\u5341\u56db\u5f35\uff0c\u4e26\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002","_links":{"self":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=3816"}],"version-history":[{"count":46,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3816\/revisions"}],"predecessor-version":[{"id":4012,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3816\/revisions\/4012"}],"wp:attachment":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=3816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=3816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=3816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}