Daniel Sinn
24733e178c
On my screen, white on light isn't great, and I don't think wire colour indicators really benefit from the gradient.
353 lines
16 KiB
HTML
Executable File
353 lines
16 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Keep Talking and Nobody Explodes</title>
|
|
<link rel="stylesheet" type="text/css" href="ktane.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Keep Talking and Nobody Explodes</h1>
|
|
|
|
<section id="sectionWires">
|
|
<h2>Wires</h2>
|
|
|
|
<ul id="wireOptions">
|
|
<li><button class="button red" data-colour="red"></button></li>
|
|
<li><button class="button yellow" data-colour="yellow"></button></li>
|
|
<li><button class="button blue" data-colour="blue"></button></li>
|
|
<li><button class="button white" data-colour="white"></button></li>
|
|
<li><button class="button black" data-colour="black"></button></li>
|
|
</ul>
|
|
|
|
<ul id="wireList"></ul>
|
|
</section>
|
|
|
|
<section id="sectionButton">
|
|
<h2>Button</h2>
|
|
<div>
|
|
Colour:
|
|
<input type="radio" name="buttonColour" value="blue" id="buttonColourBlue" checked /> <label for="buttonColourBlue" class="button blue">Blue</label>
|
|
<input type="radio" name="buttonColour" value="white" id="buttonColourWhite" /> <label for="buttonColourWhite" class="button white">White</label>
|
|
<input type="radio" name="buttonColour" value="yellow" id="buttonColourYellow" /> <label for="buttonColourYellow" class="button yellow">Yellow</label>
|
|
<input type="radio" name="buttonColour" value="red" id="buttonColourRed" /> <label for="buttonColourRed" class="button red">Red</label>
|
|
</div>
|
|
<div>
|
|
Text:
|
|
<input type="radio" name="buttonText" value="Abort" id="buttonTextAbort" checked /> <label for="buttonTextAbort">Abort</label>
|
|
<input type="radio" name="buttonText" value="Detonate" id="buttonTextDetonate" /> <label for="buttonTextDetonate">Detonate</label>
|
|
<input type="radio" name="buttonText" value="Hold" id="buttonTextHold" /> <label for="buttonTextHold">Hold</label>
|
|
<input type="radio" name="buttonText" value="Press" id="buttonTextPress" /> <label for="buttonTextPress">Press</label>
|
|
</div>
|
|
<div id="buttonInstruction"></div>
|
|
<div>
|
|
If holding the button and the strip colour is
|
|
<ul>
|
|
<li><span class="button blue">Blue</span>: release when timer has a <strong>4</strong> in any position.</li>
|
|
<li><span class="button yellow">Yellow</span>: release when timer has a <strong>5</strong> in any position.</li>
|
|
<li>Other: release when timer has a <strong>1</strong> in any position.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sectionSimon">
|
|
<h2>Simon Says</h2>
|
|
|
|
<div id="simonInputs">
|
|
<input type="checkbox" id="simonVowel" /> <label for="simonVowel">Vowel</label>
|
|
|
|
<ul>
|
|
<li>
|
|
<input type="radio" name="simonStrikes" value="0" id="simonStrikes0" checked />
|
|
<label for="simonStrikes0">0 strikes</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="simonStrikes" value="1" id="simonStrikes1" />
|
|
<label for="simonStrikes1">1 strike</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="simonStrikes" value="2" id="simonStrikes2" />
|
|
<label for="simonStrikes2">2 strikes</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="simonBoard">
|
|
<div class="simonRow">
|
|
<div class="simonBlue"> </div><div class="simonYellow"> </div>
|
|
</div>
|
|
<div class="simonRow">
|
|
<div class="simonRed"> </div><div class="simonGreen"> </div>
|
|
</div>
|
|
<div class="arrow" id="arrowRB"></div>
|
|
<div class="arrow" id="arrowBR"></div>
|
|
<div class="arrow" id="arrowBY"></div>
|
|
<div class="arrow" id="arrowYB"></div>
|
|
<div class="arrow" id="arrowYG"></div>
|
|
<div class="arrow" id="arrowGY"></div>
|
|
<div class="arrow" id="arrowGR"></div>
|
|
<div class="arrow" id="arrowRG"></div>
|
|
<div class="arrow" id="arrowRY"></div>
|
|
<div class="arrow" id="arrowYR"></div>
|
|
<div class="arrow" id="arrowBG"></div>
|
|
<div class="arrow" id="arrowGB"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sectionDisplay">
|
|
<h2>Who's on First</h2>
|
|
|
|
<dl id="displayList">
|
|
<dt> </dt> <dd>bottom-left</dd>
|
|
<dt>BLANK</dt> <dd>middle-right</dd>
|
|
<dt>C</dt> <dd>top-right</dd>
|
|
<dt>CEE</dt> <dd>bottom-right</dd>
|
|
<dt>DISPLAY</dt> <dd>bottom-right</dd>
|
|
<dt>FIRST</dt> <dd>top-right</dd>
|
|
<dt>HOLD ON</dt> <dd>bottom-right</dd>
|
|
<dt>LEAD</dt> <dd>bottom-right</dd>
|
|
<dt>LED</dt> <dd>middle-left</dd>
|
|
<dt>LEED</dt> <dd>bottom-left</dd>
|
|
<dt>NO</dt> <dd>bottom-right</dd>
|
|
<dt>NOTHING</dt> <dd>middle-left</dd>
|
|
<dt>OKAY</dt> <dd>top-right</dd>
|
|
<dt>READ</dt> <dd>middle-right</dd>
|
|
<dt>RED</dt> <dd>middle-right</dd>
|
|
<dt>REED</dt> <dd>bottom-left</dd>
|
|
<dt>SAYS</dt> <dd>bottom-right</dd>
|
|
<dt>SEE</dt> <dd>bottom-right</dd>
|
|
<dt>U</dt> <dd>top-left</dd>
|
|
<dt>UR</dt> <dd>top-left</dd>
|
|
<dt>THEIR</dt> <dd>middle-right</dd>
|
|
<dt>THERE</dt> <dd>bottom-right</dd>
|
|
<dt>THEY ARE</dt> <dd>middle-left</dd>
|
|
<dt>THEY'RE</dt> <dd>bottom-left</dd>
|
|
<dt>YES</dt> <dd>middle-left</dd>
|
|
<dt>YOU</dt> <dd>middle-right</dd>
|
|
<dt>YOU ARE</dt> <dd>bottom-right</dd>
|
|
<dt>YOUR</dt> <dd>middle-right</dd>
|
|
<dt>YOU'RE</dt> <dd>middle-right</dd>
|
|
</dl>
|
|
|
|
<table id="displayTable">
|
|
<tr>
|
|
<th>"BLANK":</th>
|
|
<td>WAIT, RIGHT, OKAY, MIDDLE, BLANK</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"DONE":</th>
|
|
<td>SURE, UH HUH, NEXT, WHAT?, YOUR, UR, YOU'RE, HOLD, LIKE, YOU, U, YOU ARE, UH UH, DONE</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"FIRST":</th>
|
|
<td>LEFT, OKAY, YES, MIDDLE, NO, RIGHT, NOTHING, UHHH, WAIT, READY, BLANK, WHAT, PRESS, FIRST</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"HOLD":</th>
|
|
<td>YOU ARE, U, DONE, UH UH, YOU, UR, SURE, WHAT?, YOU'RE, NEXT, HOLD</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"LEFT":</th>
|
|
<td>RIGHT, LEFT</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"LIKE":</th>
|
|
<td>YOU'RE, NEXT, U, UR, HOLD, DONE, UH UH, WHAT?, UH HUH, YOU, LIKE</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"MIDDLE":</th>
|
|
<td>BLANK, READY, OKAY, WHAT, NOTHING, PRESS, NO, WAIT, LEFT, MIDDLE</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"NEXT":</th>
|
|
<td>WHAT?, UH HUH, UH UH, YOUR, HOLD, SURE, NEXT</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"NO":</th>
|
|
<td>BLANK, UHHH, WAIT, FIRST, WHAT, READY, RIGHT, YES, NOTHING, LEFT, PRESS, OKAY, NO</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"NOTHING":</th>
|
|
<td>UHHH, RIGHT, OKAY, MIDDLE, YES, BLANK, NO, PRESS, LEFT, WHAT, WAIT, FIRST, NOTHING</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"OKAY":</th>
|
|
<td>MIDDLE, NO, FIRST, YES, UHHH, NOTHING, WAIT, OKAY</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"PRESS":</th>
|
|
<td>RIGHT, MIDDLE, YES, READY, PRESS</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"READY":</th>
|
|
<td>YES, OKAY, WHAT, MIDDLE, LEFT, PRESS, RIGHT, BLANK, READY</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"RIGHT":</th>
|
|
<td>YES, NOTHING, READY, PRESS, NO, WAIT, WHAT, RIGHT</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"SURE":</th>
|
|
<td>YOU ARE, DONE, LIKE, YOU'RE, YOU, HOLD, UH HUH, UR, SURE</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"U":</th>
|
|
<td>UH HUH, SURE, NEXT, WHAT?, YOU'RE, UR, UH UH, DONE, U</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"UH HUH":</th>
|
|
<td>UH HUH</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"UH UH":</th>
|
|
<td>UR, U, YOU ARE, YOU'RE, NEXT, UH UH</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"UHHH":</th>
|
|
<td>READY, NOTHING, LEFT, WHAT, OKAY, YES, RIGHT, NO, PRESS, BLANK, UHHH</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"UR":</th>
|
|
<td>DONE, U, UR</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"WAIT":</th>
|
|
<td>UHHH, NO, BLANK, OKAY, YES, LEFT, FIRST, PRESS, WHAT, WAIT</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"WHAT":</th>
|
|
<td>UHHH, WHAT</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"WHAT?":</th>
|
|
<td>YOU, HOLD, YOU'RE, YOUR, U, DONE, UH UH, LIKE, YOU ARE, UH HUH, UR, NEXT, WHAT?</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"YES":</th>
|
|
<td>OKAY, RIGHT, UHHH, MIDDLE, FIRST, WHAT, PRESS, READY, NOTHING, YES</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"YOU ARE":</th>
|
|
<td>YOUR, NEXT, LIKE, UH HUH, WHAT?, DONE, UH UH, HOLD, YOU, U, YOU'RE, SURE, UR</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"YOU":</th>
|
|
<td>SURE, YOU ARE, YOUR, YOU'RE, NEXT, UH HUH, UR, HOLD, WHAT?, YOU</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"YOU'RE":</th>
|
|
<td>YOU, YOU'RE</td>
|
|
</tr>
|
|
<tr>
|
|
<th>"YOUR":</th>
|
|
<td>UH UH, YOU ARE, UH HUH, YOUR</td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<section id="sectionMemory">
|
|
<h2>Memory</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Stage</th>
|
|
<th>Display</th>
|
|
<th>Pos.</th>
|
|
<th>Label</th>
|
|
</tr>
|
|
<tr>
|
|
<td>1</td>
|
|
<td><input type="text" maxlength="1" id="stage_1_display" data-index="1"></td>
|
|
<td><input type="text" maxlength="1" id="stage_1_pos" /></td>
|
|
<td><input type="text" maxlength="1" id="stage_1_label" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td><input type="text" maxlength="1" id="stage_2_display" data-index="2"></td>
|
|
<td><input type="text" maxlength="1" id="stage_2_pos" /></td>
|
|
<td><input type="text" maxlength="1" id="stage_2_label" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td><input type="text" maxlength="1" id="stage_3_display" data-index="3"></td>
|
|
<td><input type="text" maxlength="1" id="stage_3_pos" /></td>
|
|
<td><input type="text" maxlength="1" id="stage_3_label" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td><input type="text" maxlength="1" id="stage_4_display" data-index="4"></td>
|
|
<td><input type="text" maxlength="1" id="stage_4_pos" /></td>
|
|
<td><input type="text" maxlength="1" id="stage_4_label" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td><input type="text" maxlength="1" id="stage_5_display" data-index="5"></td>
|
|
<td><input type="text" maxlength="1" id="stage_5_pos" /></td>
|
|
<td><input type="text" maxlength="1" id="stage_5_label" /></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<button class="jsResetSection">Reset</button>
|
|
</section>
|
|
|
|
<section id="sectionMorse">
|
|
<h2>Morse</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Word</th>
|
|
<th>Freq</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="morseTable"></tbody>
|
|
</table>
|
|
|
|
<textarea id="morseInput" rows="7" cols="40"></textarea>
|
|
</section>
|
|
|
|
<section id="sectionSequence">
|
|
<h2>Wire Sequence</h2>
|
|
<ul id="sequenceOptions">
|
|
<li><button class="button red" data-colour="red" data-letter="A">A</button></li>
|
|
<li><button class="button blue" data-colour="blue" data-letter="A">A</button></li>
|
|
<li><button class="button black" data-colour="black" data-letter="A">A</button></li>
|
|
<li><button class="button red" data-colour="red" data-letter="B">B</button></li>
|
|
<li><button class="button blue" data-colour="blue" data-letter="B">B</button></li>
|
|
<li><button class="button black" data-colour="black" data-letter="B">B</button></li>
|
|
<li><button class="button red" data-colour="red" data-letter="C">C</button></li>
|
|
<li><button class="button blue" data-colour="blue" data-letter="C">C</button></li>
|
|
<li><button class="button black" data-colour="black" data-letter="C">C</button></li>
|
|
</ul>
|
|
<ul id="sequenceInstruction"></ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Venn Diagram</h2>
|
|
<ul id="vennOptions">
|
|
<li><input type="checkbox" id="vennRed" /> <label for="vennRed">Red</label></li>
|
|
<li><input type="checkbox" id="vennBlue" /> <label for="vennBlue">Blue</label></li>
|
|
<li><input type="checkbox" id="vennStar" /> <label for="vennStar">Star</label></li>
|
|
<li><input type="checkbox" id="vennLed" /> <label for="vennLed">LED</label></li>
|
|
</ul>
|
|
<div id="vennInstruction"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Passwords</h2>
|
|
<table id="passwords"></table>
|
|
<ul id="passwordOptions">
|
|
<li><input type="text" /></li>
|
|
<li><input type="text" /></li>
|
|
<li><input type="text" /></li>
|
|
<li><input type="text" /></li>
|
|
<li><input type="text" /></li>
|
|
</ul>
|
|
<button class="jsResetSection">Reset</button>
|
|
</section>
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="ktane.js"></script>
|
|
</body>
|
|
</html>
|