summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrian Cully <bjc@kublai.com>2014-05-21 21:30:44 -0400
committerBrian Cully <bjc@kublai.com>2014-05-21 21:30:44 -0400
commit6ff5b510ea4fda8e0744cc8c0f37c59b0ccf78e2 (patch)
tree18a3d033652be1a1293103bb1f7508ab8ac2bd77
downloadmult-master.tar.gz
mult-master.zip
Initial commit.HEADmaster
-rw-r--r--base.css58
-rw-r--r--index.html41
-rw-r--r--mult.js65
-rw-r--r--narrow.css67
-rw-r--r--wide.css20
5 files changed, 251 insertions, 0 deletions
diff --git a/base.css b/base.css
new file mode 100644
index 0000000..c21f456
--- /dev/null
+++ b/base.css
@@ -0,0 +1,58 @@
+body {
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+}
+
+form {
+ display: table;
+ border: 1px solid #bf9730;
+ border-radius: 10px;
+ background-color: #ffd873;
+ box-shadow: 0 5px 5px #888;
+}
+
+#op1, #op2 {
+ display: inline-block;
+ width: 1.5em;
+ text-align: center;
+}
+
+#answer {
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ margin-left: 0.5em;
+}
+
+#submit {
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ border: 1px outset #63add0;
+ border-radius: 8px;
+ color: white;
+
+ background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
+}
+
+#submit:hover {
+ background: linear-gradient(to bottom, rgba(122,188,255,1) 37%,rgba(96,171,248,1) 82%,rgba(64,150,238,1) 100%); /* W3C */
+}
+
+#submit:active {
+ border-style: inset;
+ background: linear-gradient(to bottom, rgba(64,150,238,1) 0%,rgba(96,171,248,1) 56%,rgba(122,188,255,1) 100%); /* W3C */
+}
+
+#is-correct {
+ text-align: center;
+}
+
+#correct {
+ display: none;
+ color: green;
+}
+
+#incorrect {
+ display: none;
+ color: red;
+}
+
+#timer {
+ display: none;
+} \ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6f72b66
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Multiplication Flash Cards</title>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="width=device-width">
+ <link rel="stylesheet" type="text/css" href="base.css">
+ <link rel="stylesheet" type="text/css" href="narrow.css"
+ media="screen and (min-device-width: 320px) and (max-device-width: 568px)">
+ <link rel="stylesheet" type="text/css" href="wide.css"
+ media="screen and (min-device-width: 569px)">
+ </head>
+
+ <body>
+ <form id="test-form">
+ <span class="test">
+ <span id="op1"></span>
+ &times;
+ <span id="op2"></span>
+ &equals;
+ <input id="answer" type="number" autocomplete="off">
+ </span>
+
+ <button id="submit" type="submit">Check</button>
+ </form>
+
+ <div id="is-correct">
+ <span id="correct">Correct</span>
+ <span id="incorrect">Incorrect. The answer is
+ <span id="correct-answer"></span>.
+ </span>
+
+ <div id="timer">
+ It took you <span id="time"></span> seconds to answer.
+ </div>
+ </div>
+
+ <script src="mult.js"></script>
+ </body>
+</html>
diff --git a/mult.js b/mult.js
new file mode 100644
index 0000000..45fc9cd
--- /dev/null
+++ b/mult.js
@@ -0,0 +1,65 @@
+var TABLE_SIZE = 12;
+
+var startDate, op1, op2, ans;
+
+var testFormEl = document.getElementById('test-form');
+var op1El = document.getElementById('op1');
+var op2El = document.getElementById('op2');
+var answerEl = document.getElementById('answer');
+var isCorrectEl = document.getElementById('is-correct');
+var correctEl = document.getElementById('correct');
+var incorrectEl = document.getElementById('incorrect');
+var correctAnswerEl = document.getElementById('correct-answer');
+var submitEl = document.getElementById('submit');
+var timerEl = document.getElementById('timer');
+var timeEl = document.getElementById('time');
+
+function setUp()
+{
+ op1 = Math.round(Math.random() * (TABLE_SIZE-1) + 1);
+ op2 = Math.round(Math.random() * (TABLE_SIZE-1) + 1);
+ ans = op1 * op2;
+
+ op1El.innerHTML = op1;
+ op2El.innerHTML = op2;
+ answerEl.value = '';
+ correctAnswerEl.innerHTML = ans;
+ testFormEl.onsubmit = checkAnswer;
+
+ submitEl.innerHTML = 'Check';
+ timerEl.style.display = 'none';
+ correctEl.style.display = 'none';
+ incorrectEl.style.display = 'none';
+
+ answerEl.focus();
+
+ startDate = new Date();
+}
+
+function checkAnswer() {
+ var endDate = new Date();
+ timeEl.innerHTML = ((endDate - startDate)/1000).toFixed(1);
+ timerEl.style.display = 'block';
+
+ if (answerEl.value == ans) {
+ correctEl.style.display = 'inline';
+ incorrectEl.style.display = 'none';
+ } else {
+ incorrectEl.style.display = 'inline';
+ correctEl.style.display = 'none';
+ }
+
+ testFormEl.onsubmit = refresh;
+ submitEl.innerHTML = 'Try another';
+ answerEl.focus();
+
+ return false;
+}
+
+function refresh() {
+ setUp();
+
+ return false;
+}
+
+setUp();
diff --git a/narrow.css b/narrow.css
new file mode 100644
index 0000000..ea05edc
--- /dev/null
+++ b/narrow.css
@@ -0,0 +1,67 @@
+@media (orientation: portrait) {
+ body {
+ font-size: 18px;
+ }
+
+ form {
+ margin: 0 auto;
+ padding: 10px;
+ }
+
+ form span.test {
+ display: block;
+ text-align: center;
+ margin: 0 auto;
+ }
+
+ #answer {
+ font-size: 18px;
+ width: 40px;
+ }
+
+ #submit {
+ display: block;
+ margin: 10px auto 0 auto;
+ padding: 5px 15px;
+ font-size: 18px;
+ }
+
+ #is-correct {
+ margin-top: 20px;
+ }
+}
+
+/*
+ * TODO: this is probably a wash, since so much of the screen is taken up
+ * by the keyboard that there's basically nothing visible anyway.
+ * -bjc (2014-May-21)
+ */
+@media (orientation: landscape) {
+ body {
+ font-size: 12px;
+ }
+
+ form {
+ margin: 0 auto;
+ padding: 5px;
+ }
+
+ form span.test {
+ text-align: center;
+ margin: 0 auto;
+ }
+
+ #answer {
+ font-size: 12px;
+ width: 40px;
+ }
+
+ #submit {
+ padding: 5px 15px;
+ font-size: 12px;
+ }
+
+ #is-correct {
+ margin-top: 10px;
+ }
+}
diff --git a/wide.css b/wide.css
new file mode 100644
index 0000000..68f877a
--- /dev/null
+++ b/wide.css
@@ -0,0 +1,20 @@
+body {
+ font-size: 24px;
+}
+
+form {
+ margin: 50px auto;
+ padding: 30px;
+}
+
+#answer {
+ font-size: 24px;
+ width: 75px;
+}
+
+#submit {
+ font-size: 24px;
+ padding: 5px 15px;
+ width: 153px;
+ height: 41px;
+} \ No newline at end of file