Keyboard Key Naming Test

key_namer.html.erb

<div id="p-wrapper">
  <ul id="piano">
    <li><div id='a1' class="anchor" rel='a'></div></li>
	<li><div id='b1' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c1' class="anchor" rel='c'></div></li>
	<li><div id='d1' class="anchor" rel='d'></div><span></span></li>
	<li><div id='e1' class="anchor" rel='e'></div><span></span></li>
	<li><div id='f1' class="anchor" rel='f'></div></li>
	<li><div id='g1' class="anchor" rel='g'></div><span></span></li>
	<li><div id='a2' class="anchor" rel='a'></div><span></span></li>
	<li><div id='b2' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c2' class="anchor" rel='c'></div></li>
	<li><div id='d2' class="anchor" rel='d'></div><span></span></li>
	<li><div id='e2' class="anchor" rel='e'></div><span></span></li>
	<li><div id='f2' class="anchor" rel='f'></div></li>
	<li><div id='g2' class="anchor" rel='g'></div><span></span></li>
	<li><div id='a3' class="anchor" rel='a'></div><span></span></li>
	<li><div id='b3' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c3' class="anchor" rel='c'></div></li>
	<li><div id='d3' class="anchor" rel='d'></div><span></span></li>
	<li><div id='e3' class="anchor" rel='e'></div><span></span></li>
	<li><div id='f3' class="anchor" rel='f'></div></li>
	<li><div id='g3' class="anchor" rel='g'></div><span></span></li>
	<li><div id='a4' class="anchor" rel='a'></div><span></span></li>
	<li><div id='b4' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c4' class="anchor" rel='c'></div></li>
	<li><div id='d4' class="anchor" rel='d'></div><span></span></li>
	<li><div id='e4' class="anchor" rel='e'></div><span></span></li>
	<li><div id='f4' class="anchor" rel='f'></div></li>
	<li><div id='g4' class="anchor" rel='g'></div><span></span></li>
	<li><div id='a5' class="anchor" rel='a'></div><span></span></li>
	<li><div id='b5' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c5' class="anchor" rel='c'></div></li>
	<li><div id='d5' class="anchor" rel='d'></div><span></span></li>
	<li><div id='e5' class="anchor" rel='e'></div><span></span></li>
	<li><div id='f5' class="anchor" rel='f'></div></li>
	<li><div id='g5' class="anchor" rel='g'></div><span></span></li>
	<li><div id='a6' class="anchor" rel='a'></div><span></span></li>
	<li><div id='b6' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c6' class="anchor" rel='c'></div></li>
	<li><div id='d6' class="anchor" rel='d'></div><span></span></li>
	<li><div id='e6' class="anchor" rel='e'></div><span></span></li>
	<li><div id='f6' class="anchor" rel='f'></div></li>
	<li><div id='g6' class="anchor" rel='g'></div><span></span></li>
	<li><div id='a7' class="anchor" rel='a'></div><span></span></li>
	<li><div id='b7' class="anchor" rel='b'></div><span></span></li>
	<li><div id='c7' class="anchor" rel='c'></div></li>
  </ul>
</div>

<div id='key_selection' style='margin-top:50px; text-align:center; font-size:18px;'>
  Click the button that corresponds to the highlighted key.<br><br>
  Answered Correct: <b><span id='correct'>0</span></b><br>
  Answered Wrong: <b><span id='wrong'>0</span></b><br>
</div>

<div class="buttons" style='margin-top:50px;'>
  <div class="nav_outer">
    <ul>
      <li>
        <a href="#"><span class='answer' rel='a'>A</span></a>
      </li><li>
        <a href="#"><span class='answer' rel='b'>B</span></a>
      </li><li>
        <a href="#"><span class='answer' rel='c'>C</span></a>
      </li><li>
        <a href="#"><span class='answer' rel='d'>D</span></a>
      </li><li>
        <a href="#"><span class='answer' rel='e'>E</span></a>
      </li><li>
        <a href="#"><span class='answer' rel='f'>F</span></a>
      </li><li>
        <a href="#"><span class='answer' rel='g'>G</span></a>
      </li>
    </ul>
  </div>
</div>

<script>
  var selected = null;
  var correct  = 0;
  var wrong    = 0;

  get_new_key();

  $('.answer').click(function(){
    var answer = $(this).attr('rel');
    if(answer==selected){
      correct += 1;
      $('#correct').html(correct);
      get_new_key();
    } else {
	  wrong += 1;
	  $('#wrong').html(wrong);
    }
  });

  function get_new_key(){
    $.get('/tools/get_new_key', {}, function(data){
	  var note  = data.note;
	  var color = data.color;
	  var key   = $('ul#piano li div#'+note);
	  $('.anchor').css('background', '#ffffff');
	  key.css('background', color);
	  selected  = key.attr('rel');
	});
  }
</script>

tools_controller.rb

class ToolsController < ApplicationController
  def key_namer
  end
  
  def get_new_key
    # randomize a color
    color_sample = %w(0 1 2 3 4 5 6 7 8 9 0 a b c d e f)
    color = "#"
    (1..6).each{|i| color << color_sample[rand(0..color_sample.length-1)] }

    # Create full collection of notes and grab a random one
    note_sample  = []
    last_octave  = 7
    (1..last_octave-1).each{|i| note_sample << "a#{i}" << "b#{i}" << "c#{i}" << "d#{i}" << "e#{i}" << "f#{i}" << "g#{i}" }
    note_sample << "a#{last_octave}" << "b#{last_octave}" << "c#{last_octave}"
    note = note_sample[rand(0..note_sample.length-1)]

    render :json => {:note => note, :color => color}
  end
end

Created this tool for TheoryPrincess.com so that students can gain practice naming keys on the keyboard. Can find page here: http://www.theoryprincess.com/tools/key_namer.