Scribd
Upload
17 views8 pages

q4 Summative 02

The document is a quiz for a Computer Programming course focused on .NET Technology, specifically assessing knowledge of HTML and CSS animations. It includes multiple coding exercises where students must analyze provided code, describe its function, and fill in missing code segments. The quiz emphasizes understanding of animation properties and keyframes in CSS.

Uploaded by

John Carlo Presbitero
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views8 pages

q4 Summative 02

The document is a quiz for a Computer Programming course focused on .NET Technology, specifically assessing knowledge of HTML and CSS animations. It includes multiple coding exercises where students must analyze provided code, describe its function, and fill in missing code segments. The quiz emphasizes understanding of animation properties and keyframes in CSS.

Uploaded by

John Carlo Presbitero
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

COMPUTER PROGRAMMING (.

NET TECHNOLOGY) NC III


2nd LONG QUIZ | 4th Quarter
NAME: _________________________________________________________________ SCORE: _________________
GRADE & SECTION: _______________________________________________________ DATE: __________________

A. Copy the source code below and check its output in your browser. Draw the output on the space provided, explain
what does the code do.

1.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s; }
@keyframes example {
from {background-color: red;}
to {background-color: yellow;} }
</style>
</head>
<body>
<div></div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________

2.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s; }
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;} }
</style>
</head>
<body>
<div></div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
3.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s; }
@keyframes example {
0% {background-color:red;
left:0px; top:0px;}
25% {background-color:yellow;
left:200px; top:0px;}
50% {background-color:blue;
left:200px; top:200px;}
75% {background-color:green;
left:0px; top:200px;}
100%{background-color:red;
left:0px; top:0px;} }
</style>
</head>
<body>
<div></div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
4.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s; }
@keyframes example {
0% {background-color:red;
left:0px; top:0px;}
25% {background-color:yellow;
left:200px; top:0px;}
50% {background-color:blue;
left:200px; top:200px;}
75% {background-color:green;
left:0px; top:200px;}
100%{background-color:red;
left:0px; top:0px;} }
</style>
</head><body>
<div> </div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
5.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s; }
@keyframes example {
0% {background-color:red;
left:0px; top:0px;}
25% {background-color:yellow;
left:200px; top:0px;}
50% {background-color:blue;
left:200px; top:200px;}
75% {background-color:green;
left:0px; top:200px;}
100%{background-color:red;
left:0px; top:0px;} }
</style>
</head>
<body>
<div></div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________

6.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: 3; }
@keyframes example {
0% {background-color:red;}
25% {background-color:yellow;}
50% {background-color:blue;}
75% {background-color:green;}
100%{background-color:red;} }
</style>
</head>
<body>
<div></div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
7.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-direction: reverse; }
@keyframes example {
0% {background-color:red;
left:0px; top:0px;}
25% {background-color:yellow;
left:200px; top:0px;}
50% {background-color:blue;
left:200px; top:200px;}
75% {background-color:green;
left:0px; top:200px;}
100%{background-color:red;
left:0px; top:200px;} }
</style>
</head><body>
<div> </div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________

8.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: alternate; }
@keyframes example {
0% {background-color:red;}
25% {background-color:yellow;}
50% {background-color:blue;}
75% {background-color:green;}
100%{background-color:red;} }
</style>
</head><body>
<div> </div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
9.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite; }
#div1 { animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes example {
from {left: 0px;}
to {left: 300px;} }
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________

10.
CODE: OUTPUT:
<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards; }
@keyframes example {
from {top: 0px;}
to {top: 200px;
background-color: blue;} }
</style>
</head>
<body>
<div></div>
</body>
</html>
What does the code do?
___________________________________________________________________________________________
___________________________________________________________________________________________
___________________________________________________________________________________________
B. Analyze the codes carefully and fill in the missing codes. Write your answer on your answer sheet.

1. Specify that the animation of the <div> element should have a "ease-in-out" speed curve.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: practice;
animation-duration: 4s;
______________________________________________________
}
@keyframes practice {
0% {background-color: red; left:0px;}
50% {background-color: yellow; left:200px;}
100% {background-color: red; left:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

2. Specify that the animation of the <div> element should have a "1" second delay before starting.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: practice;
animation-duration: 2s;
______________________________________________________
}
@keyframes practice {
0% {background-color: red; left:0px;}
50% {background-color: yellow; left:200px;}
100% {background-color: red; left:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3. Specify that the animation of the <div> element should continue to loop forever.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: remember;
animation-duration: 2s;
______________________________________________________
}
@keyframes remember {
0% {background-color: red; left:0px;}
50% {background-color: yellow; left:200px;}
100% {background-color: red; left:0px;} }
</style>
</head> <body>
<div> </div>
</body>
</html>

4. Add the following 5 steps to the animation "remember" (using 0%, 25%, 50%, 75%, and 100%):
0% - Set background color to "red", left position to "0px", top position to: "0px"
25% - Set background color to "blue", left position to "0px", top position to: "200px"
50% - Set background color to "green", left position to "200px", top position to: "200px"
75% - Set background color to "yellow", left position to "200px", top position to: "0px"
100% - Set background color to "red", left position to "0px", top position to: "0px"
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: remember;
animation-duration: 4s;
}
@keyframes remember {
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
}
</style>
</head> <body>
<div></div>
</body>
</html>
5. Add a 2 second animation for the <div> element, which changes the color from red to blue. Call the animation
"remember".
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
______________________________________________________
______________________________________________________
}
@keyframes remember {
______________________________________________________
______________________________________________________
______________________________________________________
}
</style>
</head>
<body>
<div></div>
</body>
</html>

6. Specify that the animation of the <div> element should alternate between running forwards and backwards.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
______________________________________________________
}
@keyframes remember {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: blue; left:0px; top:200px;}
50% {background-color: green; left:200px; top:200px;}
75% {background-color: yellow; left:200px; top:0px;}
100% {background-color: red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div> </div>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy