<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cruzadinha de Biologia</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f4f8;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 0;
}
h1 {
color: #2c3e50;
margin-bottom: 5px;
}
p.subtitle {
color: #7f8c8d;
margin-top: 0;
margin-bottom: 25px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
max-width: 800px;
width: 100%;
}
/* Área das palavras da cruzadinha */
.crossword-container {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
box-sizing: border-box;
}
.word-row {
display: flex;
align-items: center;
gap: 15px;
}
.question-number {
font-weight: bold;
font-size: 18px;
color: #3498db;
min-width: 30px;
}
.letter-cells {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.cell {
width: 35px;
height: 35px;
border: 2px solid #bdc3c7;
border-radius: 6px;
text-align: center;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
transition: all 0.2s ease;
}
.cell:focus {
outline: none;
border-color: #3498db;
background-color: #e8f4fd;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
/* Classes de validação */
.cell.correct {
border-color: #2ecc71;
background-color: #e8f8f0;
color: #27ae60;
}
.cell.incorrect {
border-color: #e74c3c;
background-color: #fde8e8;
color: #c0392b;
}
.cell.space {
background-color: #34495e;
border-color: #34495e;
color: white;
cursor: default;
}
/* Painel de Perguntas */
.questions-container {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.05);
width: 100%;
box-sizing: border-box;
}
.questions-container h2 {
margin-top: 0;
color: #2c3e50;
font-size: 20px;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 10px;
}
.question-item {
margin-bottom: 15px;
font-size: 16px;
line-height: 1.5;
}
.question-item strong {
color: #3498db;
}
/* Botão de checagem */
.btn-check {
background-color: #3498db;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}
.btn-check:hover {
background-color: #2980b9;
}
.success-message {
display: none;
color: #27ae60;
font-weight: bold;
font-size: 18px;
margin-top: 15px;
text-align: center;
}
</style>
</head>
<body>
<h1>Cruzadinha de Genética e Citologia</h1>
<p class="subtitle">Preencha os quadradinhos com as respostas corretas das perguntas abaixo</p>
<div class="container">
<!-- Tabuleiro da Cruzadinha -->
<div class="crossword-container" id="crosswordBoard">
<!-- Gerado dinamicamente via JS -->
</div>
<button class="btn-check" onclick="verificarRespostas()">Verificar Respostas</button>
<div class="success-message" id="successMsg">🎉 Parabéns! Você acertou todas as questões!</div>
<!-- Banco de Perguntas Exibido Abaixo -->
<div class="questions-container">
<h2>Perguntas</h2>
<div id="questionsList">
<!-- Gerado dinamicamente via JS -->
</div>
</div>
</div>
<script>
// Banco de dados fornecido
const bancoQuestoes = [
{
pergunta: "Qual organela que produz energia?",
resposta: "MITOCÔNDRIA"
},
{
pergunta: "Qual organela fabrica proteína?",
resposta: "RIBOSSOMO"
},
{
pergunta: "Qual ácido nucleico é uma fita simples?",
resposta: "ÁCIDO RIBONUCLEICO"
},
{
pergunta: "Qual nome do segmento que é expresso em RNAm?",
resposta: "GENE"
}
];
const board = document.getElementById('crosswordBoard');
const questionsList = document.getElementById('questionsList');
// Inicializa e monta o jogo na tela
function montarJogo() {
bancoQuestoes.forEach((item, indexQuestion) => {
const numQuestao = indexQuestion + 1;
// 1. Criar a linha visual da palavra (Quadradinhos)
const row = document.createElement('div');
row.className = 'word-row';
row.setAttribute('data-question', indexQuestion);
const numLabel = document.createElement('div');
numLabel.className = 'question-number';
numLabel.innerText = `${numQuestao}.`;
row.appendChild(numLabel);
const cellsContainer = document.createElement('div');
cellsContainer.className = 'letter-cells';
// Trata caracteres, criando inputs para letras e blocos fixos para espaços
for (let i = 0; i < item.resposta.length; i++) {
const caractere = item.resposta[i];
const inputCell = document.createElement('input');
if (caractere === " ") {
inputCell.type = "text";
inputCell.className = "cell space";
inputCell.value = " ";
inputCell.disabled = true;
} else {
inputCell.type = "text";
inputCell.className = "cell";
inputCell.maxLength = 1;
inputCell.setAttribute('data-index', i);
// Sistema de pular automaticamente para o próximo quadradinho ao digitar
inputCell.addEventListener('input', function() {
this.classList.remove('correct', 'incorrect');
if (this.value.length >= 1) {
const next = this.nextElementSibling;
if (next && next.classList.contains('cell')) {
next.focus();
}
}
});
// Permitir voltar apagando com Backspace
inputCell.addEventListener('keydown', function(e) {
if (e.key === "Backspace" && this.value.length === 0) {
const prev = this.previousElementSibling;
if (prev && prev.classList.contains('cell')) {
prev.focus();
}
}
});
}
cellsContainer.appendChild(inputCell);
}
row.appendChild(cellsContainer);
board.appendChild(row);
// 2. Criar a lista de perguntas abaixo
const qItem = document.createElement('div');
qItem.className = 'question-item';
qItem.innerHTML = `<strong>${numQuestao}.</strong> ${item.pergunta}`;
questionsList.appendChild(qItem);
});
}
// Função que valida o que foi digitado
function verificarRespostas() {
let totalAcertos = 0;
const rows = document.querySelectorAll('.word-row');
rows.forEach((row) => {
const questionIndex = parseInt(row.getAttribute('data-question'));
const respostaCorreta = bancoQuestoes[questionIndex].resposta;
const inputs = row.querySelectorAll('.cell');
let palavraDigitada = "";
// Reconstrói a palavra com base nos inputs do usuário
inputs.forEach((input) => {
palavraDigitada += input.value.toUpperCase();
});
// Compara a palavra digitada com a resposta (removendo acentos para facilitar o preenchimento do aluno)
const stringNormalizadaDigitada = normalizarTexto(palavraDigitada);
const stringNormalizadaCorreta = normalizarTexto(respostaCorreta);
if (stringNormalizadaDigitada === stringNormalizadaCorreta) {
totalAcertos++;
inputs.forEach(input => {
if(!input.classList.contains('space')) {
input.classList.remove('incorrect');
input.classList.add('correct');
}
});
} else {
inputs.forEach(input => {
if(!input.classList.contains('space')) {
input.classList.remove('correct');
input.classList.add('incorrect');
}
});
}
});
// Se acertou todas as 4 linhas
const successMsg = document.getElementById('successMsg');
if (totalAcertos === bancoQuestoes.length) {
successMsg.style.display = "block";
} else {
successMsg.style.display = "none";
}
}
// Remove acentos e caracteres especiais para não frustrar o aluno por causa de um 'Ó' ou 'Í'
function normalizarTexto(texto) {
return texto.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
// Inicializa o script ao carregar a página
window.onload = montarJogo;
</script>
</body>
</html>