{"id":3880,"date":"2025-11-15T18:43:00","date_gmt":"2025-11-15T18:43:00","guid":{"rendered":"https:\/\/www.readingca.org.uk\/wordpress\/?p=3880"},"modified":"2026-04-16T17:58:08","modified_gmt":"2026-04-16T17:58:08","slug":"fruit-flashcards-2","status":"publish","type":"post","link":"https:\/\/www.readingca.org.uk\/wordpress\/fruit-flashcards-2\/","title":{"rendered":"Fruit flashcards &#8211; \u6c34\u679c\u9583\u5361"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3880\" class=\"elementor elementor-3880\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c876338 e-flex e-con-boxed e-con e-parent\" data-id=\"4c876338\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b37426a e-flex e-con-boxed e-con e-parent\" data-id=\"1b37426a\" 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-73412039 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"73412039\" 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}\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\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-6a53cc26 e-flex e-con-boxed e-con e-parent\" data-id=\"6a53cc26\" 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-703be3a3 elementor-widget elementor-widget-text-editor\" data-id=\"703be3a3\" 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;\">\u6c34\u679c\u9583\u5361\u904a\u6232 &#8211;\u00a0<\/span><\/h3><h4><span style=\"color: #000000;\">\u5171\u56db\u5341\u4e8c\u5f35<\/span><span style=\"color: #000000;\">\u9583\u5361\uff0c<\/span>\u5206\u4e09\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-c1ef1bb e-flex e-con-boxed e-con e-parent\" data-id=\"c1ef1bb\" 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-1b03cbcb elementor-widget elementor-widget-shortcode\" data-id=\"1b03cbcb\" 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_fruits-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\/clementine.png\" alt=\"Clementine\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u5c0f\u67d1\u6a58<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Clementine<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02c8kle.m\u0259n.ta\u026an\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/fruit-names\/fr-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_fruits-1', JSON.stringify(['107']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_fruits-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_fruits-1_next\" data-ids=\"98,99,100,101,102,103,104,105,106,107,108,109,110,111\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_fruits-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_fruits-1_next');\n        const container = document.getElementById('flashcard_fruits-1_container');\n        const progress = document.getElementById('flashcard_fruits-1_progress');\n        const storageKey = 'shownFlashcardIds_fruits-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-63ea189 e-flex e-con-boxed e-con e-parent\" data-id=\"63ea189\" 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-d10495e elementor-widget elementor-widget-shortcode\" data-id=\"d10495e\" 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_fruits-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\/kumquat.png\" alt=\"Kumquat\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u91d1\u6854<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Kumquat<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02c8k\u028cm.kw\u0252t\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/fruit-names\/fr-20.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_fruits-2', JSON.stringify(['117']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_fruits-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_fruits-2_next\" data-ids=\"112,113,114,115,116,117,118,119,120,121,122,123,124,125\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_fruits-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_fruits-2_next');\n        const container = document.getElementById('flashcard_fruits-2_container');\n        const progress = document.getElementById('flashcard_fruits-2_progress');\n        const storageKey = 'shownFlashcardIds_fruits-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-15044bf e-flex e-con-boxed e-con e-parent\" data-id=\"15044bf\" 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-19cae15 elementor-widget elementor-widget-shortcode\" data-id=\"19cae15\" 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_fruits-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\/tangerine.png\" alt=\"Tangerine\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u67d1\u6a58<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Tangerine<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02cct\u00e6n.d\u0292\u0259\u02c8ri\u02d0n\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/fruit-names\/fr-41.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_fruits-3', JSON.stringify(['138']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_fruits-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_fruits-3_next\" data-ids=\"126,127,128,129,130,131,132,133,134,135,136,137,138,139\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_fruits-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_fruits-3_next');\n        const container = document.getElementById('flashcard_fruits-3_container');\n        const progress = document.getElementById('flashcard_fruits-3_progress');\n        const storageKey = 'shownFlashcardIds_fruits-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-eda1667 e-flex e-con-boxed e-con e-parent\" data-id=\"eda1667\" 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-0a8e80f elementor-widget elementor-widget-shortcode\" data-id=\"0a8e80f\" 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_6a2341d84184f_recordBtn\">\ud83c\udf99\ufe0f \u9304\u97f3<\/button>\n            <button id=\"recorder_6a2341d84184f_playBtn\" disabled>\u25b6\ufe0f \u64ad\u653e<\/button>\n        <\/div>\n        <audio id=\"recorder_6a2341d84184f_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_6a2341d84184f');\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>\u4f60\u5c07\u770b\u5230\u9583\u5361\u7684\u4e00\u5074\u986f\u793a\u4e00\u5f35\u6c34\u679c\u5716\u7247\u548c\u4e2d\u6587\u540d\u7a31\u3002\u5728\u9ede\u9078\u300c\u7b54\u6848\u300d\u4e4b\u524d\uff0c\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\u9583\u5361\u3002\u56db\u5341\u4e8c\u5f35\u9583\u5361\u5206\u4e09\u526f\u724c\uff0c\u6bcf\u526f\u5341\u56db\u5f35\uff0c\u4e26\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002\u5b8c\u6210\u4e00\u526f\u724c\u5f8c\uff0c\u5982\u6709\u9700\u8981\u53ef\u91cd\u65b0\u958b\u59cb\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-3880","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":"\u4f60\u5c07\u770b\u5230\u9583\u5361\u7684\u4e00\u5074\u986f\u793a\u4e00\u5f35\u6c34\u679c\u5716\u7247\u548c\u4e2d\u6587\u540d\u7a31\u3002\u5728\u9ede\u9078\u300c\u7b54\u6848\u300d\u4e4b\u524d\uff0c\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\u9583\u5361\u3002\u56db\u5341\u4e8c\u5f35\u9583\u5361\u5206\u4e09\u526f\u724c\uff0c\u6bcf\u526f\u5341\u56db\u5f35\uff0c\u4e26\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002\u5b8c\u6210\u4e00\u526f\u724c\u5f8c\uff0c\u5982\u6709\u9700\u8981\u53ef\u91cd\u65b0\u958b\u59cb\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":"\u4f60\u5c07\u770b\u5230\u9583\u5361\u7684\u4e00\u5074\u986f\u793a\u4e00\u5f35\u6c34\u679c\u5716\u7247\u548c\u4e2d\u6587\u540d\u7a31\u3002\u5728\u9ede\u9078\u300c\u7b54\u6848\u300d\u4e4b\u524d\uff0c\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\u9583\u5361\u3002\u56db\u5341\u4e8c\u5f35\u9583\u5361\u5206\u4e09\u526f\u724c\uff0c\u6bcf\u526f\u5341\u56db\u5f35\uff0c\u4e26\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002\u5b8c\u6210\u4e00\u526f\u724c\u5f8c\uff0c\u5982\u6709\u9700\u8981\u53ef\u91cd\u65b0\u958b\u59cb\u3002","_links":{"self":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3880","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=3880"}],"version-history":[{"count":27,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3880\/revisions"}],"predecessor-version":[{"id":3995,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3880\/revisions\/3995"}],"wp:attachment":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=3880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=3880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=3880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}