diff options
| -rw-r--r-- | base.css | 58 | ||||
| -rw-r--r-- | index.html | 41 | ||||
| -rw-r--r-- | mult.js | 65 | ||||
| -rw-r--r-- | narrow.css | 67 | ||||
| -rw-r--r-- | wide.css | 20 |
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> + × + <span id="op2"></span> + = + <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> @@ -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 |