{"id":3861,"date":"2025-11-15T14:08:16","date_gmt":"2025-11-15T14:08:16","guid":{"rendered":"https:\/\/www.readingca.org.uk\/wordpress\/?p=3861"},"modified":"2026-04-16T17:58:32","modified_gmt":"2026-04-16T17:58:32","slug":"bread-flashcards","status":"publish","type":"post","link":"https:\/\/www.readingca.org.uk\/wordpress\/bread-flashcards\/","title":{"rendered":"Bread flashcards &#8211; \u9eb5\u5305\u9583\u5361"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3861\" class=\"elementor elementor-3861\">\n\t\t\t\t<div class=\"elementor-element elementor-element-327f9949 e-flex e-con-boxed e-con e-parent\" data-id=\"327f9949\" 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-5f26de00 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"5f26de00\" 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-57483ea e-flex e-con-boxed e-con e-parent\" data-id=\"57483ea\" 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-753f1777 elementor-widget elementor-widget-text-editor\" data-id=\"753f1777\" 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;\">\u9eb5\u5305\u9583\u5361\u904a\u6232 &#8211;\u00a0<\/span><\/h3><h4><span style=\"color: #000000;\">\u5171\u4e09\u5341\u4e8c\u5f35<\/span><span style=\"color: #000000;\">\u9583\u5361\uff0c<\/span>\u5206\u56db\u7d44\uff0c\u6bcf\u7d44\u516b\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-78bbe280 e-flex e-con-boxed e-con e-parent\" data-id=\"78bbe280\" 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-277d2249 elementor-widget elementor-widget-shortcode\" data-id=\"277d2249\" 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_bread-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\/11\/bread-rolls.webp\" alt=\"Bread roll\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u9eb5\u5305\u4ed4<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Bread roll<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02c8br\u025bd r\u0259\u028al\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/at-the-bakery\/ba-00.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_bread-1', JSON.stringify(['66']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_bread-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_bread-1_next\" data-ids=\"66,67,68,69,70,71,72,73\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_bread-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_bread-1_next');\n        const container = document.getElementById('flashcard_bread-1_container');\n        const progress = document.getElementById('flashcard_bread-1_progress');\n        const storageKey = 'shownFlashcardIds_bread-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-351b7720 e-flex e-con-boxed e-con e-parent\" data-id=\"351b7720\" 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-14c828ca elementor-widget elementor-widget-shortcode\" data-id=\"14c828ca\" 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_bread-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\/11\/cupcakes.webp\" alt=\"Cupcake\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u676f\u5b50\u86cb\u7cd5<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Cupcake<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u02c8k\u028cpke\u026ak\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/at-the-bakery\/ba-08.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_bread-2', JSON.stringify(['74']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_bread-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_bread-2_next\" data-ids=\"74,75,76,77,78,79,80,81\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_bread-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_bread-2_next');\n        const container = document.getElementById('flashcard_bread-2_container');\n        const progress = document.getElementById('flashcard_bread-2_progress');\n        const storageKey = 'shownFlashcardIds_bread-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-c30d98f e-flex e-con-boxed e-con e-parent\" data-id=\"c30d98f\" 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-c15825c elementor-widget elementor-widget-shortcode\" data-id=\"c15825c\" 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_bread-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\/11\/meat-pies.webp\" alt=\"Meat pie\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \u8089\u6279<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> Meat pie<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/mi\u02d0t pa\u026a\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/at-the-bakery\/ba-22.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_bread-3', JSON.stringify(['88']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_bread-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_bread-3_next\" data-ids=\"82,83,84,85,86,87,88,89\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_bread-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_bread-3_next');\n        const container = document.getElementById('flashcard_bread-3_container');\n        const progress = document.getElementById('flashcard_bread-3_progress');\n        const storageKey = 'shownFlashcardIds_bread-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-8860e4b e-flex e-con-boxed e-con e-parent\" data-id=\"8860e4b\" 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-05b4adf elementor-widget elementor-widget-shortcode\" data-id=\"05b4adf\" 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_bread-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\/11\/white-bread.webp\" alt=\"(A loaf of) white bread\" class=\"phrase-image\" \/>\n        <p><span style=\"color: #0000ff\"> \uff08\u4e00\u689d\uff09\u767d\u9eb5\u5305<\/span><\/p>\n        <div class=\"hidden-content\" style=\"display:none;\">\n            <p><span style=\"color: #000000\"> (A loaf of) white bread<\/span><\/p>\n            <p><span style=\"color: #ff0000\">\/\u0259 l\u0259\u028af \u0259v wa\u026at br\u025bd\/<\/span><\/p>\n            <button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/at-the-bakery\/ba-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_bread-4', JSON.stringify(['93']));\n<\/script>\n<div class=\"card-action\">\n\t <span id=\"flashcard_bread-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_bread-4_next\" data-ids=\"90,91,92,93,94,95,96,97\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n    \t<button onclick=\"localStorage.removeItem('shownFlashcardIds_bread-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_bread-4_next');\n        const container = document.getElementById('flashcard_bread-4_container');\n        const progress = document.getElementById('flashcard_bread-4_progress');\n        const storageKey = 'shownFlashcardIds_bread-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-f3d3673 e-flex e-con-boxed e-con e-parent\" data-id=\"f3d3673\" 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-5fab6d5 elementor-widget elementor-widget-shortcode\" data-id=\"5fab6d5\" 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_6a234308151e9_recordBtn\">\ud83c\udf99\ufe0f \u9304\u97f3<\/button>\n            <button id=\"recorder_6a234308151e9_playBtn\" disabled>\u25b6\ufe0f \u64ad\u653e<\/button>\n        <\/div>\n        <audio id=\"recorder_6a234308151e9_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_6a234308151e9');\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\u4e00\u5f35\u9eb5\u5305\u5716\u7247\uff0c\u5361\u7247\u7684\u4e00\u5074\u986f\u793a\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\u5361\u7247\u3002\u6574\u526f\u724c\u5171\u6709\u4e09\u5341\u4e8c\u5f35\uff0c\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002\u5b8c\u6210\u6574\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-3861","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\u4e00\u5f35\u9eb5\u5305\u5716\u7247\uff0c\u5361\u7247\u7684\u4e00\u5074\u986f\u793a\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\u5361\u7247\u3002\u6574\u526f\u724c\u5171\u6709\u4e09\u5341\u4e8c\u5f35\uff0c\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002\u5b8c\u6210\u6574\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\u4e00\u5f35\u9eb5\u5305\u5716\u7247\uff0c\u5361\u7247\u7684\u4e00\u5074\u986f\u793a\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\u5361\u7247\u3002\u6574\u526f\u724c\u5171\u6709\u4e09\u5341\u4e8c\u5f35\uff0c\u4ee5\u96a8\u6a5f\u9806\u5e8f\u986f\u793a\u3002\u5b8c\u6210\u6574\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\/3861","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=3861"}],"version-history":[{"count":31,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3861\/revisions"}],"predecessor-version":[{"id":4015,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/3861\/revisions\/4015"}],"wp:attachment":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=3861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=3861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=3861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}