Skip to content

Commit e14c050

Browse files
rachelandrewrachelandrew
committed
values and units tasks
1 parent 725cbfb commit e14c050

File tree

8 files changed

+390
-0
lines changed

8 files changed

+390
-0
lines changed

‎learn/tasks/values/color-download.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Values and Units Task 1: color values</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
ul {
9+
list-style: none;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
li {
15+
margin: 1em;
16+
padding: 0.5em;
17+
}
18+
.hex {
19+
background-color: #86DEFA;
20+
}
21+
22+
.rgb {
23+
}
24+
25+
.hsl {
26+
}
27+
28+
.transparency {
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
35+
<ul>
36+
<li class="hex">hex color</li>
37+
<li class="rgb">RGB color</li>
38+
<li class="hsl">HSL color</li>
39+
<li class="transparency">Alpha value .2</li>
40+
</ul>
41+
42+
</body>
43+
44+
</html>

‎learn/tasks/values/color.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Values and Units Task 1: color values</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
ul {
9+
list-style: none;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
li {
15+
margin: 1em;
16+
padding: .5em;
17+
}
18+
</style>
19+
20+
<style class="editable">
21+
.hex {
22+
background-color: #86DEFA;
23+
}
24+
25+
.rgb {
26+
27+
}
28+
29+
.hsl {
30+
31+
}
32+
33+
.transparency {
34+
35+
}
36+
37+
</style>
38+
</head>
39+
40+
<body>
41+
<section class="preview">
42+
<ul>
43+
<li class="hex">hex color</li>
44+
<li class="rgb">RGB color</li>
45+
<li class="hsl">HSL color</li>
46+
<li class="transparency">Alpha value .2</li>
47+
</ul>
48+
</section>
49+
50+
<textarea class="playable playable-css" style="height: 280px;">
51+
.hex {
52+
background-color: #86DEFA;
53+
}
54+
55+
.rgb {
56+
57+
}
58+
59+
.hsl {
60+
61+
}
62+
63+
.transparency {
64+
65+
}
66+
</textarea>
67+
68+
<textarea class="playable playable-html" style="height: 140px;">
69+
<ul>
70+
<li class="hex">hex color</li>
71+
<li class="rgb">RGB color</li>
72+
<li class="hsl">HSL color</li>
73+
<li class="transparency">Alpha value .2</li>
74+
</ul>
75+
</textarea>
76+
77+
<div class="playable-buttons">
78+
<input id="reset" type="button" value="Reset" />
79+
</div>
80+
</body>
81+
<script src="../playable.js"></script>
82+
</html>

‎learn/tasks/values/length-download.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Values and Units Task 1: length values</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 1em;
14+
margin: 0;
15+
}
16+
h1 {
17+
}
18+
19+
h2 {
20+
}
21+
22+
p {
23+
}
24+
25+
h1+p {
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
32+
<h1>Level 1 heading</h1>
33+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
34+
<h2>Level 2 heading</h2>
35+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
36+
37+
</body>
38+
39+
</html>

‎learn/tasks/values/length.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Values and Units Task 1: length values</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
9+
</style>
10+
11+
<style class="editable">
12+
h1 {
13+
14+
}
15+
16+
h2 {
17+
18+
}
19+
20+
p {
21+
22+
}
23+
24+
h1+p {
25+
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<section class="preview">
32+
<h1>Level 1 heading</h1>
33+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
34+
<h2>Level 2 heading</h2>
35+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
36+
</section>
37+
38+
<textarea class="playable playable-css" style="height: 280px;">
39+
h1 {
40+
41+
}
42+
43+
h2 {
44+
45+
}
46+
47+
p {
48+
49+
}
50+
51+
h1+p {
52+
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 140px;">
57+
<h1>Level 1 heading</h1>
58+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
59+
<h2>Level 2 heading</h2>
60+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
61+
</textarea>
62+
63+
<div class="playable-buttons">
64+
<input id="reset" type="button" value="Reset" />
65+
</div>
66+
</body>
67+
<script src="../playable.js"></script>
68+
</html>

‎learn/tasks/values/marking.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Marking Guide for Values and Units Tasks
2+
3+
## Task 1 Color
4+
5+
The student needs to take a color which is a hex code and add the same color to other elements using RGB and HSL colors, plus change the opacity of the final item.
6+
7+
They have a link to [a color conversion tool](https://convertingcolors.com/hex-color-86DEFA.html), so they just need to know what the different values look like.
8+
9+
```
10+
.hex {
11+
background-color: #86DEFA;
12+
}
13+
14+
.rgb {
15+
background-color: rgb(134, 222, 250);
16+
}
17+
18+
.hsl {
19+
background-color: hsl(194, 92%, 75%);
20+
}
21+
22+
.transparency {
23+
background-color: rgba(134, 222, 250, .2);
24+
}
25+
```
26+
27+
## Task 2 Length
28+
29+
The student is asked to use a variety of length units to size some boxes.
30+
31+
```
32+
h1 {
33+
font-size: 50px;
34+
}
35+
36+
h2 {
37+
font-size: 2em;
38+
}
39+
40+
p {
41+
font-size: 16px;
42+
}
43+
44+
h1+p {
45+
font-size: 120%;
46+
}
47+
```
48+
49+
## Task 3 position
50+
51+
In this task the students needs to use a keyword and a percentage to change the position of the background image.
52+
53+
```
54+
.box {
55+
background-image: url(star.png);
56+
background-repeat: no-repeat;
57+
background-position: center 20%;
58+
}
59+
```

‎learn/tasks/values/position-download.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Values and Units Task 3: position values</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.box {
9+
border: 5px solid #000;
10+
width: 400px;
11+
height: 200px;
12+
}
13+
</style>
14+
15+
<style class="editable">
16+
.box {
17+
background-image: url(star.png);
18+
background-repeat: no-repeat;
19+
}
20+
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<div class="box">
27+
28+
</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 180px;">
32+
.box {
33+
background-image: url(star.png);
34+
background-repeat: no-repeat;
35+
}
36+
</textarea>
37+
38+
<textarea class="playable playable-html" style="height: 140px;">
39+
<div class="box">
40+
41+
</div>
42+
</textarea>
43+
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script src="../playable.js"></script>
49+
</html>

‎learn/tasks/values/position.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Values and Units Task 3: position values</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.box {
9+
border: 5px solid #000;
10+
width: 400px;
11+
height: 200px;
12+
}
13+
</style>
14+
15+
<style class="editable">
16+
.box {
17+
background-image: url(star.png);
18+
background-repeat: no-repeat;
19+
}
20+
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<div class="box">
27+
28+
</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 180px;">
32+
.box {
33+
background-image: url(star.png);
34+
background-repeat: no-repeat;
35+
}
36+
</textarea>
37+
38+
<textarea class="playable playable-html" style="height: 140px;">
39+
<div class="box">
40+
41+
</div>
42+
</textarea>
43+
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script src="../playable.js"></script>
49+
</html>

‎learn/tasks/values/star.png‎

6.33 KB
Loading

0 commit comments

Comments
 (0)