A Pen by Benedikt Wolters.

index.haml

#wrapper
  %h1 Type Trainer
  %h2 optimize your hit quote
  #intro small unsophisticated tool for learning the english keyboard layout
  #lesson
  %input#input-lifo{placeholder: "start typing the text above", type: "text"}/
  #score

script.js

$(function(){
  
  TypeTrainer = function(){
    //Constructor
    this.alphabet='0123456789abcdefghijklmnopqrstuvwxyz';
    this.keys = ':;\\\'zy!@#$%^&*()[]{}`~\/|/|_+=-/?>';
    this.lection = '';
    
    this.score = {
      hits: 0,
      misses :0,
      lastCheckLength:0
    };
    this.config = {
      bufferSize: 25,
      allLetters: true,
      eventHolder: $('body')
                  };
  };
  TypeTrainer.prototype.generateRandomLetter = function(){
    var consider = this.keys;
    if(this.config.allLetters)
    {
      consider += this.alphabet;
    }
    return consider[Math.ceil(Math.random()*consider.length)-1];
  };
  
  TypeTrainer.prototype.clearLection = function(){
    this.lection = '';
    this.config.eventHolder.trigger('tt.lection_update');
  };
  
   TypeTrainer.prototype.populateLectionBuffer = function(){
  while(this.lection.length < this.config.bufferSize){
      this.lection = this.lection + this.generateRandomLetter();
      this.config.eventHolder.trigger('tt.lection_update');
    }
  };
  
  TypeTrainer.prototype.generateRandomLection = function(){
    this.clearLection();
    this.populateLectionBuffer();
  };
  
  TypeTrainer.prototype.tryRemove = function(input){
    
    //only consider first char
    if(input[0] == this.lection[0]){
      this.lection = this.lection.slice(1,this.lection.length);
      this.score.hits++;
      this.config.eventHolder.trigger('tt.score_update');
      this.populateLectionBuffer();
      return input.slice(1,input.length);
    }
    if(this.score.lastCheckLength < input.length){
      this.score.misses++;
      this.config.eventHolder.trigger('tt.score_update');
    }
    this.score.lastCheckLength = input.length;
    //falltrough
    return input;
  };
  
  
  
  TypeTrainer.prototype.tryRemoveBuffer = function(input){
    var noTypeError = true;
    if(!input){
      return '';
    }
    while(input.length > 0 && noTypeError){
      var initSize = input.length
      input = tt.tryRemove(input);
      console.log(input);
      noTypeError = (initSize > input.length);
    }
    return input;
  };
  
  TypeTrainer.prototype.init = function(){
    this.generateRandomLection();
  };
  
  var tt = new TypeTrainer();
  $('#input-lifo').on('keyup',function(){
    $(this).val(tt.tryRemoveBuffer($(this).val()))
           .toggleClass('hasMiss',$(this).val().length>0)
    ;
    
  }).focus();
  
  $('body').on('tt.lection_update',function(){
    $('#lesson').text(tt.lection+'...');
  });
  
  $('body').on('tt.score_update',function(){
    $('#score').html('Misses/Hits: '+ tt.score.misses + '/'+tt.score.hits);
  });
  tt.init();
});

style.scss

@import "compass";
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500);
body {
  
  background: #333;
  background-repeat: repeat;
  min-height: 100%;
  font-family:'Open Sans';
  background-attachment: fixed;
  color: white;

  &:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    $experimental-support-for-svg: true;
    @include background-image(radial-gradient(center ellipse cover, rgba(black,0) 0%,rgba(black,.9) 100%));
    min-height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  
  #wrapper{
    width:500px;
    margin:0 auto;
  }
  
  h1{
    
    font-size:3em;
    font-weight:800;
    color:#6CBFDE;
    margin: 0 0 0 1rem;
    padding: 0;
  }
  h2{
    margin:0;
    padding: 0 1rem;
    font-size:1em;
  }
  #intro,#score{
    padding: 0 1rem;
    font-size:0.7em;
    margin-bottom:1rem;
  }
  
  #lesson,#input-lifo{
    margin-left:1rem;
    width:500px;
    font-family: monospace;
    font-size:2em;
    outline:0;
    color:white;
    font-weight:bold;
    //stumbled upon a chrome bug here:
    //https://code.google.com/p/chromium/issues/detail?id=294134
    //&:first-letter{color:orange;}
  }
  #input-lifo{
    background-color:gray;
    border:2px solid transparent;
    .hasMiss{
  border-color:red;
  @include transition(border-color 0.3s ease-in-out);
}
  }
  
}

Type-Trainer-Tool.markdown

Type Trainer Tool

just wanted to learn english keyboard layout so i wrote this for myself

A Pen by Benedikt Wolters on CodePen.

License.