Practice solving math problems

index.markdown

Type your answer to the presented equation before the time expires.

— + — 2 1

Disable Time Limit

practice-solving-math-problems.markdown

Practice solving math problems

I just wanted to give my kids a sandbox to do basic math problems in. Click somewhere in the window body and type answers to the problem shown.

A Pen by Stan Williams on CodePen.

License.

random-math.markdown

Random Math

I just wanted to give my kids a sandbox to do basic math problems in. Click somewhere in the window body and type answers to the problem shown.

A Pen by Stan Williams on CodePen.

License.

script.babel

$('document').ready(function() {
  var $answer = $('#answerInput'),
      $answerContainer = $('.answer'),
      $answerCorrect = $('#answerCorrect'),
      $type = $('#type'),
      $top = $('#top'),
      $bottom = $('#bottom'),
      $correct = $('#correct'),
      $count = $('#count'),
      $timer = $(".timer"),
      _allowSubtraction = false,
      _expectedAnswer,
      _numCache,
      _inputGiven,
      _inputAllowed,
      _maxAddend = 10,
      _answerTimeoutEnabled = true,
      _answerDelay = 10 * 1000,
      _resetDelay = 1.5 * 1000,
      _answerTimer, _resetTimer,
      _paused = false;
  
  $('body').on('keydown', function(e) {
    let input = e.key;
    if(_inputAllowed && input >= 0 && input <= 9) {
      cacheAnswer(input);
      $answer.text(getAnswer());
      _inputGiven = true;
      if(getAnswer().toString().length === _expectedAnswer.toString().length) {
        checkAnswer();
      }
    }
  });
  
  $('#pauseResume').on('click', function (e) {
    _paused = !_paused;
    $(this)
      .text(!_paused ? 'Disable Time Limit' : 'Enable Time Limit')
      .toggleClass('paused', _paused);
    resetBoard();
  });
  
  (function init() {
    resetBoard();
    $('.problem').removeClass('loading');
  })();
  
  function resetBoard() {
    var newProblem = makeProblem();
    $top.text(newProblem.top);
    $bottom.text(newProblem.bottom);
    $type.text(newProblem.type);
    _expectedAnswer = newProblem.answer;
    _inputGiven = false;
    _inputAllowed = true;
    clearAnswer();
    if(!_paused && _answerTimeoutEnabled) {
      setAnswerTimeout();
    } else {
      clearTimeout(_answerTimer);
      $timer.css({
        width: 0
      });
    }
  }
  
  function makeProblem() {
    var answer = _.random(0, _maxAddend),
        adding = _allowSubtraction ? Boolean(_.random(1)) : true,
        top    = _.random(answer),
        bottom = answer - top,
        type   = adding ? '+' : '-';
    return {
      top: adding ? top : answer,
      bottom: bottom,
      type: type,
      answer: adding ? answer : top
    };
  }

  function cacheAnswer(num) {
    _numCache = parseInt(_numCache + '' + num, 10);
  }
  
  function getAnswer() {
    return _numCache;
  }
  
  function clearAnswer() {
    _numCache = '';
    $answer.text('');
    $answerContainer.removeClass('correct incorrect');
    $answerCorrect.text('');
  }
  
  function markAnswer() {
    var userAnswerCorrect = _expectedAnswer === getAnswer();
    $answerContainer
      .toggleClass('correct',  userAnswerCorrect)
      .toggleClass('incorrect', !userAnswerCorrect);
    if(!_inputGiven) {
      $answer.html('&nbsp;');
    }
    if(!userAnswerCorrect) {
      $answerCorrect.text(_expectedAnswer);
    }
  }
  
  function checkAnswer() {
      clearTimeout(_answerTimer);
      _inputAllowed = false;
      markAnswer();
      setResetBoardTimeout();
    }
  function setAnswerTimeout() {
    clearTimeout(_answerTimer);
    resetTimer();
    _answerTimer = setTimeout(checkAnswer, _answerDelay);
  }
  
  function setResetBoardTimeout() {
    clearTimeout(_resetTimer);
    _resetTimer = setTimeout(resetBoard, _resetDelay);
  }

  function resetTimer() {
    var timerStart = null;

    function stepTimer(timestamp) {
      if(_paused) return;
      
      if (!timerStart) timerStart = timestamp;
      
      var progress = timestamp - timerStart;
      $timer.css({
        width: Math.min(progress/_answerDelay * 100, 100) + "%"
      });
      if (progress < _answerDelay) {
        window.requestAnimationFrame(stepTimer);
      }
    }

    window.requestAnimationFrame(stepTimer);
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

style.scss

.part {
  display: block;
  text-align: right;
}

.answer {
  border-top: .075em solid #000;
  width: 100%;
  position: relative;
  .expected-answer {
    display: none;
  }
  .user-answer {
    transition: 150ms all;
  }
  
  &.incorrect {
    background: red;
    .user-answer, .expected-answer {
      font-size: .5em;
    }
    .user-answer {
      display: block;
      height: 1em;
      text-decoration: line-through;
      color: #666;
    }
    .expected-answer {
      color: green;
      display: block;
      position: absolute;
      right: 0;
    }
  }
  &.correct {
    background: green;
  }

  &:not(.correct):not(.incorrect) .timer {
    width: 100%;
    &, &:before, &:after {
      content: '';
      display: block;
      height: .025em;
      position: absolute;
      top: 0;
      left: 0;
    }
    &:before {
      width: 2em;
      background: #ccc;
    }
    &:after {
      width: 100%;
      background: blue;
    }
  }
}
.problem {
  display: block;
  position: relative;
  width: 2em;
  margin: 0 auto;
  font-size: 10em;
  
  &.loading {
    color: #bbb;
  }
}

html {
  font-size: 2vw;
  @media(max-width: 600px) {
    font-size: 4vw;
  }
  @media(min-width: 1000px) {
    font-size: 1.25vw;
  }
}

*, *:before, *:after {
  box-sizing: border-box;
}

.controls {
  position: fixed;
  bottom: 0;
  padding: 1em;
  color: red;
  button {
    padding: .5em .5em 0.5em 2em;
    color: blue;
    border: none;
    background: none;
    position: relative;
    border-radius: 1em;
    transition: .15s all;
    
    &:hover {
      color: red;
      box-shadow: 0 0 .7em #aaa;
    }
    
    &::before {
      font-family: "FontAwesome";
      content: "\f04c ";
      display: block;
      position: absolute;
      left: .5em;
      color: blue;
    }
     &:hover {
      color: red;
    }
    &.paused::before {
      content: "\f04b ";
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Demo: https://codepen.io/Stanssongs/full/gdNOOO