<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8″ http-equiv="Content-Type" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=3.0, user-scalable=no, width=device-width" />
<title>Guitar Chord Trainer</title>
<style type="text/css">
.style_chord {
border: thin dotted #0000FF;
margin: 5px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 42px;
color: #FF0000;
font-weight: bold;
font-style: normal;
font-variant: normal;
z-index: inherit;
}
.style_finger {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size: 30px;
color: #0066FF;
}
.style_remaining {
font-family: "Courier New", Courier, monospace;
font-size:18pt;
font-weight: bold;
color: #6600FF;
text-align: left;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
}
.style2 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
text-align: left;
}
.style3 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 20px;
text-align: left;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
.auto-style1 {
border-style: solid;
border-width: 1px;
}
.auto-style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
width: 50px;
}
.auto-style3 {
text-align: left;
}
</style>
</head>
<script language="javascript">
<!–
var sec_view_finger = 0; // 운지가 보여지는 시간(초), 0이면 무조건 보임
var sec_next_chord = 5; // 전체 하나의 코드가 보여지는 시간(초)
var json_chords =
{
"chords": [
{"chord":"C", "check":"0″, "finger":"12 24 35″},
{"chord":"Cm", "check":"0″, "finger":"15 22 (33 34)"},
{"chord":"C7″, "check":"0″, "finger":"12 24 (35 33)"},
{"chord":"D", "check":"0″, "finger":"- (23 21) 32″},
{"chord":"Dm", "check":"0″, "finger":"11 23 32″},
{"chord":"D7″, "check":"0″, "finger":"12 (21 23)"},
{"chord":"E", "check":"0″, "finger":"13 (25 24)"},
{"chord":"Em", "check":"0″, "finger":"- (25 24)"},
{"chord":"E7″, "check":"0″, "finger":"13 25″},
{"chord":"F", "check":"0″, "finger":"16 23 (35 34)"},
{"chord":"Fm", "check":"0″, "finger":"16 (35 34)"},
{"chord":"F7″, "check":"0″, "finger":"16 23 35″},
{"chord":"G", "check":"0″, "finger":"- 25 (36 31)"},
{"chord":"Gm", "check":"0″, "finger":"- – 36 – (54 55)"},
{"chord":"G7″, "check":"0″, "finger":"11 25 36″},
{"chord":"A", "check":"0″, "finger":"(24 23 22)"},
{"chord":"Am", "check":"0″, "finger":"12 (24 23)"},
{"chord":"A7″, "check":"0″, "finger":"- 24 22″},
{"chord":"B", "check":"0″, "finger":"- 25 – (44 43 42)"},
{"chord":"Bm", "check":"0″, "finger":"- 25 35 (44 43)"},
{"chord":"B7″, "check":"0″, "finger":"14 (25 23 21)"},
]
};
var array_chord = new Array(100);
var array_finger = new Array(100);
var array_count = 0;
var timer = sec_next_chord;
var wait_next = false;;
var chord_no = Math.floor(Math.random() * json_chords.chords.length);
function set_array()
{
var count = 0;
for (ii=0; ii<json_chords.chords.length; ii++)
{
if (document.form_chord.elements[ii+1].checked)
{
array_chord[count] = json_chords.chords[ii].chord;
array_finger[count] = json_chords.chords[ii].finger;
count++;
}
}
array_count = count;
sec_view_finger = document.form_time.sec_view_finger.value;
sec_next_chord = document.form_time.sec_next_chord.value;
}
function set_chord_no()
{
var nn;
set_array();
do
{
if (array_count <= 2)
{
nn = Math.floor(Math.random() * (array_count));
break;
}
nn = Math.floor(Math.random() * (array_count));
wait_next = true;
} while(nn == chord_no);
wait_next = false;
chord_no = nn;
}
function reset()
{
var div_chord = document.getElementById('chord');
var div_finger = document.getElementById('finger');
var div_remaining_time = document.getElementById('remaining_time');
div_chord.style.innerHTML = "";
div_finger.style.innerHTML = "";
div_remaining_time.style.innerHTML = "";
sec_view_finger = document.form_time.sec_view_finger.value;
sec_next_chord = document.form_time.sec_next_chord.value;
set_chord_no();
timer = sec_next_chord;
}
function display_timer()
{
var div_chord = document.getElementById('chord');
var div_finger = document.getElementById('finger');
var div_remaining_time = document.getElementById('remaining_time');
if (wait_next)
return false;
wait_next = false;
sec_view_finger = document.form_time.sec_view_finger.value;
sec_next_chord = document.form_time.sec_next_chord.value;
if (timer == 0)
{
timer = sec_next_chord;
if (sec_view_finger != 0)
div_finger.style.display = "none";
set_chord_no();
}
if (sec_view_finger == 0)
{
div_finger.innerHTML = array_finger[chord_no];
div_finger.style.display = "";
}
else
{
if (timer == sec_view_finger)
{
div_finger.innerHTML = array_finger[chord_no];
div_finger.style.display = "";
}
}
div_chord.innerHTML = array_chord[chord_no];
div_remaining_time.innerHTML = timer;
timer–;
}
function write_chord_list()
{
for (ii=0; ii<json_chords.chords.length; ii++)
{
document.write("<input type=\"checkbox\" name=\""+json_chords.chords[ii].chord+"\" id=\""+json_chords.chords[ii].chord+"\" onclick=\"set_array()\"");
if (json_chords.chords[ii].check == 1)
document.write("checked>");
else
document.write(">");
document.write("<label for=\""+json_chords.chords[ii].chord+"\">"+json_chords.chords[ii].chord+"</label> ");
if (!((ii+1)%3))
document.write("<br>\n");
}
}
function check_all()
{
if (document.form_chord.chord_check_all.checked == true)
{
for (ii=1; ii<json_chords.chords.length+1; ii++)
document.form_chord.elements[ii].checked = true;
}
else
{
for (ii=1; ii<json_chords.chords.length+1; ii++)
document.form_chord.elements[ii].checked = false;
}
set_array();
}
function main()
{
set_array();
document.getElementById('sec_view_finger').value = sec_view_finger;
document.getElementById('sec_next_chord').value = sec_next_chord;
window.setInterval("display_timer()", 1000);
}
//–>
</script>
<body>
<table class="auto-style1″ style="width: 100%">
<tr>
<td colspan="3″><div id="chord" class="style_chord"> Ready !! </div></td>
</tr>
<tr>
<td colspan="3″><div id="finger" class="style_finger"> </div></td>
</tr>
<tr>
<td colspan="3″><hr></td>
</tr>
<tr>
<form name="form_time" method="post" action="">
<td class="style1″ style="width: 50%; "><label for="label_sec_view_finger">View finger (sec.)</label>
<script language="javascript">
<!–//
html_str = "<input name=\"sec_view_finger\" type=\"text\" id=\"sec_view_finger\" size=\"3\" value=\""+sec_view_finger+"\">";
document.write(html_str);
//–>
</script></td>
<td class="style1″ style="width: 50%;"><label for="label_sec_next_chord">Next chord (sec.)</label>
<script language="javascript">
<!–//
html_str = "<input name=\"sec_next_chord\" type=\"text\" id=\"sec_next_chord\" size=\"3\" value=\""+sec_next_chord+"\">";
document.write(html_str);
//–>
</script></td>
</form>
</tr>
<tr>
<td colspan="3″ class="style1″><hr></td>
</tr>
<tr>
<td colspan="3″ class="style1″ style="height: 92px">
<form name="form_chord" method="post" action="">
<p class="style3″>
<input type="checkbox" name="chord_check_all" onclick="check_all()">
<label for="ALL"><strong>ALL</strong></label>
<br>
<script language="javascript">
<!–//
write_chord_list();
//–>
</script>
</p>
<hr>
</form>
</td>
</tr>
<tr>
<td class="auto-style2″ style="width: 10%">sec.</td>
<td class="auto-style3″ style="width: 10%"><div id="remaining_time" class="style_remaining"></div></td>
<td class="style1″ onclick="reset();"><a href="#">[APPLY]</a></td>
</tr>
</table>
</body>
<script language="javascript">
<!–//
main();
//–>
</script>
</html>
