Conteúdo e Objetivos Pedagógicos

Projeto Pódio da Aparício

Objetivo da Aula

Desenvolver uma página temática para o projeto Pódio da Aparício utilizando HTML e CSS, explorando layouts prontos, módulos visuais e personalizações criativas para destacar conquistas, projetos e alunos da escola.

Dicas Importantes
Experimente diferentes combinações de Upgrades CSS para criar um visual único. Não tenha medo de testar novos efeitos. Lembre-se de que o HTML define a estrutura da página e o CSS é responsável pela aparência. Procure manter a organização visual, utilizar títulos claros e escolher cores que facilitem a leitura do conteúdo.
Passo a passo das Atividades
1. Abrir o CodePen e criar um novo projeto.
2. Copiar o HTML Base e colar na área destinada ao HTML.
3. Copiar o CSS Base e colar na área destinada ao CSS.
4. Executar o projeto para verificar se a estrutura principal está funcionando corretamente.
5. Escolher um ou mais Upgrades CSS disponíveis nos arquivos "Mudanças para Hero Master" e adicionar ao projeto.
6. Testar diferentes combinações de cores, animações, efeitos de vidro, sombras, gradientes e molduras.
7. Escolher os blocos HTML disponíveis nos arquivos "Códigos Prontos".
8. Adicionar os blocos abaixo da seção principal do site.
9. Personalizar os textos com informações sobre alunos destaque, medalhistas da OBMEP, projetos premiados ou outras conquistas da Escola Aparício.
10. Substituir as imagens de exemplo por fotos ou imagens relacionadas ao conteúdo escolhido.
11. Organizar as seções da página de acordo com sua proposta visual.
12. Ajustar cores, tamanhos e espaçamentos para criar uma identidade própria.
13. Revisar o projeto verificando alinhamento, legibilidade e organização dos elementos.
14. Salvar e compartilhar o projeto finalizado.
Sugestões de código base
CodePen
HTML
CSS
Hero Master
Upgrades CSS
Cards
Galeria
Aluno Destaque
OBMEP
Projetos Premiados
Design Responsivo
Criatividade
Personalização Visual

Plataforma de Quiz

Objetivo da Aula

Criar a estrutura inicial de uma plataforma de Quiz utilizando HTML e CSS.

Dicas Importantes
Personalize o Hero Master usando cores, imagens e efeitos.
A tabela do Quiz deve ficar organizada e alinhada com o restante da página.
Use o CSS para criar efeitos visuais ao passar o mouse nos botões e respostas.
Passo a passo das Atividades
1. Abrir um novo arquivo e nomeá-lo com o nome da matéria escolhida para fazer o quiz.
2. Criar o arquivo index.html.
3. Adicionar o layout Hero Master dentro do HTML.
4. Modificar o Hero Master no CSS de acordo com sua criatividade.
5. Pode pegar os códigos nos arquivos "Códigos Prontos" e "Mudanças para Hero Master".
6. Procurar a tabela do Quiz em "Códigos Prontos".
7. Colocar a tabela do Quiz no final do arquivo antes da tag </body>.
8. Adicionar o CSS do Quiz dentro da tag <style>.
Sugestões de código base
Hero Master
Estrutura HTML
CSS Interno
Tabela de Quiz
Efeitos Hover
Personalização Visual

Fórum de Discussão da Turma

cainan
Completo 0 respostas
HTML <h1>Minha Imagem</h1> <img src="https://picsum.photos/300" alt="Imagem aleatória"> CSS img{ borde...
HTML
<h1>Minha Imagem</h1>

<img src="https://picsum.photos/300" alt="Imagem aleatória">
CSS
img{
border-radius:10px;
}
cainan
Parte 1 respostas
Inicio da atividade- html <h1>Olá Mundo!</h1> <p>Minha primeira página no CodePen.</p>...
Inicio da atividade- html
<h1>Olá Mundo!</h1>
<p>Minha primeira página no CodePen.</p>
cainan: <h1>Título Principal</h1> <h2>Subtítulo</h2> <h3>Título Menor</h3> <p>Este é um parágrafo.</p> <p> A informática está presente em quase todas as áreas da sociedade. </p>
PROFESSOR
Parte 3 respostas
PASSO 3 — ADICIONAR O CSS DA ALTERNATIVA SELECIONADA Dentro da sua <style> adicione: .alternativa-selecionada{ background: #d6ecff ...
PASSO 3 — ADICIONAR O CSS DA ALTERNATIVA SELECIONADA

Dentro da sua <style> adicione:

.alternativa-selecionada{
background: #d6ecff !important;
border: 2px solid var(--primary-color) !important;
}
cainan: Passo 4 <script> let respostasUsuario = []; /* FUNÇÃO DE SELEÇÃO */ function selecionar(elemento, indiceAlternativa){ /* PEGA A LISTA DA QUESTÃO */ let lista = elemento.parentElement; /* REMOVE A SELEÇÃO ANTIGA */ let alternativas = lista.querySelectorAll("li"); alternativas.forEach(item => { item.classList.remove("alternativa-selecionada"); }); /* MARCA A NOVA */ elemento.classList.add("alternativa-selecionada"); /* DESCOBRE QUAL QUESTÃO É */ let todasListas = document.querySelectorAll(".alternativas-lista"); let indiceQuestao = Array.from(todasListas).indexOf(lista); /* SALVA A RESPOSTA */ respostasUsuario[indiceQuestao] = indiceAlternativa; } </script>
cainan: <button class="btn-exemplo" style="background: var(--primary-color); color: white; margin-top: 20px;" onclick="corrigirQuiz()"> Finalizar Simulado </button>
Cainan: function corrigirQuiz(){ let listas = document.querySelectorAll(".alternativas-lista"); let acertos = 0; listas.forEach((lista, indice) => { let correta = Number(lista.dataset.correta); let respostaAluno = respostasUsuario[indice]; if(respostaAluno === correta){ acertos++; } }); alert( "Você acertou " + acertos + " de " + listas.length + " questões!" ); }
Ana Julya,Duda
Completo 1 respostas
# ✅ Gabarito do Quiz de Português 1. C 2. B 3. C 4. C 5. B 6. B 7. C 8. B 9. C 10. B ...
# ✅ Gabarito do Quiz de Português

1. C
2. B
3. C
4. C
5. B
6. B
7. C
8. B
9. C
10. B
Duda, Ana Julya: certíssimo, lindão, ameiiiii
cainan
Parte 1 respostas
<section class="simulado-container"> <table class="pergunta-table"> <tr> <th class...
<section class="simulado-container">
<table class="pergunta-table">
<tr>
<th class="pergunta-header">Questão 01 - Lógica de Programação</th>
</tr>
<tr>
<td style="padding: 20px; border: 1px solid #eee;">
<strong>Enunciado:</strong> Analise o código abaixo e identifique qual será a saída do console ao executar a função de soma.
</td>
</tr>
</table>

<ol class="alternativas-lista">
<li>O resultado será 10, pois a variável foi declarada como global.</li>
<li>Ocorrerá um erro de sintaxe na linha 4.</li>
<li>O resultado será "Undefined" devido ao escopo da função.</li>
<li>A função retornará o valor nulo.</li>
</ol>

<button class="btn-exemplo" style="background: var(--primary-color); color: white; margin-top: 20px;">
Confirmar Resposta
</button>
</section>
cainan: ok
Ana Julya,Duda
3 Parte 1 respostas
aaaaaaaaaaaaaa...
aaaaaaaaaaaaaa
👨‍🏫 Professor: top
Ana Julya,Duda
Parte 2 respostas
<?php require_once "conexao.php"; $id_edit = ""; $nome_edit = ""; $codigo_edit = ""; $turma_edit = &...
<?php
require_once "conexao.php";

$id_edit = "";
$nome_edit = "";
$codigo_edit = "";
$turma_edit = "";
$tipo_edit = "";

/* =========================
SALVAR RESPOSTA + STATUS
========================= */
if (isset($_POST['resposta'])) {
$id_duvida = $_POST['id_duvida'];
$nome = $_POST['nome_resposta'];
$resposta = $_POST['resposta'];

$stmt = $pdo->prepare("INSERT INTO respostas (id_duvida, nome, resposta)
VALUES (:id, :nome, :resposta)");

$stmt->execute([
':id' => $id_duvida,
':nome' => $nome,
':resposta' => $resposta
]);

// MARCA COMO RESPONDIDO
$pdo->prepare("UPDATE mural_atividade SET status='respondido' WHERE id=:id")
->execute([':id' => $id_duvida]);

header("Location: " . $_SERVER['PHP_SELF']);
exit;
}

/* =========================
EDITAR
========================= */
if (isset($_GET['id_editar'])) {
$stmt = $pdo->prepare("SELECT * FROM mural_atividade WHERE id=:id");
$stmt->execute([':id' => $_GET['id_editar']]);
$d = $stmt->fetch(PDO::FETCH_ASSOC);

if ($d) {
$id_edit = $d['id'];
$nome_edit = $d['nome_aluno'];
$codigo_edit = $d['codigo_criado'];
$turma_edit = $d['turma'];
$tipo_edit = $d['tipo_duvida'];
}
}

/* =========================
SALVAR DÚVIDA
========================= */
if ($_SERVER["REQUEST_METHOD"] == "POST" && !isset($_POST['resposta'])) {

$nome = $_POST['aluno'];
$codigo = $_POST['codigo'];
$turma = $_POST['turma'];
$tipo = $_POST['tipo_duvida'];
$id_atual = $_POST['id_registro'];

if (!empty($id_atual)) {
$sql = "UPDATE mural_atividade SET
nome_aluno=:nome, codigo_criado=:codigo,
turma=:turma, tipo_duvida=:tipo
WHERE id=:id";
$stmt = $pdo->prepare($sql);
$stmt->execute([
':nome'=>$nome,
':codigo'=>$codigo,
':turma'=>$turma,
':tipo'=>$tipo,
':id'=>$id_atual
]);
} else {
$sql = "INSERT INTO mural_atividade
(nome_aluno,codigo_criado,turma,tipo_duvida,data_envio)
VALUES (:nome,:codigo,:turma,:tipo,NOW())";
$stmt = $pdo->prepare($sql);
$stmt->execute([
':nome'=>$nome,
':codigo'=>$codigo,
':turma'=>$turma,
':tipo'=>$tipo
]);
}

header("Location: ".$_SERVER['PHP_SELF']);
exit;
}
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula + Fórum</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
body { background:#f4f7f9; padding-top:80px; }
.box { background:white; padding:20px; border-radius:10px; margin-bottom:20px; }

.duvida { border-left:5px solid #ffc107; }
.respondido { border-left:5px solid #28a745 !important; background:#f6fff8; }

.resposta { background:#f1f1f1; padding:10px; border-radius:8px; margin-top:5px; }

.conteudo-completo { display:none; }
</style>
</head>

<body>

<div class="container">

<!-- AULA -->
<div class="box">
<h3 class="text-primary">📘 Aula</h3>
<p><strong>Objetivo:</strong> Criar sistema com interação.</p>
<ul>
<li>Entender lógica</li>
<li>Aplicar código</li>
<li>Testar</li>
</ul>
</div>

<!-- FORM -->
<div class="box">
<h4>💡 Enviar dúvida</h4>

<form method="POST">
<input type="hidden" name="id_registro" value="<?= $id_edit ?>">

<input type="text" name="aluno" class="form-control mb-2"
placeholder="Seu nome" required value="<?= $nome_edit ?>">

<div class="row">
<div class="col-md-6 mb-2">
<select name="turma" class="form-control" required>
<option value="">Turma</option>
<option value="2º" <?= $turma_edit=='2º'?'selected':'' ?>>2º Ano</option>
<option value="3º" <?= $turma_edit=='3º'?'selected':'' ?>>3º Ano</option>
</select>
</div>

<div class="col-md-6 mb-2">
<select name="tipo_duvida" class="form-control" required>
<option value="">Tipo</option>
<option value="Completo" <?= $tipo_edit=='Completo'?'selected':'' ?>>Completo</option>
<option value="Parte" <?= $tipo_edit=='Parte'?'selected':'' ?>>Parte</option>
</select>
</div>
</div>

<textarea name="codigo" class="form-control mb-2"
placeholder="Explique sua dúvida..." required><?= $codigo_edit ?></textarea>

<button class="btn btn-primary w-100">
<?= $id_edit ? "Atualizar" : "Enviar dúvida" ?>
</button>
</form>
</div>

<!-- FILTROS -->
<div class="box">
<h5>🔎 Filtros</h5>

<button onclick="filtrar('Todos','Todos','Todos')" class="btn btn-sm btn-dark">Todos</button>

<button onclick="filtrar('2º','Todos','Todos')" class="btn btn-sm btn-outline-primary">2º</button>
<button onclick="filtrar('3º','Todos','Todos')" class="btn btn-sm btn-outline-primary">3º</button>

<button onclick="filtrar('Todos','Completo','Todos')" class="btn btn-sm btn-outline-secondary">Completo</button>
<button onclick="filtrar('Todos','Parte','Todos')" class="btn btn-sm btn-outline-secondary">Parte</button>

<button onclick="filtrar('Todos','Todos','respondido')" class="btn btn-sm btn-success">Respondidos</button>
<button onclick="filtrar('Todos','Todos','aberta')" class="btn btn-sm btn-danger">Abertos</button>
</div>

<!-- FORUM -->
<div class="box">
<h4>📢 Fórum</h4>

<?php
$lista = $pdo->query("SELECT * FROM mural_atividade ORDER BY id DESC");

while ($item = $lista->fetch(PDO::FETCH_ASSOC)):
$id = $item['id'];

/* CONTAR RESPOSTAS */
$resCount = $pdo->query("SELECT COUNT(*) FROM respostas WHERE id_duvida=$id")->fetchColumn();
?>

<div class="duvida box codigo-item
<?= $item['status']=='respondido'?'respondido':'' ?>"
data-turma="<?= $item['turma'] ?>"
data-tipo="<?= $item['tipo_duvida'] ?>"
data-status="<?= $item['status'] ?>">

<strong><?= htmlspecialchars($item['nome_aluno']) ?></strong>

<div>
<span class="badge bg-primary"><?= $item['turma'] ?> Ano</span>
<span class="badge bg-dark"><?= $item['tipo_duvida'] ?></span>
<span class="badge bg-info"><?= $resCount ?> respostas</span>
</div>

<!-- TEXTO -->
<div class="conteudo-resumido">
<?= substr(htmlspecialchars($item['codigo_criado']),0,120) ?>...
</div>

<div class="conteudo-completo">
<?= nl2br(htmlspecialchars($item['codigo_criado'])) ?>
</div>

<button class="btn btn-sm btn-link p-0" onclick="toggleTexto(this)">Ver mais</button>

<!-- RESPOSTAS -->
<?php
$respostas = $pdo->prepare("SELECT * FROM respostas WHERE id_duvida=:id");
$respostas->execute([':id'=>$id]);

while ($resp = $respostas->fetch()):
?>
<div class="resposta">
<strong><?= htmlspecialchars($resp['nome']) ?>:</strong>
<?= htmlspecialchars($resp['resposta']) ?>
</div>
<?php endwhile; ?>

<!-- RESPONDER -->
<form method="POST" class="mt-2">
<input type="hidden" name="id_duvida" value="<?= $id ?>">
<input type="text" name="nome_resposta" class="form-control mb-1" placeholder="Seu nome" required>
<textarea name="resposta" class="form-control mb-1" placeholder="Responder..." required></textarea>
<button class="btn btn-success btn-sm">Responder</button>
</form>

</div>

<?php endwhile; ?>

</div>

</div>

<script>
function toggleTexto(btn){
let card = btn.closest('.codigo-item');
let resumo = card.querySelector('.conteudo-resumido');
let completo = card.querySelector('.conteudo-completo');

if(completo.style.display === 'block'){
completo.style.display = 'none';
resumo.style.display = 'block';
btn.innerText = 'Ver mais';
} else {
completo.style.display = 'block';
resumo.style.display = 'none';
btn.innerText = 'Ver menos';
}
}

function filtrar(turma, tipo, status){
let itens = document.querySelectorAll('.codigo-item');

itens.forEach(item=>{
let t = item.dataset.turma;
let tp = item.dataset.tipo;
let st = item.dataset.status;

let ok1 = (turma==='Todos'||t===turma);
let ok2 = (tipo==='Todos'||tp===tipo);
let ok3 = (status==='Todos'||st===status);

item.style.display = (ok1&&ok2&&ok3)?'block':'none';
});
}
</script>

</body>
</html>
cainan: ebaaa
👨‍🏫 Professor: aobaa
cainan
Completo 2 respostas
Estou sem saber como colocar isso no meu código ...
Estou sem saber como colocar isso no meu código
cainan: Aoobaaa
👨‍🏫 Professor: https://canva.link/n0pkprvjht9qhq9
Exibindo bloco 4 de 4 (Total: 32 publicações)

Enviar Dúvida

Travou em alguma parte do código? Envie aqui e resolva com a turma.

Filtrar Página Atual