Skip to content

Instantly share code, notes, and snippets.

@jeff-savin
Created May 2, 2015 23:23
Show Gist options
  • Save jeff-savin/7b8b56c0f4123de538e6 to your computer and use it in GitHub Desktop.
Save jeff-savin/7b8b56c0f4123de538e6 to your computer and use it in GitHub Desktop.
Keyboard Key Naming Test
<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>
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
@jeff-savin
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment