{"id":631,"date":"2025-12-29T16:54:38","date_gmt":"2025-12-29T16:54:38","guid":{"rendered":"http:\/\/freeforce.eu\/365\/ptbr\/?p=631"},"modified":"2026-01-24T11:37:51","modified_gmt":"2026-01-24T11:37:51","slug":"cn-using-b1-template","status":"publish","type":"post","link":"https:\/\/cn.fabeloso.com\/stories\/cn-using-b1-template\/","title":{"rendered":"cn using b1 template"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\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        .story-block {\n            background-color: #fffde7;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n            line-height: 1.6;\n        }\n\n        .tab-group {\n            margin: 20px 0;\n        }\n\n        .tab-buttons {\n            display: flex;\n            justify-content: space-around;\n            margin-bottom: 10px;\n            flex-wrap: wrap;\n            gap: 8px;\n        }\n\n        .tab-buttons button {\n            padding: 10px 20px;\n            cursor: pointer;\n            background-color: #ffe082;\n            border: none;\n            border-radius: 5px;\n            font-weight: bold;\n            transition: background-color 0.3s;\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            margin-bottom: 20px;\n        }\n\n        .tab-content.active {\n            display: block;\n        }\n\n        h2 {\n            margin-top: 0;\n            color: #2e7d32;\n        }\n\n        h3 {\n            color: #2e7d32;\n            margin: 20px 0 10px 0;\n        }\n\n        ul {\n            padding-left: 20px;\n        }\n\n        li {\n            margin-bottom: 6px;\n        }\n\n        strong {\n            color: #2e7d32;\n        }\n\n        \/* generic vocab tooltip (for PT\/EN if you want later) *\/\n        .vocab-tooltip {\n            border-bottom: 1px dotted #333;\n            position: relative;\n            cursor: help;\n        }\n\n        .vocab-tooltip:hover::after {\n            content: attr(data-tooltip);\n            position: absolute;\n            bottom: 100%;\n            left: 50%;\n            transform: translateX(-50%);\n            background: #333;\n            color: white;\n            padding: 5px 10px;\n            border-radius: 4px;\n            font-size: 12px;\n            white-space: nowrap;\n            z-index: 10;\n        }\n\n        \/* HANZI tooltips: pinyin + English *\/\n        .hanzi {\n            position: relative;\n            cursor: help;\n            color: #d32f2f;\n            font-weight: bold;\n            border-bottom: 2px dotted #d32f2f;\n            padding: 0 2px;\n            margin: 0 1px;\n        }\n\n        .hanzi-tooltip {\n            position: absolute;\n            bottom: 100%;\n            left: 50%;\n            transform: translateX(-50%);\n            background: #333;\n            color: #fff;\n            padding: 8px 10px;\n            border-radius: 6px;\n            font-size: 12px;\n            line-height: 1.4;\n            white-space: nowrap;\n            z-index: 20;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.2s ease;\n        }\n\n        .hanzi:hover .hanzi-tooltip,\n        .hanzi:focus .hanzi-tooltip {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .hanzi-tooltip::after {\n            content: '';\n            position: absolute;\n            top: 100%;\n            left: 50%;\n            transform: translateX(-50%);\n            border: 6px solid transparent;\n            border-top-color: #333;\n        }\n\n        .hanzi-tooltip p {\n            margin: 2px 0;\n        }\n\n        .hanzi-tooltip .pinyin {\n            color: #ffeb3b;\n            font-weight: bold;\n        }\n\n        .hanzi-tooltip .english {\n            color: #c8e6c9;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<h3>\n    Tiger, Rabbit and Dragon in the Great Race\n<\/h3>\n<br>\n\n<div class=\"container\">\n\n    <!-- ABAS HIST\u00d3RIA COMPLETA -->\n    <div class=\"tab-group historia-tabs\">\n        <div class=\"tab-buttons\">\n            <button class=\"tab-btn active\" data-tab=\"historia-tab0\">Portugu\u00eas<\/button>\n            <button class=\"tab-btn\" data-tab=\"historia-tab1\">English<\/button>\n        <\/div>\n\n        <!-- PORTUGU\u00caS -->\n        <div id=\"historia-tab0\" class=\"tab-content active\">\n            <h2>Tigre, Coelho e Drag\u00e3o na Grande Corrida<\/h2>\n            Em um tempo muito antigo, durante a grande corrida do zod\u00edaco chin\u00eas, o tigre nadava com for\u00e7a nas ondas frias.<br>\n            Ele rugia alto para mostrar sua for\u00e7a, mas o rio era largo e ele come\u00e7ou a ficar cansado no meio do caminho.<br><br>\n            Perto dali, o coelho pulava nervoso em toras de madeira e pedras flutuantes.<br>\n            Ele era pequeno e delicado, mas muito esperto.<br><br>\n            Uma grande onda quase levou o coelho embora, quando, de repente, um drag\u00e3o enorme voou sobre o rio.<br>\n            O drag\u00e3o bondoso viu o perigo do coelho e soprou vento para empurrar a madeira para frente, ajudando o coelho a chegar em seguran\u00e7a \u00e0 outra margem.<br><br>\n            Mais tarde, o drag\u00e3o explicou ao Imperador de Jade que tamb\u00e9m tinha parado para levar chuva aos campos secos de uma aldeia.<br>\n            Por isso, o tigre chegou em terceiro lugar, o coelho em quarto, e o drag\u00e3o em quinto, mostrando que coragem, intelig\u00eancia e bondade podem andar juntas.\n        <\/div>\n\n        <!-- ENGLISH -->\n        <div id=\"historia-tab1\" class=\"tab-content\">\n            <h2>Tiger, Rabbit, Dragon<\/h2>\n            Long ago during the great race, the Tiger swam powerfully through the cold waves.<br>\n            He roared loudly to show his strength, but the river was wide, and he grew tired halfway.<br><br>\n            Nearby, the Rabbit hopped nervously on floating logs and stones.<br>\n            He was small and gentle but clever.<br><br>\n            A big wave almost swept him away when suddenly, a mighty Dragon flew overhead.<br>\n            The kind Dragon saw the Rabbit&#8217;s danger and breathed wind to push the logs forward, helping the Rabbit reach safety.<br><br>\n            Later, the Dragon explained to the Jade Emperor that he had also stopped to bring rain to dry village fields.<br>\n            That is why the Tiger arrived third, the Rabbit fourth, and the Dragon fifth, showing that strength, cleverness, and kindness all matter.\n        <\/div>\n    <\/div>\n\n    <!-- ABAS DE ESTUDO -->\n    <div class=\"tab-group estudo-tabs\">\n        <div class=\"tab-buttons\">\n            <button class=\"tab-btn active\" data-tab=\"estudo-tab0\">Vocabul\u00e1rio<\/button>\n            <button class=\"tab-btn\" data-tab=\"estudo-tab1\">Gram\u00e1tica<\/button>\n            <button class=\"tab-btn\" data-tab=\"estudo-tab2\">Express\u00f5es<\/button>\n            <button class=\"tab-btn\" data-tab=\"estudo-tab3\">Dicas culturais<\/button>\n            <button class=\"tab-btn\" data-tab=\"estudo-tab4\">\u00c1udio<\/button>\n        <\/div>\n\n        <!-- VOCABUL\u00c1RIO -->\n        <div id=\"estudo-tab0\" class=\"tab-content active\">\n            <h2>Vocabul\u00e1rio da Hist\u00f3ria<\/h2>\n            <ul>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u8001\u864e\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">l\u01ceoh\u01d4<\/p>\n                        <p class=\"english\">tiger<\/p>\n                    <\/span>\n                <\/span> \u2013 tigre<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u5154\u5b50\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">t\u00f9zi<\/p>\n                        <p class=\"english\">rabbit<\/p>\n                    <\/span>\n                <\/span> \u2013 coelho<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u9f99\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">l\u00f3ng<\/p>\n                        <p class=\"english\">dragon<\/p>\n                    <\/span>\n                <\/span> \u2013 drag\u00e3o<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u6bd4\u8d5b\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">b\u01d0s\u00e0i<\/p>\n                        <p class=\"english\">race; competition<\/p>\n                    <\/span>\n                <\/span> \u2013 corrida, competi\u00e7\u00e3o<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u6cb3\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">h\u00e9<\/p>\n                        <p class=\"english\">river<\/p>\n                    <\/span>\n                <\/span> \u2013 rio<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u5371\u9669\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">w\u0113ixi\u01cen<\/p>\n                        <p class=\"english\">danger<\/p>\n                    <\/span>\n                <\/span> \u2013 perigo<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u5e2e\u52a9\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">b\u0101ngzh\u00f9<\/p>\n                        <p class=\"english\">to help<\/p>\n                    <\/span>\n                <\/span> \u2013 ajudar<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u7389\u7687\u5927\u5e1d\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">Y\u00f9 Hu\u00e1ng D\u00e0d\u00ec<\/p>\n                        <p class=\"english\">Jade Emperor<\/p>\n                    <\/span>\n                <\/span> \u2013 Imperador de Jade<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u7b2c\u4e09\u540d\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">d\u00ec s\u0101n m\u00edng<\/p>\n                        <p class=\"english\">third place<\/p>\n                    <\/span>\n                <\/span> \u2013 terceiro lugar<\/li>\n                <li><span class=\"hanzi\" tabindex=\"0\">\u5584\u826f\n                    <span class=\"hanzi-tooltip\">\n                        <p class=\"pinyin\">sh\u00e0nli\u00e1ng<\/p>\n                        <p class=\"english\">kind; kind-hearted<\/p>\n                    <\/span>\n                <\/span> \u2013 bondoso<\/li>\n            <\/ul>\n        <\/div>\n\n        <!-- GRAM\u00c1TICA -->\n        <div id=\"estudo-tab1\" class=\"tab-content\">\n            <h2>Gram\u00e1tica<\/h2>\n            <ul>\n                <li>Uso de passado simples em ingl\u00eas para contar hist\u00f3rias: <strong>swam, roared, flew, helped<\/strong>.<\/li>\n                <li>Conjun\u00e7\u00f5es de causa e efeito: <strong>because, so, that is why<\/strong>.<\/li>\n                <li>Em portugu\u00eas, uso do pret\u00e9rito perfeito: <strong>nadava, viu, ajudou, explicou<\/strong>.<\/li>\n            <\/ul>\n        <\/div>\n\n        <!-- EXPRESS\u00d5ES -->\n        <div id=\"estudo-tab2\" class=\"tab-content\">\n            <h2>Express\u00f5es Informais<\/h2>\n            <ul>\n                <li><strong>&#8220;grande corrida do zod\u00edaco&#8221;<\/strong> \u2013 maneira simples de falar da lenda da corrida.<\/li>\n                <li><strong>&#8220;quase levou o coelho embora&#8221;<\/strong> \u2013 express\u00e3o para perigo muito perto.<\/li>\n                <li><strong>&#8220;chegar em terceiro lugar&#8221;<\/strong> \u2013 forma comum de falar de posi\u00e7\u00e3o em competi\u00e7\u00e3o.<\/li>\n            <\/ul>\n        <\/div>\n\n        <!-- DICAS CULTURAIS -->\n        <div id=\"estudo-tab3\" class=\"tab-content\">\n            <h2>Dicas Culturais<\/h2>\n            <ul>\n                <li>A hist\u00f3ria faz parte da lenda da escolha dos 12 animais do zod\u00edaco chin\u00eas.<\/li>\n                <li>O drag\u00e3o, na cultura chinesa, \u00e9 s\u00edmbolo de poder, mas tamb\u00e9m de bondade e prote\u00e7\u00e3o.<\/li>\n                <li>Os lugares dos animais na corrida influenciam a ordem dos anos do calend\u00e1rio chin\u00eas.<\/li>\n            <\/ul>\n        <\/div>\n\n        <!-- \u00c1UDIO -->\n        <div id=\"estudo-tab4\" class=\"tab-content\">\n            <h2>\u00c1udio<\/h2>\n            (adicione aqui o link ou o player de \u00e1udio da hist\u00f3ria)\n        <\/div>\n    <\/div>\n\n    <!-- ABAS DE EXERC\u00cdCIO -->\n    <div class=\"tab-group exercicio-tabs\">\n        <div class=\"tab-buttons\">\n            <button class=\"tab-btn active\" data-tab=\"exercicio-tab0\">Preencher lacunas<\/button>\n            <button class=\"tab-btn\" data-tab=\"exercicio-tab1\">10 Perguntas<\/button>\n            <button class=\"tab-btn\" data-tab=\"exercicio-tab2\">Recontar hist\u00f3ria<\/button>\n            <button class=\"tab-btn\" data-tab=\"exercicio-tab3\">M\u00faltipla escolha<\/button>\n        <\/div>\n\n        <!-- PREENCHER LACUNAS -->\n        <div id=\"exercicio-tab0\" class=\"tab-content active\">\n            <h2>Preencher as Lacunas<\/h2>\n            (crie frases com espa\u00e7os em branco usando tigre, coelho, drag\u00e3o, corrida, rio, ajudar, etc.)\n        <\/div>\n\n        <!-- 10 PERGUNTAS -->\n        <div id=\"exercicio-tab1\" class=\"tab-content\">\n            <h2>10 Perguntas<\/h2>\n            (perguntas de compreens\u00e3o sobre quem ajudou quem, quem chegou em que lugar, etc.)\n        <\/div>\n\n        <!-- RECONTAR HIST\u00d3RIA -->\n        <div id=\"exercicio-tab2\" class=\"tab-content\">\n            <h2>Recontar a Hist\u00f3ria<\/h2>\n            (instru\u00e7\u00f5es para o aluno recontar a hist\u00f3ria em 5\u20136 frases)\n        <\/div>\n\n        <!-- M\u00daLTIPLA ESCOLHA -->\n        <div id=\"exercicio-tab3\" class=\"tab-content\">\n            <h2>M\u00faltipla Escolha<\/h2>\n            (quest\u00f5es de m\u00faltipla escolha sobre detalhes da hist\u00f3ria)\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    \/\/ Initialize tabs for ALL tab groups independently - ONE ACTIVE PER GROUP\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                \/\/ Remove active class from ALL buttons and contents in THIS GROUP ONLY\n                buttons.forEach(btn => btn.classList.remove('active'));\n                contents.forEach(content => content.classList.remove('active'));\n\n                \/\/ Activate ONLY the clicked button and its tab content\n                button.classList.add('active');\n                const targetTab = button.dataset.tab;\n                document.getElementById(targetTab).classList.add('active');\n            });\n        });\n    });\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Tiger, Rabbit and Dragon in the Great Race Portugu\u00eas English Tigre, Coelho e Drag\u00e3o na Grande Corrida Em um tempo muito antigo, durante a grande corrida do zod\u00edaco chin\u00eas, o &hellip; <a title=\"cn using b1 template\" class=\"hm-read-more\" href=\"https:\/\/cn.fabeloso.com\/stories\/cn-using-b1-template\/\"><span class=\"screen-reader-text\">cn using b1 template<\/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":[3],"tags":[],"class_list":["post-631","post","type-post","status-publish","format-standard","hentry","category-test"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/631","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=631"}],"version-history":[{"count":1,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/631\/revisions"}],"predecessor-version":[{"id":2857,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/631\/revisions\/2857"}],"wp:attachment":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/media?parent=631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/categories?post=631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/tags?post=631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}