{"id":4064,"date":"2025-11-28T10:17:13","date_gmt":"2025-11-28T10:17:13","guid":{"rendered":"https:\/\/www.readingca.org.uk\/wordpress\/?p=4064"},"modified":"2025-11-28T10:23:24","modified_gmt":"2025-11-28T10:23:24","slug":"ipa-cards","status":"publish","type":"post","link":"https:\/\/www.readingca.org.uk\/wordpress\/ipa-cards\/","title":{"rendered":"IPA \u62fc\u97f3\u7df4\u7fd2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4064\" class=\"elementor elementor-4064\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92a9077 e-flex e-con-boxed e-con e-parent\" data-id=\"92a9077\" 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-d17d4f1 elementor-widget elementor-widget-text-editor\" data-id=\"d17d4f1\" 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<p><span style=\"color: #000000;\"><span style=\"font-size: 16px;\">\u4e09\u526f\u5361\u7247\uff1a\u55ae\u5143\u97f3 (12 \u5f35)\u3001\u96d9\u5143\u97f3 (8 \u5f35)\u3001<\/span><span style=\"font-size: 16px;\">\u8f14\u97f3 (24 \u5f35)\u3002<\/span><\/span><\/p><p><span style=\"color: #000000;\">\u6bcf\u5f35\u5361\u7247\uff1a<\/span><\/p><ol><li><span style=\"color: #000000;\">\u5927\u8072\u8b80\u51fa IPA \u7b26\u865f\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u4f7f\u7528\u9304\u97f3\u6309\u9215\u9304\u4e0b\u81ea\u5df1\u7684\u767c\u97f3<\/span><\/li><li><span style=\"color: #000000;\">\u9ede\u64ca \u767c\u97f3 \u6309\u9215\u8046\u807d\u6b63\u78ba\u8b80\u97f3\uff0c<\/span><span style=\"color: #000000;\">\u8207\u81ea\u5df1\u7684\u9304\u97f3\u6bd4\u8f03\u3002<\/span><\/li><li><span style=\"color: #000000;\">\u6301\u7e8c\u5b8c\u6210\u6574\u526f\u5361\u7247\u3002<\/span><\/li><\/ol><p><span style=\"color: #000000;\">\u91cd\u8907\u7df4\u7fd2\u5f8c\uff0c\u4f60\u5c07\u80fd\u5920\u898b\u7b26\u865f\u5373\u767c\u97f3\u3002<\/span><span style=\"font-size: 16px;\">\u82e5\u60f3\u8907\u7fd2 IPA \u767c\u97f3\uff0c\u8acb\u9ede\u64ca\u6b64\u9023\u7d50\uff1a<\/span><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/www.readingca.org.uk\/wordpress\/ipa-english\/\"><strong>\u570b\u969b\u97f3\u6a19\u82f1\u8a9e\u62fc\u97f3\u5b57\u6bcd\u767c\u97f3<\/strong><\/a><\/span><\/p><p><!--EndFragment --><\/p><p><span style=\"color: #000000;\"><!--EndFragment -->.<\/span><\/p>\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-358bc47 e-flex e-con-boxed e-con e-parent\" data-id=\"358bc47\" 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-1a2acc4 elementor-widget elementor-widget-html\" data-id=\"1a2acc4\" 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}\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\r\n\r\n.highlight {\r\n    font-weight: bold;\r\n}\r\n.flashcard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  padding: 1rem;\r\n  border: 1px solid #ddd;\r\n  border-radius: 8px;\r\n  background: #f9f9f9;\r\n  max-width: 400px;\r\n  margin: 1rem auto;\r\n  text-align: center;\r\n  font-family: \"Segoe UI\", sans-serif;\r\n}\r\n.flashcard .phrase-image {\r\n  max-width: 100%;\r\n  height: auto;\r\n  border-radius: 6px;\r\n  box-shadow: 0 2px 6px rgba(0,0,0,0.15);\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\r\n\/* English, IPA, Cantonese text *\/\r\n.bilingual-english,\r\n.bilingual-ipa,\r\n.bilingual-cantonese {\r\n  display: block;\r\n  font-size: 1.1rem;\r\n  margin: 0.2rem 0;\r\n}\r\n\r\n.bilingual-english { color: black; }\r\n.bilingual-ipa { \r\n    font-style: italic;\r\n    font-size: 6.0rem;\r\n    text-align: center;\r\n    margin: 3rem;\r\n    color: red; }\r\n.bilingual-cantonese { color: #006699; }\r\n\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\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-5a940ab e-flex e-con-boxed e-con e-parent\" data-id=\"5a940ab\" 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-78ed36c elementor-widget elementor-widget-shortcode\" data-id=\"78ed36c\" 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_6a2342f21c5f3_recordBtn\">\ud83c\udf99\ufe0f \u9304\u97f3<\/button>\n            <button id=\"recorder_6a2342f21c5f3_playBtn\" disabled>\u25b6\ufe0f \u64ad\u653e<\/button>\n        <\/div>\n        <audio id=\"recorder_6a2342f21c5f3_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_6a2342f21c5f3');\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-7cc3a44 e-flex e-con-boxed e-con e-parent\" data-id=\"7cc3a44\" 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-ece1e75 elementor-widget elementor-widget-text-editor\" data-id=\"ece1e75\" 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<h2 class=\"wp-block-heading\" style=\"text-align: center;\"><strong>\u55ae\u5143\u97f3<\/strong><\/h2>\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-6d62b0a e-flex e-con-boxed e-con e-parent\" data-id=\"6d62b0a\" 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-24e8524 elementor-widget elementor-widget-shortcode\" data-id=\"24e8524\" 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_vowels1_container\" class=\"flashcard-wrapper\">\n            <div class=\"bilingual-output\"><span class=\"bilingual-ipa\">\u00e6<\/span><div class=\"container\"><button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/phonemes\/ph-09.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button><\/div><\/div>\n            <script>\n            (function(){\n                try {\n                    localStorage.setItem('shownFlashcardIds_vowels1',\n                        JSON.stringify([\"202\"])\n                    );\n                } catch(e) {}\n            })();\n            <\/script>\n\n            <div class=\"card-action\">\n                <span id=\"flashcard_vowels1_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\n                <div class=\"button-group\">\n                    <button id=\"flashcard_vowels1_next\" data-ids=\"194,195,196,197,198,199,200,201,202,203,204,205\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n                    <button onclick=\"localStorage.removeItem('shownFlashcardIds_vowels1'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n                <\/div>\n            <\/div>\n\n            <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                const button    = document.getElementById('flashcard_vowels1_next');\n                const container = document.getElementById('flashcard_vowels1_container');\n                const progress  = document.getElementById('flashcard_vowels1_progress');\n                const storageKey = 'shownFlashcardIds_vowels1';\n\n                if (!button) return;\n\n                const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim()).filter(Boolean);\n\n                function updateProgress(shownIds) {\n                    progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n                }\n\n                button.addEventListener('click', function() {\n                    const shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\n                    const remainingIds = allIds.filter(id => !shownIds.includes(id));\n\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_ipaflashcard_by_id&id=' + encodeURIComponent(randomId))\n                        .then(response => response.text())\n                        .then(html => {\n                            const oldCard = container.querySelector('.bilingual-output');\n                            if (oldCard) {\n                                oldCard.outerHTML = html;\n                            } else {\n                                container.insertAdjacentHTML('afterbegin', html);\n                            }\n                            shownIds.push(randomId);\n                            localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                            updateProgress(shownIds);\n                        })\n                        .catch(() => {});\n                });\n\n                updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n            });\n            <\/script>\n        <\/div>\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-e3e6cec e-flex e-con-boxed e-con e-parent\" data-id=\"e3e6cec\" 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-fb5e442 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fb5e442\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/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-7a2adce e-flex e-con-boxed e-con e-parent\" data-id=\"7a2adce\" 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-d0b8401 elementor-widget elementor-widget-spacer\" data-id=\"d0b8401\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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-89f5330 e-flex e-con-boxed e-con e-parent\" data-id=\"89f5330\" 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-3b2bdcd elementor-widget elementor-widget-text-editor\" data-id=\"3b2bdcd\" 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<h2 class=\"wp-block-heading\" style=\"text-align: center;\"><strong>\u96d9<\/strong><strong>\u5143\u97f3<\/strong><\/h2>\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-d8fc9dc e-flex e-con-boxed e-con e-parent\" data-id=\"d8fc9dc\" 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-af8b121 elementor-widget elementor-widget-shortcode\" data-id=\"af8b121\" 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_vowels2_container\" class=\"flashcard-wrapper\">\n            <div class=\"bilingual-output\"><span class=\"bilingual-ipa\">\u026a\u0259<\/span><div class=\"container\"><button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/phonemes\/ph-13.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button><\/div><\/div>\n            <script>\n            (function(){\n                try {\n                    localStorage.setItem('shownFlashcardIds_vowels2',\n                        JSON.stringify([\"206\"])\n                    );\n                } catch(e) {}\n            })();\n            <\/script>\n\n            <div class=\"card-action\">\n                <span id=\"flashcard_vowels2_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\n                <div class=\"button-group\">\n                    <button id=\"flashcard_vowels2_next\" data-ids=\"206,207,208,209,210,211,212,213\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n                    <button onclick=\"localStorage.removeItem('shownFlashcardIds_vowels2'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n                <\/div>\n            <\/div>\n\n            <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                const button    = document.getElementById('flashcard_vowels2_next');\n                const container = document.getElementById('flashcard_vowels2_container');\n                const progress  = document.getElementById('flashcard_vowels2_progress');\n                const storageKey = 'shownFlashcardIds_vowels2';\n\n                if (!button) return;\n\n                const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim()).filter(Boolean);\n\n                function updateProgress(shownIds) {\n                    progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n                }\n\n                button.addEventListener('click', function() {\n                    const shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\n                    const remainingIds = allIds.filter(id => !shownIds.includes(id));\n\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_ipaflashcard_by_id&id=' + encodeURIComponent(randomId))\n                        .then(response => response.text())\n                        .then(html => {\n                            const oldCard = container.querySelector('.bilingual-output');\n                            if (oldCard) {\n                                oldCard.outerHTML = html;\n                            } else {\n                                container.insertAdjacentHTML('afterbegin', html);\n                            }\n                            shownIds.push(randomId);\n                            localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                            updateProgress(shownIds);\n                        })\n                        .catch(() => {});\n                });\n\n                updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n            });\n            <\/script>\n        <\/div>\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-f6f747f e-flex e-con-boxed e-con e-parent\" data-id=\"f6f747f\" 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-3a89d66 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3a89d66\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/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-7dcef21 e-flex e-con-boxed e-con e-parent\" data-id=\"7dcef21\" 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-39905c5 elementor-widget elementor-widget-spacer\" data-id=\"39905c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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-5989dec e-flex e-con-boxed e-con e-parent\" data-id=\"5989dec\" 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-2f85472 elementor-widget elementor-widget-text-editor\" data-id=\"2f85472\" 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<h2 class=\"wp-block-heading\" style=\"text-align: center;\"><strong>\u8f14\u97f3<\/strong><\/h2>\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-16c6e0f e-flex e-con-boxed e-con e-parent\" data-id=\"16c6e0f\" 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-61d2d80 elementor-widget elementor-widget-shortcode\" data-id=\"61d2d80\" 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_consonants_container\" class=\"flashcard-wrapper\">\n            <div class=\"bilingual-output\"><span class=\"bilingual-ipa\">h<\/span><div class=\"container\"><button class=\"button button-blue\" data-clip=\"https:\/\/www.readingca.org.uk\/sounds\/phonemes\/ph-40.mp3\" onclick=\"playAudioSegment(this)\">\ud83d\udde3\ufe0f\u767c\u97f3<\/button><\/div><\/div>\n            <script>\n            (function(){\n                try {\n                    localStorage.setItem('shownFlashcardIds_consonants',\n                        JSON.stringify([\"230\"])\n                    );\n                } catch(e) {}\n            })();\n            <\/script>\n\n            <div class=\"card-action\">\n                <span id=\"flashcard_consonants_progress\" style=\"display:block; text-align:center; margin-top:10px;\"><\/span>\n                <div class=\"button-group\">\n                    <button id=\"flashcard_consonants_next\" data-ids=\"214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237\">\u27a1\ufe0f\u4e0b\u4e00\u5f35<\/button>\n                    <button onclick=\"localStorage.removeItem('shownFlashcardIds_consonants'); location.reload();\">\ud83d\udd04 \u91cd\u65b0\u958b\u59cb<\/button>\n                <\/div>\n            <\/div>\n\n            <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                const button    = document.getElementById('flashcard_consonants_next');\n                const container = document.getElementById('flashcard_consonants_container');\n                const progress  = document.getElementById('flashcard_consonants_progress');\n                const storageKey = 'shownFlashcardIds_consonants';\n\n                if (!button) return;\n\n                const allIds = button.getAttribute('data-ids').split(',').map(id => id.trim()).filter(Boolean);\n\n                function updateProgress(shownIds) {\n                    progress.textContent = `${shownIds.length} \/ ${allIds.length} \u5df2\u986f\u793a`;\n                }\n\n                button.addEventListener('click', function() {\n                    const shownIds = JSON.parse(localStorage.getItem(storageKey) || '[]');\n                    const remainingIds = allIds.filter(id => !shownIds.includes(id));\n\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_ipaflashcard_by_id&id=' + encodeURIComponent(randomId))\n                        .then(response => response.text())\n                        .then(html => {\n                            const oldCard = container.querySelector('.bilingual-output');\n                            if (oldCard) {\n                                oldCard.outerHTML = html;\n                            } else {\n                                container.insertAdjacentHTML('afterbegin', html);\n                            }\n                            shownIds.push(randomId);\n                            localStorage.setItem(storageKey, JSON.stringify(shownIds));\n                            updateProgress(shownIds);\n                        })\n                        .catch(() => {});\n                });\n\n                updateProgress(JSON.parse(localStorage.getItem(storageKey) || '[]'));\n            });\n            <\/script>\n        <\/div>\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>\u5b78\u7fd2\u570b\u969b\u97f3\u6a19 (IPA) \u7684\u6b63\u78ba\u767c\u97f3\uff0c\u662f\u638c\u63e1\u82f1\u8a9e\u53e3\u8a9e\u7684\u57fa\u790e\u3002\u900f\u904e\u4e92\u52d5\u5f0f\u5361\u7247\u7df4\u7fd2\uff0c\u4f60\u53ef\u4ee5\u9010\u6b65\u719f\u6089 \u55ae\u5143\u97f3\u3001\u96d9\u5143\u97f3\u8207\u8f14\u97f3 \u7684\u7b26\u865f\u3002\u6bcf\u6b21\u7ffb\u724c\u6642\uff0c\u5148\u5617\u8a66\u5927\u8072\u8b80\u51fa\u7b26\u865f\uff0c\u4e26\u53ef\u5229\u7528\u9304\u97f3\u529f\u80fd\u6aa2\u8996\u81ea\u5df1\u7684\u767c\u97f3\uff0c\u518d\u9ede\u64ca \u767c\u97f3 \u6309\u9215\u8046\u807d\u6a19\u6e96\u8b80\u97f3\uff0c\u9032\u884c\u6bd4\u8f03\u3002\u6301\u7e8c\u5b8c\u6210\u6574\u526f\u5361\u7247\u5f8c\uff0c\u4f60\u5c07\u80fd\u5728\u898b\u5230\u7b26\u865f\u6642\u7acb\u5373\u6b63\u78ba\u767c\u97f3\u3002\u82e5\u9700\u8981\u8907\u7fd2\uff0c\u9084\u53ef\u96a8\u6642\u9ede\u64ca\u63d0\u4f9b\u7684\u9023\u7d50\uff0c\u5feb\u901f\u56de\u9867 IPA \u7684\u767c\u97f3\u8981\u9818\u3002\u9019\u7a2e\u5faa\u5e8f\u6f38\u9032\u7684\u7df4\u7fd2\u65b9\u5f0f\uff0c\u4e0d\u50c5\u80fd\u63d0\u5347\u6e96\u78ba\u5ea6\uff0c\u4e5f\u80fd\u589e\u5f37\u81ea\u4fe1\u5fc3\uff0c\u8b93\u82f1\u8a9e\u8868\u9054\u66f4\u81ea\u7136\u6d41\u66a2\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":[21],"class_list":["post-4064","post","type-post","status-publish","format-standard","hentry","category-learning-english","tag-ipa"],"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":"\u5b78\u7fd2\u570b\u969b\u97f3\u6a19 (IPA) \u7684\u6b63\u78ba\u767c\u97f3\uff0c\u662f\u638c\u63e1\u82f1\u8a9e\u53e3\u8a9e\u7684\u57fa\u790e\u3002\u900f\u904e\u4e92\u52d5\u5f0f\u5361\u7247\u7df4\u7fd2\uff0c\u4f60\u53ef\u4ee5\u9010\u6b65\u719f\u6089 \u55ae\u5143\u97f3\u3001\u96d9\u5143\u97f3\u8207\u8f14\u97f3 \u7684\u7b26\u865f\u3002\u6bcf\u6b21\u7ffb\u724c\u6642\uff0c\u5148\u5617\u8a66\u5927\u8072\u8b80\u51fa\u7b26\u865f\uff0c\u4e26\u53ef\u5229\u7528\u9304\u97f3\u529f\u80fd\u6aa2\u8996\u81ea\u5df1\u7684\u767c\u97f3\uff0c\u518d\u9ede\u64ca \u767c\u97f3 \u6309\u9215\u8046\u807d\u6a19\u6e96\u8b80\u97f3\uff0c\u9032\u884c\u6bd4\u8f03\u3002\u6301\u7e8c\u5b8c\u6210\u6574\u526f\u5361\u7247\u5f8c\uff0c\u4f60\u5c07\u80fd\u5728\u898b\u5230\u7b26\u865f\u6642\u7acb\u5373\u6b63\u78ba\u767c\u97f3\u3002\u82e5\u9700\u8981\u8907\u7fd2\uff0c\u9084\u53ef\u96a8\u6642\u9ede\u64ca\u63d0\u4f9b\u7684\u9023\u7d50\uff0c\u5feb\u901f\u56de\u9867 IPA \u7684\u767c\u97f3\u8981\u9818\u3002\u9019\u7a2e\u5faa\u5e8f\u6f38\u9032\u7684\u7df4\u7fd2\u65b9\u5f0f\uff0c\u4e0d\u50c5\u80fd\u63d0\u5347\u6e96\u78ba\u5ea6\uff0c\u4e5f\u80fd\u589e\u5f37\u81ea\u4fe1\u5fc3\uff0c\u8b93\u82f1\u8a9e\u8868\u9054\u66f4\u81ea\u7136\u6d41\u66a2\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":"\u5b78\u7fd2\u570b\u969b\u97f3\u6a19 (IPA) \u7684\u6b63\u78ba\u767c\u97f3\uff0c\u662f\u638c\u63e1\u82f1\u8a9e\u53e3\u8a9e\u7684\u57fa\u790e\u3002\u900f\u904e\u4e92\u52d5\u5f0f\u5361\u7247\u7df4\u7fd2\uff0c\u4f60\u53ef\u4ee5\u9010\u6b65\u719f\u6089 \u55ae\u5143\u97f3\u3001\u96d9\u5143\u97f3\u8207\u8f14\u97f3 \u7684\u7b26\u865f\u3002\u6bcf\u6b21\u7ffb\u724c\u6642\uff0c\u5148\u5617\u8a66\u5927\u8072\u8b80\u51fa\u7b26\u865f\uff0c\u4e26\u53ef\u5229\u7528\u9304\u97f3\u529f\u80fd\u6aa2\u8996\u81ea\u5df1\u7684\u767c\u97f3\uff0c\u518d\u9ede\u64ca \u767c\u97f3 \u6309\u9215\u8046\u807d\u6a19\u6e96\u8b80\u97f3\uff0c\u9032\u884c\u6bd4\u8f03\u3002\u6301\u7e8c\u5b8c\u6210\u6574\u526f\u5361\u7247\u5f8c\uff0c\u4f60\u5c07\u80fd\u5728\u898b\u5230\u7b26\u865f\u6642\u7acb\u5373\u6b63\u78ba\u767c\u97f3\u3002\u82e5\u9700\u8981\u8907\u7fd2\uff0c\u9084\u53ef\u96a8\u6642\u9ede\u64ca\u63d0\u4f9b\u7684\u9023\u7d50\uff0c\u5feb\u901f\u56de\u9867 IPA \u7684\u767c\u97f3\u8981\u9818\u3002\u9019\u7a2e\u5faa\u5e8f\u6f38\u9032\u7684\u7df4\u7fd2\u65b9\u5f0f\uff0c\u4e0d\u50c5\u80fd\u63d0\u5347\u6e96\u78ba\u5ea6\uff0c\u4e5f\u80fd\u589e\u5f37\u81ea\u4fe1\u5fc3\uff0c\u8b93\u82f1\u8a9e\u8868\u9054\u66f4\u81ea\u7136\u6d41\u66a2\u3002","_links":{"self":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/4064","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=4064"}],"version-history":[{"count":11,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/4064\/revisions"}],"predecessor-version":[{"id":4076,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/posts\/4064\/revisions\/4076"}],"wp:attachment":[{"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=4064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=4064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.readingca.org.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=4064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}