-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (172 loc) · 5.51 KB
/
index.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
<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/puzzle-utils.js"></script>
<script src="js/sentries.js"></script>
<title>Fickle Sentries</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 puzzleData = [];
let puzzle = null;
//load data
$(document).ready(function(){
console.log("about to fetch remote data");
$.getJSON("data/fickle.json", function(data){
puzzleData = data;
}).done(function() {
initialize();
set();
});
});
//associated display elements
$(document).ready(function(){
$("#resetButton").on("click", function(){
reset();
});
$("#solve").on("click", function(event){
if (display.disabled) return;
$("#reset").addClass("btn-success");
solvePuzzle();
});
$("#explain").on("click", function(event){
$("#reset").addClass("btn-success");
display.disabled = true;
explainPuzzle();
});
display.puzzleIntro = document.getElementById("puzzleIntro");
display.solutionDisplay = document.getElementById("solutionDisplay");
display.puzzleDescription = document.getElementById("puzzleDescription");
display.treasureDisplay = document.getElementById("treasureDisplay");
display.puzzleTitle = document.getElementById("puzzleTitle");
display.explanationDisplay = document.getElementById("explanationDisplay");
});
function initialize(){
sentries.puzzles = puzzleData;
}
function set(){
puzzleReset(window.location.href);
}
function reset() {
puzzleReset();
};
</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>Fickle Sentries</h1>
</div>
<p class='puzzle-text'>
<em>Some logic puzzles inspired by those of Raymond Smullyan.</em>
</p>
<button type='button'
class='btn btn-info' data-toggle='collapse' data-target='#mainText'>
About </button>
<div id='mainText' class='collapse'> <br>
<p class='puzzle-text'>
Based on the text below, make your selection by clicking next to the
treasure type you expect to find in the cave. Click the <strong>Solve</strong>
button to confirm your selection. If you are stumped, use the <strong>Reveal Explanation
</strong> button (once this is clicked, you can no longer submit a solution).
</p>
</div>
<hr>
<h2 id="puzzleTitle"></h2>
<div class='puzzle-text'>
<p>
Two guards are standing outside the entrance to a cave, guarding the treasure within. The treasure is one of copper, silver, gold, platinum, diamonds, or rubies. <br><br><strong>Guard 1</strong> lies when guarding <strong> copper</strong>, <strong>silver</strong>, or <strong>gold</strong> and tells the truth when guarding other treasure. <strong>Guard 2</strong>, on the other hand, lies when guarding <strong>platinum</strong>, <strong>diamonds</strong>, or <strong>rubies</strong>, but tells the truth when guarding other treasure.<br><br> In this land, copper is worth less than silver, which is worth less than gold, which is worth less than platinum, which is worth less than diamonds, which is worth less than rubies.
</p>
<p>
You meet the guards at the entrance to the treasure cave, and they make these statements:
</p>
</div>
<div id="puzzleIntro" class='puzzle-text'></div>
<div class='puzzle-text'>
If you determine the contents of the cave, the guards will let you pass and you can claim the treasure.
</div>
<hr>
<div id="treasureDisplay"></div>
<br>
<div id="explainButton">
<button type="button" id="explain" class="btn btn-primary typeButton">Reveal Explanation</span></button>
</div>
<div id="explanationDisplay" class="puzzle-text"></div>
<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/ares.png" style="max-width:106px;max-height:234px" >
<br>
<p> <em>Illustration from <a href='https://en.wikipedia.org/wiki/Sarah_Amelia_Scull'>Sarah Amelia Scull,</a><br> "Greek Mythology Systematized" (1880).</em></p>
<br>
</div>
<!-- Illustration credit:
Sarah Amelia Scull, "Greek Mythology Systematized" (p. 140)
Porter & Coates, 1880
https://en.wikipedia.org/wiki/Sarah_Amelia_Scull
-->
<div class='col-sm-1 col-lg-3'></div>
</div>
</div>
</div>
</body>
</html>