-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbook.html
298 lines (263 loc) · 11.9 KB
/
book.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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hangman</title>
<style type="text/css">
body {
font-family: "Times New Roman", serif;
font-size: 10pt;
line-height: 1.2;
}
h1 {
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
}
p {
margin: 0 0 10px;
}
table {
width: 100%;
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
th, td {
padding: 5px;
vertical-align: top;
text-align: left;
border-bottom: 1px solid #ccc;
}
thead th {
border-bottom: 2px solid black;
}
table table td {
border-bottom: none;
}
.section {
margin-bottom: 2em;
}
.section thead th {
padding: 0 !important;
}
.section th table {
width: 100%;
}
.section-id {
background: black !important;
width: 6em;
padding: 0;
vertical-align: middle;
}
.section-id h2 {
margin: 0;
padding: 0px;
font-size: 22px;
text-align: center;
vertical-align: middle;
}
.section-id a {
color: white !important;
width: 20%;
}
.section-pattern {
padding-left: 10px;
font-size: 22px;
font-weight: bold;
}
.section-pattern img {
height: 32px;
width: 32px;
padding-right: 10px;
vertical-align: middle;
}
.guess {
padding-bottom: 1.5em;
}
.section-body th {
width: 12%;
white-space: nowrap;
}
.section-body td {
width: 21%;
}
.chapter {
margin-bottom: 2em;
}
@media screen {
padding: 2em;
}
.guess-text {
font-style: italic;
}
.pattern-text {
font-family: monospace;
letter-spacing: 0.2em;
vertical-align: bottom;
}
.title, .pubnotes {
text-align: center;
}
.title h1 {
padding-top: 2em;
font-size: 48pt;
}
.title h2 {
margin: 0;
padding: 0;
}
@media print {
@page {
size: 6in 9in;
padding: 0;
margin: 0.25in;
}
@page :left {
margin-right: 0.875in;
}
@page :right {
margin-left: 0.875in;
}
a {
text-decoration: none;
color: inherit;
}
body {
margin: 0;
padding: 0;
}
.section {
page-break-inside: avoid;
}
table tr td.section-id {
background: black !important;
}
.section-id a {
color: white !important;
}
.chapter {
page-break-after: always;
}
* {
-webkit-print-color-adjust: exact;
}
}
</style>
</head>
<body>
<div class="chapter title">
<h1>Dead Tree</h1>
<h2>Nick Johnson</h2>
<h2>Perry Lorier</h2>
</div>
<div class="chapter pubnotes">
<p>This edition printed in 2015.</p>
<p>A candlepower algorithm publication.</p>
<p>Copyright 2015, Nick Johnson & Perry Lorier.</p>
<p>This work is licensed under a Creative Commons Attribution [4.0] license. For more details, see http://creativecommons.org/licenses/by/4.0/. Source materials can be found at https://github.com/arachnidlabs/hangman/.</p>
<p>This work contains content from the Google Books n-grams corpus, which is Copyright 2012, Google, and licensed under the Creative Commons Attribution 3.0 Unported License.</p>
<p>ISBN: 978-1519708892</p>
<p>Cover Illustration: Shweta Mahajan</p>
<p>Cover Design: Chanu Creation</p>
</div>
<div class="chapter">
<h1>How to use this book</h1>
<p>This book plays Hangman with you. It knows over 6,000 english words - 6,872 to be exact - and will attempt to guess the word you're thinking of, the same as in a regular game of Hangman.</p>
<p>To use this book, you need to follow a simple procedure. In effect, your brain is a computer, and this book is the program. It's very simple to do, and we'll show you how.</p>
<p>Start by thinking of a noun. It may help to take a piece of paper and draw a series of lines, one for each letter, just as you would in regular Hangman. For instance, if you word is 'flame', you would write 5 dashes - <span class="pattern-text">_____</span>.</p>
<p>The first thing you need to tell the book is how many letters are in your word. If your word contains an apostrophe, count that, too. Turning to the page titled "Start here", look down the table until you find the number of letters in your word. Turn to the section listed on the right side of the table.</p>
<p>Each section starts with the letter the book is guessing. If the book guessed a letter that is in your word, fill in that letter on your piece of paper in all the places it belongs.</p>
<p>Next, look at the table in your section. Each entry in the table shows one possible outcome of the book's guess. Compare the entries in the table to your piece of paper. If you see a matching entry, follow the instructions on the right; usually this means turning to another section and repeating the process for another letter; sometimes the book will outright guess your whole word. If the book guesses your word, it wins!</p>
<p>If the book guessed a letter that's not in your word, turn to the section listed at the beginning of the table. For example, if the book guessed "e", turn to the section labelled "no 'e'" in the table.</p>
<p>If the table doesn't contain the entry you need, or the book guesses wrong, turn to section <b><a href="#{{sections|length + 1}}">§{{sections|length + 1}}</a></b>.</p>
</div>
<div class="chapter">
<h1>How this book was written</h1>
<p>If you'd just like to play Hangman, feel free to skip this section. If you'd like to know how a book like this gets constructed, read on.</p>
<p>This book was written largely by a computer, following an algorithm of its own. Rather than telling it how to play one game of Hangman, this algorithm told it how to make a book that plays Hangman - a program that makes other programs. This isn't as complicated as it might first seem.</p>
<p>First, we need a list of words that people might guess in a game of hangman. Google has produced a very large list of words (and pairs of words, and triples of words, and so forth) from the results of scanning a very large number of books, and they've helpfully categorised them by when the book was published. Language changes over time, and someone from 1820 would probably pick different words than someone today, so this is particularly helpful.</p>
<p>So, the first step is to filter the list down to words we think people are likely to guess. For this book, we've taken words only from books published since 1980. Since people mostly think of nouns - someone's more likely to make you guess "elephant" than "contrariness" - and we want the best odds possible, we've tried to only include nouns, too, though the odd verb, adjective or adverb does slip in here and there.</p>
<p>Next, we need to figure out what to guess. If you've looked through the book, you'll notice that each section points to a number of follow-on sections, and they always go forwards; you never have to turn to an earlier page. This type of structure is called a tree in computer science, because of the way it branches out. The most common way to build a tree - and the approach we use here - is called recursion.</p>
<p>Recursion is the process of breaking up a big task into smaller parts, and then breaking those parts up into still smaller ones, and so forth. For example, think of the way mail for a large city is handled: the central post office sends mail to regional post offices. They break it down further for individual postmen. When you get mail, you sort it one final time to hand it to the person it's addressed to. Each step in the process performs a small part of the work of getting the whole job done. Recursion works in a similar way.</p>
<p>When building this book, the big task is "guess any of these ten thousand words". The small individual tasks we want to break it down into are guessing individual letters. Here's how we go about breaking the big task up into the smaller tasks.</p>
<p>First, start with the entire dictionary, all 6,000 plus words. Figure out which letter appears in the most words; usually that's e, t, or a. Let's assume it was 'e'.</p>
<p>Next, take each word and pick out just the 'e's to make a pattern. So, <span class="guess-text">eel</span> becomes <span class="pattern-text">ee_</span>, and <span class="guess-text">flame</span> becomes <span class="pattern-text">____e</span>. If the word doesn't contain any 'e's, the pattern is all blanks - so <span class="guess-text">cabin</span> is <span class="pattern-text">_____</span>. Group each word by the pattern it makes, so both <span class="guess-text">smile</span> and <span class="guess-text">flame</span> are grouped under <span class="pattern-text">____e</span>.</p>
<p>Now we've got enough information to build section 1: we know what letter to guess, and we know the groups that the words in our dictionary form, which make up the entries in the table.</p>
<p>To generate the next set of sections, we use recursion: we take each group of words we identified in the previous step, and repeat the whole process all over again: pick a letter to guess, and group the words again based on that letter. This process repeats over and over for each group, sub-group, sub-sub-group, and so on, until we've processed the entire set of words into sections. Print and bind it into a book, and you're done!</p>
<p>If you'd like to experiment with this yourself, the source code and word lists we used to generate this book are available online, at https://github.com/arachnidlabs/hangman/. Enjoy!</p>
</div>
<div class="chapter">
<h1>Start here</h1>
<p>To start, how long is your word?</p>
<table>
<tr><th>If your word has...</th><th>go to section</th></tr>
{% for l, idx in lengths %}
<tr><td>{{l}} letters</td><td><a href="#{{idx}}">§{{idx}}</a></td></tr>
{% endfor %}
</table>
</div>
<div class="chapter">
{% for section in sections %}
{% if section.pattern|length > 12 or section.entries|length == 1 %}
{% set columns = 1 %}
{% elif section.pattern|length > 7 or section.entries|length < 3 %}
{% set columns = 2 %}
{% else %}
{% set columns = 3 %}
{% endif %}
<table class="section">
<thead><tr><th colspan="{{columns*2}}">
<table><tr>
<td class="section-id"><h2><a name="{{section.id}}">{{section.id}}</a></h2></td>
<td class="section-pattern"> <img src="http://www.arachnidlabs.com/hangman/hangman{{section.wrong}}.svg" type="image/svg+xml">
<span class="pattern-text">{{section.pattern}}</span></td>
</tr></table>
</th></tr></thead>
<tbody class="section-body">
<tr><td class="guess" colspan="{{columns*2}}">I guess <span class="pattern-text">{{section.guess}}</span>.</td></tr>
{% for row in section.entries|batch(columns, '') %}
<tr>
{% for entry in row %}
{% if entry %}
<th>
{% if entry.pattern != section.pattern %}
<span class="pattern-text">{{entry.pattern}}</span>
{% else %}
No '{{section.guess}}'
{% endif %}
</th>
{% if entry.pattern and '_' not in entry.pattern %}
<td>I win!</td>
{% elif entry.is_leaf %}
{% if entry.value %}
<td>I guess <span class="guess-text">{{entry.value}}</span>!</td>
{% else %}
<td>go to <b><a href="#{{sections|length + 1}}">§{{sections|length + 1}}</a></b></td>
{% endif %}
{% else %}
<td>go to <b><a href="#{{entry.value}}">§{{entry.value}}</a></b></td>
{% endif %}
{% else %}
<th></th><td></td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
<table class="section">
<thead><tr><th>
<table><tr>
<td class="section-id"><h2><a name="{{sections|length + 1}}">{{sections|length + 1}}</a></h2></td>
<td class="section-pattern"></td>
</tr></table>
</th></tr></thead>
<tbody class="section-body">
<tr><td class="guess" style="text-align: center;"><img src="http://www.arachnidlabs.com/hangman/hangman6.svg" style="width: 3in;" type="image/svg+xml"><br><b>You win!</b></td></tr>
</tbody>
</table>
</div>
</body>
</html>