New game
Download
SCORM download
To be used in an LMS (Moodle, Blackboard...)
Regular download
To be published on a website or blog.
Downloading games is an exclusive feature for users with an Academic Plan or a Commercial Plan.
Get your Academic Plan or your Commercial Plan now and start integrating your games into your LMS, website or blog.
Get Academic Plan
If you wish, you can download a demo game here and test its integration:
Share game
Fill in the Blanks
Fill in the Blanks

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

Integrate it into your platform
G. Classroom M. Teams
You can integrate the game into an LMS compatible with LTI 1.1 or LTI 1.3 such as Canvas, Moodle, or Blackboard. This way, the scores will be automatically saved into the platform鈥檚 gradebook.
Download
You have exceeded the maximum number of games you can integrate into Google Classroom with your current Plan.

To integrate as many games as you want in Google Classroom, you need an Academic Plan or a Commercial Plan.

Get Academic Plan
You have exceeded the maximum number of games you can integrate into Microsoft Teams with your current Plan.

To integrate as many games as you want in Microsoft Teams, you need an Academic Plan or a Commercial Plan.

Get Academic Plan
Downloading games is an exclusive feature for users with an Academic Plan or a Commercial Plan.

Get your Academic Plan or your Commercial Plan now and start integrating your games into your LMS, website or blog.

If you wish, you can download a demo game here and test its integration:

Get Academic Plan

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

Fill in the Blanks

(1)
Played 15 %Accuracy 77 Average time 39:23
Create copy

About this activity

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

Created by

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

Download the paper version to play

Make your own free game from our game creator
Compete against your friends to see who gets the best score in this game
Make challenge

Top Games

 %
Anonymous
Anonymous
 %
%
%
You have exceeded the maximum number of games you can print with your current Plan.

To print as many games as you want, you need an Academic Plan or a Commercial Plan.

Get Academic Plan
Print your game
馃幃 Reto Dev Junior: Completa las Frases del C贸digo
 

Fill in the Blanks

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

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

by Jhon Hevert Nu帽ez Blando
1

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

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

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

? 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

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

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 .

 
Are you sure you want to leave the page?

If you leave the page, you will lose your game progress.