Crear
Descargar
Descarga SCORM
Para ser utilizado en un LMS (Moodle, Blackboard...)
Descarga normal
Para ser publicada en una web o blog.
La descarga de juegos es una caracter铆stica exclusiva para usuarios con un Plan Acad茅mico o un Plan Comercial.
Obt茅n ahora tu Plan Acad茅mico o Comercial y comienza a integrar tus juegos en tu LMS, web o blog.
Obtener Plan Acad茅mico
Si lo deseas, puedes descargar un juego de prueba aqu铆 y probar su integraci贸n:
Compartir juego
Completar Frases
Completar Frases

馃幃 Reto Dev Junior: Completa las Frases del C贸digo

Int茅gralo en tu plataforma
G. Classroom M. Teams
Puedes integrar el juego en un LMS compatible con LTI 1.1 o LTI 1.3 como Canvas, Moodle, o Blackboard. De esta manera podr谩s guardar las puntuaciones autom谩ticamente en el libro de calificaciones de esa plataforma.
Descargar
Has superado el n煤mero m谩ximo de juegos que puedes integrar en Google Classroom con tu Plan actual.

Para integrar tantos juegos como quieras en Google Classroom, necesitas un Plan Acad茅mico o un Plan Comercial.

Obtener Plan Acad茅mico
Has superado el n煤mero m谩ximo de juegos que puedes integrar en Microsoft Teams con tu Plan actual.

Para integrar tantos juegos como quieras en Microsoft Teams, necesitas un Plan Acad茅mico o un Plan Comercial.

Obtener Plan Acad茅mico
La descarga de juegos es una caracter铆stica exclusiva para usuarios con un Plan Acad茅mico o un Plan Comercial.

Obt茅n ahora tu Plan Acad茅mico o Comercial y comienza a integrar tus juegos en tu LMS, web o blog.

Si lo deseas, puedes descargar un juego de prueba aqu铆 y probar su integraci贸n:

Obtener Plan Acad茅mico

馃幃 Reto Dev Junior: Completa las Frases del C贸digo

Completar Frases

(1)
Jugadas 15 %Acierto 77 Tiempo medio 39:23
Crear copia

Sobre esta actividad

隆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! 馃殌馃摎

Creada por

Jhon Hevert Nu帽ez Blando
Jhon Hevert Nu帽ez Blando
Colombia

Descarga la versi贸n para jugar en papel

Crea tu propio juego gratis desde nuestro creador de juegos
Compite contra tus amigos para ver quien consigue la mejor puntuaci贸n en esta actividad
Crear reto

Top juegos

 %
An贸nimo
An贸nimo
 %
%
%
Has superado el n煤mero m谩ximo de juegos que puedes imprimir con tu Plan actual.

Para imprimir tantos juegos como quieras, necesitas un Plan Acad茅mico o un Plan Comercial.

Obtener Plan Acad茅mico
Imprime tu juego
馃幃 Reto Dev Junior: Completa las Frases del C贸digo
 

Completar Frases

馃幃 Reto Dev Junior: Completa las Frases del C贸digoVersi贸n en l铆nea

隆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! 馃殌馃摎

por Jhon Hevert Nu帽ez Blando
1

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

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

box border monospace place body sans padding hover max items CSS column width background serif border columns color grid width grid size margin grid sizing box center gap radius align text template right 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

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

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 .

 
驴Est谩s seguro que quieres abandonar la p谩gina?

Al abandonar la p谩gina perder谩s el progreso del juego.