From e27656f0346d052b714f2ba9123bb0a783236123 Mon Sep 17 00:00:00 2001
From: jeremy <jeremyjmarkowitz@gmail.com>
Date: Thu, 25 Sep 2014 11:23:49 -0400
Subject: [PATCH] Changed root quiz; help text

help text is now var in HelpText.js
Random Root does not revert to note names
---
 HelpText.js    | 31 +++++++++++++++++++++++++++++++
 boxfrets.js    |  6 ++++--
 fretboard.html | 36 ++----------------------------------
 index.html     | 40 ++++++++--------------------------------
 4 files changed, 45 insertions(+), 68 deletions(-)
 create mode 100644 HelpText.js

diff --git a/HelpText.js b/HelpText.js
new file mode 100644
index 0000000..91fb015
--- /dev/null
+++ b/HelpText.js
@@ -0,0 +1,31 @@
+var HELP_TEXT = "<ul>"
++ "<li>Click on the <strong>Fretboard</strong> to display notes.</li>"
++ "<li>Click on any painted <strong>Note</strong> again to remove.</li>"
++ "<li>Click <strong>Brush</strong> to activate painting notes by moving mouse on fretboard.</li>"
++ "<li>Click <strong>Erase</strong> to activate erasing notes by moving mouse on fretboard.</li>"
++ "<li>Click <strong>Clear</strong> to erase all notes on fretboard.</li>"
++  "<li>Click on <strong>Fretpainters</strong> (gray bars below frets) to show/hide all notes in fret.</li>"
++ "<li>Click a color in the <strong>Color Palette</strong> to paint notes with a different color.</li>"
++ "<li>Click on <strong>Color Intervals</strong> to re-paint visible notes so the root, third, fifth and seventh are colored black, orange, blue, green and purple.</li>"
++ "<li>Use the <strong>Key pull-down</strong> starting with 'C' to change the root note.</li>"
++ "<li>Click <strong>Set Root</strong> and the next clicked note becomes the key root note.</li>"
++ "<li>Click <strong>Palette Color</strong> to reopen color pallete.</li>"
++ "<li>Click <strong>Interval</strong> button to show interval names of notes.</li>"
++ "<li>Click <strong>Notes</strong> button to return to showing names of notes.</li>"
++ "<li>Use tabs in the Notegroup <strong>Dictionary</strong> (below fretboard on left) to find a scale or arpeggio view.</li>"
++ "<li>To view the painted notes relative to an arpeggio or scale, click a colored <Strong>Notegroup</Strong> button in the tabbed <strong>Dictionary</strong>.</li>"
++ "<li>Drag a <strong>Notegroup</strong> from the <strong>Dictionary</strong> on the left to the <strong>Dashboard/Player</strong> on the right to add a Notegroup to the Dashboard/Player.</li>"
++ "<li>Drag <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong> to re-arrange.</li>"
++ "<li>Click a <strong>Notegroup</strong> in the <strong>Dashboard/Player</strong> or <strong>Dictionary</strong> to re-paint notes on the <strong>Fretboard</strong> according to selection.</li>"
++ "<li>Double-click a <Strong>Notegroup</Strong> in the <strong>Dashboard/Player</strong> to remove it.</li>"
++ "<li>Cycle through the sequence of <Strong>Notegroups</Strong> in the <strong>Dashboard/Player</strong> with the <strong>&lt;&lt;</strong> and <strong>&gt;&gt;</strong> buttons.</li>"
++ "<li>Click <strong>Play</strong> to automatically repaint visible Notes on the <strong>Fretboard</strong> according to the sequence of <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong>.</li>"
++ "<li>Use the <strong>Speed</strong> spinner (defaulted at 60) to change play speed.</li>"
++ "<li>Click <strong>Stop</strong> to stop the automatic re-painting with <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong>.</li>"
++ "<li>Type where it says <strong>Click to Add Title</strong> to add title for a <strong>Link</strong> to current view.</li>"
++ "<li>Click the <strong>Link</strong> link below the Notegroup Dictionary to view a URL recreating the current view.  Save the URL for others or future reference.</li>"
++ "<li>Click the <strong>Quiz</strong> link to view a URL for a quiz featuring a blank Fretboard.  Testees viewing Quiz links can click all notes matching the Page Title.  Clicking the <strong>Check Answer!</strong> button (only available with Quiz URLs) will highlight 'correct' notes in green and 'wrong' notes in red, per the view created by the tester.</li>"
++ "<li>Click the <strong>Reset</strong> link to get a fresh URL.</li>"
++ "<li>Click the <strong>Random Interval</strong> button to view two random notes, with the root colored in red.  Guess the related interval of the blank green note and click the 'Check Answer' button to view the interval.  The intervals are based on the last Notegroup chosen, ie, after clicking a 'Symmetrical Diminished' Notegroup, a double-flat 7 will appear in place of a Major 13.</li>"
++ "<li>Click the <strong>Random Root</strong> button to show the root of a random <Strong>Notegroup</Strong>, which will be identified above the fretboard on the right.  Paint the notes of the notegroup.  With the <strong>Color Intervals</strong> mode selected, all notes in the notgroup will have a black background.</li>"
++ "</ul>";
\ No newline at end of file
diff --git a/boxfrets.js b/boxfrets.js
index e3662b3..921a48a 100644
--- a/boxfrets.js
+++ b/boxfrets.js
@@ -49,8 +49,9 @@
 // The 'New Interval Quiz' will randomly paint a new interval for the user to gues the relationship.
 
 // constants
+//
+
 var CHECKANSWER = 'Check Answer!';
-var HELP_TEXT = "HEre is some help";
 
 var GUITAR_STRINGS; // will be array of strings
 var INTERVAL_COLORS = [
@@ -666,7 +667,7 @@ var ctl_newIntQuiz = function(){
 
 var ctl_newRandRoot = function(){
 		clear_fretboard();
-		INTERVALMODE = false;
+		//INTERVALMODE = false;
 		//get random scale
 		// get randonm note on FB
 		var note = get_random_stringFret(); // 0 = string, 1 = fret
@@ -1135,6 +1136,7 @@ jQuery(document).ready(function() {
 
 // bind help button to show help dialog
 	$('#btnHelp').click(function(){
+		$( "#helpText" ).html(HELP_TEXT);
 			$( "#helpText" ).dialog( "open" );
 	});
 
diff --git a/fretboard.html b/fretboard.html
index 382f9a3..4d1cf97 100644
--- a/fretboard.html
+++ b/fretboard.html
@@ -11,7 +11,7 @@
          <link rel="stylesheet" href="smoothness/theme.css">
          <link rel="stylesheet" href="fretboard.css">
 
-
+        <script type="text/javascript" src="HelpText.js"></script>
         <script type="text/javascript" src="ScaleDictionary.js"></script>
         <script type="text/javascript" src="PlayerModel.js"></script>
         <script type="text/javascript" src="BoxFrets.js"></script>
@@ -28,39 +28,7 @@
 
     </div>
     <div id="helpText" title="Instructions" >
-        <ul style="">
-            <li>Click on the <strong>Fretboard</strong> to display notes.</li>
-            <li>Click on any painted <strong>Note</strong> again to remove.</li>
-            <li>Click <strong>Brush</strong> to activate painting notes by moving mouse on fretboard.</li>
-            <li>Click <strong>Erase</strong> to activate erasing notes by moving mouse on fretboard.</li>
-            <li>Click <strong>Clear</strong> to erase all notes on fretboard.</li>
-            <li>Click on <strong>Fretpainters</strong> (gray bars below frets) to show/hide all notes in fret.</li>
-            <li>Click a color in the <strong>Color Palette</strong> to paint notes with a different color.</li>
-            <li>Click on <strong>Color Intervals</strong> to re-paint visible notes so the root, third, fifth and seventh are colored black, orange, blue, green and purple.</li>
-            <li>Use the <strong>Key pull-down</strong> starting with 'C' to change the root note.</li>
-            <li>Click <strong>Set Root</strong> and the next clicked note becomes the key root note.</li>
-            <li>Click <strong>Palette Color</strong> to reopen color pallete.</li>
-            <li>Click <strong>Interval</strong> button to show interval names of notes.</li>
-            <li>Click <strong>Notes</strong> button to return to showing names of notes.</li>
-            <li>Use tabs in the Notegroup <strong>Dictionary</strong> (below fretboard on left) to find a scale or arpeggio view.</li>
-            <li>To view the painted notes relative to an arpeggio or scale, click a colored <Strong>Notegroup</Strong> button in the tabbed <strong>Dictionary</strong>.</li>
-            <li>Drag a <strong>Notegroup</strong> from the <strong>Dictionary</strong> on the left to the <strong>Dashboard/Player</strong> on the right to add a Notegroup to the Dashboard/Player.</li>
-            <li>Drag <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong> to re-arrange.</li>
-            <li>Click a <strong>Notegroup</strong> in the <strong>Dashboard/Player</strong> or <strong>Dictionary</strong> to re-paint notes on the <strong>Fretboard</strong> according to selection.</li>
-            <li>Double-click a <Strong>Notegroup</Strong> in the <strong>Dashboard/Player</strong> to remove it.</li>
-            <li>Cycle through the sequence of <Strong>Notegroups</Strong> in the <strong>Dashboard/Player</strong> with the <strong>&lt;&lt;</strong> and <strong>&gt;&gt;</strong> buttons.</li>
-            <li>Click <strong>Play</strong> to automatically repaint visible Notes on the <strong>Fretboard</strong> according to the sequence of <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong>.</li>
-            <li>Use the <strong>Speed</strong> spinner (defaulted at 60) to change play speed.</li>
-            <li>Click <strong>Stop</strong> to stop the automatic re-painting with <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong>.</li>
-            <li>Type where it says <strong>Click to Add Title</strong> to add title for a <strong>Link</strong> to current view.</li>
-            <li>Click the <strong>Link</strong> link below the Notegroup Dictionary to view a URL recreating the current view.  Save the URL for others or future reference.</li>
-            <li>Click the <strong>Quiz</strong> link to view a URL for a quiz featuring a blank Fretboard.  Testees viewing Quiz links can click all notes matching the Page Title.  Clicking the <strong>Check Answer!</strong> button (only available with Quiz URLs) will highlight 'correct' notes in green and 'wrong' notes in red, per the view created by the tester.</li>
-            <li>Click the <strong>Reset</strong> link to get a fresh URL.</li>
-            <li>Click the <strong>Random Interval</strong> button to view two random notes, with the root colored in red.  Guess the related interval of the blank green note and click the 'Check Answer' button to view the interval.  The intervals are based on the last Notegroup chosen, ie, after clicking a 'Symmetrical Diminished' Notegroup, a double-flat 7 will appear in place of a Major 13.</li>
-            <li>Click the <strong>Random Root</strong> button to show the root of a randome <Strong>Notegroup</Strong>, which will be identified above the fretboard on the right.  Paint the notes of the notegroup and click the <Strong>Color Intervals</Strong> button to see the notes of the notegroup colored in black.</li>
-
-
-        </ul>
+        <!-- populated with JS -->
     </div>
 
 <div>
diff --git a/index.html b/index.html
index 99010da..20370fa 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <html>
 <head>
 <title>Fretboard Studies</title>
+<script type="text/javascript" src="HelpText.js"></script>
+
 <style type="text/css" media="screen">
 body { font-family:sans-serif; font-size:100%; }
 #help {background:#f5f5f5; padding:12px; border: solid thin #000}
@@ -24,40 +26,14 @@ <h1><a href="fretboard.html">Fretboard Studies v.2</a></h1>
 
 <div id="help">
 <h4>Help/Instructions</h4>
-<ul>
-<li>Click on the <strong>Fretboard</strong> to display notes.</li>
-<li>Click on any painted <strong>Note</strong> again to remove.</li>
-<li>Click <strong>Brush</strong> to activate painting notes by moving mouse on fretboard.</li>
-<li>Click <strong>Erase</strong> to activate erasing notes by moving mouse on fretboard.</li>
-<li>Click <strong>Clear</strong> to erase all notes on fretboard.</li>
-<li>Click on <strong>Fretpainters</strong> (gray bars below frets) to show/hide all notes in fret.</li>
-<li>Click a color in the <strong>Color Palette</strong> to paint notes with a different color.</li>
-<li>Click on <strong>Color Intervals</strong> to re-paint visible notes so the root, third, fifth and seventh are colored black, orange, blue, green and purple.</li>
-<li>Use the <strong>Key pull-down</strong> starting with 'C' to change the root note.</li>
-<li>Click <strong>Set Root</strong> and the next clicked note becomes the key root note.</li>
-<li>Click <strong>Palette Color</strong> to reopen color pallete.</li>
-<li>Click <strong>Interval</strong> button to show interval names of notes.</li>
-<li>Click <strong>Notes</strong> button to return to showing names of notes.</li>
-<li>Use tabs in the Notegroup <strong>Dictionary</strong> (below fretboard on left) to find a scale or arpeggio view.</li>
-<li>To view the painted notes relative to an arpeggio or scale, click a colored <Strong>Notegroup</Strong> button in the tabbed <strong>Dictionary</strong>.</li>
-<li>Drag a <strong>Notegroup</strong> from the <strong>Dictionary</strong> on the left to the <strong>Dashboard/Player</strong> on the right to add a Notegroup to the Dashboard/Player.</li>
-<li>Drag <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong> to re-arrange.</li>
-<li>Click a <strong>Notegroup</strong> in the <strong>Dashboard/Player</strong> or <strong>Dictionary</strong> to re-paint notes on the <strong>Fretboard</strong> according to selection.</li>
-<li>Double-click a <Strong>Notegroup</Strong> in the <strong>Dashboard/Player</strong> to remove it.</li>
-<li>Cycle through the sequence of <Strong>Notegroups</Strong> in the <strong>Dashboard/Player</strong> with the <strong>&lt;&lt;</strong> and <strong>&gt;&gt;</strong> buttons.</li>
-<li>Click <strong>Play</strong> to automatically repaint visible Notes on the <strong>Fretboard</strong> according to the sequence of <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong>.</li>
-<li>Use the <strong>Speed</strong> spinner (defaulted at 60) to change play speed.</li>
-<li>Click <strong>Stop</strong> to stop the automatic re-painting with <strong>Notegroups</strong> in the <strong>Dashboard/Player</strong>.</li>
-<li>Type where it says <strong>Click to Add Title</strong> to add title for a <strong>Link</strong> to current view.</li>
-<li>Click the <strong>Link</strong> link below the Notegroup Dictionary to view a URL recreating the current view.  Save the URL for others or future reference.</li>
-<li>Click the <strong>Quiz</strong> link to view a URL for a quiz featuring a blank Fretboard.  Testees viewing Quiz links can click all notes matching the Page Title.  Clicking the <strong>Check Answer!</strong> button (only available with Quiz URLs) will highlight 'correct' notes in green and 'wrong' notes in red, per the view created by the tester.</li>
-<li>Click the <strong>Reset</strong> link to get a fresh URL.</li>
-<li>Click the <strong>Random Interval</strong> button to view two random notes, with the root colored in red.  Guess the related interval of the blank green note and click the 'Check Answer' button to view the interval.  The intervals are based on the last Notegroup chosen, ie, after clicking a 'Symmetrical Diminished' Notegroup, a double-flat 7 will appear in place of a Major 13.</li>
-<li>Click the <strong>Random Root</strong> button to show the root of a randome <Strong>Notegroup</Strong>, which will be identified above the fretboard on the right.  Paint the notes of the notegroup and click the <Strong>Color Intervals</Strong> button to see the notes of the notegroup colored in black.</li>
-</ul>
+<div id="helpText">
+</div>
 </div>
 
 </div>
 
 </body>
-</html>
\ No newline at end of file
+</html>
+<script>
+document.getElementById("helpText").innerHTML = HELP_TEXT;
+</script>
\ No newline at end of file