Créer jeu
Télécharger
Téléchargement SCORM
A utiliser dans un LMS (Moodle, Blackboard...)
Téléchargement régulier
Pour être publié sur un site Web ou un blog.
Le téléchargement du jeu est une fonctionnalité exclusive pour les utilisateurs avec un Plan Académique ou un Plan Commercial.
Obtenez votre Plan Académique ou Plan Commercial dès maintenant et commencez à intégrer vos jeux dans votre LMS, votre site Web ou votre blog.
Obtenir Plan Académique
Si vous le souhaitez, vous pouvez télécharger une jeu de test ici et tester son intégration:
Partager le jeu
Compléter
Compléter

🎮 Reto Dev Junior: Completa las Frases del Código

Intégrez-le à votre plateforme
G. Classroom M. Teams
Vous pouvez intégrer le jeu dans un LMS compatible avec LTI 1.1 ou LTI 1.3 comme Canvas, Moodle ou Blackboard. Les scores seront ainsi automatiquement enregistrés dans le carnet de notes de la plateforme.
Télécharger
Vous avez dépassé le nombre maximum de jeux que vous pouvez intégrer à Google Classroom avec votre Plan actuel.

Pour intégrer autant de jeux que vous le souhaitez dans Google Classroom, vous avez besoin d’un Plan Académique ou un Plan Commerciel.

Obtenir Plan Académique
Vous avez dépassé le nombre maximum de jeux que vous pouvez intégrer à Microsoft Teams avec votre Plan actuel.

Pour intégrer autant de jeux que vous le souhaitez dans Microsoft Teams, vous avez besoin d’un Plan Académique ou un Plan Commerciel.

Obtenir Plan Académique
Le téléchargement du jeu est une fonctionnalité exclusive pour les utilisateurs avec un Plan Académique ou un Plan Commercial.

Obtenez votre Plan Académique ou Plan Commercial dès maintenant et commencez à intégrer vos jeux dans votre LMS, votre site Web ou votre blog.

Si vous le souhaitez, vous pouvez télécharger une jeu de test ici et tester son intégration:

Obtenir Plan Académique

🎮 Reto Dev Junior: Completa las Frases del Código

Compléter

(1)
Parties jouées 15 %Précision 77 Temps moyen 39:23
Créer une copie

À propos de cette activité

¡Bienvenidos, jóvenes desarrolladores y aprendices de código!

En esta actividad, viajarán al interior de una calculadora web para descubrir cómo está construida. Les he entregado un "Libro del Conocimiento" que explica paso a paso el uso de HTML, CSS y JavaScript; sin embargo, las palabras más importantes (etiquetas, propiedades y comandos) han sido borradas por un error en el sistema.

🧩 ¿En qué consiste el reto?
Deberán leer con mucha atención cada párrafo del libro. Dentro del texto encontrarán unos corchetes [ ] que indican dónde falta una palabra. Su misión es escribir la palabra exacta que completa la idea correctamente.

🔍 ¿Qué deben tener en cuenta?

Lean todo el contexto de la oración, ¡la respuesta siempre está escondida en la explicación que la rodea!

Recuerden que los nombres de las etiquetas (como div o button) y las propiedades (como margin o background-color) se escriben en minúscula, a menos que sea un código especial como DOCTYPE o Error!.

Activen su memoria: piensen en la función de la pantalla, en cómo se organizan los botones, y en cómo el cerebro de la calculadora (JavaScript) hace los cálculos.

🎯 Objetivo del juego:
Al completar todas las frases, no solo habrán ganado el juego, sino que se habrán convertido en expertos en la estructura de una aplicación web. ¡Demuestren que saben cómo funciona la tecnología que usamos a diario!

¡Prepárense, agudicen su vista y que la lógica los acompañe! 🚀📚

Créé par

Jhon Hevert Nuñez Blando
Jhon Hevert Nuñez Blando
Colombia

Téléchargez la version pour jouer sur papier

Créez votre propre jeu gratuite à partir de notre créateur de jeu
Affrontez vos amis pour voir qui obtient le meilleur score dans ce jeu
Créer un défi

Top Jeux

 %
Anonyme
Anonyme
 %
%
%
Vous avez dépassé le nombre maximum de jeux que vous pouvez imprimer avec votre Plan actuel.

Pour imprimer autant de jeux que vous le souhaitez, vous avez besoin d’un Plan Académique ou un Plan Commerciel.

Obtenir Plan Académique
Imprimez votre jeu
🎮 Reto Dev Junior: Completa las Frases del Código
 

Compléter

🎮 Reto Dev Junior: Completa las Frases del CódigoVersion en ligne

¡Bienvenidos, jóvenes desarrolladores y aprendices de código! En esta actividad, viajarán al interior de una calculadora web para descubrir cómo está construida. Les he entregado un "Libro del Conocimiento" que explica paso a paso el uso de HTML, CSS y JavaScript; sin embargo, las palabras más importantes (etiquetas, propiedades y comandos) han sido borradas por un error en el sistema. 🧩 ¿En qué consiste el reto? Deberán leer con mucha atención cada párrafo del libro. Dentro del texto encontrarán unos corchetes [ ] que indican dónde falta una palabra. Su misión es escribir la palabra exacta que completa la idea correctamente. 🔍 ¿Qué deben tener en cuenta? Lean todo el contexto de la oración, ¡la respuesta siempre está escondida en la explicación que la rodea! Recuerden que los nombres de las etiquetas (como div o button) y las propiedades (como margin o background-color) se escriben en minúscula, a menos que sea un código especial como DOCTYPE o Error!. Activen su memoria: piensen en la función de la pantalla, en cómo se organizan los botones, y en cómo el cerebro de la calculadora (JavaScript) hace los cálculos. 🎯 Objetivo del juego: Al completar todas las frases, no solo habrán ganado el juego, sino que se habrán convertido en expertos en la estructura de una aplicación web. ¡Demuestren que saben cómo funciona la tecnología que usamos a diario! ¡Prepárense, agudicen su vista y que la lógica los acompañe! 🚀📚

par Jhon Hevert Nuñez Blando
1

title DOCTYPE cero borrar div btn HTML stylesheet C pantalla igual calculadora charset head link viewport div body id button html

Capítulo 1 : La Estructura ( El Esqueleto con HTML )
Para construir nuestra calculadora , primero necesitamos un esqueleto . Este se escribe con el lenguaje de marcado llamado [ ] .

Todo comienza declarando el tipo de documento con [ ] y abriendo la etiqueta [ ] con el idioma " es " . Dentro de la cabeza o [ ] , colocamos información invisible pero importante : definimos los caracteres con [ ] = " UTF - 8 " y adaptamos la página a pantallas de celulares usando el atributo [ ] . El nombre que aparece en la pestaña del navegador lo definimos con la etiqueta [ ] . Para conectar con los colores y diseños , usamos la etiqueta [ ] que enlaza la hoja de estilos llamada [ ] .

Todo el contenido visible va dentro del cuerpo o [ ] . Para agrupar los botones y la pantalla , usamos una caja contenedora llamada [ ] , y le asignamos la clase [ ] para darle estilo . La pantalla donde veremos los números es otro [ ] con la clase especial [ ] .

Luego vienen los botones . Cada botón se crea con la etiqueta [ ] . Observa que todos los botones comparten la misma clase general para verse iguales , llamada [ ] . Sin embargo , algunos tienen identificadores únicos ( llamados [ ] ) . El botón rojo que borra toda la operación se llama [ ] . El botón con la flecha para atrás tiene el id [ ] . El botón más grande y rojo que da el resultado final tiene el id [ ] . Por último , el número [ ] tiene un id especial porque ocupará más espacio que los demás números .

2

grid serif grid width sizing box border gap center background place width items sans size max columns border monospace column hover box align body right radius margin grid template padding color text CSS font

? Capítulo 2 : La Magia de los Colores ( Diseño con CSS )
Si el HTML es el esqueleto , el [ ] es la ropa y los colores que hacen bonita a nuestra calculadora .

Primero , con el símbolo * ( universal ) , quitamos todos los espacios molestos de la página usando [ ] ( espacios externos ) y [ ] ( espacios internos ) . Para que los tamaños sean fáciles de controlar , usamos la propiedad [ - ] con el valor [ - ] . También definimos que la letra de toda la página sea una sin adornos llamada [ - ] .

Ahora , para el fondo de toda la página ( ) , usamos un azul oscuro muy elegante con la propiedad [ - ] . Para que la calculadora quede justo en el centro de la pantalla , usamos un sistema de organización llamado [ ] y la propiedad [ - ] con el valor [ ] .

Dentro de la caja de la calculadora , le damos un ancho fijo de 350px con [ ] y la limitamos para que no se desborde en pantallas pequeñas con [ - ] . Las esquinas de la calculadora las redondeamos con [ - ] . Para separar los botones entre sí , usamos la propiedad [ ] . Organizamos todos los botones en 4 columnas iguales usando [ - - ] .

La pantalla tiene un diseño especial : ocupa todo el ancho con [ - ] , su texto está alineado a la derecha con [ - ] y [ ] , y su letra es enorme gracias a [ - ] . Además , usamos una fuente de computadora llamada [ ] . Cuando pasamos el mouse por encima de un botón , este cambia de color gracias al efecto llamado [ ] .

3

JavaScript try catch textContent 0 document Error eval slice querySelector addEventListener if click querySelectorAll return length forEach

Capítulo 3 : El Cerebro ( La Lógica con JavaScript )
¡ Ahora llega lo más emocionante ! El [ ] es el cerebro que hace que los botones respondan cuando los presionamos .

Primero , le decimos al programa que busque la pantalla usando [ ] y el buscador [ ] . Luego , para buscar todos los botones a la vez , usamos [ ] . Como tenemos muchos botones , necesitamos revisarlos uno por uno usando el bucle llamado [ ] .

Para que cada botón reaccione al hacer clic , utilizamos el " escuchador " de eventos llamado [ ] , que está atento al evento [ ] . Cuando el usuario hace clic , el programa necesita saber qué número u operación tiene ese botón , y lo lee con la propiedad [ ] .

El programa toma decisiones usando la condicional [ ] . Por ejemplo , si el botón presionado es " C " , la pantalla debe volver a [ ] y el código se detiene con [ ] . Si el botón es " borrar " y solo queda un número , usa la función [ ] para cortar el último carácter . Para contar cuántos números hay en la pantalla , usamos la propiedad [ ] .

Cuando presionamos el botón " = " , el programa intenta calcular . Para resolver la operación matemática escrita en la pantalla , usa la función especial [ ] . Pero , ¡ cuidado ! Si el usuario escribe algo mal ( como 5 + + ) , el programa no debe romperse . Para evitar que falle , envolvemos el cálculo entre un [ ] y un [ ] . Si atrapa un error , mostrará en la pantalla el mensaje [ ! ] .

Finalmente , para escribir números largos , si la pantalla muestra un " 0 " y presionamos el " 7 " , debemos reemplazar el cero . Pero si ya tenemos " 45 " y presionamos " + " , debemos agregar el símbolo al final , y para eso usamos el operador [ + = ] que añade contenido a lo que ya existe .

 
Voulez-vous vraiment quitter la page ?

En quittant la page, vous perdrez la progression du jeu.