Faixa de Estrutura
Tira linear de caixas que o aprendiz preenche para mapear a estrutura de um texto, processo ou argumento. Cada caixa representa um elemento ou etapa, forçando síntese e organização.
Experimente
Estrutura de um Experimento Científico
Preencha cada caixa com o elemento correspondente.
Leia o texto abaixo e depois mapeie a estrutura
Um grupo de pesquisadores queria saber se plantas de feijão cresciam mais rápido perto de luz azul do que perto de luz vermelha. Eles dividiram 40 mudas em dois grupos idênticos, expondo um grupo à luz azul e o outro à luz vermelha por 21 dias, mantendo água, temperatura e solo iguais nos dois casos.
Ao final do período, o grupo exposto à luz azul apresentou, em média, 30% mais altura do que o grupo exposto à luz vermelha. Os pesquisadores concluíram que, nas condições testadas, a luz azul favorece o crescimento inicial do feijoeiro mais do que a luz vermelha.
Pergunta / Hipótese
Método
Resultado
Conclusão
Código-fonte
Dados de exemplo
Um texto curto (fábula de Esopo, domínio público) e quatro caixas que mapeiam sua estrutura narrativa.
| 1 |
<?php
|
| 2 |
$titulo = 'Estrutura de uma Fábula';
|
| 3 |
$texto = [
|
| 4 |
'Uma raposa avistou um cacho de uvas maduras pendurado bem alto numa videira. Depois de pular várias vezes sem conseguir alcançá-las, ela desistiu e foi embora dizendo que as uvas provavelmente estavam verdes e azedas mesmo.',
|
| 5 |
];
|
| 6 |
$caixas = [
|
| 7 |
['rotulo' => 'Situação inicial', 'placeholder' => 'Qual é a situação no começo?'],
|
| 8 |
['rotulo' => 'Tentativa', 'placeholder' => 'O que o personagem tenta fazer?'],
|
| 9 |
['rotulo' => 'Desfecho', 'placeholder' => 'Como a tentativa termina?'],
|
| 10 |
['rotulo' => 'Moral', 'placeholder' => 'Qual é o ensinamento da fábula?'],
|
| 11 |
];
|
| 12 |
?>
|
Título e texto de leitura
A pessoa lê a fábula antes de mapear a estrutura nas caixas.
| 1 |
<div class="faixa" data-tipo="structure-strip" data-titulo="<?= htmlspecialchars($titulo) ?>">
|
| 2 |
|
| 3 |
<div class="faixa-cabecalho">
|
| 4 |
<p><?= htmlspecialchars($titulo) ?></p>
|
| 5 |
</div>
|
| 6 |
|
| 7 |
<div class="faixa-corpo">
|
| 8 |
<div class="faixa-leitura">
|
| 9 |
<p class="faixa-rotulo-secao">Leia o texto abaixo e depois mapeie a estrutura</p>
|
| 10 |
<div class="faixa-texto">
|
| 11 |
<?php foreach ($texto as $paragrafo): ?>
|
| 12 |
<p><?= htmlspecialchars($paragrafo) ?></p>
|
| 13 |
<?php endforeach; ?>
|
| 14 |
</div>
|
| 15 |
</div>
|
Grade de caixas numeradas
2 por linha — a sequência vem da numeração, não de setas, porque setas não fazem sentido numa grade que quebra linha.
| 1 |
<div class="faixa-grade">
|
| 2 |
<?php foreach ($caixas as $i => $caixa): ?>
|
| 3 |
<div class="faixa-caixa">
|
| 4 |
<div class="faixa-caixa-cabecalho">
|
| 5 |
<span class="faixa-numero"><?= $i + 1 ?></span>
|
| 6 |
<p class="faixa-rotulo"><?= htmlspecialchars($caixa['rotulo']) ?></p>
|
| 7 |
</div>
|
| 8 |
<textarea class="faixa-campo" placeholder="<?= htmlspecialchars($caixa['placeholder']) ?>"></textarea>
|
| 9 |
</div>
|
| 10 |
<?php endforeach; ?>
|
| 11 |
</div>
|
| 12 |
|
| 13 |
<button type="button" class="faixa-download">Download em Markdown</button>
|
| 14 |
<p class="faixa-confirmacao" hidden>Faixa baixada em .md!</p>
|
| 15 |
</div>
|
| 16 |
|
| 17 |
</div>
|
Card e cabeçalho
Contêiner geral e a caixa de título centralizada.
| 1 |
.faixa {
|
| 2 |
max-width: 480px;
|
| 3 |
border: 1px solid #e2e8f0;
|
| 4 |
border-radius: 16px;
|
| 5 |
background: #fff;
|
| 6 |
font-family: sans-serif;
|
| 7 |
overflow: hidden;
|
| 8 |
}
|
| 9 |
|
| 10 |
.faixa-cabecalho {
|
| 11 |
padding: 20px 24px;
|
| 12 |
border-bottom: 1px solid #cbd5e1;
|
| 13 |
background: rgba(241, 245, 249, .6);
|
| 14 |
text-align: center;
|
| 15 |
}
|
| 16 |
|
| 17 |
.faixa-cabecalho p {
|
| 18 |
margin: 0;
|
| 19 |
font-weight: 700;
|
| 20 |
font-size: 18px;
|
| 21 |
color: #0f172a;
|
| 22 |
}
|
| 23 |
|
| 24 |
.faixa-corpo { padding: 20px; }
|
Texto de leitura
O material sobre o qual a estrutura vai ser mapeada.
| 1 |
.faixa-rotulo-secao {
|
| 2 |
margin: 0 0 8px;
|
| 3 |
font-size: 12px;
|
| 4 |
font-weight: 700;
|
| 5 |
text-transform: uppercase;
|
| 6 |
letter-spacing: .03em;
|
| 7 |
color: #64748b;
|
| 8 |
}
|
| 9 |
|
| 10 |
.faixa-leitura { margin-bottom: 20px; }
|
| 11 |
|
| 12 |
.faixa-texto {
|
| 13 |
padding: 16px;
|
| 14 |
border: 1px solid #cbd5e1;
|
| 15 |
border-radius: 12px;
|
| 16 |
background: rgba(241, 245, 249, .4);
|
| 17 |
color: #475569;
|
| 18 |
line-height: 1.7;
|
| 19 |
}
|
Grade de caixas numeradas
2 colunas em telas largas, 1 em telas estreitas — o número no cabeçalho de cada caixa substitui as setas de uma tira horizontal.
| 1 |
.faixa-grade {
|
| 2 |
display: grid;
|
| 3 |
grid-template-columns: repeat(2, 1fr);
|
| 4 |
gap: 12px;
|
| 5 |
margin-bottom: 16px;
|
| 6 |
}
|
| 7 |
|
| 8 |
@media (max-width: 480px) {
|
| 9 |
.faixa-grade { grid-template-columns: 1fr; }
|
| 10 |
}
|
| 11 |
|
| 12 |
.faixa-caixa {
|
| 13 |
display: flex;
|
| 14 |
flex-direction: column;
|
| 15 |
border: 1px solid #cbd5e1;
|
| 16 |
border-radius: 12px;
|
| 17 |
overflow: hidden;
|
| 18 |
}
|
| 19 |
|
| 20 |
.faixa-caixa-cabecalho {
|
| 21 |
display: flex;
|
| 22 |
align-items: center;
|
| 23 |
gap: 8px;
|
| 24 |
padding: 8px 12px;
|
| 25 |
background: rgba(99, 102, 241, .08);
|
| 26 |
border-bottom: 1px solid rgba(99, 102, 241, .2);
|
| 27 |
}
|
| 28 |
|
| 29 |
.faixa-numero {
|
| 30 |
flex-shrink: 0;
|
| 31 |
width: 20px;
|
| 32 |
height: 20px;
|
| 33 |
border-radius: 999px;
|
| 34 |
background: rgba(99, 102, 241, .2);
|
| 35 |
color: #4338ca;
|
| 36 |
font-size: 11px;
|
| 37 |
font-weight: 700;
|
| 38 |
display: flex;
|
| 39 |
align-items: center;
|
| 40 |
justify-content: center;
|
| 41 |
}
|
| 42 |
|
| 43 |
.faixa-rotulo {
|
| 44 |
margin: 0;
|
| 45 |
font-size: 12px;
|
| 46 |
font-weight: 700;
|
| 47 |
color: #4f46e5;
|
| 48 |
}
|
| 49 |
|
| 50 |
.faixa-campo {
|
| 51 |
flex: 1;
|
| 52 |
min-height: 100px;
|
| 53 |
padding: 10px 12px;
|
| 54 |
border: none;
|
| 55 |
background: #f8fafc;
|
| 56 |
font: inherit;
|
| 57 |
font-size: 14px;
|
| 58 |
color: #334155;
|
| 59 |
resize: none;
|
| 60 |
box-sizing: border-box;
|
| 61 |
}
|
Botão de download
Largura total, mesmo padrão de ação primária usado no resto do site.
| 1 |
.faixa-download {
|
| 2 |
display: block;
|
| 3 |
width: 100%;
|
| 4 |
padding: 12px 16px;
|
| 5 |
border: none;
|
| 6 |
border-radius: 10px;
|
| 7 |
background: #4f46e5;
|
| 8 |
color: #fff;
|
| 9 |
font: inherit;
|
| 10 |
font-weight: 600;
|
| 11 |
cursor: pointer;
|
| 12 |
}
|
| 13 |
|
| 14 |
.faixa-confirmacao {
|
| 15 |
margin-top: 10px;
|
| 16 |
text-align: center;
|
| 17 |
font-size: 14px;
|
| 18 |
color: #15803d;
|
| 19 |
}
|
Baixar a estrutura preenchida em Markdown
Um "##" por caixa, na mesma ordem da grade, usando o rótulo já traduzido na tela.
| 1 |
document.addEventListener('DOMContentLoaded', function () {
|
| 2 |
var faixa = document.querySelector('[data-tipo="structure-strip"]');
|
| 3 |
|
| 4 |
function gerarMarkdown() {
|
| 5 |
var linhas = ['# ' + faixa.dataset.titulo, ''];
|
| 6 |
faixa.querySelectorAll('.faixa-caixa').forEach(function (caixa) {
|
| 7 |
var rotulo = caixa.querySelector('.faixa-rotulo');
|
| 8 |
var campo = caixa.querySelector('.faixa-campo');
|
| 9 |
linhas.push('## ' + rotulo.textContent.trim(), '', campo.value.trim(), '');
|
| 10 |
});
|
| 11 |
return linhas.join('\n');
|
| 12 |
}
|
| 13 |
|
| 14 |
var botaoDownload = faixa.querySelector('.faixa-download');
|
| 15 |
var confirmacao = faixa.querySelector('.faixa-confirmacao');
|
| 16 |
|
| 17 |
botaoDownload.addEventListener('click', function () {
|
| 18 |
var blob = new Blob([gerarMarkdown()], { type: 'text/markdown;charset=utf-8' });
|
| 19 |
var url = URL.createObjectURL(blob);
|
| 20 |
var link = document.createElement('a');
|
| 21 |
link.href = url;
|
| 22 |
link.download = 'structure-strip.md';
|
| 23 |
document.body.appendChild(link);
|
| 24 |
link.click();
|
| 25 |
document.body.removeChild(link);
|
| 26 |
URL.revokeObjectURL(url);
|
| 27 |
|
| 28 |
confirmacao.hidden = false;
|
| 29 |
setTimeout(function () { confirmacao.hidden = true; }, 3000);
|
| 30 |
});
|
| 31 |
});
|