Skip to content

Commit 725cbfb

Browse files
rachelandrewrachelandrew
committed
overflow tasks
1 parent ab5f398 commit 725cbfb

File tree

6 files changed

+192
-0
lines changed

6 files changed

+192
-0
lines changed

‎learn/tasks/overflow/flowers.jpg‎

180 KB
Loading

‎learn/tasks/overflow/marking.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Overflow tasks
2+
3+
The following tasks aim to help students test their knowledge of the `overflow` property.
4+
5+
## Task 1
6+
7+
In this task there is overflowing text content and the student is asked to cause the box to have scrollbars if there is too much content. They should use `overflow: auto` as then the box will only gain scrollbars when the content is too large.
8+
9+
```
10+
.box {
11+
overflow: auto;
12+
}
13+
```
14+
15+
## Task 2
16+
17+
In this task an image is overflowing and the student is asked to crop all of the image that is outside of the box. They should therefore use `overflow: hidden`.
18+
19+
```
20+
.box {
21+
overflow: hidden;
22+
}
23+
```

‎learn/tasks/overflow/overflow-hidden-download.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Overflow Task 2: Hiding overflow</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
16+
.box {
17+
border: 5px solid black;
18+
height: 200px;
19+
width: 300px;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
26+
<div class="box">
27+
<img src="flowers.jpg" alt="flowers">
28+
</div>
29+
30+
</body>
31+
32+
</html>

‎learn/tasks/overflow/overflow-hidden.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow Task 2: Hiding overflow</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.preview {
9+
padding-bottom: 500px;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
.box {
15+
border: 5px solid black;
16+
height: 200px;
17+
width: 300px;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<section class="preview">
24+
<div class="box">
25+
<img src="flowers.jpg" alt="flowers">
26+
</div>
27+
</section>
28+
29+
<textarea class="playable playable-css" style="height: 180px;">
30+
.box {
31+
border: 5px solid black;
32+
height: 200px;
33+
width: 300px;
34+
}
35+
</textarea>
36+
37+
<textarea class="playable playable-html" style="height: 180px;">
38+
<div class="box">
39+
<img src="flowers.jpg" alt="flowers">
40+
</div>
41+
</textarea>
42+
43+
<div class="playable-buttons">
44+
<input id="reset" type="button" value="Reset" />
45+
</div>
46+
</body>
47+
<script src="../playable.js"></script>
48+
</html>

‎learn/tasks/overflow/overflow-scroll-download.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Overflow Task 1: Making a scrollable box</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
16+
.box {
17+
border: 5px solid black;
18+
padding: 1em;
19+
height: 200px;
20+
width: 300px;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
27+
<div class="box">
28+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
29+
30+
<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>
31+
</div>
32+
33+
</body>
34+
35+
</html>

‎learn/tasks/overflow/overflow-scroll.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Overflow Task 1: Making a scrollable box</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.preview {
9+
padding-bottom: 200px;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
.box {
15+
border: 5px solid black;
16+
padding: 1em;
17+
height: 200px;
18+
width: 300px;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<section class="preview">
25+
<div class="box">
26+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
27+
28+
<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>
29+
</div>
30+
</section>
31+
32+
<textarea class="playable playable-css" style="height: 180px;">
33+
.box {
34+
border: 5px solid black;
35+
padding: 1em;
36+
height: 200px;
37+
width: 300px;
38+
}
39+
</textarea>
40+
41+
<textarea class="playable playable-html" style="height: 180px;">
42+
<div class="box">
43+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
44+
45+
<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>
46+
</div>
47+
</textarea>
48+
49+
<div class="playable-buttons">
50+
<input id="reset" type="button" value="Reset" />
51+
</div>
52+
</body>
53+
<script src="../playable.js"></script>
54+
</html>

0 commit comments

Comments
 (0)