Ciclistas

AxelCotonGutierrez · Jan 16, 2024 · 4b0450e · 4b0450e
commit 4b0450e
Show file tree

Hide file tree

Showing 13 changed files with 476 additions and 0 deletions.
diff --git a/Licencia.md b/Licencia.md
@@ -0,0 +1,17 @@
+Licencia Creative Commons Atribución-NoComercial 4.0 Internacional
+Resumen de los Términos
+Usted es libre de:
+
+Compartir - copiar y redistribuir el material en cualquier medio o formato.
+Adaptar - remezclar, transformar y construir sobre el material.
+Bajo los siguientes términos:
+
+Atribución - Debe dar crédito de manera adecuada, proporcionar un enlace a la licencia y señalar si se han realizado cambios. Puede hacerlo de cualquier manera razonable, pero no de una manera que sugiera que el licenciante lo respalda a usted o al uso que hace del material.
+
+NoComercial - No puede utilizar el material con fines comerciales.
+
+Sin restricciones adicionales - No puede aplicar términos legales o medidas tecnológicas que restrinjan legalmente a otros de hacer cualquier cosa que la licencia permita.
+
+Lea la versión completa de la licencia aquí: https://creativecommons.org/licenses/by-nc/4.0/deed.es
+
+Esta licencia le permite compartir y adaptar programas alojados en GitHub siempre que cumpla con los términos mencionados anteriormente, lo que fomenta la colaboración y la creación de software de código abierto. Asegúrese de revisar la versión completa de la licencia en el enlace proporcionado para obtener información detallada sobre sus derechos y responsabilidades.
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# Diferenciar Ordinales Primero, Segundo y Último
+
+![Juego de los círculos de colores](https://axelcotongutierrez.github.io/learningmathematicas/assets/images//posts/05J12Ultimo/circulos.jpg)
+
+Dentro del blog: https://axelcotongutierrez.github.io/learningmathematicas/
+
+Juego para Infantil para aprender diferenciar entre primero y último.
+
+Puedes probar el juego en esta url:
+
+https://axelcotongutierrez.github.io/Orden3/
+
+¡Bienvenido al emocionante juego "de los Círculos de colores"! ¿Estás listo para poner a prueba tu percepción y habilidades de observación mientras te sumerges en un desafío lleno de colores? Prepárate para retar tu mente y demostrar que eres un experto en distinguir colores en este fascinante juego.
+
+En este emocionante desafío, te presentaremos una serie de círculos de colores en la pantalla. Tu objetivo es adivinar correctamente el color del primer, segundo o último círculo en cinco ocasiones consecutivas. ¡Pero aquí está el giro! Cada vez, los círculos aparecerán en una secuencia aleatoria, y tendrás que confiar en tu percepción visual para acertar el color correcto.
+
+¿Crees que tienes lo necesario para superar este reto? A medida que avanzas, el juego se volverá más emocionante y desafiante. La agudeza visual y la concentración serán tus aliados clave para la victoria. ¡Demuestra tu destreza en la percepción de colores y muestra al mundo que eres un maestro en distinguir los matices de la paleta cromática!
+
+¡Sumérgete en la emoción y desafía tus habilidades de percepción visual! ¿Estás listo para aceptar el reto? ¡Adelante, juega y demuestra que eres un experto en distinguir colores en esta emocionante aventura!
diff --git a/azul.png b/azul.png
diff --git a/cb.jpg b/cb.jpg
diff --git a/githubinverseicon.jpg b/githubinverseicon.jpg
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Juego de los Ciclistas</title>
+	<link rel="stylesheet" href="styles.css">
+	<link rel="stylesheet" href="nav.css">
+	<link rel="icon" href="icon.png" type="image/png">
+</head>
+<body>
+
+    <header>
+		<div class="menu">
+			<button class="menu-toggle">☰</button>
+			<ul><li><a href="https://axelcotongutierrez.github.io/learningmathematicas/">
+				<img src="cb.jpg"> 
+			</a></li>
+				<li><a href="/learningmathematicas/projects/Cursos/">Cursos y Materias</a></li>
+				<li><a href="/learningmathematicas/projects/Niveles/">Niveles</a></li>
+				<li><a href="/learningmathematicas/">Entradas</a></li>
+				<li><a href="/learningmathematicas/tags">Etiquetas</a></li>
+				<li><a href="/learningmathematicas/about">Blog</a></li>
+				<li><a href="#">Utilidades</a>
+					<ul>
+						<li><a href="/learningmathematicas/projects/Utilidades/Glosario.html">Glosario</a></li>
+						<li><a href="/learningmathematicas/projects/Utilidades/Programacion.html">Programación</a></li>
+						<li><a href="/learningmathematicas/projects/Utilidades/Soroban.html">Soroban</a></li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+		<a href="https://axelcotongutierrez.github.io/learningmathematicas/">
+			<img src="https://axelcotongutierrez.github.io/learningmathematicas/assets/images//top.jpg" alt="Blog Mathematica" style="display: block; margin: 0 auto; width: 100%; height: auto;">
+		  </a>
+		  <h1 style="text-align: center;">JUEGO DE LOS CICLISTAS</h1>
+		</header>
+	  <br>
+
+
+    <div class="container2">
+        <span class="pregunta" id="pregunta"></span>
+    </div>
+
+    <div class="container">
+        <div id="imagenes-ciclistas"></div>
+        <div>
+        <button id="boton-azul" class="guess-button">Azul</button>
+        <button id="boton-rojo" class="guess-button">Rojo</button>
+        <button id="boton-verde" class="guess-button">Verde</button></div>
+        <br>
+        <div class="msj" id="resultado"></div>
+        <br>
+        <button class="guess-button" id="siguiente-pregunta">Volver a jugar</button>
+    </div>
+    <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>
+</body>
+</html>
diff --git a/nav.css b/nav.css
@@ -0,0 +1,183 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.menu ul {
+    list-style: none;
+    background-color: black; /* Color de fondo */
+    height: 40px;
+    display: flex;
+    padding-left: 0;
+    border-bottom: 1px solid #12421f; /* Color del borde */
+    margin-bottom: 0; /* Asegura que no haya margen en la parte inferior */
+}
+
+.menu ul li {
+    position: relative; /* Posicionamiento relativo para los submenús */
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-right: 10px; /* Espacio adicional a la derecha de cada elemento */
+}
+
+.menu ul li:last-child {
+    margin-right: 0; /* Elimina el margen en el último ítem */
+}
+
+.menu ul li a {
+    display: flex;
+    justify-content: center; /* Centra horizontalmente */
+    align-items: center; /* Centra verticalmente */
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 40px;
+    color: white; /* Color del texto */
+    font-size: 1.2em;
+    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    padding: 0 10px; /* Padding dentro de los enlaces */
+    text-transform: uppercase;
+    height: 100%; /* Asegura que el enlace ocupe toda la altura del li */
+}
+
+.menu li ul {
+    display: none;
+    position: absolute; /* Posicionamiento absoluto para los submenús */
+    background-color: black; /* Fondo de los submenús */
+    width: auto; /* Ancho según el contenido */
+    left: 0; /* Alinear a la izquierda del ítem del menú */
+    top: 40px; /* Ubicar debajo del ítem del menú */
+    white-space: nowrap; /* Evitar el salto de línea */
+    z-index: 1000; /* Z-index para sobreponer sobre otros elementos */
+}
+
+.menu li ul li {
+    width: auto; /* Ancho según el contenido */
+    text-align: center;
+    background-color: black; /* Fondo de los submenús */
+}
+
+.menu li ul a {
+    line-height: 40px;
+    color: black; /* Color del texto en submenús */
+    padding: 10px 20px; /* Padding para enlaces de submenús */
+}
+
+.menu li ul li:hover {
+    background-color: #12421f; /* Color al pasar el ratón */
+}
+
+.menu li:hover > ul {
+    display: block; /* Mostrar submenús al pasar el ratón */
+}
+
+.menu li:hover a {
+    color: white; /* Color del texto al pasar el ratón */
+}
+
+.menu ul li a img {
+    max-height: 30px; /* Altura máxima de la imagen */
+    width: auto; /* Mantiene la proporción de la imagen */
+}
+
+header {
+    background-color: black;
+}
+
+.menu-toggle {
+    display: none; /* Oculto por defecto */
+    font-size: 1.5em;
+    background: none;
+    border: none;
+    color: white; /* Color del botón hamburguesa */
+}
+
+.footer {
+    position: bottom;
+    margin-top: 0;
+    height: 5em;
+    text-align: center;
+    bottom: 0;
+    width: 100%;
+    background-color: black;
+    padding-bottom: 2em; 
+}
+
+.footer-links {
+    margin: 0;
+    padding: 1em;
+    padding-bottom: 2em;
+    padding-top: 1em;
+    list-style: none; /* Elimina los estilos predeterminados de la lista */
+    display: flex; /* Usa flexbox para alinear los elementos */
+    justify-content: right; /* Alinea los elementos a la derecha */
+    align-items: center; /* Centra los elementos verticalmente */
+}
+
+.footer-links li {
+    display: inline-block; /* Muestra los elementos de la lista en línea */
+    margin-right: 10px; /* Añade espacio entre los elementos de la lista */
+}
+
+.footer img {
+    max-width: 100%; /* Asegura que la imagen no sea más ancha que su contenedor */
+    height: auto; /* Mantiene la proporción de la imagen */
+    width: 50px; /* Ajusta esto para controlar el tamaño de la imagen */
+}
+
+@media (max-width: 768px) {
+    /* Estilos para la barra de navegación en modo móvil */
+    .menu ul {
+        display: none; /* El menú debe estar oculto inicialmente en móviles */
+        flex-direction: column; /* Los elementos se apilan verticalmente */
+        background-color: black; /* Fondo para el menú principal */
+    }
+
+    .menu ul li {
+        width: 100%; /* Hace que cada ítem ocupe el ancho completo */
+    }
+
+    .menu ul li a {
+        justify-content: flex-start; /* Alinea el contenido a la izquierda */
+        padding: 10px; /* Ajusta el padding para los enlaces */
+        font-size: 1em; /* Ajusta el tamaño de la fuente para móviles */
+        color: white; /* Color del texto */
+    }
+
+    .menu li ul {
+        position: static; /* Posicionamiento estándar para submenús */
+        display: none; /* Inicialmente oculto */
+        width: 100%; /* Ocupa el ancho completo */
+        padding-left: 20px; /* Añade un poco de padding a la izquierda */
+        background-color: transparent; /* Fondo transparente por defecto */
+    }
+
+    .menu li.active > ul,
+    .menu li:hover > ul {
+        display: block; /* Muestra el submenú en interacción */
+        background-color: black; /* Fondo negro solo cuando está activo */
+    }
+
+    .menu li ul li {
+        display: none; /* Los submenús están ocultos por defecto */
+    }
+
+    .menu li.active ul li,
+    .menu li:hover ul li {
+        display: block; /* Los submenús se muestran cuando el ítem padre está activo */
+    }
+
+    .menu-toggle {
+        display: block; /* Muestra el botón en dispositivos móviles */
+    }
+
+    .menu.active ul {
+        display: flex; /* Muestra la lista cuando el menú esté activo */
+    }
+
+    .menu ul li a img {
+        display: none; /* Opcionalmente, oculta la imagen en dispositivos móviles */
+    }
+}
+
+
diff --git a/rojo.png b/rojo.png
diff --git a/script.js b/script.js
@@ -0,0 +1,44 @@
+// Axel Cotón Gutiérrez Copyright 2024
+
+document.addEventListener('DOMContentLoaded', () => {
+    const preguntaEl = document.getElementById('pregunta');
+    const imagenesEl = document.getElementById('imagenes-ciclistas');
+    const resultadoEl = document.getElementById('resultado');
+    const botones = {
+        azul: document.getElementById('boton-azul'),
+        rojo: document.getElementById('boton-rojo'),
+        verde: document.getElementById('boton-verde')
+    };
+    const siguientePreguntaBtn = document.getElementById('siguiente-pregunta');
+
+    let respuestaCorrecta;
+
+    function cargarJuego() {
+        const ciclistas = ['azul', 'rojo', 'verde'];
+        ciclistas.sort(() => Math.random() - 0.5);
+
+        imagenesEl.innerHTML = ciclistas.map(color => `<img src="${color}.png" alt="${color}">`).join('');
+        const preguntaAleatoria = ['primero', 'segundo', 'último'][Math.floor(Math.random() * 3)];
+        preguntaEl.textContent = `¿Quién llegó ${preguntaAleatoria}?`;
+        respuestaCorrecta = ciclistas[preguntaAleatoria === 'primero' ? 0 : preguntaAleatoria === 'segundo' ? 1 : 2];
+
+        resultadoEl.textContent = '';
+    }
+
+    Object.values(botones).forEach(boton => {
+        boton.addEventListener('click', function() {
+            const seleccionUsuario = this.textContent.toLowerCase();
+            if (seleccionUsuario === respuestaCorrecta) {
+                resultadoEl.textContent = '¡Correcto! Felicitaciones.';
+                resultadoEl.style.color = "green";
+            } else {
+                resultadoEl.textContent = `Incorrecto, el correcto era ${respuestaCorrecta}. ¡Inténtalo de nuevo!`;
+                resultadoEl.style.color = "red";
+            }
+        });
+    });
+
+    siguientePreguntaBtn.addEventListener('click', cargarJuego);
+
+    cargarJuego();
+});