📘 Aula do Dia

Plataforma de Quiz

🎯 Objetivo

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

🪜 Passo a passo

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>.

💡 Dicas

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.

🧩 Sugestões de código

Hero Master
Estrutura HTML
CSS Interno
Tabela de Quiz
Efeitos Hover
Personalização Visual

Plataforma de Quiz

🎯 Objetivo

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

🪜 Passo a passo

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>.

💡 Dicas

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.

🧩 Sugestões de código

Hero Master
Estrutura HTML
CSS Interno
Tabela de Quiz
Efeitos Hover
Personalização Visual
Ver dúvidas ↓

💡 Enviar dúvida

🔎 Filtros

📢 Fórum

PROFESSOR
Parte 3 respostas
PASSO 3 — ADICIONAR O CSS DA ALTERNATIVA SELECIONADA Dentro da sua <style> adicione: .alternativa-selecion...
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...
<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 = ...
<?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