-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathsession06-html-puzzle-box.html
executable file
·175 lines (122 loc) · 6.99 KB
/
session06-html-puzzle-box.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<title>Offline Icebreakers | 6. HTML Puzzle Cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/script.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="wrapper" mode="overview">
<aside>
<div class="image">
<img src="images/html-puzzleboxes.jpg" alt="An image of stacked boxes with HTML tags on their sides">
<a class="attribution" href="https://mouse.org">
<i class="fa fa-camera"></i> by MOUSE
</a>
</div>
<!--Image credit -->
<ul class="agenda-navigation">
<li><a href="#overview">Overview</a></li>
<li><a href="#step-1">Preparation</a></li>
<li><a href="#step-2">Introduction: Make the Boxes</a></li>
<li><a href="#step-3">HTML Puzzle Box Challenge</a></li>
<li><a href="#step-4">Reflection: Review the Tags</a></li>
</ul>
</aside>
<article class="main">
<h1 class="activity-title"><a href="#overview">HTML Puzzle Boxes</a></h1>
<section class="overview">
<p class="made-by">
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a> by <a href="https://twitter.com/yofiesetiawan">Yofi Setiawan, Mozilla Indonesia</a> and <a href="https://learning.mozilla.org">Mozilla</a>
</p>
<p class="time total-time">
45 minutes
</p>
<p class="summary">
Learners will race to sequence the paper boxes labeled with HTML tags, becoming familiar with the <strong>code</strong> and <strong>remix</strong>.
</p>
<h4>Activity 6 of 6 </h4>
<h4>Read and Write the Web</h4>
<h4>21st Century Skills</h4>
<span class="web-literacy">Creativity</span>
<h4><a href="https://learning.mozilla.org/web-literacy">Web Literacy Competencies</a></h4>
<span class="web-literacy">Code</span>
<span class="web-literacy">Remix</span>
<h4>Learning Objectives</h4>
<ul>
<li>Summarize the most commonly-used HTML tags</li>
<li>Use HTML tags to re-structure a web page</li>
<li>Create a web page for a specific audience</li>
</ul>
<h4>Audience</h4>
<ul>
<li>13+</li>
<li>Beginner web users</li>
</ul>
<h4>Materials</h4>
<ul>
<li><a href="https://www.dropbox.com/s/lv7u8tqawawudiy/html-puzzle-box.pdf?dl=0">Printed HTML Puzzle Boxes</a> on thick paper. 12 copies minimum.</li>
<li>Glue or tape</li>
<li>Scissors</li>
</ul>
<!--
<p class="discussion-link">
Check out the ways educators and activists have modified this activity for their specific audiences
in our <a href="http://discourse.webmaker.org/t/testing-1-reading-for-the-web/1149/22">Discussion Forum</a>.
</p>
-->
</section> <!-- End of Introduction -->
<ul class="agenda">
<!-- Copy and paste this <li> tag to add additional steps -->
<li>
<h1>Preparation</h1>
<p><strong>Print at least 12 copies</strong> of the Puzzle Box pattern.</p>
<p>Creating one Puzzle Box is pretty easy. But, to have enough Puzzle Boxes to play the game, you will need at least 12 boxes – to ensure that you have enough boxes for opening and closing tags. In total, for a pair of players, you need to build 24 boxes. So, to build all 24 boxes, you need to print 12 sheets of the papercraft pattern.</p>
<p>It is preferable to print the Puzzle Box with thick paper, so it will be easier to assemble and will have a better build.</p>
<p>If you are limited on time, you can do this activity by writing on pieces of paper or post-its instead of making boxes.</p>
</li> <!-- end of step-->
<li>
<h1>Introduction: Make the Boxes</h1>
<div class="time step-time">15 minutes</div>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/eWXCZNDBl04" frameborder="0" allowfullscreen></iframe></p>
<p>This is a pretty fun but time-intensive thing. Learners first assemble their boxes. Bonus: If time permits, mentor plays <a href="https://thimbleprojects.org/mozillalearning/138866/">HTML Corners</a> using the boxes to signal the stations.</p>
<img src="http://yopdesign.com/images/webmaker/html-puzzle-box-step-01.jpg" width="90%" alt="An image of an uncut HTNL puzzle box sheet on a cutting grid"><br><br>
<img src="http://yopdesign.com/images/webmaker/html-puzzle-box-step-02.jpg" width="90%" alt="An image of a cut HTNL puzzle box sheet next to a glue stick on a cutting grid"><br><br>
</li> <!-- end of step-->
<li>
<h1>HTML Puzzle Box Challenge</h1>
<div class="time step-time">20 minutes</div>
<p>First assemble the tags in the right order in a small group. You can model this build for the whole group. Then have learners or groups take down their boxes and "scramble" them up in front of them. Tell participants that their new goal is to stack the blocks into the correct order for building a webpage. Then let them race to see who can build a webpage the fastest!</p>
<img src="http://yopdesign.com/images/webmaker/html-puzzle-box-game-01.jpg" width="90%" alt="An image of stacked HTML puzzle boxes in the same order you'd find basic tags structuring an empty webpage"><br><br>
<p>This is the right combination of HTML tags structure.</p>
<code>
<html><br>
<head><br>
<title><br>
</title><br>
<style><br>
</style><br>
</head><br>
<body><br>
<p><br>
</p><br>
</body><br>
</html><br>
</code>
</li> <!-- end of step-->
<li>
<h1>Reflection: Review the Tags</h1>
<div class="time step-time">10 minutes</div>
<p>Repeat the <a href="https://thimbleprojects.org/mozillalearning/138866/">HTML Corners</a> game if time permits. You can also just have students shout out what each tag means.</p>
<p><strong>Bonus:</strong> If time permits, show the tags in action by clicking "View Source" or using the <a href="https://goggles.mozilla.org">X-Ray Goggles</a> on a webpage.</p>
<p>Conclude by asking the group to reflect on what they found.</p>
</li> <!-- end of step-->
</ul>
</article>
</div>
</body>
</html>