<!doctype html>
<html>
<head>
<title>SensFreq</title>
<script src="/themer.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="/common.css">
<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
</head>
<body style="text-align:center;" onload="init()" class="TText">
<h2>SensFreq</h2>
<table style="margin:auto;" class="TText">
<tr>
<td>Note to look for</td>
<td>
<select id="note" class="TText">
<option value="0">C</option>
<option value="1">C#</option>
<option value="2">D</option>
<option value="3">D#</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">F#</option>
<option value="7">G</option>
<option value="8">G#</option>
<option value="9">A</option>
<option value="10">A#</option>
<option value="11">B</option>
</select>
</td>
</tr>
<tr>
<td>Number of notes</td>
<td>
<input type="number" value="1" min="1" max="10" id="minnnotes" class="TText"></input>
-
<input type="number" value="3" min="1" max="10" id="maxnnotes" class="TText"></input>
</td>
</tr>
<tr>
<td>Octave range</td>
<td>
<input type="number" value="-1" min="-5" max="5" id="minorange" class="TText"></input>
-
<input type="number" value="1" min="-5" max="5" id="maxorange" class="TText"></input>
</td>
</tr>
</table>
<input type="checkbox" id="arp" class="TText">Arpeggio</input><br>
<button id="gench" onclick="generate_challenge()" class="TText">Play something!</button><br>
<span id="prompt" class="TText"> </span>
<div style="width:100%;height:3em;">
<span id="response">
<style>
.yes {
background-color:#0c0;
border: 2px solid #0a0;
color: #fff;
padding: 8px;
margin: 4px;
}
.yes:hover {
background-color:#0e0;
}
.no {
background-color:#c00;
border: 2px solid #a00;
color: #fff;
padding: 8px;
margin: 4px;
}
.no:hover {
background-color:#e00;
}
</style>
<button onclick="check_yes()" class="yes TText">Yes</button>
<button onclick="check_no()" class="no TText">No</button>
</span>
</div>
<div>
<span id="stats" class="TText">Correct: * of *</span><br>
<button onclick="reset_stats()" class="TText">Reset statistics</button>
</div>
<div style="padding-top:1em;" class="TText">
Disclaimer: this application cannot serve as a test for perfect pitch. Please do not go around and claim you have perfect pitch if you get 99.999% challenges right!
</div>
</body>
</html