Permalink
Browse files

Incorporated Godfried's changes, updated to HTML5, reformatted

  • Loading branch information...
1 parent 863d991 commit f413f7d2b6bd999f11093ddb4d08913b11be2531 @necaris committed May 9, 2012
Showing with 165 additions and 80 deletions.
  1. +146 −70 index.html
  2. +19 −10 scoretrainer.js
View
@@ -1,42 +1,82 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml11/DTD/xhtml1transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <title> Musical Score Reading Trainer </title>
- <!--
- Copyright (C) 2010 Rami Chowdhury (http://necaris.net).
- Inspired by and based in concept on work by J Pablo Fernandez (http://www.pupeno.com).
- Graphics modified from those obtained from Wikipedia (http://www.wikipedia.org).
- Provided under the terms of the GNU General Public License, version 2.
- -->
- <style type="text/css">
-
- body { background-color: #DDF; padding: 10px; font-family: Verdana, Arial, sans-serif; }
-
- hr.score_line { height: 2px; width: 95%; position: fixed; left: 24px;
- color: #000; background-color: #000; }
-
- img.note { position: fixed; height: 120px; width: 40px; z-index: 15; }
-
- input.btn_note { padding: 3px 10px; font-weight: bold; }
-
- #score { background-color: #F0F0FF; }
- #clef_box { float: left; height: 240px; width: 180px; position: fixed; z-index: 10; }
- #clef_img { vertical-align: center; margin-top: 60px; margin-left: 16px; height: 120px; width: 90px; }
- #score_box { height: 248px; }
-
- </style>
-
- <script type="text/javascript" src="scoretrainer.js"> </script>
-
-</head>
-<body>
-
-<div id="score">
- <div id="clef_box">
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <title> Musical Score Reading Trainer </title>
+ <!-- <title>Muziek noten leren lezen</title> -->
+ <!--
+ Copyright (C) 2010 Rami Chowdhury (http://necaris.net).
+ Dutch translation & modifications copyright (C) 2012 Godfried Borremans.
+ Inspired by and based in concept on work by J Pablo Fernandez (http://www.pupeno.com).
+ Graphics modified from those obtained from Wikipedia (http://www.wikipedia.org).
+ Provided under the terms of the GNU General Public License, version 2.
+ -->
+ <style type="text/css">
+ body {
+ background-color: #DDF;
+ padding: 10px;
+ font-family: Verdana, Arial, sans-serif;
+ }
+
+ hr.score_line {
+ height: 2px;
+ width: 95%;
+ position: fixed;
+ left: 24px;
+ color: #000;
+ background-color: #000;
+ }
+
+ img.note {
+ position: fixed;
+ height: 120px;
+ width: 40px;
+ z-index: 15;
+ }
+
+ input.btn_note {
+ padding: 3px 10px;
+ font-weight: bold;
+ }
+
+ #score {
+ background-color: #F0F0FF;
+ }
+
+ #clef_box {
+ float: left;
+ height: 240px;
+ width: 180px;
+ position: fixed;
+ z-index: 10;
+ }
+
+ #clef_img {
+ vertical-align: center;
+ /* fa-sleutel */
+ margin-top: 60px;
+ /* sol-sleutel
+ margin-top: 70px; */
+ margin-left: 16px;
+ width: 90px;
+ height: 120px;
+ border: 1;
+ color: blue
+ }
+
+ #score_box {
+ height: 248px;
+ }
+ </style>
+ <script type="text/javascript" src="scoretrainer.js"></script>
+ </head>
+ <body>
+
+ <div id="score">
+ <div id="clef_box">
<img src="bass_clef.png" id="clef_img" align="center" />
- </div>
- <div id="score_box">
+ </div>
+ <div id="score_box">
<hr class="score_line" style="top: 70px;" />
<hr class="score_line" style="top: 100px;" />
<hr class="score_line" style="top: 130px;" />
@@ -45,42 +85,78 @@
<div style="clear:both;"> </div>
- </div>
-</div>
+ </div>
+ </div>
-<div id="controls">
- <p>
- <em>Select clef: </em> &nbsp;
- <input type="radio" name="choose_clef" id="clef_bass" value="bass"/> <label for="clef_bass"> Bass clef </label>
+ <div id="controls">
+ <p>
+ <em>Select clef:</em> &nbsp;
+ <!-- <em>Kies de sleutel:</em> &nbsp; -->
+ <input type="radio" name="choose_clef" id="clef_bass" value="bass"/> <label for="clef_bass">𝄢 Fa sleutel</label>
&nbsp;
- <input type="radio" name="choose_clef" id="clef_treb" value="treb"/> <label for="clef_treb"> Treble clef </label>
- </p>
- <p>
+ <input type="radio" name="choose_clef" id="clef_treb" value="treb"/> <label for="clef_treb">𝄞 Sol sleutel </label>
+ </p>
+ <p>
<em>Select note:</em>
- <input class="btn_note" type="button" name="note_C" id="note_C" value="C" /> &nbsp;
- <input class="btn_note" type="button" name="note_D" id="note_D" value="D" /> &nbsp;
- <input class="btn_note" type="button" name="note_E" id="note_E" value="E" /> &nbsp;
- <input class="btn_note" type="button" name="note_F" id="note_F" value="F" /> &nbsp;
- <input class="btn_note" type="button" name="note_G" id="note_G" value="G" /> &nbsp;
- <input class="btn_note" type="button" name="note_A" id="note_A" value="A" /> &nbsp;
- <input class="btn_note" type="button" name="note_B" id="note_B" value="B" /> &nbsp;
- </p>
-
-
-</div>
-
-<div id="instructions">
- <p> Welcome to the Score Reading Trainer! It's dirt-simple to use -- choose to work in either treble or bass clef, and then simply identify the notes (either by clicking on the buttons or pressing the corresponding letter on your keyboard) as they parade across the screen. Currently, this application is pure HTML, CSS, and Javascript, and should work on any modern browser (tested on Firefox, Google Chrome, Konqueror, and Safari). </p>
-
- <p> This is based in concept on an <a href="http://scret.sourceforge.net/">extremely useful piece of software</a> that is, unfortunately, only really available to those who are happy to install alternative graphics toolkits (or run Linux-based OSes). And I wanted to be able to practice without booting into Linux. </p>
+ <!-- <em>Kies je noot:</em> -->
+ <input class="btn_note" type="button" name="note_C" id="C" title="C" value="C" /> <!-- value="Do" --> &nbsp;
+ <input class="btn_note" type="button" name="note_D" id="D" title="D" value="D" /> <!-- value="Re" --> &nbsp;
+ <input class="btn_note" type="button" name="note_E" id="E" title="E" value="E" /> <!-- value="Mi" --> &nbsp;
+ <input class="btn_note" type="button" name="note_F" id="F" title="F" value="F" /> <!-- value="Fa" --> &nbsp;
+ <input class="btn_note" type="button" name="note_G" id="G" title="G" value="G" /> <!-- value="Sol"--> &nbsp;
+ <input class="btn_note" type="button" name="note_A" id="A" title="A" value="A" /> <!-- value="La" --> &nbsp;
+ <input class="btn_note" type="button" name="note_B" id="B" title="B" value="B" /> <!-- value="Si" --> &nbsp;
+ </p>
+ </div>
- <p> I've made it available on the net in the hope that someone else finds it useful. I would love to improve it -- <a href="rami at necaris -dot- net">feedback, feature requests, and bug reports of all sorts welcome</a>! </p>
-</div>
+ <div id="instructions">
+ <!-- DUTCH:
+ <p>Welkom bij de notentrainer!<br />
+ Het is erg eenvoudig te gebruiken: kies je sleutel (Fa- of Sol-sleutel) en duidt aan welke de noot is die je ziet.<br />
+ Dit kan door te klikken op de knop met de naam van de noot (Do-Re-Mi-Fa-Sol-La-Si) of door op je toetsenbord
+ de juiste letter (C-D-E-F-G-A-B) in te tikken.<br />
+ Is de noot juist dan verdwijnt die links van je scherm.<br />
+ Is de noot fout dan wordt de knop met foute naam rood.<br />
+ </p>
+ <p>De notentrainer is gemaakt met HTML, CSS en Javascript en zou dus in de meeste moderne browsers moeten werken (zonder plugins!)<br />
+ Rami (<a href="http://necaris.net">necaris.net</a>) heeft dit beschikbaar gemaakt.
+ Contacteer Rami voor feedback, verzoeken of foutmeldingen.</p>
+ <p>Dit is gebaseerd op een ScoreReadingTrainer (<a href="http://scret.sourceforge.net/">http://scret.sourceforge.net/</a>).
+ Die software moet je echter installeren terwijl dit hier gewoon via het web te gebruiken is.
+ </p>
+ -->
+ <p>
+ Welcome to the Score Reading Trainer!<br/>
+ It's dirt-simple to use -- choose to work in either treble or bass
+ clef, and then simply identify the notes (either by clicking on the
+ buttons or pressing the corresponding letter on your keyboard) as they
+ parade across the screen. Currently, this application is pure HTML,
+ CSS, and Javascript, and should work on any modern browser (tested on
+ Firefox, Google Chrome, Konqueror, and Safari).
+ </p>
+
+ <p>
+ This is based in concept on
+ an <a href="http://scret.sourceforge.net/">extremely useful piece of
+ software</a> that is, unfortunately, only really available to those who
+ are happy to install alternative graphics toolkits (or run Linux-based
+ OSes). And I wanted to be able to practice without booting into Linux.
+ </p>
+
+ <p>
+ I've made it available on the net in the hope that someone else finds
+ it useful. I would love to improve it --
+ <a href="rami at necaris -dot- net">feedback</a>,
+ <a href="https://github.com/necaris/score-reading-trainer/">feature
+ requests, and bug reports</a> of all sorts welcome!
+ </p>
-<script>
- var config = {'note_count': 16, 'clef': 'treb', 'mountpoint': '/scorereading/', 'note_distance': 60 };
- var trainer = new ScoreTrainer(config);
-</script>
+ </div>
-</body>
+ <script>
+ var config = {'note_count': 16, 'clef': 'treb', 'mountpoint': './', 'note_distance': 60 };
+ var trainer = new ScoreTrainer(config);
+ </script>
+
+ </body>
</html>
View
@@ -22,7 +22,8 @@ function ScoreTrainer(config)
self.note_map_treb = new Array('B', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C', 'D');
self.init = function()
- {// Sets up the work area. Binds document elements to methods,
+ {
+ // Sets up the work area. Binds document elements to methods,
// sets the active clef, and generates the initial set of notes.
self.score_box = document.getElementById("score_box");
@@ -41,7 +42,8 @@ function ScoreTrainer(config)
for (i = 0; i < 7; i++)
{
ltr = possible_notes[i];
- self.note_buttons[ltr] = document.getElementById("note_" + ltr);
+ // self.note_buttons[ltr] = document.getElementById("note_" + ltr);
+ self.note_buttons[ltr] = document.getElementById(ltr);
self.note_buttons[ltr].onclick = self.intercept_clicks;
}
@@ -52,7 +54,9 @@ function ScoreTrainer(config)
};
self.set_clef = function(clef)
- {// Sets the active clef, and changes the note map accordingly.
+ {
+ // Sets the active clef, and changes the note map accordingly.
+
self.clef_radio_bass.removeAttribute("selected");
self.clef_radio_treb.removeAttribute("selected");
switch(clef)
@@ -98,7 +102,9 @@ function ScoreTrainer(config)
};
self.push_random_note = function()
- {// Adds a note to the right of the score
+ {
+ // Adds a note to the right of the score
+
var rand = self.get_random_note();
var note = document.createElement("img");
note.setAttribute("class", "note");
@@ -162,13 +168,15 @@ function ScoreTrainer(config)
};
self.pop_note = function()
- {// Removes a note from the left of the score
+ {
+ // Removes a note from the left of the score
var note = self.notes.shift();
self.score_box.removeChild(note[0]);
};
self.move_notes = function()
- {// Slides each note to the left a specified number of pixels.
+ {
+ // Slides each note to the left a specified number of pixels.
var i = 0; var note = null; var note_lft = null;
for (i = 0; i < self.notes.length; i++)
{
@@ -179,7 +187,8 @@ function ScoreTrainer(config)
};
self.get_random_note = function()
- {// Randomly selects a note from the available range (0-15)
+ {
+ // Randomly selects a note from the available range (0-15)
return Math.floor(Math.random() * 16); // 16 notes in the map
};
@@ -196,15 +205,15 @@ function ScoreTrainer(config)
self.intercept_clicks = function(e)
{
- // alert(e.target.value);
- self.check_answer(e.target.value);
+ // alert(e.target.id);
+ self.check_answer(e.target.id);
};
self.intercept_clef = function(e)
{
// alert(e.target);
self.set_clef(e.target.value);
- }
+ };
self.check_answer = function(ans)
{

0 comments on commit f413f7d

Please sign in to comment.