/
tiger.html
183 lines (176 loc) · 6.03 KB
/
tiger.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/craig-util.js"></script>
<script src="js/craig-parse.js"></script>
<script src="js/tiger.js"></script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title>Tigers and Treasure</title>
</head>
<style>
ul {
padding-left: 40px;
list-style-type: none;
}
li {
padding-bottom: 10px;
}
table, tr {
padding: 4px;
text-align: center;
border: 1px solid black;
border-collapse: collapse;
margin: auto;
}
th, td {
padding: 10px;
}
.buttonDiv {
display: inline-block;
padding: 2px;
border: 2px;
}
.centered {
text-align: center;
}
.prop-column {
font-size:large;
}
.main-column {
background-color:white;
}
</style>
<script>
let tigerData = [];
let puzzle = null;
//load data
$(document).ready(function(){
console.log("about to fetch remote data");
$.getJSON("data/tiger.json", function(data){
tigerData = data;
}).done(function() {
initialize();
set();
});
});
//initialize display
$(document).ready(function(){
$("#resetButton").on("click", function(){
reset();
});
$("#solve").on("click", function(event){
if (display.disabled) return;
$("#reset").addClass("btn-success");
solvePuzzle();
});
display.puzzleIntro = document.getElementById("puzzleIntro");
display.solutionDisplay = document.getElementById("solutionDisplay");
display.puzzleDescription = document.getElementById("puzzleDescription");
display.doorDisplay = document.getElementById("doorDisplay");
display.puzzleTitle = document.getElementById("puzzleTitle");
display.latexDisplay = document.getElementById("latexDisplay");
});
function initialize(){
tiger.puzzles = tigerData;
}
function set(){
puzzleReset(window.location.href);
MathJax.Hub.Typeset();
}
function reset() {
puzzleReset();
MathJax.Hub.Typeset();
};
</script>
<body>
<nav class="navbar navbar-default" style="margin-bottom:0px">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="..">
<img src="imgs/github_badge1.png" style="max-width:100%;max-height:100%" >
</a>
<p class="navbar-text navbar-right">
<a href=".." class="navbar-link">dmackinnon1.github.io</a>
</p>
</div>
</div>
</nav>
<div class="container-fluid">
<div class='row'>
<div class='col-sm-1 col-lg-3'></div>
<div class='col-sm-10 col-lg-6 main-column'>
<div class="page-header">
<h1>Tiger or Treasure?</h1>
</div>
<p class='puzzle-text'>
Some logic puzzles based on those found in <em> "The Lady or the Tiger?" </em> by Raymond Smullyan.
</p>
<button type='button'
class='btn btn-info' data-toggle='collapse' data-target='#mainText'>
About </button>
<div id='mainText' class='collapse'>
<p class='puzzle-text'>
<br>
Raymond Smullyan's book of puzzles "The Lady or The Tiger?" included a set of logic puzzles that
imagined a kingdom where prisoners were offered a choice between two doors.
The doors had inscriptions which provided clues to the contents of the rooms beyond: a lady or a tiger. If the prisoner chose a room with a tiger, they would be devoured, if they chose a room with the lady, they would be free and able to marry the lady.
<br>
<br>
We imagine that the women involved in this unfortunate situation have freed themselves and moved
into their own castle, taking the tigers with them. Travelers who stay at the castle repay
their hosts by cleaning one of two rooms. Each room either contains treasure, from which the kind hosts allow a guest to take a token to remember their stay, or one of
the rescued tigers, which are sometimes unchained and always messy. It may turn out that both rooms contain treasure, both contain tigers, or one contains treasure while the other contains a tiger.
<br>
<br>
In this puzzle, you are a traveller who is staying at the castle. Use the inscriptions on the doors to decide whether each leads to treasure or a tiger; or you may find that the contents cannot be determened from the inscriptions. An additional twist: if the fist door leads to treasure, its inscription is true, but if it leads to a tiger, its inscription is false; if the second door leads to treasure its inscription is false, but if it leads to a tiger its inscription is true.
</div>
<hr>
<h2 id="puzzleTitle"></h2>
<div id="puzzleIntro" class='puzzle-text'></div>
<div id="puzzleDescription" class='puzzle-text'></div>
<hr>
<div id="doorDisplay"></div>
<br>
<button type='button'
class='btn btn-info' data-toggle='collapse' data-target='#latexDisplayHolder'>
Show Propositions </button>
<div id='latexDisplayHolder' class='collapse'>
<br>
<p><em>The inscriptions on the doors can be translated into logical formulae - if you are familiar with the notation, this might help you find out what is behind the doors.
Here "D1" means that door 1 has treasure, and "D2" means that door 2 has treasure.
A negation of these statements means that room has a tiger.
</em></p>
<div id='latexDisplay'></div>
</div>
<br>
<br>
<div id="soveButton">
<button type="button" id="solve" class="btn btn-primary typeButton">Solve</span></button>
</div>
<br>
<div id="solutionDisplay" class="puzzle-text"></div>
<hr>
<div id="resetButtonHolder">
<button type="button" id="resetButton", class="btn btn-primary typeButton">New Puzzle</span></button>
</div>
<br>
<div class='centered'>
<img src="imgs/tiger.png" style="max-width:100%;max-height:100%" >
<br>
<p> <em>Illustration from <br><a href='https://books.google.ca/books?id=HvJaAAAAMAAJ'>The Jungle Book</a> by Rudyard Kipling<br>Centrury Company (1920).</em></p>
<br>
</div>
<br>
</div>
<div class='col-sm-1 col-lg-3'></div>
</div>
</div>
</body>
</html>