CourteousCoder · CourteousCoder · Aug 15, 2020 · Nov 30, 2016 · Dec 4, 2016 · Dec 4, 2016
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,70 @@
+h1{
+  font-stretch: ultra-expanded;
+  font-weight: bolder;
+  font-family: cursive;
+  text-align: center;
+  font-size: 36pt;
+  color: darkred;
+}
+h2{
+  font-size: 24pt;
+  text-align: center;
+  font-family: serif;
+}
+p{
+  font-size: 18pt;
+  text-align: justify;;
+  font-family: serif;
+}
+body{
+  background-color: cornflowerblue;
+}
+.content{
+  width:100%;
+  background-color: #eeeeee;
+}
+fieldset{
+  border-style:none;
+}
+.theater {
+  position: relative;
+  background-color: black;
+}
+.stage {
+  height: 40%;
+}
+
+td{
+  width:50%;
+  border-style: none;
+}
+img.hands{
+  max-height: 240px;
+  height: auto
+  width: auto;
+
+  margin:20%;
+  margin-bottom: 0;
+  margin-top: 15%;
+
+}
+.curtainOverlay {
+  position: absolute;
+  top: 0;
+}
+
+img.topcurtain{
+  height: 20%;
+  width: 100%;
+  left: 0;
+}
+img.leftcurtain{
+  height: 100%;
+  width: 20%;
+  left: 0;
+}
+img.rightcurtain{
+  height: 100%;
+  width: 20%;
+  right: 0;
+}
diff --git a/img/_.gif b/img/_.gif
diff --git a/img/a.gif b/img/a.gif
diff --git a/img/b.gif b/img/b.gif
diff --git a/img/c.gif b/img/c.gif
diff --git a/img/d.gif b/img/d.gif
diff --git a/img/e.gif b/img/e.gif
diff --git a/img/f.gif b/img/f.gif
diff --git a/img/g.gif b/img/g.gif
diff --git a/img/h.gif b/img/h.gif
diff --git a/img/i.gif b/img/i.gif
diff --git a/img/j.gif b/img/j.gif
diff --git a/img/k.gif b/img/k.gif
diff --git a/img/l.gif b/img/l.gif
diff --git a/img/leftcurtain.png b/img/leftcurtain.png
diff --git a/img/m.gif b/img/m.gif
diff --git a/img/n.gif b/img/n.gif
diff --git a/img/o.gif b/img/o.gif
diff --git a/img/p.gif b/img/p.gif
diff --git a/img/q.gif b/img/q.gif
diff --git a/img/r.gif b/img/r.gif
diff --git a/img/rightcurtain.png b/img/rightcurtain.png
diff --git a/img/s.gif b/img/s.gif
diff --git a/img/t.gif b/img/t.gif
diff --git a/img/topcurtain.png b/img/topcurtain.png
diff --git a/img/u.gif b/img/u.gif
diff --git a/img/v.gif b/img/v.gif
diff --git a/img/w.gif b/img/w.gif
diff --git a/img/x.gif b/img/x.gif
diff --git a/img/y.gif b/img/y.gif
diff --git a/img/z.gif b/img/z.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Finger-Spell-It</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="js/words.js" charset="utf-8"></script>
+    <script src="js/quiz.js" charset="utf-8"></script>
+  </head>
+  <body>
+    <h1>Finger-Spell-It</h1>
+    <table class="content">
+      <tr>
+        <td>
+          <div class="theater">
+            <div class="stage" id="letterImageStage">
+              <img class="hands" id="letterImage" src="img/_.gif" />
+            </div>
+            <img class="leftcurtain curtainOverlay" src="img/leftcurtain.png">
+            <img class="rightcurtain curtainOverlay" src="img/rightcurtain.png">
+            <img class="topcurtain curtainOverlay" src="img/topcurtain.png">
+          </div>
+        </td>
+        <td>
+          <div>
+          </div>
+          <div class="theater">
+            <div class="stage" id="inputImageStage">
+              <img class="hands" id="inputImage" src="img/_.gif" />
+            </div>
+            <img class="leftcurtain curtainOverlay" src="img/leftcurtain.png">
+            <img class="rightcurtain curtainOverlay" src="img/rightcurtain.png">
+            <img class="topcurtain curtainOverlay" src="img/topcurtain.png">
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <fieldset>
+            <label for="lengthLimit">Word length limit</label>
+            <input type="number" id="lengthLimit" min="3" max="99" value="5" />
+            <button type="button" id="changeLimitButton">Change</button> |
+            <label for="speedcontrol">Speed</label>
+            <span id="speedcontrol">
+              <button type="button" id="slower">-</button>
+              <input type="range" id="speedSlider" />
+              <button type="button" id="faster">+</button>|
+              <label for="autospeed">Auto Speed</label>
+              <input type="checkbox" id="autospeed" value="Auto Speed" checked />
+            </span>
+          </fieldset>
+        </td>
+        <td>
+          <fieldset>
+            <label for="playerInput">Type the word</label>
+            <input type="text" id="playerInput" value="">
+            <button type="button" id="playerSubmitAnswer">Go</button>|
+            <label for="score">Score</label>
+            <output type="number" id="score">0</output>
+          </fieldset>
+        </td>
+      </tr>
+    </table>
+    <h2>Practice fingerspelling in American Sign Language.</h2>
+    <p><strong>Instructions:</strong> A word will be fingerspelled for you on the left-stage.
+      Type the word you see. For each letter that you type, you will see its sign on the right-stage.</p>
+    <p>If you need to see the word again, leave the textbox blank and press the
+       <button type="button" disabled="true">Go</button> button. When you are ready to submit your answer,
+       press the <button type="button" disabled="true">Go</button> button. You may alternatively hit the [ENTER] key
+       instead of pressing the <button type="button" disabled="true">Go</button> button. </p>
+    <p>If you get a word right, your score increases by 1. If you get a word wrong, your score decreases by 1.
+      There is no penalty or reward for replaying a word.</p>
+    <p>You can increase the fingerspelling speed by pressing the <button type="button" disabled="true">+</button> button,
+      or by sliding the speed slider to the right.</p>
+    <p>You can decrease the fingerspelling speed by pressing the <button type="button" disabled="true">-</button> button,
+      or by sliding the speed slider to the left.</p>
+    <p>By default, when you get a word right, the speed will increase automatically
+      and when you get a word wrong, the speed will decrease automatically.
+      This setting can be disabled by unchecking the Auto Save checkbox. </p>
+    <p>By default, you will see words that are 5 letters long or less.
+      This can be changed by typing in a new word length limit and pressing the
+       <button type="button" disabled="true">Change</button> button. Note that the smallest word length is 3 letters. </p>
+
+  </body>
+</html>