Resumo Guiado
Estrutura parcialmente preenchida que o aprendiz completa para criar um resumo do conteúdo. Os campos fornecidos funcionam como andaime, orientando o que deve ser sintetizado.
Experimente
Resumo: O Efeito Placebo
Leia o texto abaixo e depois resuma
O efeito placebo ocorre quando uma pessoa apresenta melhora real em seus sintomas depois de receber um tratamento sem princípio ativo — como um comprimido de açúcar — simplesmente por acreditar que está sendo tratada. O efeito é mensurável e documentado em áreas como dor crônica, ansiedade e até sintomas de Parkinson, embora sua intensidade varie bastante entre condições.
Por trás do fenômeno estão mecanismos reais: a expectativa de melhora ativa vias neurológicas ligadas ao alívio da dor e à liberação de neurotransmissores como a dopamina. Não é "imaginação" no sentido de que nada acontece — é o cérebro produzindo respostas fisiológicas genuínas a partir de uma crença.
Por isso, testes clínicos de novos medicamentos sempre comparam o tratamento real contra um placebo: só assim é possível saber se o efeito observado vem do princípio ativo ou da expectativa do paciente. Um medicamento só é considerado eficaz quando supera consistentemente o placebo, não apenas o estado inicial do paciente.
O que é (em 1 frase)
Onde é observado
Principal limitação
Conexão com meu trabalho
Código-fonte
Dados de exemplo
Um texto curto e três seções guiadas, cada uma com um exemplo de resposta.
| 1 |
<?php
|
| 2 |
$titulo = 'Resumo: A Curva do Esquecimento';
|
| 3 |
$texto = [
|
| 4 |
'A Curva do Esquecimento, descrita pelo psicólogo Hermann Ebbinghaus no século XIX, mostra que a maior parte do que aprendemos se perde rapidamente logo após o aprendizado, e a perda desacelera com o tempo. Em poucos dias, sem nenhuma revisão, é comum lembrar menos da metade do que foi estudado.',
|
| 5 |
'O fenômeno acontece porque o cérebro prioriza reter o que é usado com frequência e descarta o que parece irrelevante. Sem repetição, uma informação nova nunca chega a ser consolidada como memória de longo prazo.',
|
| 6 |
'A forma mais eficaz de combater a curva é a revisão espaçada: revisar o conteúdo em intervalos crescentes. Cada revisão bem-sucedida achata a curva, tornando o esquecimento seguinte mais lento.',
|
| 7 |
];
|
| 8 |
$secoes = [
|
| 9 |
['titulo' => 'O que é (em 1 frase)', 'placeholder' => 'A Curva do Esquecimento é...', 'exemplo' => 'A Curva do Esquecimento é o padrão previsível de perda de memória ao longo do tempo, descrito por Ebbinghaus.'],
|
| 10 |
['titulo' => 'Por que acontece', 'placeholder' => 'Acontece porque...', 'exemplo' => 'Acontece porque o cérebro descarta informações que não são reforçadas por repetição.'],
|
| 11 |
['titulo' => 'Como combater', 'placeholder' => 'A forma mais eficaz é...', 'exemplo' => 'A forma mais eficaz é a revisão espaçada, repetindo o conteúdo em intervalos crescentes.'],
|
| 12 |
];
|
| 13 |
?>
|
Título e texto de leitura
A pessoa lê o texto antes de preencher as seções guiadas.
| 1 |
<div class="resumo" data-tipo="guided-summary" data-titulo="<?= htmlspecialchars($titulo) ?>">
|
| 2 |
|
| 3 |
<div class="resumo-cabecalho">
|
| 4 |
<p><?= htmlspecialchars($titulo) ?></p>
|
| 5 |
</div>
|
| 6 |
|
| 7 |
<div class="resumo-corpo">
|
| 8 |
<div class="resumo-leitura">
|
| 9 |
<p class="resumo-rotulo">Leia o texto abaixo e depois resuma</p>
|
| 10 |
<div class="resumo-texto">
|
| 11 |
<?php foreach ($texto as $paragrafo): ?>
|
| 12 |
<p><?= htmlspecialchars($paragrafo) ?></p>
|
| 13 |
<?php endforeach; ?>
|
| 14 |
</div>
|
| 15 |
</div>
|
Seções guiadas com exemplo revelável
Cada seção tem um botão "Ver exemplo" que só aparece o texto de referência sob demanda, sem estragar a tentativa da pessoa.
| 1 |
<?php foreach ($secoes as $secao): ?>
|
| 2 |
<div class="resumo-secao">
|
| 3 |
<div class="resumo-secao-cabecalho">
|
| 4 |
<p class="resumo-secao-titulo"><?= htmlspecialchars($secao['titulo']) ?></p>
|
| 5 |
<button type="button" class="resumo-ver-exemplo">Ver exemplo</button>
|
| 6 |
</div>
|
| 7 |
<textarea class="resumo-campo" rows="2" placeholder="<?= htmlspecialchars($secao['placeholder']) ?>"></textarea>
|
| 8 |
<p class="resumo-exemplo escondido"><?= htmlspecialchars($secao['exemplo']) ?></p>
|
| 9 |
</div>
|
| 10 |
<?php endforeach; ?>
|
| 11 |
|
| 12 |
<button type="button" class="resumo-download">Download em Markdown</button>
|
| 13 |
<p class="resumo-confirmacao" hidden>Resumo baixado em .md!</p>
|
| 14 |
</div>
|
| 15 |
|
| 16 |
</div>
|
Card e cabeçalho
Contêiner geral e a caixa de título centralizada.
| 1 |
.resumo {
|
| 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 |
.resumo-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 |
.resumo-cabecalho p {
|
| 18 |
margin: 0;
|
| 19 |
font-weight: 700;
|
| 20 |
font-size: 18px;
|
| 21 |
color: #0f172a;
|
| 22 |
}
|
| 23 |
|
| 24 |
.resumo-corpo { padding: 20px; }
|
Texto de leitura
O material que a pessoa lê antes de preencher as seções.
| 1 |
.resumo-rotulo {
|
| 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 |
.resumo-leitura { margin-bottom: 20px; }
|
| 11 |
|
| 12 |
.resumo-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.6;
|
| 19 |
}
|
| 20 |
|
| 21 |
.resumo-texto p + p { margin-top: 12px; }
|
Seções guiadas e exemplo revelável
O botão "Ver exemplo" fica junto do título da seção; o exemplo em si vem com uma borda lateral, como uma citação.
| 1 |
.resumo-secao {
|
| 2 |
margin-bottom: 14px;
|
| 3 |
padding: 14px;
|
| 4 |
border: 1px solid #cbd5e1;
|
| 5 |
border-radius: 12px;
|
| 6 |
background: rgba(241, 245, 249, .4);
|
| 7 |
}
|
| 8 |
|
| 9 |
.resumo-secao-cabecalho {
|
| 10 |
display: flex;
|
| 11 |
align-items: center;
|
| 12 |
justify-content: space-between;
|
| 13 |
gap: 8px;
|
| 14 |
margin-bottom: 8px;
|
| 15 |
}
|
| 16 |
|
| 17 |
.resumo-secao-titulo {
|
| 18 |
margin: 0;
|
| 19 |
font-size: 12px;
|
| 20 |
font-weight: 700;
|
| 21 |
text-transform: uppercase;
|
| 22 |
letter-spacing: .03em;
|
| 23 |
color: #4f46e5;
|
| 24 |
}
|
| 25 |
|
| 26 |
.resumo-ver-exemplo {
|
| 27 |
border: none;
|
| 28 |
background: none;
|
| 29 |
padding: 0;
|
| 30 |
font: inherit;
|
| 31 |
font-size: 12px;
|
| 32 |
font-weight: 600;
|
| 33 |
color: #64748b;
|
| 34 |
cursor: pointer;
|
| 35 |
}
|
| 36 |
|
| 37 |
.resumo-ver-exemplo:hover { color: #4f46e5; }
|
| 38 |
|
| 39 |
.resumo-campo {
|
| 40 |
width: 100%;
|
| 41 |
padding: 8px 10px;
|
| 42 |
border: 1px solid #cbd5e1;
|
| 43 |
border-radius: 8px;
|
| 44 |
background: #fff;
|
| 45 |
font: inherit;
|
| 46 |
font-size: 14px;
|
| 47 |
color: #334155;
|
| 48 |
resize: none;
|
| 49 |
box-sizing: border-box;
|
| 50 |
}
|
| 51 |
|
| 52 |
.resumo-exemplo {
|
| 53 |
margin: 10px 0 0;
|
| 54 |
padding-left: 12px;
|
| 55 |
border-left: 2px solid rgba(99, 102, 241, .4);
|
| 56 |
font-size: 13px;
|
| 57 |
font-style: italic;
|
| 58 |
color: #64748b;
|
| 59 |
line-height: 1.5;
|
| 60 |
}
|
| 61 |
|
| 62 |
.resumo-exemplo.escondido { display: none; }
|
Botão de download
Largura total, mesmo padrão de ação primária usado no resto do site.
| 1 |
.resumo-download {
|
| 2 |
display: block;
|
| 3 |
width: 100%;
|
| 4 |
margin-top: 8px;
|
| 5 |
padding: 12px 16px;
|
| 6 |
border: none;
|
| 7 |
border-radius: 10px;
|
| 8 |
background: #4f46e5;
|
| 9 |
color: #fff;
|
| 10 |
font: inherit;
|
| 11 |
font-weight: 600;
|
| 12 |
cursor: pointer;
|
| 13 |
}
|
| 14 |
|
| 15 |
.resumo-confirmacao {
|
| 16 |
margin-top: 10px;
|
| 17 |
text-align: center;
|
| 18 |
font-size: 14px;
|
| 19 |
color: #15803d;
|
| 20 |
}
|
Alternar o exemplo por seção
Cada botão só controla o exemplo da própria seção — abrir um não fecha os outros.
| 1 |
document.addEventListener('DOMContentLoaded', function () {
|
| 2 |
var resumo = document.querySelector('[data-tipo="guided-summary"]');
|
| 3 |
var secoes = resumo.querySelectorAll('.resumo-secao');
|
| 4 |
|
| 5 |
secoes.forEach(function (secao) {
|
| 6 |
var botao = secao.querySelector('.resumo-ver-exemplo');
|
| 7 |
var exemplo = secao.querySelector('.resumo-exemplo');
|
| 8 |
|
| 9 |
botao.addEventListener('click', function () {
|
| 10 |
var estaEscondido = exemplo.classList.contains('escondido');
|
| 11 |
exemplo.classList.toggle('escondido', !estaEscondido);
|
| 12 |
botao.textContent = estaEscondido ? 'Ocultar exemplo' : 'Ver exemplo';
|
| 13 |
});
|
| 14 |
});
|
Baixar o resumo em Markdown
Um "##" por seção, com o título já traduzido na tela seguido da resposta digitada.
| 1 |
function gerarMarkdown() {
|
| 2 |
var linhas = ['# ' + resumo.dataset.titulo, ''];
|
| 3 |
secoes.forEach(function (secao) {
|
| 4 |
var titulo = secao.querySelector('.resumo-secao-titulo');
|
| 5 |
var campo = secao.querySelector('.resumo-campo');
|
| 6 |
linhas.push('## ' + titulo.textContent.trim(), '', campo.value.trim(), '');
|
| 7 |
});
|
| 8 |
return linhas.join('\n');
|
| 9 |
}
|
| 10 |
|
| 11 |
var botaoDownload = resumo.querySelector('.resumo-download');
|
| 12 |
var confirmacao = resumo.querySelector('.resumo-confirmacao');
|
| 13 |
|
| 14 |
botaoDownload.addEventListener('click', function () {
|
| 15 |
var blob = new Blob([gerarMarkdown()], { type: 'text/markdown;charset=utf-8' });
|
| 16 |
var url = URL.createObjectURL(blob);
|
| 17 |
var link = document.createElement('a');
|
| 18 |
link.href = url;
|
| 19 |
link.download = 'guided-summary.md';
|
| 20 |
document.body.appendChild(link);
|
| 21 |
link.click();
|
| 22 |
document.body.removeChild(link);
|
| 23 |
URL.revokeObjectURL(url);
|
| 24 |
|
| 25 |
confirmacao.hidden = false;
|
| 26 |
setTimeout(function () { confirmacao.hidden = true; }, 3000);
|
| 27 |
});
|