Multiplication Flash Cards

From 6ff5b510ea4fda8e0744cc8c0f37c59b0ccf78e2 Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Wed, 21 May 2014 21:30:44 -0400 Subject: Initial commit. --- base.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 41 ++++++++++++++++++++++++++++++++++++++ mult.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ narrow.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ wide.css | 20 +++++++++++++++++++ 5 files changed, 251 insertions(+) create mode 100644 base.css create mode 100644 index.html create mode 100644 mult.js create mode 100644 narrow.css create mode 100644 wide.css 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 @@ + + + + Multiplication Flash Cards + + + + + + + + + + + +

+ Correct + Incorrect. The answer is + . + + +

+ It took you seconds to answer. +

+ + + + 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 -- cgit v1.2.3