{"id":1208,"date":"2026-01-06T13:30:22","date_gmt":"2026-01-06T13:30:22","guid":{"rendered":"http:\/\/freeforce.eu\/365\/ptbr\/?p=1208"},"modified":"2026-01-24T11:37:51","modified_gmt":"2026-01-24T11:37:51","slug":"test-full-annotated-clone","status":"publish","type":"post","link":"https:\/\/cn.fabeloso.com\/stories\/test-full-annotated-clone\/","title":{"rendered":"test Full annotated Clone"},"content":{"rendered":"\n<p>Added prompts to the template   put place houder audio<\/p>\n\n\n\n<p>update the excercise scetion with modifications <\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: #fdfdfd;\n        }\n\n        .container {\n            max-width: 900px;\n            margin: 20px auto;\n            padding: 0 15px;\n        }\n\n        .tab-group {\n            margin: 25px 0;\n        }\n\n        .tab-buttons {\n            display: flex;\n            justify-content: space-around;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin-bottom: 10px;\n        }\n\n        .tab-buttons button {\n            padding: 10px 18px;\n            cursor: pointer;\n            background-color: #ffe082;\n            border: none;\n            border-radius: 6px;\n            font-weight: bold;\n        }\n\n        .tab-buttons button.active {\n            background-color: #ffca28;\n        }\n\n        .tab-content {\n            display: none;\n            background-color: #fff8e1;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n        }\n\n        .tab-content.active {\n            display: block;\n        }\n\n        h2 {\n            color: #2e7d32;\n            margin-top: 0;\n        }\n\n        textarea {\n            width: 100%;\n            padding: 10px;\n            border-radius: 6px;\n            border: 1px solid #ccc;\n        }\n\n        .vocab-tooltip {\n            border-bottom: 1px dotted #333;\n            cursor: help;\n            font-weight: bold;\n            color: #2e7d32;\n        }\n\n        .vocab-tooltip:hover::after {\n            content: attr(data-tooltip);\n            position: absolute;\n            background: #333;\n            color: white;\n            padding: 5px 10px;\n            border-radius: 4px;\n            font-size: 12px;\n            white-space: nowrap;\n            transform: translate(-50%, -120%);\n        }\n\n        .answer-tooltip {\n            border-bottom: 1px dotted #666;\n            cursor: help;\n            font-weight: bold;\n            color: #1976d2;\n        }\n\n        .answer-tooltip:hover::after {\n            content: attr(data-answer);\n            position: absolute;\n            background: #1976d2;\n            color: white;\n            padding: 8px 12px;\n            border-radius: 4px;\n            font-size: 13px;\n            white-space: nowrap;\n            transform: translate(-50%, -120%);\n        }\n    <\/style>\n<\/head>\n<body>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/www.salesforce.com\/small-business\/pricing\/#1742496593545_1813\"><\/audio><\/figure>\n\n\n\n== START HERE, PROMPT: ==\nFor each day write an article of 500 words on HSK2 level\ncreate a summary in 25 words in english\nadd tooltip in mandarin text for all words\nProvide a full english translation of the text\nput idiomatic expression in a table: mandarin, pinyin, english\nPopulate the below template:\n\n== start template ==\n\n<p>PLACE HERE THE CHINESE TITLE<BR>\n   PLACE HERE THE SUMMARY (IN ENGLISH IF HSK2 AND LOWER)<BR>\n<strong>LEVEL\/WORDCOUNT:<\/strong> ______________________________<\/p>\n\n<p>\n<span class=\"vocab-tooltip\" data-tooltip=\"PLACEHOLDER: Pinyin \u2013 English translation\">\nPLACE HERE CHINESE TITLE WITH TOOLTIP\n<\/span>\n<\/p>\n\n<p>\nPLACE HERE THE ENGLISH DESCRIPTION OF THE STORY.\n<\/p>\n\n<p><strong>LEVEL\/WORDCOUNT:<\/strong> HSK 2 \/ ~500 words<\/p>\n\n<div class=\"container\">\n<!-- ================= STORY SECTION ================= -->\n<div class=\"tab-group historia-tabs\">\n<div class=\"tab-buttons\">\n<button class=\"tab-btn active\" data-tab=\"story-zh\">\u4e2d\u6587<\/button>\n<button class=\"tab-btn\" data-tab=\"story-en\">English<\/button>\n<button class=\"tab-btn\" data-tab=\"audio\">Audio<\/button>\n<\/div>\n\n<div id=\"story-zh\" class=\"tab-content active\">\n<h2>\n<span class=\"vocab-tooltip\" data-tooltip=\"PLACEHOLDER: Pinyin \u2013 English translation\">\nPLACE HERE THE CHINESE TITLE WITH TOOLTIP\n<\/span>\n<\/h2>\n\nPLACE HERE THE CHINESE STORY TEXT WITH VOCAB TOOLTIPS ON ALL WORDS\n\n<\/div>\n\n<div id=\"story-en\" class=\"tab-content\">\n<h2>PLACE HERE THE ENGLISH TITLE<\/h2>\n<p>\nPLACE HERE THE FULL ENGLISH TRANSLATION OF THE STORY TEXT.\n<\/p>\n<\/div>\n\n<div id=\"audio\" class=\"tab-content\">\n<h2>Audio help<\/h2>\n<h2>How to Use the Audio<\/h2> \n<p> The audio is designed to help you improve your Chinese listening skills and pronunciation. You can use it in two ways: <\/p> \n<ul> \n<li><strong>Before reading the text:<\/strong> Listen first to practice understanding spoken Chinese. This helps you focus on pronunciation, rhythm, and listening comprehension without relying on written characters.<\/li> \n<li><strong>After reading the text:<\/strong> Listen again to compare your own pronunciation with the native speaker. This helps you improve speaking skills, pronunciation, and fluency.<\/li> \n<\/ul> \n<p> Listening regularly with and without the text will strengthen both your comprehension and speaking abilities in Chinese. <\/p>\n<\/div>\n<\/div>\n\n<!-- ================= STUDY TABS ================= -->\n<div class=\"tab-group estudo-tabs\">\n<div class=\"tab-buttons\">\n<button class=\"tab-btn active\" data-tab=\"vocab\">Vocabulary<\/button>\n<button class=\"tab-btn\" data-tab=\"grammar\">Grammar<\/button>\n<button class=\"tab-btn\" data-tab=\"idioms\">Idiomatic Expressions<\/button>\n<button class=\"tab-btn\" data-tab=\"culture\">Cultural Insights<\/button>\n<\/div>\n\n<div id=\"vocab\" class=\"tab-content active\">\n<h2>Vocabulary<\/h2>\n<table>\n<tr><th>Hanzi<\/th><th>Pinyin<\/th><th>English<\/th><\/tr>\nPLACE HERE VOCABULARY TABLE ROWS FROM THE STORY\n<\/table>\n<\/div>\n\n<div id=\"grammar\" class=\"tab-content\">\n<h2>Grammar<\/h2>\n\nPLACE HERE GRAMMAR POINTS WITH EXAMPLES FROM THE STORY\n\n<\/div>\n\n<div id=\"idioms\" class=\"tab-content\">\n<h2>Idiomatic Expressions<\/h2>\n<table>\n<tr><th>Mandarin<\/th><th>Pinyin<\/th><th>English<\/th><\/tr>\nPLACE HERE IDIOMATIC EXPRESSIONS TABLE ROWS\n<\/table>\n<\/div>\n\n<div id=\"culture\" class=\"tab-content\">\n<h2>Cultural Insights<\/h2>\nPLACE HERE CULTURAL INSIGHTS AS LIST OR PARAGRAPHS\n<\/div>\n<\/div>\n<!-- ================= EXERCISES ================= -->\n<div class=\"tab-group exercicio-tabs\">\n  <div class=\"tab-buttons\">\n    <button class=\"tab-btn active\" data-tab=\"questions\">10 Questions<\/button>\n    <button class=\"tab-btn\" data-tab=\"multiple\">Multiple Choice<\/button>\n    <button class=\"tab-btn\" data-tab=\"truefalse\">True or False<\/button>\n    <button class=\"tab-btn\" data-tab=\"retell\">Retell the Story<\/button>\n  <\/div>\n\n  <!-- ==== 10 Questions Tab ==== -->\n  <div id=\"questions\" class=\"tab-content active\">\n    <h2>10 Questions<\/h2>\n    <ol>\n      <li>\n        <span class=\"question-tooltip\" data-tooltip=\"What is the main character's name? \/ Answer: \u5c0f\u660e (Xi\u01ceo M\u00edng)\">\n          \u4e3b\u89d2\u53eb\u4ec0\u4e48\u540d\u5b57\uff1f\n        <\/span>\n      <\/li>\n      <li>\n        <span class=\"question-tooltip\" data-tooltip=\"Where does the story take place? \/ Answer: \u5728\u5b66\u6821 (At school)\">\n          \u6545\u4e8b\u53d1\u751f\u5728\u54ea\u91cc\uff1f\n        <\/span>\n      <\/li>\n      <!-- ADD remaining 8 questions similarly -->\n    <\/ol>\n  <\/div>\n\n  <!-- ==== Multiple Choice Tab ==== -->\n  <div id=\"multiple\" class=\"tab-content\">\n    <h2>Multiple Choice<\/h2>\n    <table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">\n      <tr>\n        <td>\n          <span class=\"mc-tooltip\" data-tooltip=\"A: \u5317\u4eac (B\u011bij\u012bng)\">\n            1. \u8fd9\u4e2a\u57ce\u5e02\u662f\uff1f\n          <\/span><br>\n          A. \u5317\u4eac<br>\n          B. \u4e0a\u6d77<br>\n          C. \u5e7f\u5dde<br>\n        <\/td>\n        <td>\n          <span class=\"mc-tooltip\" data-tooltip=\"C: \u82f9\u679c (P\u00ednggu\u01d2)\">\n            2. \u4ed6\u6700\u559c\u6b22\u7684\u6c34\u679c\u662f\uff1f\n          <\/span><br>\n          A. \u9999\u8549<br>\n          B. \u68a8<br>\n          C. \u82f9\u679c<br>\n        <\/td>\n      <\/tr>\n      <tr><td colspan=\"2\">&nbsp;<\/td><\/tr> <!-- Empty row between answers -->\n      <tr>\n        <td>\n          <span class=\"mc-tooltip\" data-tooltip=\"B: \u7ea2\u8272 (H\u00f3ngs\u00e8)\">\n            3. \u5979\u6700\u559c\u6b22\u7684\u989c\u8272\u662f\uff1f\n          <\/span><br>\n          A. \u84dd\u8272<br>\n          B. \u7ea2\u8272<br>\n          C. \u7eff\u8272<br>\n        <\/td>\n        <td>\n          <span class=\"mc-tooltip\" data-tooltip=\"A: \u732b (M\u0101o)\">\n            4. \u5bb6\u91cc\u517b\u4e86\u4ec0\u4e48\u52a8\u7269\uff1f\n          <\/span><br>\n          A. \u732b<br>\n          B. \u72d7<br>\n          C. \u5154\u5b50<br>\n        <\/td>\n      <\/tr>\n      <tr><td colspan=\"2\">&nbsp;<\/td><\/tr> <!-- Empty row -->\n      <tr>\n        <td>\n          <span class=\"mc-tooltip\" data-tooltip=\"C: \u706b\u8f66 (Hu\u01d2ch\u0113)\">\n            5. \u4ed6\u600e\u4e48\u53bb\u5b66\u6821\uff1f\n          <\/span><br>\n          A. \u516c\u4ea4<br>\n          B. \u81ea\u884c\u8f66<br>\n          C. \u706b\u8f66<br>\n        <\/td>\n        <td>\n          <span class=\"mc-tooltip\" data-tooltip=\"B: \u5b66\u6821\u56fe\u4e66\u9986 (Xu\u00e9xi\u00e0o t\u00fash\u016bgu\u01cen)\">\n            6. \u4ed6\u5e38\u53bb\u54ea\u91cc\u5b66\u4e60\uff1f\n          <\/span><br>\n          A. \u5bb6<br>\n          B. \u5b66\u6821\u56fe\u4e66\u9986<br>\n          C. \u5496\u5561\u5e97<br>\n        <\/td>\n      <\/tr>\n    <\/table>\n  <\/div>\n\n  <!-- ==== True\/False Tab ==== -->\n  <div id=\"truefalse\" class=\"tab-content\">\n    <h2>True or False<\/h2>\n    <ol>\n      <li>\n        <span class=\"tf-tooltip\" data-tooltip=\"The main character likes ice cream. \/ Answer: True\">\n          \u4e3b\u89d2\u559c\u6b22\u51b0\u6dc7\u6dcb\u3002\n        <\/span>\n      <\/li>\n      <li>\n        <span class=\"tf-tooltip\" data-tooltip=\"The story happens in winter. \/ Answer: False\">\n          \u6545\u4e8b\u53d1\u751f\u5728\u51ac\u5929\u3002\n        <\/span>\n      <\/li>\n      <!-- ADD remaining 4 True\/False questions similarly -->\n    <\/ol>\n  <\/div>\n\n  <!-- ==== Retell Tab ==== -->\n  <div id=\"retell\" class=\"tab-content\">\n    <h2>Retell the Story<\/h2>\n    <p>\n      \u7528\u4f60\u81ea\u5df1\u7684\u8bdd\u5199\u8fd9\u4e2a\u6545\u4e8b\u3002\n    <\/p>\n    <textarea rows=\"8\" placeholder=\"\u5f00\u59cb\u5199\u5427\u2026\u2026\"><\/textarea>\n    <p>\n      <span class=\"retell-tooltip\" data-tooltip=\"Focus on the main events and characters. \/ \u63d0\u793a\uff1a\u5173\u6ce8\u4e3b\u8981\u4e8b\u4ef6\u548c\u4eba\u7269\u3002\">\n        Suggestions: Try to summarize the story in 5\u20136 sentences using your own words.\n      <\/span>\n    <\/p>\n  <\/div>\n<\/div>\n<\/div>\n\n\n\n<script>\n    document.querySelectorAll('.tab-group').forEach(group => {\n        const buttons = group.querySelectorAll('.tab-btn');\n        const contents = group.querySelectorAll('.tab-content');\n\n        buttons.forEach(button => {\n            button.addEventListener('click', () => {\n                buttons.forEach(btn => btn.classList.remove('active'));\n                contents.forEach(content => content.classList.remove('active'));\n\n                button.classList.add('active');\n                document.getElementById(button.dataset.tab).classList.add('active');\n            });\n        });\n    });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Added prompts to the template put place houder audio update the excercise scetion with modifications == START HERE, PROMPT: == For each day write an article of 500 words on &hellip; <a title=\"test Full annotated Clone\" class=\"hm-read-more\" href=\"https:\/\/cn.fabeloso.com\/stories\/test-full-annotated-clone\/\"><span class=\"screen-reader-text\">test Full annotated Clone<\/span>Read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1208","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/1208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/comments?post=1208"}],"version-history":[{"count":1,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/1208\/revisions"}],"predecessor-version":[{"id":2832,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/1208\/revisions\/2832"}],"wp:attachment":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/media?parent=1208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/categories?post=1208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/tags?post=1208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}