<!
DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Desafio das Letras</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f3f3f3;
margin: 0;
padding: 20px;
}
h1, h2 {
text-align: center;
}
.tela {
display: none;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.[Link] {
display: block;
}
input, textarea, button {
width: 100%;
margin: 10px 0;
padding: 10px;
font-size: 16px;
}
.dica {
background: #eef;
margin: 5px 0;
padding: 8px;
border-radius: 5px;
display: none;
}
.resultado {
font-weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Desafio das Letras (A=1 ... Z=26)</h1>
<!-- Tela do Professor -->
<div id="tela-prof" class="tela ativa">
<h2>Tela do Professor</h2>
<label>Pergunta/Frase:</label>
<textarea id="frase" rows="2"></textarea>
<label>Dica 1:</label>
<input type="text" id="dica1">
<label>Dica 2:</label>
<input type="text" id="dica2">
<label>Dica 3:</label>
<input type="text" id="dica3">
<button onclick="lançarDesafio()">Lançar Desafio</button>
</div>
<!-- Tela do Aluno -->
<div id="tela-aluno" class="tela">
<h2>Tela do Aluno</h2>
<p><strong>Desafio:</strong></p>
<p id="fraseConvertida"></p>
<button onclick="mostrarDica()">Mostrar Dica</button>
<div id="dicas">
<div id="d1" class="dica"></div>
<div id="d2" class="dica"></div>
<div id="d3" class="dica"></div>
</div>
<label>Sua resposta:</label>
<input type="text" id="resposta">
<button onclick="verificarResposta()">Verificar Resposta</button>
<p id="resultado" class="resultado"></p>
</div>
<script>
let fraseOriginal = "";
let dicas = [];
let dicasUsadas = 0;
function lançarDesafio() {
fraseOriginal = [Link]("frase").[Link]().toUpperCase();
if (!fraseOriginal) {
alert("Digite uma frase para o desafio!");
return;
}
dicas = [
[Link]("dica1").value,
[Link]("dica2").value,
[Link]("dica3").value
];
dicasUsadas = 0;
// Converte a frase em números
let numeros = fraseOriginal
.split("")
.map(ch => {
let code = [Link](0);
if (code >= 65 && code <= 90) {
return code - 64; // A=1, B=2...
} else {
return ch; // mantém espaço, pontuação, etc.
}
})
.join(" ");
[Link]("fraseConvertida").textContent = numeros;
// Reseta dicas
[Link]("d1").[Link] = "none";
[Link]("d2").[Link] = "none";
[Link]("d3").[Link] = "none";
[Link]("resultado").textContent = "";
[Link]("resposta").value = "";
// Troca telas
[Link]("tela-prof").[Link]("ativa");
[Link]("tela-aluno").[Link]("ativa");
}
function mostrarDica() {
if (dicasUsadas < 3) {
dicasUsadas++;
let dicaId = "d" + dicasUsadas;
[Link](dicaId).textContent = dicas[dicasUsadas - 1];
[Link](dicaId).[Link] = "block";
} else {
alert("Você já usou todas as dicas!");
}
}
function verificarResposta() {
let resposta =
[Link]("resposta").[Link]().toUpperCase();
if (!resposta) {
alert("Digite uma resposta!");
return;
}
if (resposta === fraseOriginal) {
[Link]("resultado").textContent = "✅ Correto! Parabéns!";
[Link]("resultado").[Link] = "green";
} else {
[Link]("resultado").textContent = "❌ Resposta incorreta,
tente novamente!";
[Link]("resultado").[Link] = "red";
}
}
</script>
</body>
</html>