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