VS CODE SIMPLE ANIMATION

Froggy Jumps

Jugadas 20 %Acierto 66 Tiempo medio 14:48

Crear copia

Sobre esta actividad

Recalling of past lesson

Creada por

belle

Filipinas

Descarga la versión para jugar en papel

Top 10 resultados

#	Jugador	Acierto	tiempo
1	belle 9 de Agosto de 2026	% 100	00:21
2	group 2 9 de Agosto de 2026	% 100	01:31
3	yunnooo 13 de Agosto de 2026	% 84	18:43
4	----- 13 de Agosto de 2026	% 76	18:43
5	‎ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴￴￴￴ ￴ 13 de Agosto de 2026	% 72	18:43
6	Anónimo 9 de Agosto de 2026	% 67	00:45
7	GROUP 1 9 de Agosto de 2026	% 67	01:31
8	Abuldabar 12 de Agosto de 2026	% 67	13:20
9	Buwaya yarn?? 12 de Agosto de 2026	% 67	13:20
10	Pusikat 13 de Agosto de 2026	% 64	18:43

¿Quieres aparecer en el Top 10 de este juego? Inicia sesión para identificarte.

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

Salva a la Ranita

Melanie Rodriguez

Estados Unidos

(344)

Contesta las siguientes multiplicaciones correctamente para salvar a la ranita y evitar que caiga al agua, mucha suerte!
Sabiduría animal

Educaplay Educational Resources

España

(15513)

Conviértete en un genio del Reino Animal
El valle de los lobos

Marcos Signes

España

(111)

20 preguntas de este maravilloso libro
OPEN UP 6 UNIT 1 VOCABULARY

karen blixen

España

(102)

Repasamos el vocabulario de la unidad
Quiz de Culpa mía película

Yamila Chavez

Argentina

(178)

Demuestra cuánto sabes sobre la película Culpa mía con este divertido quiz.

		%
	Anónimo	%
		%
		%

Imprime tu juego

VS CODE SIMPLE ANIMATION


Froggy Jumps VS CODE SIMPLE ANIMATIONVersión en línea Recalling of past lesson por belle 1 1. What is the main purpose of HTML in the website created yesterday? a A. To structure the webpage b B. To animate the box c C. To change the internet connection 2 Which HTML tag is used to create the main heading “MY FIRST ANIMATION”? a A. b B. c C. </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">3</span> <h3 class="gameboard__screen__question__heading"> <link rel="stylesheet" href="firstanimation.css"> </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> It creates an animation </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> It connects the HTML file to a CSS file </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> It creates a new webpage </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">4</span> <h3 class="gameboard__screen__question__heading"> Which HTML element was used to create the animated box? </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> <square> </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> <box> </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> <div> </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">5</span> <h3 class="gameboard__screen__question__heading"> What does class="box" do in the code </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> It makes the element automatically move </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> It changes the element into a heading </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> t identifies the element so CSS can style it </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">6</span> <h3 class="gameboard__screen__question__heading"> Which CSS property controls the width of the box? </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> size </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> width </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> height </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">7</span> <h3 class="gameboard__screen__question__heading"> background-color: rgb(225, 255, 0); </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> Changes the box's background color </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> Changes the box's width </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> Changes the box's position </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">8</span> <h3 class="gameboard__screen__question__heading"> What is the purpose of position: relative; in the .box style </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> It makes the box invisible </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> It automatically makes the box circular </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> It allows the element to be positioned relative to its normal position </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">9</span> <h3 class="gameboard__screen__question__heading"> What is the purpose of @keyframes circle </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> It creates the HTML document </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> It defines the steps or changes of the animation </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> It connects the CSS file to VS Code </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">10</span> <h3 class="gameboard__screen__question__heading"> What does 1s mean in the animation code? </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> Rotates the box 300 degrees </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> Moves the box 300 pixels to the right from its relative position </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">c</span> <p class="gameboard__screen__answer__body"> Moves the box 300 pixels to the right from its normal position </p> </label> </div> </section> <section class="gameboard__screen"> <div class="gameboard__screen__wrapper"> <div class="gameboard__screen__question"> <span class="gameboard__screen__question__number">11</span> <h3 class="gameboard__screen__question__heading"> The heading is not appearing as the main heading. Which code should be used? <h2>MY FIRST ANIMATION</h2> </h3> </div> </div> <div class="gameboard__screen__wrapper"> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">a</span> <p class="gameboard__screen__answer__body"> <h1>MY FIRST ANIMATION</h1> </p> </label> <label class="gameboard__screen__answer"> <div class="radioinput printinput"></div> <span class="gameboard__screen__answer__letter">b</span> <p class="gameboard__screen__answer__body"> <title>MY FIRST ANIMATION c MY FIRST ANIMATION 12 The CSS file is named firstanimation.css, but the webpage is not using the CSS. What should you check? a Change stylesheet to animation b Change animation.css to firstanimation.css c Change animation.css to myfirstanimation.css 13 The student wants the box to move farther to the right. a Change 150px to 150deg b Change 360px to 360deg c Change 360px to 360s 14 The CSS animation is not working because the keyframes name doesn't match. .box { animation: square 1s linear infinite; } @keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } a hange square to circle b Change animation to keyframes c Change square to circle 15 The animation is not working because the student forgot @keyframes. Which code correctly defines the animation? a @move circle { 0% { transform: rotate(0deg); } } b @animation circle { 0% { rotate: 0deg; } } c @keyframes circle { 0% { transform: rotate(0deg); } } 16 Why can’t I make my website public using Netlify? a You need to pay for the website b You need to pay for the website c The file name needs to be changed to index.html 17 Which language is primarily used to structure the content of a webpage? a HTML b CSS c JavaScript 18 Which language is used to style a webpage, such as changing colors, fonts, and layouts? a CSS b HTML c JAVA 19 Which language is commonly used to add interactivity and animations to a webpage? a HTML b Javascript c CSS 20 A student finds that their program produces an incorrect result even though the program runs successfully. What should the programmer do first? a Debug the program and check the logic b Reboot the computer c Delete the program 21 Which statement best describes programming? a The process of connecting computers to the internet b The process of creating instructions that a computer can execute c The process of designing computer hardware 22 Which best describes the role of a programmer in software development? a Only designing computer hardware b Writing, testing, debugging, and maintaining code c Only installing applications 23 Is a software application that provides tools for writing, editing, running, and debugging programs. a Integrated Development Environment b International Development Environment c Interactive Development Environment 24 It is a step-by-step procedure used to solve a problem or accomplish a task. a Algorithm b Syntax c Error 25 is the process of finding and correcting errors in a program. a Debugging b Syntax c Errors

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.

VS CODE SIMPLE ANIMATION

Froggy Jumps

Sobre esta actividad

Creada por

Descarga la versión para jugar en papel

Top juegos

Froggy Jumps

Salva a la Ranita

Froggy Jumps

Sabiduría animal

Froggy Jumps

El valle de los lobos

Froggy Jumps

OPEN UP 6 UNIT 1 VOCABULARY

Froggy Jumps

Quiz de Culpa mía película

Froggy Jumps

VS CODE SIMPLE ANIMATIONVersión en línea

por belle

1. What is the main purpose of HTML in the website created yesterday?

Which HTML tag is used to create the main heading “MY FIRST ANIMATION”?

The CSS file is named firstanimation.css, but the webpage is not using the CSS. What should you check?

The student wants the box to move farther to the right.

The CSS animation is not working because the keyframes name doesn't match. .box { animation: square 1s linear infinite; } @keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

The animation is not working because the student forgot @keyframes. Which code correctly defines the animation?

Why can’t I make my website public using Netlify?

Which language is primarily used to structure the content of a webpage?

Which language is used to style a webpage, such as changing colors, fonts, and layouts?

Which language is commonly used to add interactivity and animations to a webpage?

A student finds that their program produces an incorrect result even though the program runs successfully. What should the programmer do first?

Which statement best describes programming?

Which best describes the role of a programmer in software development?

Is a software application that provides tools for writing, editing, running, and debugging programs.

It is a step-by-step procedure used to solve a problem or accomplish a task.

is the process of finding and correcting errors in a program.