Skip to content

Commit

Permalink
primarios
Browse files Browse the repository at this point in the history
  • Loading branch information
@AxelCotonGutierrez
AxelCotonGutierrez committed Jan 31, 2024
0 parents commit a50361e
Show file tree
Hide file tree
Showing 10 changed files with 469 additions and 0 deletions.
17 changes: 17 additions & 0 deletions Licencia.md
Original file line number Diff line number Diff line change
@@ -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.
19 changes: 19 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Juego de los Colores Primarios

![Juego de los Colores Primarios](https://axelcotongutierrez.github.io/learningmathematicas/assets/images//posts/0013JColores/JC01.jpg)

Dentro del blog: https://axelcotongutierrez.github.io/learningmathematicas/

Juego para Infantil para aprender los colores primarios.

Puedes probar el juego en esta url:

https://axelcotongutierrez.github.io/Juego-de-los-oolores-primarios/

¡Bienvenido al emocionante "Juego de los Colores Primarios"! ¿Estás listo para poner a prueba tu percepción y habilidades de observación en este desafío lleno de colores? Prepárate para explorar el fascinante mundo de los colores primarios y demostrar que eres un experto en distinguirlos en este juego envolvente.

En este intrigante desafío, te presentaremos un círculo de un color primerio en la pantalla. Tu objetivo es adivinar correctamente el color del círculo. ¡Pero aquí está el giro! Cada vez, los círculos aparecerán en una secuencia aleatoria, desafiándote a 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 colores primarios!

¡Sumérgete en la emoción y desafía tus habilidades de percepción visual en el "Juego de los Colores Primarios"! ¿Estás listo para aceptar el reto? ¡Adelante, juega y demuestra que eres un experto en distinguir los colores primarios en esta emocionante aventura!
Binary file added cb.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added githubinverseicon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!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 Colores Primarios</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 COLORES PRIMARIOS</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-8-detail" target="_blank">Nivel 8</a></b>
de la materia <a title="Física" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=física" target="_blank"><img class="center-block img-responsive" width="30" alt="Física" src="/learningmathematicas/assets/images/pages/figuras/Física.jpg"></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">¿De qué color es?</span>
</div>

<div class="container">
<div id="color-circle"></div>
<div id="buttons-container">
<button class="guess-button" onclick="checkColor('Azul')">Azul</button>
<button class="guess-button" onclick="checkColor('Amarillo')">Amarillo</button>
<button class="guess-button" onclick="checkColor('Rojo')">Rojo</button>
</div>



<div id="result"></div>
<br>
<button class="guess-button" id="next-question" onclick="nextQuestion()">Siguiente Pregunta</button>
</div>
<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>
183 changes: 183 additions & 0 deletions nav.css
Original file line number Diff line number Diff line change
@@ -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 */
}
}


54 changes: 54 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// Axel Cotón Gutiérrez Copyright 2023


let currentColor = '';
let lastColor = '';

function randomColor() {
const colors = ['blue', 'yellow', 'red'];
let newColor;

do {
newColor = colors[Math.floor(Math.random() * colors.length)];
} while (newColor === lastColor); // Repetir hasta obtener un color diferente al último

lastColor = newColor; // Actualizar el último color
return newColor;
}

function setColor() {
currentColor = randomColor();
const colorCircle = document.getElementById('color-circle');
colorCircle.style.backgroundColor = currentColor;
}

function checkColor(color) {
const result = document.getElementById('result');
if ((color === 'Azul' && currentColor === 'blue') ||
(color === 'Amarillo' && currentColor === 'yellow') ||
(color === 'Rojo' && currentColor === 'red')) {
result.innerHTML = '¡Correcto! Buen trabajo.';
result.style.color = "green";
} else {
result.innerHTML = 'Incorrecto. Vuelve a intentarlo.';
result.style.color = "red";
}
}

function nextQuestion() {
setColor();
document.getElementById('result').innerHTML = '';
}

window.onload = setColor;

// Navegaciòn"

document.addEventListener('DOMContentLoaded', function() {
var menuToggle = document.querySelector('.menu-toggle');
var menu = document.querySelector('.menu');

menuToggle.addEventListener('click', function() {
menu.classList.toggle('active');
});
});
Loading

0 comments on commit a50361e

Please sign in to comment.