Time tables practice for my youngest. I've been using playing cards (normal deck), which are fantastic and this is based of the same idea; where I still work with him and see if he beats the machine—no scoring, just fun practice.
You can filter the sets at the top, by deselecting any to be excluded. And change speed via buttons in footer.
| (function() { | |
| 'use strict'; | |
| // start with an initial array [0, 1, 2, ... 12] | |
| var multiplyArray = d3.range(13); | |
| // have a timer for updating to next question | |
| var updateTimer; | |
| // initial speed setting for update and delay | |
| var speed = 2000; | |
| // fade spped button to match setting | |
| d3.select('#speedFast').style('opacity', 0.4); | |
| // speed event listeners so user can change timing | |
| speedEvents('#speedSlow', 4000); | |
| speedEvents('#speedFast', 2000); | |
| speedEvents('#speedLightning', 1000); | |
| // function to save writing same code over | |
| function speedEvents(_id, _speed) { | |
| d3.select(_id).on('click', function() { | |
| // enure only this btn is selected | |
| d3.selectAll('.speedBtn').style('opacity', 1); | |
| d3.select(this).style('opacity', 0.4); | |
| speed = _speed; | |
| // reset the timer with new speed | |
| clearInterval(updateTimer); | |
| updateTimer = setInterval(update, speed); | |
| }); | |
| } | |
| // function to remove items from the array | |
| // via user selection with buttons | |
| function disableSet(n) { | |
| var i = multiplyArray.indexOf(n); | |
| if (i != -1) { | |
| multiplyArray.splice(i, 1); | |
| } | |
| } | |
| // event listeners for limiting multiplication sets | |
| // loop for each button for multiplication sets | |
| function filterSets() { | |
| _.times(13, function(n) { | |
| // fade the button out and change sets to use | |
| d3.select('#set-' + n).on('click', function() { | |
| // if in array, remove it | |
| if (_.includes(multiplyArray, n)) { | |
| // fade out the button to show it's been selected | |
| d3.select(this).style('opacity', 0.4); | |
| // remove from the array | |
| disableSet(n); | |
| // console.log(multiplyArray); | |
| // else push it back in array | |
| } else { | |
| // ensure button isn't selected | |
| d3.select(this).style('opacity', 1); | |
| // add number to array | |
| multiplyArray.push(n); | |
| // console.log(multiplyArray); | |
| } | |
| }); | |
| }); | |
| } | |
| // random multiplication | |
| function multiply() { | |
| // random number from the array | |
| var x = _.sample(multiplyArray), | |
| // random number to multiply against | |
| y = _.random(0, 12); | |
| // render to the interface | |
| ui(); | |
| // update the interface text elements | |
| function ui() { | |
| d3.select('#xValue').text(x); | |
| d3.select('#yValue').text(y); | |
| d3.select('#answer') | |
| .transition() | |
| .delay(speed/2) | |
| .text('= ' + answer()); | |
| } | |
| // calculate the answer | |
| function answer() { | |
| return x * y; | |
| } | |
| } | |
| function update() { | |
| // reset the text | |
| d3.select('#xValue').text(''); | |
| d3.select('#yValue').text(''); | |
| d3.select('#answer').text(''); | |
| // trigger the question/sum | |
| multiply(); | |
| } | |
| // initiate event listeners for the table set selection | |
| filterSets(); | |
| // run the first question | |
| multiply(); | |
| // then continue questioning | |
| updateTimer = setInterval(update, speed); | |
| })(); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 | practice times tables</title> | |
| <meta name="author" content="Sundar Singh | eesur.com"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <p>Filter time tables:</p> | |
| <ul id="sets"> | |
| <li id="set-0">0</li> | |
| <li id="set-1">1</li> | |
| <li id="set-2">2</li> | |
| <li id="set-3">3</li> | |
| <li id="set-4">4</li> | |
| <li id="set-5">5</li> | |
| <li id="set-6">6</li> | |
| <li id="set-7">7</li> | |
| <li id="set-8">8</li> | |
| <li id="set-9">9</li> | |
| <li id="set-10">10</li> | |
| <li id="set-11">11</li> | |
| <li id="set-12">12</li> | |
| </ul> | |
| </header> | |
| <section id="question"> | |
| <h1> | |
| <span id="xValue"></span> | |
| <span id="multiplier">*</span> | |
| <span id="yValue"></span> | |
| <span id="answer"></span> | |
| </h1> | |
| </section> | |
| <footer> | |
| <p>Change speed:</p> | |
| <ul id="speed"> | |
| <li class="speedBtn" id="speedSlow">slow</li> | |
| <li class="speedBtn" id="speedFast">fast</li> | |
| <li class="speedBtn" id="speedLightning">lightning</li> | |
| </ul> | |
| </footer> | |
| <script src="d3_code_times_tables.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
| /*$h: 512px; | |
| $w: 950px;*/ | |
| .font-styles, body, h1 { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| position: relative; | |
| color: #FDBB30; | |
| background-color: #130C0E; | |
| padding: 20px; | |
| } | |
| #question { | |
| margin: 0 auto; | |
| position: relative; | |
| width: 600px; | |
| height: 100px; | |
| top: 20%; | |
| left: 0; | |
| } | |
| p { | |
| padding-top: 0; | |
| margin-top: 0; | |
| font-size: 13px; | |
| line-height: 1; | |
| color: #EC008C; | |
| } | |
| h1 { | |
| font-size: 72px; | |
| /*position: relative;*/ | |
| } | |
| h1 span { | |
| position: absolute; | |
| top: 0; | |
| text-align: right; | |
| min-width: 80px; | |
| } | |
| #xValue { | |
| left: 0; | |
| } | |
| #multiplier { | |
| left: 100px; | |
| opacity: 0.6; | |
| } | |
| #yValue { | |
| left: 200px; | |
| } | |
| #answer { | |
| left: 320px; | |
| color: #7AC143; | |
| } | |
| ul#sets, ul#speed { | |
| color: #130C0E; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| ul#sets li, ul#speed li { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| background: #EC008C; | |
| } | |
| ul#speed li { | |
| font-size: 13px; | |
| } | |
| footer { | |
| position: absolute; | |
| bottom: 100px; | |
| left: 20px; | |
| } |
