{"id":775,"date":"2026-01-01T14:27:46","date_gmt":"2026-01-01T14:27:46","guid":{"rendered":"http:\/\/freeforce.eu\/365\/ptbr\/?p=775"},"modified":"2026-01-24T11:37:51","modified_gmt":"2026-01-24T11:37:51","slug":"cn-template-chatgpt","status":"publish","type":"post","link":"https:\/\/cn.fabeloso.com\/stories\/cn-template-chatgpt\/","title":{"rendered":"cn template chatgpt"},"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\n<style>\nbody {\n    font-family: Arial, sans-serif;\n    background-color: #fdfdfd;\n    margin: 0;\n    padding: 0;\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    flex-wrap: wrap;\n    gap: 8px;\n    justify-content: space-around;\n    margin-bottom: 10px;\n}\n\n.tab-buttons button {\n    padding: 10px 18px;\n    background-color: #ffe082;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\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\nh2 {\n    color: #2e7d32;\n    margin-top: 0;\n}\n\nstrong {\n    color: #2e7d32;\n}\n\ntextarea {\n    width: 100%;\n    padding: 10px;\n}\n\n\/* Tooltip styles *\/\n.vocab-tooltip {\n    border-bottom: 1px dotted #2e7d32;\n    cursor: help;\n    color: #2e7d32;\n    font-weight: bold;\n}\n\n.non-vocab-tooltip {\n    border-bottom: 1px dotted #000;\n    cursor: help;\n    color: #000;\n    font-weight: bold;\n}\n\n.vocab-tooltip:hover::after,\n.non-vocab-tooltip:hover::after {\n    content: attr(data-tooltip);\n    position: absolute;\n    background: #333;\n    color: white;\n    padding: 6px 10px;\n    border-radius: 4px;\n    font-size: 12px;\n    white-space: nowrap;\n    z-index: 10;\n}\n\n.answer-tooltip {\n    border-bottom: 1px dotted #1976d2;\n    cursor: help;\n    color: #1976d2;\n    font-weight: bold;\n}\n\n.answer-tooltip:hover::after {\n    content: attr(data-answer);\n    position: absolute;\n    background: #1976d2;\n    color: white;\n    padding: 6px 10px;\n    border-radius: 4px;\n    font-size: 12px;\n    white-space: nowrap;\n}\n\n\/* Chinese story font bigger *\/\n#story-a p {\n    font-size: 20pt;\n    line-height: 1.6;\n}\n<\/style>\n<\/head>\n\n<body>\n\n<!-- ========= SUMMARY ========= -->\n<p style=\"max-width:900px;margin:15px auto;\">\n<strong>Summary (25 words):<\/strong>  \n<span><!-- INSERT 25-WORD SUMMARY HERE --><\/span>\n<\/p>\n\n<div class=\"container\">\n\n<!-- ========= STORY TABS ========= -->\n<div class=\"tab-group\">\n<div class=\"tab-buttons\">\n    <button class=\"tab-btn active\" data-tab=\"story-a\">\u4e2d\u6587<\/button>\n    <button class=\"tab-btn\" data-tab=\"story-b\">English<\/button>\n<\/div>\n\n<div id=\"story-a\" class=\"tab-content active\">\n<h2><!-- STORY TITLE \u4e2d\u6587 --><\/h2>\n<p><!-- INSERT CHINESE STORY HERE, USE TOOLTIP SPANS FOR VOCABULARY -->\n<span class=\"vocab-tooltip\" data-tooltip=\"\u62fc\u97f3 Pinyin | English meaning\">ChineseWord<\/span>\n<\/p>\n<\/div>\n\n<div id=\"story-b\" class=\"tab-content\">\n<h2><!-- STORY TITLE English --><\/h2>\n<p><!-- INSERT ENGLISH TRANSLATION HERE --><\/p>\n<\/div>\n<\/div>\n\n<!-- ========= STUDY TABS ========= -->\n<div class=\"tab-group\">\n<div class=\"tab-buttons\">\n    <button class=\"tab-btn active\" data-tab=\"study-vocab\">Vocabulary<\/button>\n    <button class=\"tab-btn\" data-tab=\"study-grammar\">Grammar<\/button>\n    <button class=\"tab-btn\" data-tab=\"study-exp\">Expressions<\/button>\n    <button class=\"tab-btn\" data-tab=\"study-culture\">Culture<\/button>\n    <button class=\"tab-btn\" data-tab=\"study-audio\">Audio<\/button>\n<\/div>\n\n<div id=\"study-vocab\" class=\"tab-content active\">\n<ul>\n<li><strong><!-- WORD --><\/strong> \u2013 <!-- MEANING --><\/li>\n<\/ul>\n<\/div>\n\n<div id=\"study-grammar\" class=\"tab-content\">\n<p><!-- GRAMMAR EXPLANATION (min. 3 sentences) --><\/p>\n<p><em>Example:<\/em> <!-- EXAMPLE SENTENCE --><\/p>\n<\/div>\n\n<div id=\"study-exp\" class=\"tab-content\">\n<ul>\n<li><strong><!-- EXPRESSION --><\/strong> \u2013 <!-- MEANING --><\/li>\n<\/ul>\n<\/div>\n\n<div id=\"study-culture\" class=\"tab-content\">\n<ul>\n<li><!-- CULTURAL FACT --><\/li>\n<\/ul>\n<\/div>\n\n<div id=\"study-audio\" class=\"tab-content\">\n<p>Audio coming soon.<\/p>\n<\/div>\n<\/div>\n\n<!-- ========= EXERCISES ========= -->\n<div class=\"tab-group\">\n<div class=\"tab-buttons\">\n    <button class=\"tab-btn active\" data-tab=\"ex-q\">10 Perguntas<\/button>\n    <button class=\"tab-btn\" data-tab=\"ex-retell\">Recontar<\/button>\n    <button class=\"tab-btn\" data-tab=\"ex-mc\">M\u00faltipla escolha<\/button>\n    <button class=\"tab-btn\" data-tab=\"ex-tf\">Verdadeiro \/ Falso<\/button>\n<\/div>\n\n<div id=\"ex-q\" class=\"tab-content active\">\n<h2>10 Perguntas de Compreens\u00e3o<\/h2>\n<ol>\n<li><!-- QUESTION 1 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 2 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 3 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 4 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 5 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 6 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 7 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 8 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 9 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<li><!-- QUESTION 10 --><span class=\"answer-tooltip\" data-answer=\"<!-- ANSWER -->&#8220;>(resposta)<\/span><\/li>\n<\/ol>\n<\/div>\n\n<div id=\"ex-retell\" class=\"tab-content\">\n<h2>Recontar o Texto<\/h2>\n<ol>\n<li><!-- RETELL PROMPT 1 --><\/li>\n<li><!-- RETELL PROMPT 2 --><\/li>\n<li><!-- RETELL PROMPT 3 --><\/li>\n<li><!-- RETELL PROMPT 4 --><\/li>\n<li><!-- RETELL PROMPT 5 --><\/li>\n<li><!-- RETELL PROMPT 6 --><\/li>\n<li><!-- RETELL PROMPT 7 --><\/li>\n<li><!-- RETELL PROMPT 8 --><\/li>\n<li><!-- RETELL PROMPT 9 --><\/li>\n<li><!-- RETELL PROMPT 10 --><\/li>\n<\/ol>\n<textarea rows=\"12\" placeholder=\"Comece aqui...\"><\/textarea>\n<\/div>\n\n<div id=\"ex-mc\" class=\"tab-content\">\n<h2>M\u00faltipla Escolha<\/h2>\n<ol>\n<li><!-- MC 1 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 2 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 3 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 4 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 5 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 6 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 7 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 8 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 9 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<li><!-- MC 10 --><br>a) <!-- OPTION --><br>b) <!-- OPTION --><br>c) <!-- OPTION --><\/li>\n<\/ol>\n<\/div>\n\n<div id=\"ex-tf\" class=\"tab-content\">\n<h2>Verdadeiro ou Falso<\/h2>\n<ol>\n<li><!-- TF 1 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 2 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 3 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 4 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 5 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 6 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 7 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 8 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 9 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<li><!-- TF 10 --><span class=\"answer-tooltip\" data-answer=\"True \/ False\">(resposta)<\/span><\/li>\n<\/ol>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<script>\ndocument.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\n","protected":false},"excerpt":{"rendered":"<p>Summary (25 words): \u4e2d\u6587 English ChineseWord Vocabulary Grammar Expressions Culture Audio \u2013 Example: \u2013 Audio coming soon. 10 Perguntas Recontar M\u00faltipla escolha Verdadeiro \/ Falso 10 Perguntas de Compreens\u00e3o<\/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":[4],"tags":[],"class_list":["post-775","post","type-post","status-publish","format-standard","hentry","category-needs-work"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/775","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=775"}],"version-history":[{"count":1,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/775\/revisions"}],"predecessor-version":[{"id":2848,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/posts\/775\/revisions\/2848"}],"wp:attachment":[{"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/media?parent=775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/categories?post=775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cn.fabeloso.com\/stories\/wp-json\/wp\/v2\/tags?post=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}