Programación del Software
“Desafío Matemático”
1. Html ([Link])
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desafío Matemático</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="menu" id="menu">
<h1>Desafío Matemático</h1>
<button onclick="startMainGame()">Iniciar Juego</button>
<button onclick="openSettings()">Ajustes</button>
<button onclick="showInstructions()">Instrucciones del Juego</button>
<button onclick="showCredits()">Créditos</button>
</div>
<div class="main-game hidden" id="main-game">
<h1>Selecciona una opción</h1>
<button onclick="openGameSelection()">Selección de Juego</button>
<button onclick="openSettings()">Ajustes</button>
<button onclick="returnToMenu()">Volver al Menú Principal</button>
</div>
<div class="game-selection hidden" id="game-selection">
<h1>Elige un Juego</h1>
<button onclick="startGame('suma')">Suma</button>
<button onclick="startGame('resta')">Resta</button>
<button onclick="startGame('multiplicacion')">Multiplicación</button>
<button onclick="startGame('division')">División</button>
<button onclick="returnToMainGame()">Volver</button>
</div>
<div class="game hidden" id="game">
<h1 id="game-title">Juego Matemático</h1>
<div class="question" id="question">¿Cuánto es 2 + 2?</div>
<div class="input-container">
<input type="number" id="answer" placeholder="Tu respuesta">
<button onclick="checkAnswer()">Verificar Respuesta</button>
</div>
<div class="feedback hidden" id="feedback"></div>
<button onclick="openGameSelection()">Volver a Selección de
Juego</button>
<button onclick="returnToMenu()">Volver al Menú Principal</button>
</div>
<div class="settings hidden" id="settings">
<h1>Ajustes</h1>
<h2>Seleccionar Fondo</h2>
<button onclick="changeBackground('male')">Fondo Masculino</button>
<button onclick="changeBackground('female')">Fondo Femenino</button>
<h2>Opciones de Música</h2>
<button onclick="toggleMusic()">Activar/Desactivar Música</button>
<button onclick="returnToMenu()">Volver al Menú Principal</button>
</div>
<div class="instructions hidden" id="instructions">
<h1>Instrucciones del Juego</h1>
<p>Bienvenido al "Desafío Matemático", un juego educativo que te permite
poner a prueba tus habilidades matemáticas. Elige una operación matemática
(suma, resta, multiplicación o división) y responde correctamente a las preguntas
para ganar puntos.</p>
<h2>¿Cómo jugar?</h2>
<ul>
<li><strong>1. Selección de Juego:</strong> En el menú principal,
selecciona la opción "Iniciar Juego" para acceder a la sección donde podrás
elegir la operación matemática que deseas jugar (suma, resta, multiplicación o
división).</li>
<li><strong>2. Responde las preguntas:</strong> Cada operación generará
una pregunta matemática. Deberás escribir tu respuesta en el campo
proporcionado y presionar "Verificar Respuesta".</li>
<li><strong>3. Retroalimentación:</strong> Si tu respuesta es correcta,
ganarás puntos y se generará una nueva pregunta automáticamente. Si tu
respuesta es incorrecta, podrás intentar nuevamente hasta obtener la respuesta
correcta.</li>
<li><strong>4. Ajustes:</strong> Puedes cambiar el fondo de la pantalla a un
fondo masculino o femenino y activar o desactivar la música desde la sección de
"Ajustes".</li>
<li><strong>5. Créditos:</strong> Para ver los créditos de los creadores del
juego, puedes acceder a la sección "Créditos" desde el menú.</li>
</ul>
<button onclick="returnToMenu()">Volver al Menú Principal</button>
</div>
<div class="credits hidden" id="credits">
<h1>Créditos</h1>
<ul>
<li>Valentín Pérez</li>
<li>Irving Bejerano</li>
<li>Adoniram Bejerano</li>
<li>Francisca Pérez</li>
<li>Pedro Armuelles</li>
<li>Evelin Gaitán</li>
</ul>
<button onclick="returnToMenu()">Volver al Menú Principal</button>
</div>
<audio id="background-music"
src="[Link]
144641.mp3" preload="auto" loop></audio>
<script src="[Link]"></script>
</body>
</html>
2. Css([Link])
/* Estilo base */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f0f0f0;
transition: background-color 0.3s ease, background-image 0.3s ease;
}
.hidden {
display: none;
}
.menu, .main-game, .game-selection, .settings, .instructions, .credits, .game {
text-align: center;
max-width: 400px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
button {
padding: 15px 20px;
margin: 10px 5px;
font-size: 16px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007BFF;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 5px 0;
}
.input-container {
margin: 20px 0;
}
input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Adaptaciones para pantallas móviles */
@media (max-width: 600px) {
h1 {
font-size: 20px;
}
button {
padding: 10px 15px;
font-size: 14px;
}
}
3. Javascript ([Link])
// Variables globales
let currentOperation = null;
let correctAnswer = 0;
let musicOn = true;
// Mostrar sección y ocultar las demás
function showSection(sectionId) {
[Link]('.menu, .main-game, .game-
selection, .settings, .instructions, .credits, .game').forEach(section => {
[Link]('hidden');
});
[Link](sectionId).[Link]('hidden');
}
// Funciones de navegación
function startMainGame() {
showSection('main-game');
}
function openGameSelection() {
showSection('game-selection');
}
function returnToMenu() {
showSection('menu');
}
function returnToMainGame() {
showSection('main-game');
}
function openSettings() {
showSection('settings');
}
function showInstructions() {
showSection('instructions');
}
function showCredits() {
showSection('credits');
}
// Lógica de juego
function startGame(operation) {
currentOperation = operation;
generateQuestion();
showSection('game');
}
function generateQuestion() {
const num1 = [Link]([Link]() * 10) + 1;
const num2 = [Link]([Link]() * 10) + 1;
const questionElement = [Link]('question');
if (currentOperation === 'suma') {
correctAnswer = num1 + num2;
[Link] = `¿Cuánto es ${num1} + ${num2}?`;
} else if (currentOperation === 'resta') {
correctAnswer = num1 - num2;
[Link] = `¿Cuánto es ${num1} - ${num2}?`;
} else if (currentOperation === 'multiplicacion') {
correctAnswer = num1 * num2;
[Link] = `¿Cuánto es ${num1} × ${num2}?`;
} else if (currentOperation === 'division') {
correctAnswer = parseFloat((num1 / num2).toFixed(2));
[Link] = `¿Cuánto es ${num1} ÷ ${num2}?`;
}
}
function checkAnswer() {
const userAnswer = parseFloat([Link]('answer').value);
const feedbackElement = [Link]('feedback');
if (userAnswer === correctAnswer) {
[Link] = '¡Correcto!';
[Link] = 'green';
} else {
[Link] = 'Incorrecto. Intenta de nuevo.';
[Link] = 'red';
}
[Link]('hidden');
[Link]('answer').value = '';
generateQuestion(); // Genera una nueva pregunta automáticamente
}
// Cambiar fondo
function changeBackground(type) {
const url = type === 'male'
? "[Link]
: "[Link]
[Link] = `url(${url})`;
[Link] = "cover";
}
// Música
function toggleMusic() {
const music = [Link]('background-music');
if (musicOn) {
[Link]();
} else {
[Link]();
}
musicOn = !musicOn;
}
