-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbackground.html
222 lines (218 loc) · 13.7 KB
/
background.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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!doctype html>
<html lang="en">
<head>
<title>Babbling Binary with Illinois WCS</title>
<meta name="description" content="Learn how binary works with WCS! Part of the WCS Outreach workshop at Sail 2021." />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel='icon' href='assets/favicon.ico' type='image/x-icon' />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="http://www.illinoiswcs.org"><img alt="Illinois WCS MBTI Board"
src="assets/logo.png" height=35></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Converter</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">How does it work?</a>
</li>
</div>
</div>
</nav>
<div class="container">
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1>how does this work?</h1>
<p>learn about the world of binary numbers</p>
</div>
</section>
<div class="card">
<div class="card-body">
<h2 class="card-title">what is binary?</h2>
<p>
In our daily lives, we use base 10 to represent numbers. This means that each digit of a number is
multiplied by a power of ten, and the digits in each place is between 0 and 9. An example is:
</p>
<p>
123 = 1 * 10^2 + 2 * 10^1 + 3 * 10^0 = 100 + 20 + 3 = 123
</p>
<p>
This is a very natural way of representing numbers for us, but this is not how computers represent
numbers! Instead, computers use base 2, so each digit of a number is multiplied by a power of 2
and the digits in each place is either 0 or 1.
An example is:
</p>
<p>
101 = 1 * 2^2 + 0 * 2^1 + 1 * 2^0 = 4 + 0 + 1 = 5
</p>
<p>
Do you notice a pattern in what power of 2 is being used in each place? Hint: if we number the places
from right to left, then the power of 2 that is the place number! Here's an example:
</p>
<p>
Consider the number 123 in base 10 (decimal). Then, the 1 is in the 2nd place, 2 is in the 1st place,
and 3 is in the 0th place. Computer scientists in general like counting from 0!
</p>
<p>
In binary, consider the number 110. Then, the first 1 is in the 2nd place, the second 1 is in the
first place, and the 0 is in the 0th place.
</p>
<p>
Try it out! Consider the number 1010. What digit is in which place?
</p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">first 1</span>
<input type="text" class="form-control" placeholder="" aria-label="first_digit"
aria-describedby="basic-addon1" id="first-input">
<button class="btn btn-outline-secondary" type="button" id="first-check">check!</button>
</div>
<p><output id="first-output"></output></p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">first 0</span>
<input type="text" class="form-control" placeholder="" aria-label="second_digit"
aria-describedby="basic-addon1" id="second-input">
<button class="btn btn-outline-secondary" type="button" id="second-check">check!</button>
</div>
<p><output id="second-output"></output></p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">second 1</span>
<input type="text" class="form-control" placeholder="" aria-label="third_digit"
aria-describedby="basic-addon1" id="third-input">
<button class="btn btn-outline-secondary" type="button" id="third-check">check!</button>
</div>
<p><output id="third-output"></output></p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">second 0</span>
<input type="text" class="form-control" placeholder="" aria-label="fourth_digit"
aria-describedby="basic-addon1" id="fourth-input">
<button class="btn btn-outline-secondary" type="button" id="fourth-check">check!</button>
</div>
<p><output id="fourth-output"></output></p>
<p>
Now that we know how to identify the place numbers of binary numbers, let's try converting a
binary number to decimal! Feel free to use a four-function calculator, but don't use an
binary converter calculator!
</p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">10010010</span>
<input type="text" class="form-control" placeholder="" aria-label="to_decimal"
aria-describedby="basic-addon1" id="btd-input">
<button class="btn btn-outline-secondary" type="button" id="btd-check">check!</button>
</div>
<p><output id="btd-output"></output></p>
<p>
Now, it's time for a challenge! Let's go the other way around. To do this, start from the
largest power of 2 that is less than or equal to your target number (we'll call this x),
subtract from your target, record the place of x and repeat. Here's an example of what to do:
</p>
<p>
Convert the number 11 to binary:
</p>
<p>
The largest power of 2 less than 11 is 8 = 2^3. So we put a 1 in the 3rd place, then subtract 8
from 11. We have 3 left over and our current result is 1 _ _ _, where _s denote numbers we don't
know yet.
</p>
<p>
The largest power of 2 less than 3 is 2 = 2^1. So we put a 1 in the 1st place, then subtract 2
from 3. Since 2^2 = 4 is greater than 3, we put a 0 in the 2nd place. We have 1 left over and our
current result is 1 0 1 _.
</p>
<p>
The largest power of 2 less than or equal to 1 is 1 = 2^0. So, we put a 1 in the 0th place, then
subtract 1 from 1. We have 0 left over (so we're done!) and our final result is 1 0 1 1. You can
double check your work by converting 1010 to decimal, which is 1 * 2^3 + 0 * 2^2 + 1 * 2^1 + 1 *
2^0 = 8 + 2 + 1 = 11.
</p>
<p>
Now it's your turn to try! Try converting the decimal number to binary:
</p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">14</span>
<input type="text" class="form-control" placeholder="" aria-label="to_binary"
aria-describedby="basic-addon1" id="dtb-input">
<button class="btn btn-outline-secondary" type="button" id="dtb-check">check!</button>
</div>
<p><output id="dtb-output"></output></p>
<p>
Awesome job! Now you know what binary is and how to convert to and from decimal. This strategy also
generalizes to other bases (i.e. base 3 or base 16), but we won't go over this
here. As a general rule of thumb, if something is in base-N, then the digits in each place can go
up to N-1, and each digit is multiplied by a power of N.
</p>
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<h2 class="card-title">letters are numbers too?</h2>
<p>
That's right! Our computer also represents letters, which are called "characters" as numbers. Specifically,
there is a conversion method called ASCII. <a href="http://www.asciitable.com/" target=_blank>
http://www.asciitable.com/</a> is a great reference for determining which characters map to which numbers.
Our converter takes the numbers of each of the characters of your message (including space and punctuation)
and converts these numbers into binary. Specifically, we make sure that each character corresponds to 8 digits
of binary by adding leading 0s if needed. That way, our decoder knows which digits correspond to which
characters.
</p>
<p>
Unfortunately, this is also why our encoder doesn't support non-ASCII characters. If we convert the characters
numbers, then try to convert it back, it might give us different characters back. This is because non-ASCII
characters have number codes that are greater than 127, which is the largest number we can represent with 7
bits (each ASCII character is 7 bits).
</p>
<p>
Let's quickly check your understanding of ASCII representations! Feel free to use the ASCII table linked above.
Convert the ASCII character to a numerical representation or the number to an ASCII character:
</p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">67</span>
<input type="text" class="form-control" placeholder="" aria-label="to_ascii"
aria-describedby="basic-addon1" id="nta-input">
<button class="btn btn-outline-secondary" type="button" id="nta-check">check!</button>
</div>
<p><output id="nta-output"></output></p>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">+</span>
<input type="text" class="form-control" placeholder="" aria-label="to_num"
aria-describedby="basic-addon1" id="atn-input">
<button class="btn btn-outline-secondary" type="button" id="atn-check">check!</button>
</div>
<p><output id="atn-output"></output></p>
<p>
Awesome job! Now that you know how to convert letters to numbers and numbers to binary, you can
put it all together to encode your message by hand. It's a pretty tedious process though, so I'd suggest
using the converter instead.
</p>
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<h2 class="card-title">got questions?</h2>
<p>
With this information, you should be able to encode and decode your own mesasges by hand! If you have any
questions or suggestions on improving this activity, please don't be afraid to reach out to the Illinois WCS
officer board at <a href="mailto:[email protected]">[email protected]</a>. Please include
"Babbling Binary Website" somewhere in your subject line!
</p>
</div>
</div>
<br>
</main>
</div>
<script src="background.js"></script>
</body>