cn using b1 template

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #fdfdfd; } .container { max-width: 900px; margin: 20px auto; padding: 0 15px; } .story-block { background-color: #fffde7; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-bottom: 20px; line-height: 1.6; } .tab-group { margin: 20px 0; } .tab-buttons { display: flex; justify-content: space-around; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .tab-buttons button { padding: 10px 20px; cursor: pointer; background-color: #ffe082; border: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s; } .tab-buttons button.active { background-color: #ffca28; } .tab-content { display: none; background-color: #fff8e1; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-bottom: 20px; } .tab-content.active { display: block; } h2 { margin-top: 0; color: #2e7d32; } h3 { color: #2e7d32; margin: 20px 0 10px 0; } ul { padding-left: 20px; } li { margin-bottom: 6px; } strong { color: #2e7d32; } /* generic vocab tooltip (for PT/EN if you want later) */ .vocab-tooltip { border-bottom: 1px dotted #333; position: relative; cursor: help; } .vocab-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 10; } /* HANZI tooltips: pinyin + English */ .hanzi { position: relative; cursor: help; color: #d32f2f; font-weight: bold; border-bottom: 2px dotted #d32f2f; padding: 0 2px; margin: 0 1px; } .hanzi-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.4; white-space: nowrap; z-index: 20; opacity: 0; visibility: hidden; transition: all 0.2s ease; } .hanzi:hover .hanzi-tooltip, .hanzi:focus .hanzi-tooltip { opacity: 1; visibility: visible; } .hanzi-tooltip::after { content: ”; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #333; } .hanzi-tooltip p { margin: 2px 0; } .hanzi-tooltip .pinyin { color: #ffeb3b; font-weight: bold; } .hanzi-tooltip .english { color: #c8e6c9; }

Tiger, Rabbit and Dragon in the Great Race


Tigre, Coelho e Dragão na Grande Corrida

Em um tempo muito antigo, durante a grande corrida do zodíaco chinês, o tigre nadava com força nas ondas frias.
Ele rugia alto para mostrar sua força, mas o rio era largo e ele começou a ficar cansado no meio do caminho.

Perto dali, o coelho pulava nervoso em toras de madeira e pedras flutuantes.
Ele era pequeno e delicado, mas muito esperto.

Uma grande onda quase levou o coelho embora, quando, de repente, um dragão enorme voou sobre o rio.
O dragão bondoso viu o perigo do coelho e soprou vento para empurrar a madeira para frente, ajudando o coelho a chegar em segurança à outra margem.

Mais tarde, o dragão explicou ao Imperador de Jade que também tinha parado para levar chuva aos campos secos de uma aldeia.
Por isso, o tigre chegou em terceiro lugar, o coelho em quarto, e o dragão em quinto, mostrando que coragem, inteligência e bondade podem andar juntas.

Tiger, Rabbit, Dragon

Long ago during the great race, the Tiger swam powerfully through the cold waves.
He roared loudly to show his strength, but the river was wide, and he grew tired halfway.

Nearby, the Rabbit hopped nervously on floating logs and stones.
He was small and gentle but clever.

A big wave almost swept him away when suddenly, a mighty Dragon flew overhead.
The kind Dragon saw the Rabbit’s danger and breathed wind to push the logs forward, helping the Rabbit reach safety.

Later, the Dragon explained to the Jade Emperor that he had also stopped to bring rain to dry village fields.
That is why the Tiger arrived third, the Rabbit fourth, and the Dragon fifth, showing that strength, cleverness, and kindness all matter.

Vocabulário da História

  • 老虎

    lǎohǔ

    tiger

    – tigre
  • 兔子

    tùzi

    rabbit

    – coelho
  • lóng

    dragon

    – dragão
  • 比赛

    bǐsài

    race; competition

    – corrida, competição
  • river

    – rio
  • 危险

    wēixiǎn

    danger

    – perigo
  • 帮助

    bāngzhù

    to help

    – ajudar
  • 玉皇大帝

    Yù Huáng Dàdì

    Jade Emperor

    – Imperador de Jade
  • 第三名

    dì sān míng

    third place

    – terceiro lugar
  • 善良

    shànliáng

    kind; kind-hearted

    – bondoso

Gramática

  • Uso de passado simples em inglês para contar histórias: swam, roared, flew, helped.
  • Conjunções de causa e efeito: because, so, that is why.
  • Em português, uso do pretérito perfeito: nadava, viu, ajudou, explicou.

Expressões Informais

  • “grande corrida do zodíaco” – maneira simples de falar da lenda da corrida.
  • “quase levou o coelho embora” – expressão para perigo muito perto.
  • “chegar em terceiro lugar” – forma comum de falar de posição em competição.

Dicas Culturais

  • A história faz parte da lenda da escolha dos 12 animais do zodíaco chinês.
  • O dragão, na cultura chinesa, é símbolo de poder, mas também de bondade e proteção.
  • Os lugares dos animais na corrida influenciam a ordem dos anos do calendário chinês.

Áudio

(adicione aqui o link ou o player de áudio da história)

Preencher as Lacunas

(crie frases com espaços em branco usando tigre, coelho, dragão, corrida, rio, ajudar, etc.)

10 Perguntas

(perguntas de compreensão sobre quem ajudou quem, quem chegou em que lugar, etc.)

Recontar a História

(instruções para o aluno recontar a história em 5–6 frases)

Múltipla Escolha

(questões de múltipla escolha sobre detalhes da história)
// Initialize tabs for ALL tab groups independently – ONE ACTIVE PER GROUP document.querySelectorAll(‘.tab-group’).forEach(group => { const buttons = group.querySelectorAll(‘.tab-btn’); const contents = group.querySelectorAll(‘.tab-content’); buttons.forEach(button => { button.addEventListener(‘click’, () => { // Remove active class from ALL buttons and contents in THIS GROUP ONLY buttons.forEach(btn => btn.classList.remove(‘active’)); contents.forEach(content => content.classList.remove(‘active’)); // Activate ONLY the clicked button and its tab content button.classList.add(‘active’); const targetTab = button.dataset.tab; document.getElementById(targetTab).classList.add(‘active’); }); }); });

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *