VS CODE SIMPLE ANIMATION

Froggy Jumps

Played 20 %Accuracy 66 Average time 14:48

Create copy

About this activity

Recalling of past lesson

Created by

belle

Philippines

Download the paper version to play

Top 10 results

#	Player	Accuracy	time
1	belle August 9, 2026	% 100	00:21
2	group 2 August 9, 2026	% 100	01:31
3	yunnooo August 13, 2026	% 84	18:43
4	----- August 13, 2026	% 76	18:43
5	‎ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴ ￴￴￴￴ ￴ August 13, 2026	% 72	18:43
6	Anonymous August 9, 2026	% 67	00:45
7	GROUP 1 August 9, 2026	% 67	01:31
8	Abuldabar August 12, 2026	% 67	13:20
9	Buwaya yarn?? August 12, 2026	% 67	13:20
10	Pusikat August 13, 2026	% 64	18:43

Do you want to stay in the Top 10 of this game? Log in to identify yourself.

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

Phlebotomy Order of Draw Quiz

Pamela Chapman

United States

(61)

Test your knowledge of the order of draw in Phlebotomy with these 10 questions!
pizza

Lorelay Tyana

Romania

(267)

joc despre pizza
Ethos, Pathos, and Logos Quiz

Kristine Vester

United States

(134)

Test your knowledge of ethos, pathos, and logos with these 10 questions on examples of persuasive techniques.
The Integumentary System

Breanna Nesbitt

United States

(59)

Functions and Structures of the skin
Bill of Rights Game - The Constitutionalist

Doni The Don

United States

(92)

Test your knowledge on the Bill of Rights. A fun way to test your knowledge and focus on where you need to improve.

		%
	Anonymous	%
		%
		%

Print your game

VS CODE SIMPLE ANIMATION


Froggy Jumps VS CODE SIMPLE ANIMATIONOnline version Recalling of past lesson by 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

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’s gradebook.

VS CODE SIMPLE ANIMATION

Froggy Jumps

About this activity

Created by

Download the paper version to play

Top Games

Froggy Jumps

Phlebotomy Order of Draw Quiz

Froggy Jumps

pizza

Froggy Jumps

Ethos, Pathos, and Logos Quiz

Froggy Jumps

The Integumentary System

Froggy Jumps

Bill of Rights Game - The Constitutionalist

Froggy Jumps

VS CODE SIMPLE ANIMATIONOnline version

by 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.