From a32a151dfbe18dd0455a56354f803e756685f15a Mon Sep 17 00:00:00 2001 From: jeremy Date: Wed, 24 Sep 2014 14:03:23 -0400 Subject: [PATCH] Added random root quiz --- ScaleDictionary.js | 61 +++++++++-------- boxfrets.js | 160 ++++++++++++++++++++++++++++++++------------- fretboard.html | 7 +- index.html | 3 +- 4 files changed, 153 insertions(+), 78 deletions(-) diff --git a/ScaleDictionary.js b/ScaleDictionary.js index 6d7c486..febe877 100644 --- a/ScaleDictionary.js +++ b/ScaleDictionary.js @@ -5,6 +5,9 @@ var FLATTED = -1; var NATURAL = 0; var SHARPED = 1; +var SCALE = "SC"; // constant +var ARP = "ARP"; // constant + var CHROMFLAT = ['C', 'D♭', 'D', 'E♭', 'E', 'F', 'G♭', 'G', 'A♭', 'A', 'B♭', 'B']; var CHROMSHARP = ['C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯', 'A', 'A♯', 'B']; @@ -203,27 +206,27 @@ var INTCLR_PENTDOM = ["i_root", "white","black","white","i_third","white","white var INTCLR_PENTMINMEL = ["i_root", "white","black","i_third","white","white","white","i_fifth","white","black","white","white"]; -var SC_MAJOR = { "name" : "Ionian", "intnames": INTS_FLATS, "color" : INTCLR_IONIAN }; -var SC_LYDIAN = { "name" : "Lydian", "intnames": INTS_SHARP4, "color" : INTCLR_LYDIAN }; -var SC_MIXOLYDIAN = { "name" : "Mixolydian", "intnames": INTS_FLATS, "color" : INTCLR_MIXOLYDIAN }; -var SC_DORIAN = { "name" : "Dorian", "intnames": INTS_FLATS, "color" : INTCLR_DORIAN }; -var SC_AEOLIAN = { "name" : "Aeolian", "intnames": INTS_FLATS, "color" : INTCLR_AEOLIAN }; -var SC_PHRYGIAN = { "name" : "Phrygian", "intnames": INTS_FLATS, "color" : INTCLR_PHRYGIAN }; -var SC_LOCRIAN = { "name" : "Locrian", "intnames": INTS_FLATS, "color" : INTCLR_LOCRIAN }; -var SC_DIMINISHED = { "name" : "Symmetrical Diminished", "intnames": INTS_DIM, "color" : INTCLR_SYMDIM }; -var SC_MINHARM = { "name" : "Harmonic Minor", "intnames": INTS_FLATS, "color" : INTCLR_MINHARM }; -var SC_MINMEL = { "name" : "Melodic Minor", "intnames": INTS_FLATS, "color" : INTCLR_MINMEL }; -var SC_ALTERED = { "name" : "Altered", "intnames": INTS_SUPERLOCRIAN, "color" : INTCLR_ALTERED }; -var SC_LYDIANDOM = { "name" : "Lydian Dominant", "intnames": INTS_SHARP4, "color" : INTCLR_LYDDOM }; -var SC_PHRYGDOM = { "name" : "Phrygian Dominant", "intnames": INTS_FLATS, "color" : INTCLR_PHRYGDOM }; -var SC_LYDIANAUG = { "name" : "Lydian Augmented", "intnames": INTS_SHARP4AUG, "color" : INTCLR_LYDAUG }; -var SC_MINNAT = { "name" : "Natural Minor", "intnames": INTS_FLATS, "color" : INTCLR_AEOLIAN }; -var SC_MINJAZZ = { "name" : "Jazz Minor", "intnames": INTS_FLATS, "color" : INTCLR_MINMEL }; - -var SC_PENTMIN = { "name" : "Minor Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTMIN }; -var SC_PENTMAJ = { "name" : "Major Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTMAJ }; -var SC_PENTDOM = { "name" : "Dominant Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTDOM }; -var SC_PENTMELMIN = { "name" : "Pentatonic Melodic Minor", "intnames": INTS_FLATS, "color" : INTCLR_PENTMINMEL }; +var SC_MAJOR = { "ngtype": SCALE, "varname" : "MAJOR", "name" : "Ionian", "intnames": INTS_FLATS, "color" : INTCLR_IONIAN }; +var SC_LYDIAN = { "ngtype": SCALE, "varname" : "LYDIAN", "name" : "Lydian", "intnames": INTS_SHARP4, "color" : INTCLR_LYDIAN }; +var SC_MIXOLYDIAN = { "ngtype": SCALE, "varname" : "MIXOLYDIAN", "name" : "Mixolydian", "intnames": INTS_FLATS, "color" : INTCLR_MIXOLYDIAN }; +var SC_DORIAN = { "ngtype": SCALE,"varname" : "DORIAN", "name" : "Dorian", "intnames": INTS_FLATS, "color" : INTCLR_DORIAN }; +var SC_AEOLIAN = { "ngtype": SCALE, "varname" : "AEOLIAN", "name" : "Aeolian", "intnames": INTS_FLATS, "color" : INTCLR_AEOLIAN }; +var SC_PHRYGIAN = { "ngtype": SCALE, "varname" : "PHRYGIAN", "name" : "Phrygian", "intnames": INTS_FLATS, "color" : INTCLR_PHRYGIAN }; +var SC_LOCRIAN = { "ngtype": SCALE, "varname" : "LOCRIAN","name" : "Locrian", "intnames": INTS_FLATS, "color" : INTCLR_LOCRIAN }; +var SC_DIMINISHED = { "ngtype": SCALE, "varname" : "DIMINISHED", "name" : "Symmetrical Diminished", "intnames": INTS_DIM, "color" : INTCLR_SYMDIM }; +var SC_MINHARM = { "ngtype": SCALE, "varname" : "MINHARM", "name" : "Harmonic Minor", "intnames": INTS_FLATS, "color" : INTCLR_MINHARM }; +var SC_MINMEL = { "ngtype": SCALE, "varname" : "MINMEL", "name" : "Melodic Minor", "intnames": INTS_FLATS, "color" : INTCLR_MINMEL }; +var SC_ALTERED = { "ngtype": SCALE, "varname" : "ALTERED", "name" : "Altered", "intnames": INTS_SUPERLOCRIAN, "color" : INTCLR_ALTERED }; +var SC_LYDIANDOM = { "ngtype": SCALE, "varname" : "LYDIANDOM", "name" : "Lydian Dominant", "intnames": INTS_SHARP4, "color" : INTCLR_LYDDOM }; +var SC_PHRYGDOM = { "ngtype": SCALE, "varname" : "PHRYGDOM", "name" : "Phrygian Dominant", "intnames": INTS_FLATS, "color" : INTCLR_PHRYGDOM }; +var SC_LYDIANAUG = { "ngtype": SCALE, "varname" : "LYDIANAUG", "name" : "Lydian Augmented", "intnames": INTS_SHARP4AUG, "color" : INTCLR_LYDAUG }; +var SC_MINNAT = { "ngtype": SCALE, "varname" : "MINNAT", "name" : "Natural Minor", "intnames": INTS_FLATS, "color" : INTCLR_AEOLIAN }; +var SC_MINJAZZ = { "ngtype": SCALE, "varname" : "MINJAZZ", "name" : "Jazz Minor", "intnames": INTS_FLATS, "color" : INTCLR_MINMEL }; + +var SC_PENTMIN = { "ngtype": SCALE, "varname" : "PENTMIN", "name" : "Minor Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTMIN }; +var SC_PENTMAJ = { "ngtype": SCALE, "varname" : "PENTMAJ", "name" : "Major Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTMAJ }; +var SC_PENTDOM = { "ngtype": SCALE, "varname" : "PENTDOM", "name" : "Dominant Pentatonic", "intnames": INTS_FLATS, "color" : INTCLR_PENTDOM }; +var SC_PENTMELMIN = { "ngtype": SCALE, "varname" : "PENTMELMIN", "name" : "Pentatonic Melodic Minor", "intnames": INTS_FLATS, "color" : INTCLR_PENTMINMEL }; var dictScales = { @@ -287,13 +290,13 @@ var INTCLR_MIN7 = ["i_root", "white","white","i_third","white","white","white"," var INTCLR_MIN7b5 = ["i_root", "white","white","i_third","white","white","i_fifth","white","white","white","i_seventh","white"]; var INTCLR_DIM = ["i_root", "white","white","i_third","white","white","i_fifth","white","white","i_seventh","white","white"]; -var ARP_MAJ = { "name" : "maj", "intnames": INTS_FLATS, "color" : INTCLR_MAJ }; -var ARP_MAJ7 = { "name" : "maj7", "intnames": INTS_SHARP4, "color" : INTCLR_MAJ7 }; -var ARP_DOM7 = { "name" : "7", "intnames": INTS_DOM, "color" : INTCLR_DOM7 }; -var ARP_MIN = { "name" : "min", "intnames": INTS_FLATS, "color" : INTCLR_MIN }; -var ARP_MIN7 = { "name" : "min7", "intnames": INTS_FLATS, "color" : INTCLR_MIN7 }; -var ARP_MIN7b5 = { "name" : "min7♭5", "intnames": INTS_FLATS, "color" : INTCLR_MIN7b5 }; -var ARP_DIM = { "name" : "dim", "intnames": INTS_DIM, "color" : INTCLR_DIM }; +var ARP_MAJ = { "ngtype": ARP, "varname" : "MAJ", "name" : "maj", "intnames": INTS_FLATS, "color" : INTCLR_MAJ }; +var ARP_MAJ7 = { "ngtype": ARP, "varname" : "MAJ7", "name" : "maj7", "intnames": INTS_SHARP4, "color" : INTCLR_MAJ7 }; +var ARP_DOM7 = { "ngtype": ARP, "varname" : "DOM7", "name" : "7", "intnames": INTS_DOM, "color" : INTCLR_DOM7 }; +var ARP_MIN = { "ngtype": ARP, "varname" : "MIN", "name" : "min", "intnames": INTS_FLATS, "color" : INTCLR_MIN }; +var ARP_MIN7 = { "ngtype": ARP, "varname" : "MIN7", "name" : "min7", "intnames": INTS_FLATS, "color" : INTCLR_MIN7 }; +var ARP_MIN7b5 = { "ngtype": ARP, "varname" : "MIN7b5", "name" : "min7♭5", "intnames": INTS_FLATS, "color" : INTCLR_MIN7b5 }; +var ARP_DIM = { "ngtype": ARP, "varname" : "DIM", "name" : "dim", "intnames": INTS_DIM, "color" : INTCLR_DIM }; var dictArps = { @@ -396,7 +399,7 @@ var FretboardModel = { this["ng"] = ng; - if(QUIZZINGINTERVAL){ + if(QUIZZING == ST_QUIZZING_INTERVAL){ ctl_updateQuizzingInterval(false); } }, diff --git a/boxfrets.js b/boxfrets.js index a2f486e..e3662b3 100644 --- a/boxfrets.js +++ b/boxfrets.js @@ -93,7 +93,12 @@ var POSSIBLE_COLORS = INTERVAL_COLORS.concat(PALLETE_COLORS);// concat interval var ERASER = false; // state of erase mode is on var BRUSH = false; // state of brush mode is on var SETTINGROOT = false; // state of setting the root with set root button -var QUIZZINGINTERVAL = false // state where interval quiz is awaiting check answer +var ST_QUIZZING_INTERVAL = "QUIZZING_INTERVAL"// Random Interval Quiz is underway +var ST_QUIZZING_RANDOMROOT ="QUIZZING_RANDOMROOT" // Random Root Quiz is underway +var ST_QUIZZING_URL = "QUIZZING_URL" // URL Quiz is underway +var ST_QUIZZING_NONE ="QUIZZING_NONE" // no quizzes underway +var QUIZZING = ST_QUIZZING_NONE // state where interval quiz is awaiting check answer +var CHECKING_URL_QUIZ = false // state where URL quiz is awaiting check answer, check answer button is visible var INTERVALMODE = false; // state of paint intervals as opposed to note-names var COLORBYINTERVALS = false; // state of color scheme according to interval vs. pallate selection var COLOR = "lightgreen"; // current pallete color for painting new notes @@ -361,8 +366,8 @@ var clear_fretboard = function(){ td_clear(GUITAR_STRINGS[i][j].td); } } - if(QUIZZINGINTERVAL){ - ctl_updateQuizzingInterval(false); + if(QUIZZING == ST_QUIZZING_INTERVAL){ + ctl_updateQuizzing(ST_QUIZZING_NONE); } ctrl_updateMessage(); } @@ -443,7 +448,12 @@ var ctrl_updateMessage = function(){ msg += mFB.getNotegroup().name+""; $('#message').html(msg); } else{ - $('#message').html(""); + if(CHECKING_URL_QUIZ){ + // if URL Quiz underway, put message to choose correct answers and check + $('#message').html('Click notes to answer quiz, the press "Check Quiz Answer!"'); + } else { + $('#message').html(""); + } } } @@ -461,8 +471,8 @@ var ctl_updateIntervalMode = function(isIntervalMode){ update_link(); } - if(QUIZZINGINTERVAL){ - ctl_updateQuizzingInterval(false); + if(QUIZZING==ST_QUIZZING_RANDOMROOT || QUIZZING == ST_QUIZZING_INTERVAL){ + ctl_updateQuizzing(ST_QUIZZING_NONE); } } @@ -580,16 +590,37 @@ var ctl_change_key = { } -var ctl_updateQuizzingInterval = function(stQuizzing){ - QUIZZINGINTERVAL = stQuizzing; - // actions from change in QUIZZINGINTERVAL state from clicking Random Interval on UI +var ctl_updateQuizzing = function(stQuizzing){ + QUIZZING = stQuizzing; + // actions from change in QUIZZING state from clicking Random Interval on UI + switch(stQuizzing){ + case ST_QUIZZING_INTERVAL: + ctl_newIntQuiz(); + // redo button text + $("#intervalQuiz").attr('value', CHECKANSWER ); + break; + case ST_QUIZZING_URL: + $('#colorchooser').hide(); + $('#checkanswer').show(); + break; + case ST_QUIZZING_RANDOMROOT: + ctl_newRandRoot(); + break; + case ST_QUIZZING_NONE: + $("#intervalQuiz").attr('value','Random Interval'); + $("#randomRootQuiz").attr('value', 'Random Root' ); + //hide URL quiz answer check + $("#checkanswer").hide(); + break; + default: + // bad state given + break; + } if(stQuizzing){ - ctl_newIntQuiz(); - // redo button text - $("#intervalQuiz").attr('value', CHECKANSWER ); + }else{ // redo button text - $("#intervalQuiz").attr('value','Random Interval'); + } } var ctl_newIntQuiz = function(){ @@ -622,25 +653,6 @@ var ctl_newIntQuiz = function(){ } // get safeName from note var newRootNoteName = $('#'+'ns_'+rootString+'_'+rootFret).attr('notename'); - //var newRootNoteName="A♭"; - - // if(newRootNoteName.length>1){ - // // accidental - // // accidentals (eg, Csharp or Cflat) will depend on last notegroup. - // // flip coin on all accidentals - // var acc = getAccTypeStr(newRootNoteName); - - // if(Math.floor(Math.random() * 2 )==1){ - // // switch accidental - // // switch accidental only if room on fretboard and in key Dictionary - - // } else{ - // // keep accidental - - // } - // } else { - // newRootNoteName = newRootNoteName.charAt(0)+"natural"; - // } ctl_change_key.setRoot(getKeyObjFromNoteName(newRootNoteName)); // remove text in notecontainer's notespan, setting interval will return text @@ -652,9 +664,43 @@ var ctl_newIntQuiz = function(){ } +var ctl_newRandRoot = function(){ + clear_fretboard(); + INTERVALMODE = false; + //get random scale + // get randonm note on FB + var note = get_random_stringFret(); // 0 = string, 1 = fret + td_paint('#'+'nc_'+note[0]+'_'+note[1], "red"); + var sKey = getKeyObjFromNoteName($('#'+'nc_'+note[0]+'_'+note[1]).attr('notename')).safename; + var ng = get_random_scale_notegroup_key() // gets random dictionary key from scaleDict + arrNg = ng.split('_'); + set_notes_per_notegroup(sKey, arrNg[0] , arrNg[1]) +} + // more utilities // +// +var get_random_stringFret = function(){ + var lowFret = 0; + var highFret = GUITAR_STRINGS[0].length; + var stringFret= [-1, -1]; + stringFret[0] = Math.floor((Math.random() * GUITAR_STRINGS.length) );// string + while (!(stringFret[1] >= lowFret && stringFret[1] <= highFret)){ + stringFret[1] = Math.floor(Math.random() * highFret ); + } + return stringFret; +} + +var get_random_scale_notegroup_key = function(){ + var scaleKeys = Object.keys(dictScales); + var rndKey = Math.floor((Math.random() * scaleKeys.length) ); + //var scale = dictScales[scaleKeys[rndKey]]; + //var sc =dictScales[Math.floor((Math.random() * dictScales.length) )]; + return scaleKeys[rndKey]; + +} + var set_notes_per_notegroup = function(keySafeName, ngType, ng){ // if color by intervals is off, turn on and save state var paletteState = !COLORBYINTERVALS; @@ -663,7 +709,7 @@ var set_notes_per_notegroup = function(keySafeName, ngType, ng){ var ng = ngType+'_'+ng; mFB.setNotegroup(ng); set_notespans(); - ctl_updateQuizzingInterval(false); + ctl_updateQuizzing(ST_QUIZZING_NONE); COLORBYINTERVALS = !paletteState; // keep pallete if open } @@ -804,8 +850,8 @@ var updateSetRootView = function(){ $("#setRoot").addClass( 'setRootArmed' ); }else{ $("#setRoot").removeClass( 'setRootArmed' ); - if(QUIZZINGINTERVAL){ - ctl_updateQuizzingInterval(false); + if(QUIZZING==ST_QUIZZING_RANDOMROOT || QUIZZING == ST_QUIZZING_INTERVAL){ + ctl_updateQuizzing(ST_QUIZZING_NONE); } } } @@ -999,14 +1045,19 @@ jQuery(document).ready(function() { if (is_defined(url_params['diagram_title'])){ $('#diagram_title').val(unescape(url_params['diagram_title'])); } + // if there are a bunch of string/fret data in URL and q is y, then it's a quiz + // show the 'check answer' button to color code per the tester's string/fret data if (is_defined(url_params['strings'])){ if (is_defined(url_params['q']) && url_params['q'] == 'y'){ COLOR = "black"; $('#checkanswer').click(function(){ check_answers(url_params['strings']); + //CHECKING_URL_QUIZ = false; }); - $('#colorchooser').hide(); - $('#checkanswer').show(); + ctl_updateQuizzing(ST_QUIZZING_URL) + // $('#colorchooser').hide(); + // $('#checkanswer').show(); + //CHECKING_URL_QUIZ = true; } else { fill_from_repr(url_params['strings']); } @@ -1068,11 +1119,14 @@ jQuery(document).ready(function() { }) +// help text instructions dialog $(function() { $( "#helpText" ).dialog({ autoOpen: false },{ - width: 640 + width: 640, + height: 640 + },{ dialogClass:".helpInstructions", }); @@ -1134,7 +1188,7 @@ jQuery(document).ready(function() { $('#clear').click(function(){ message.html(''); clear_fretboard(); - ctl_updateQuizzingInterval(false); + if(QUIZZING==ST_QUIZZING_RANDOMROOT || QUIZZING == ST_QUIZZING_INTERVAL){ctl_updateQuizzing(ST_QUIZZING_NONE);} update_link(); }); @@ -1148,7 +1202,7 @@ jQuery(document).ready(function() { // } else{ // ctl_updateIntervalMode(true); // } - ctl_updateQuizzingInterval(false); + if(QUIZZING==ST_QUIZZING_RANDOMROOT || QUIZZING == ST_QUIZZING_INTERVAL){ctl_updateQuizzing(ST_QUIZZING_NONE);} }); // bind button for 'Interval/Notes' -- set Fretboard Model state to paint fretboard notes with interval colors or @@ -1160,7 +1214,7 @@ jQuery(document).ready(function() { ctl_updateColorIntMode(true); } - ctl_updateQuizzingInterval(false); + if(QUIZZING==ST_QUIZZING_RANDOMROOT || QUIZZING == ST_QUIZZING_INTERVAL){ctl_updateQuizzing(ST_QUIZZING_NONE);} }); @@ -1177,7 +1231,7 @@ jQuery(document).ready(function() { $('#selKey').change(function(){ ctl_change_key.selKeyChange($('#selKey').val()); - ctl_updateQuizzingInterval(false); + if(QUIZZING==ST_QUIZZING_RANDOMROOT || QUIZZING == ST_QUIZZING_INTERVAL){ctl_updateQuizzing(ST_QUIZZING_NONE);} }); // dash player controls -- for Abridged Player Model @@ -1207,13 +1261,27 @@ jQuery(document).ready(function() { // button will read "check answer" until new paint note or clear note. $('#intervalQuiz').click(function(){ if($('#intervalQuiz').val() == CHECKANSWER){ - QUIZZINGINTERVAL = false; - ctl_updateQuizzingInterval(QUIZZINGINTERVAL); + // stop quiz + ctl_updateQuizzing(ST_QUIZZING_NONE); + ctl_updateIntervalMode(true); + } else { + // start interval quiz + ctl_updateIntervalMode(false); + ctl_updateQuizzing(ST_QUIZZING_INTERVAL); + } + }) + +// bind 'random note quiz' to functionality -- each click generates a random root note and loads a scale +// where you can guess the rest + $('#randomRootQuiz').click(function(){ + if($('#intervalQuiz').val() == CHECKANSWER){ + // stop quiz + ctl_updateQuizzing(ST_QUIZZING_NONE); ctl_updateIntervalMode(true); } else { + // start interval quiz ctl_updateIntervalMode(false); - QUIZZINGINTERVAL = !QUIZZINGINTERVAL; - ctl_updateQuizzingInterval(QUIZZINGINTERVAL); + ctl_updateQuizzing(ST_QUIZZING_RANDOMROOT); } }) diff --git a/fretboard.html b/fretboard.html index 4834e53..3c86076 100644 --- a/fretboard.html +++ b/fretboard.html @@ -85,9 +85,9 @@
- +
- +
@@ -152,6 +152,9 @@
+
+ +
Link Quiz link diff --git a/index.html b/index.html index 7c192c3..f02538e 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@

Fretboard Studies v.2

I added some functionality to the Fretboard Studies app by Elias Dorneles.

-

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 here. Feel free to branch and improve the code!

+

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 version is here. Feel free to branch and improve the code!

Below is the help/instructions text which can be accessed in the app by clicking the '?' button:

@@ -53,6 +53,7 @@

Help/Instructions

  • Click the Quiz 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 Check Answer! button (only available with Quiz URLs) will highlight 'correct' notes in green and 'wrong' notes in red, per the view created by the tester.
  • Click the Reset link to get a fresh URL.
  • Click the Random Interval 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.
    • +
  • Click the Random Root button to show the root of a randome Notegroup, which will be identified above the fretboard on the right. Paint the notes of the notegroup and click the Intervals button to see the notes of the notegroup colored in black.