Skip to content

Commit

Permalink
Change interval quiz; update index.html
Browse files Browse the repository at this point in the history 
add help text to index.html page
put 'R' on root note of interval quiz
  • Loading branch information
@deltadada
deltadada committed Sep 12, 2014
1 parent 21616fc commit 3ffd5ef
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 21 deletions.
4 changes: 2 additions & 2 deletions boxfrets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -600,7 +600,7 @@ var ctl_newIntQuiz = function(){
INTERVALMODE = false;
var lowFret = 0;
var highFret = GUITAR_STRINGS[0].length;
var rngFrets= 6;// the range of frets from root can be set here
var rngFrets= 5;// the range of frets from root can be set here
var rngLo =1;
var rngHi =1;
// get two randmon notes on FB
Expand Down Expand Up @@ -644,7 +644,7 @@ var ctl_newIntQuiz = function(){

ctl_change_key.setRoot(getKeyObjFromNoteName(newRootNoteName));
// remove text in notecontainer's notespan, setting interval will return text
$('#'+'ns_'+rootString+'_'+rootFret).text(' ');
$('#'+'ns_'+rootString+'_'+rootFret).text('R');
td_paint('#'+'nc_'+rootString+'_'+rootFret, "red");

$('#'+'ns_'+intString+'_'+intFret).text(' ');
Expand Down
2 changes: 1 addition & 1 deletion fretboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<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>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>
Expand Down
66 changes: 48 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,62 @@
<html>
<head>
<title>Fretboard Studies</title>
<style type="text/css" media="screen">
body { font-family:sans-serif; font-size:100%; }
#help {background:#f5f5f5; padding:12px; border: solid thin #000}
ul {margin-right: 8px;}
li {margin-bottom: 7px; }
h4 {margin-left: 8px; margin-top: 2px; color:#555 }
#main_contianer{padding:8px 0 0 36px; width: 650px;}
</style>

</style>
</head>
<body>
<div id="main_contianer">
<h1><a href="fretboard.html">Fretboard Studies v.2</a></h1>

<p>I added some functionality to the Fretboard Studies app by Elias Dorneles:</p>
<p>I added some functionality to the Fretboard Studies app by <a href="https://github.com/eliasdorneles">Elias Dorneles</a>.</p>

<ul>
<li>There is a note painter which paints wherever the mouse is until turned off.</li>

<li>There are also "fretpainters" at the bottom which will paint all the notes in a fret.</li>

<li>You can show the note names or the note intervals relative to the selected root.</li>

<li>There is a root pull-down and a set Root mode with the next mouse click.</li>

<li>There is also a notegroups browser which will replace any painted notes with scales or arpeggios (and update the root). I haven't figured out the best way to present chords yet.</li>
<p>My main goals were to create a learning tool that would help me see interval, chord and scale relationships better. My git-hub repository for this verion is <a href="https://github.com/deltadada/Fretboard-Studies">here</a>. Feel free to branch and improve the code!</p>

<li>The paint by Interval color mode will continue to paint with this note group.</li>
<p>Below is the help/instructions text which can be accessed in the app by clicking the <strong>'?'</strong> button:</p>

<li>You can drag the notegroups to the notegroup dashboard. From there you can single click to convert painted notes to the new notegroup. These notegroup "buttons" can be resorted and double-clicked to trash.</li>

<li>There are also Player controls which will cycle through the notes relative to the speed spinner.</li>

<li>The generate link works pretty much the same.</li>
<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>
</ul>
</div>

</div>

<p>My git-hub repository for this verion is <a href="https://github.com/deltadada/Fretboard-Studies">here</a>.</p>
</body>
</html>

0 comments on commit 3ffd5ef

Please sign in to comment.