contador y audio

AxelCotonGutierrez · Oct 7, 2024 · 84200e4 · 84200e4
1 parent e7b3371
commit 84200e4
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 66 deletions.
diff --git a/audio/Correcto.mp3 b/audio/Correcto.mp3
diff --git a/audio/Felicidades.mp3 b/audio/Felicidades.mp3
diff --git a/audio/Incorrecto.mp3 b/audio/Incorrecto.mp3
diff --git a/audio/Intentar.mp3 b/audio/Intentar.mp3
diff --git a/audio/Pregunta.mp3 b/audio/Pregunta.mp3
diff --git a/index.html b/index.html
@@ -2,69 +2,52 @@
 <html>
 <head>
   <meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>JUEGO DE LA RECTA NUMÉRICA</title>
-	<link rel="stylesheet" href="style.css">
-	<link rel="stylesheet" href="nav.css">
-	<link rel="icon" href="icon.png" type="image/png">
-	<script src="https://axelcotongutierrez.github.io/learningmathematicas/assets/js/header.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>JUEGO DE LA RECTA NUMÉRICA</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="nav.css">
+  <link rel="icon" href="icon.png" type="image/png">
+  <script src="https://axelcotongutierrez.github.io/learningmathematicas/assets/js/header.js"></script>
+  <script src="https://axelcotongutierrez.github.io/learningmathematicas/assets/js/footer.js"></script>
+  <!-- Incluir las bibliotecas de Firebase -->
+  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>	
+  <script src="https://axelcotongutierrez.github.io/learningmathematicas/assets/js/contador.js"></script>
 </head>
 <body>
-	<header>
-		<div id="header-placeholder"></div>
-		  <h1 style="text-align: center;">JUEGO DE LA RECTA NUMÉRICA HASTA EL 5</h1>
-		</header>
-		<br>
-		<p class="textosuperior" style="text-align: center;">Este contenido se vincula con el 
-			<b><a href="https://axelcotongutierrez.github.io/learningmathematicas/projects/Niveles/#level-2-detail" target="_blank">Nivel 2</a></b>
-			 de la materia <a title="Matemáticas" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=matemáticas" target="_blank"><img class="center-block img-responsive" width="30" alt="Matemáticas" src="/learningmathematicas/assets/images/pages/figuras/Matematicas.png"></a>
-			 y es perteneciente al curso <a title="Infantil" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=infantil" target="_blank"><img class="center-block img-responsive" style="display: inline-block;" width="30" alt="Infantil" src="/learningmathematicas/assets/images/pages/figuras/infantil.png"></a>
-			</p>
-		  <br>
-
-
-
-
-	<div class="container2">
-		<span class="pregunta">¿Eres capaz de contar hasta cinco usando la recta numérica?</span>
-		<button id="play-again-button" style="display: none;">Volver a jugar</button>
-	</div>
-	<div class="container">
-		<div class="number-line">
-			<div class="number-container">
-				<div class="number">1</div>
-				<div class="bar"></div>
-			</div>
-			<div class="number-container">
-				<div class="number">2</div>
-				<div class="bar"></div>
-			</div>
-			<div class="number-container">
-				<div class="number">3</div>
-				<div class="bar"></div>
-			</div>
-			<div class="number-container">
-				<div class="number">4</div>
-				<div class="bar"></div>
-			</div>
-			<div class="number-container">
-				<div class="number">5</div>
-			</div>
-		</div>
-		<p class="pregunta2" id="question"></p>
-		<button id="start-button">Comenzar</button>
-		<div id="result"></div>
-		<span class="msj" id="score"></span>
-	</div>
-<br>
-<br>
-	<script src="script.js"></script>
-	<br>
-	<footer class="footer">
-		<ul class="footer-links">
-			<li><a href="http://github.com/AxelCotonGutierrez"> <img src="githubinverseicon.jpg"></a></li>
-			<li><a href="https://www.youtube.com/@learningmathematicas"> <img src="youtubeinverseicon.jpg"></i></a></li>
-		</ul>
-	</footer>
+  <header>
+    <div id="header-placeholder"></div>
+    <h1 style="text-align: center;">JUEGO DE LA RECTA NUMÉRICA HASTA EL 5</h1>
+  </header>
+  <br>
+  <p class="textosuperior" style="text-align: center;">Este contenido se vincula con el 
+    <b><a href="https://axelcotongutierrez.github.io/learningmathematicas/projects/Niveles/#level-2-detail" target="_blank">Nivel 2</a></b>
+    de la materia <a title="Matemáticas" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=matemáticas" target="_blank"><img class="center-block img-responsive" width="30" alt="Matemáticas" src="/learningmathematicas/assets/images/pages/figuras/Matematicas.png"></a>
+    y es perteneciente al curso <a title="Infantil" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=infantil" target="_blank"><img class="center-block img-responsive" style="display: inline-block;" width="30" alt="Infantil" src="/learningmathematicas/assets/images/pages/figuras/infantil.png"></a>
+  </p>
+  <br>
+
+  <div class="container2">
+    <span class="pregunta">¿Eres capaz de contar hasta cinco usando la recta numérica?</span>
+    <button id="play-again-button" style="display: none;">Volver a jugar</button>
+  </div>
+  <div class="container">
+    <div class="number-line">
+      <div class="number-container"><div class="number">1</div><div class="bar"></div></div>
+      <div class="number-container"><div class="number">2</div><div class="bar"></div></div>
+      <div class="number-container"><div class="number">3</div><div class="bar"></div></div>
+      <div class="number-container"><div class="number">4</div><div class="bar"></div></div>
+      <div class="number-container"><div class="number">5</div></div>
+    </div>
+    <p class="pregunta2" id="question"></p>
+    <button id="start-button">Comenzar</button>
+    <div id="result"></div>
+    <span class="msj" id="score"></span>
+  </div>
+
+  <br>
+  <br>
+  <script src="script.js"></script>
+  <div id="footer-placeholder"></div>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,11 +1,33 @@
 // Axel Cotón Gutiérrez Copyright 2023
 
+// Cargar archivos de audio desde la carpeta adecuada
+const preguntaAudio = new Audio('https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5recta/master/audio/Pregunta.mp3');
+const correctoAudio = new Audio('https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5recta/master/audio/Correcto.mp3');
+const incorrectoAudio = new Audio('https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5recta/master/audio/Incorrecto.mp3');
+const felicidadesAudio = new Audio('https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5recta/master/audio/Felicidades.mp3');
+const intentarAudio = new Audio('https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5recta/master/audio/Intentar.mp3');
+
+// Acceder al botón de silencio y al icono del megáfono en el DOM
+const soundControl = document.querySelector('#sound-control');
+const megaphoneIcon = document.querySelector('#megaphone-icon');
+
+// Función para reproducir audio si el sonido está activado
+function playAudio(audioElement) {
+  if (soundControl.checked) {
+    audioElement.play();
+  }
+}
+
+// Evento clic para el icono del megáfono para reproducir la pregunta en audio
+megaphoneIcon.addEventListener('click', () => playAudio(preguntaAudio));
+
 document.addEventListener('DOMContentLoaded', function() {
   const numbers = document.querySelectorAll('.number');
   const startButton = document.getElementById('start-button');
   const questionElement = document.getElementById('question');
   const resultElement = document.getElementById('result');
   const playAgainButton = document.getElementById('play-again-button');
+  const scoreElement = document.getElementById('score'); // Elemento para mostrar el puntaje
 
   let randomNumber;
   let previousRandomNumber;
@@ -19,6 +41,7 @@ document.addEventListener('DOMContentLoaded', function() {
       number.classList.remove('selected');
     });
     resultElement.innerHTML = '';
+    scoreElement.textContent = '';
     score = 0;
     questionsCount = 0;
     isGameRunning = false;
@@ -46,22 +69,32 @@ document.addEventListener('DOMContentLoaded', function() {
       resultElement.innerHTML = `
         <div class="message-container">
           <span class="msj correcto">¡Correcto!</span>
-        </div>
-      `;
+        </div>`;
+      playAudio(correctoAudio);
       score++;
     } else {
       this.classList.add('selected');
       resultElement.innerHTML = `
         <div class="message-container">
           <span class="msj incorrecto">Incorrecto</span>
-        </div>
-      `;
+        </div>`;
+      playAudio(incorrectoAudio);
     }
 
     questionsCount++;
 
     if (questionsCount === 5) {
       questionElement.textContent = `¡Juego completado! Preguntas acertadas: ${score} de ${questionsCount}.`;
+
+      if (score === 5) {
+        playAudio(felicidadesAudio);
+      } else {
+        playAudio(intentarAudio);
+      }
+
+      // Incrementar el contador en Firebase
+      incrementarContadorFirebase("Infantil/Matemáticas/Contar/5", "5recta");
+
       isGameRunning = false;
       playAgainButton.style.display = 'block';
     } else {
@@ -103,6 +136,9 @@ document.addEventListener('DOMContentLoaded', function() {
   startButton.addEventListener('click', handleStart);
   playAgainButton.addEventListener('click', handlePlayAgain);
 
+  // Mostrar el contador al cargar la página
+  mostrarContador("Infantil/Matemáticas/Contar/5", "5recta");
+
   // Mostrar el botón "Comenzar" al cargar la página
   resetGame();
   startButton.style.display = 'block';