From 7b12ca9c9d12d7f92c09733721ef688359f41037 Mon Sep 17 00:00:00 2001 From: jeremy Date: Thu, 11 Sep 2014 10:26:58 -0400 Subject: [PATCH] Interval Quiz, added A#, Instructions Added '?' button for help. Added A# as a key. Added interval quiz button. Moved Quiz link, link, reset to main 'panel' TODO: consider making 'PanelModel' --- IntervalQuiz.js | 2 - ScaleDictionary.js | 8 +++- boxfrets.js | 112 ++++++++++++++++++++++++++++++++++++++------- fretboard.css | 37 +++++++++------ fretboard.html | 61 ++++++++++++++++++++---- 5 files changed, 178 insertions(+), 42 deletions(-) delete mode 100644 IntervalQuiz.js diff --git a/IntervalQuiz.js b/IntervalQuiz.js deleted file mode 100644 index 4a1326e..0000000 --- a/IntervalQuiz.js +++ /dev/null @@ -1,2 +0,0 @@ -// -var test = 1; \ No newline at end of file diff --git a/ScaleDictionary.js b/ScaleDictionary.js index 32fc97d..9cf95c3 100644 --- a/ScaleDictionary.js +++ b/ScaleDictionary.js @@ -24,6 +24,7 @@ kB = {"name" : "B", "safename" : "Bnatural", "baseScale" : CHROMFLAT, "fromC" : kCsharp = {"name" : "C♯", "safename" : "Csharp", "baseScale" : CHROMSHARP, "fromC" : 1}; kFsharp = {"name" : "F♯", "safename" : "Fsharp", "baseScale" : CHROMSHARP, "fromC" : 6}; kGsharp = {"name" : "G♯", "safename" : "Gsharp","baseScale" : CHROMSHARP, "fromC" : 8}; +kAsharp = {"name" : "A♯", "safename" : "Asharp","baseScale" : CHROMSHARP, "fromC" : 10}; // dict keys collects above objects var dictKeys = { @@ -41,7 +42,8 @@ var dictKeys = { "Bnatural" : kB, "Csharp" : kCsharp, "Fsharp" : kFsharp, - "Gsharp" : kGsharp }; + "Gsharp" : kGsharp, + "Asharp" : kAsharp}; var INTS_FLATS = ['R', '♭9', '9', '♭3', '3', '11', '♭5', '5', '♭13', '13', '♭7', '7']; var INTS_SHARP4 = ['R', '♭9', '9', '♭3', '3', '11', '♯11', '5', '♭13', '13', '♭7', '7']; @@ -390,6 +392,10 @@ var FretboardModel = { } this["ng"] = ng; + + if(QUIZZINGINTERVAL){ + ctl_updateQuizzingInterval(false); + } }, "getNGname" : function(){ diff --git a/boxfrets.js b/boxfrets.js index 9008cbc..da5fb63 100644 --- a/boxfrets.js +++ b/boxfrets.js @@ -47,7 +47,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; var INTERVAL_COLORS = [ @@ -90,6 +92,7 @@ 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 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 @@ -122,9 +125,11 @@ var td_paint = function(td, newColor){ td.removeClass(POSSIBLE_COLORS.join(" ")); td.addClass(color); } + var td_clear = function(td){ td_paint(td, 'transparent'); } + var is_painted = function(td){ var isPainted = !$(td).hasClass('transparent'); return !$(td).hasClass('transparent'); @@ -349,6 +354,9 @@ var clear_fretboard = function(){ td_clear(GUITAR_STRINGS[i][j].td); } } + if(QUIZZINGINTERVAL){ + ctl_updateQuizzingInterval(false); + } ctrl_updateMessage(); } var pick_note = function(position, offset){ @@ -432,9 +440,9 @@ var ctrl_updateMessage = function(){ } } -var ctl_updateIntervalMode = function(boolNewMode){ +var ctl_updateIntervalMode = function(isIntervalMode){ - if(boolNewMode){ + if(isIntervalMode){ $('#modeNoteInt').attr('value', 'Notes'); INTERVALMODE = true; set_notespans(); @@ -445,6 +453,10 @@ var ctl_updateIntervalMode = function(boolNewMode){ set_notespans(); update_link(); } + + if(QUIZZINGINTERVAL){ + ctl_updateQuizzingInterval(false); + } } var ctl_populateDash = function(str){ @@ -561,6 +573,18 @@ var ctl_change_key = { } +var ctl_updateQuizzingInterval = function(stQuizzing){ + QUIZZINGINTERVAL = stQuizzing; + // actions from change in QUIZZINGINTERVAL state from clicking Random Interval on UI + if(stQuizzing){ + ctl_newIntQuiz(); + // redo button text + $("#intervalQuiz").attr('value', CHECKANSWER ); + }else{ + // redo button text + $("#intervalQuiz").attr('value','Random Interval'); + } + } var ctl_newIntQuiz = function(){ // clear FB clear_fretboard(); @@ -589,14 +613,34 @@ var ctl_newIntQuiz = function(){ intFret = -1; } } - - var newRootNoteName = $('#'+'ns_'+rootString+'_'+rootFret).attr('notename'); // get safeName from note + var newRootNoteName = $('#'+'ns_'+rootString+'_'+rootFret).attr('notename'); + //var newRootNoteName="A♭"; - ctl_change_key.setRoot(getKeyObjFromNoteName(newRootNoteName)); + // 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 + $('#'+'ns_'+rootString+'_'+rootFret).text(' '); td_paint('#'+'nc_'+rootString+'_'+rootFret, "red"); - $('#'+'ns_'+intString+'_'+intFret).text(' ');// remove text in notecontainer's notespan, setting interval will return text + + $('#'+'ns_'+intString+'_'+intFret).text(' '); td_paint('#'+'nc_'+intString+'_'+intFret, "lightgreen"); } @@ -612,6 +656,7 @@ var set_notes_per_notegroup = function(keySafeName, ngType, ng){ var ng = ngType+'_'+ng; mFB.setNotegroup(ng); set_notespans(); + ctl_updateQuizzingInterval(false); COLORBYINTERVALS = !paletteState; // keep pallete if open //var msg = "Painting notes for "+mFB.getKeyTextName(); // if(ngType != "ARP"){msg += " ";} @@ -751,7 +796,10 @@ var updateSetRootView = function(){ if(SETTINGROOT){ $("#setRoot").addClass( 'setRootArmed' ); }else{ - $("#setRoot").removeClass( 'setRootArmed' ) + $("#setRoot").removeClass( 'setRootArmed' ); + if(QUIZZINGINTERVAL){ + ctl_updateQuizzingInterval(false); + } } } @@ -1006,7 +1054,6 @@ jQuery(document).ready(function() { { td_paint($('#'+'nc_'+s+'_'+fret), COLOR); } - } } // create new link @@ -1014,6 +1061,24 @@ jQuery(document).ready(function() { }) + $(function() { + $( "#helpText" ).dialog({ + autoOpen: false + },{ + width: 640 + },{ + dialogClass:".helpInstructions", + }); + }); + + +// bind help button to show help dialog + $('#btnHelp').click(function(){ + $( "#helpText" ).dialog( "open" ); + }); + + + // set up eraser brush and clear buttons: // bind brush button functionality -- paints notes based on note color and interval onMouseOver @@ -1062,18 +1127,21 @@ jQuery(document).ready(function() { $('#clear').click(function(){ message.html(''); clear_fretboard(); + ctl_updateQuizzingInterval(false); update_link(); }); // bind button for 'Interval/Notes' -- sets Fretboard Model state to paint fretboard notes with text // of intervals or note-names $('#modeNoteInt').click(function(){ - if(INTERVALMODE == true){ - ctl_updateIntervalMode(false); - } else{ - ctl_updateIntervalMode(true); - } - + INTERVALMODE = !INTERVALMODE; + ctl_updateIntervalMode(INTERVALMODE); + // if(INTERVALMODE == true){ + // ctl_updateIntervalMode(false); + // } else{ + // ctl_updateIntervalMode(true); + // } + ctl_updateQuizzingInterval(false); }); // bind button for 'Interval/Notes' -- set Fretboard Model state to paint fretboard notes with interval colors or @@ -1085,6 +1153,7 @@ jQuery(document).ready(function() { ctl_updateColorIntMode(true); } + ctl_updateQuizzingInterval(false); }); @@ -1101,7 +1170,7 @@ jQuery(document).ready(function() { $('#selKey').change(function(){ ctl_change_key.selKeyChange($('#selKey').val()); - + ctl_updateQuizzingInterval(false); }); // dash player controls -- for Abridged Player Model @@ -1128,8 +1197,17 @@ jQuery(document).ready(function() { }); // bind 'interval quiz' button to functionality -- each click generates new interval, with root colored red + // button will read "check answer" until new paint note or clear note. $('#intervalQuiz').click(function(){ - ctl_newIntQuiz(); + if($('#intervalQuiz').val() == CHECKANSWER){ + QUIZZINGINTERVAL = false; + ctl_updateQuizzingInterval(QUIZZINGINTERVAL); + ctl_updateIntervalMode(true); + } else { + ctl_updateIntervalMode(false); + QUIZZINGINTERVAL = !QUIZZINGINTERVAL; + ctl_updateQuizzingInterval(QUIZZINGINTERVAL); + } }) // set up example links diff --git a/fretboard.css b/fretboard.css index 2f393ba..8c1f17e 100644 --- a/fretboard.css +++ b/fretboard.css @@ -57,13 +57,14 @@ a:hover { color: #005580; text-decoration: underline; } table#fretclone tr .fretpainter {background-color:#DADADA !important; border-color:#FFF !important; height:6px !important; border-radius:0px !important;} div#main {width: 100%; min-width: 1356px; } -div#fretboard_container { height:280px; margin:10px; width: 1308px; white-space:nowrap; } -#diagram_title { font-size:25px; font-weight:bold; margin:15px; display:block; padding:4px; border:0; width:100%; } +div#fretboard_container { height:340px; margin:10px; width: 1400; white-space:nowrap; } +#diagram_title { font-size:25px; font-weight:bold; margin:15px; display:block; padding:4px; border:0; width:auto; float:left; } div.h_ctrl_cnt{ padding:10px; margin:0px 10px 0px 10px; } div.h_ctrl { display:inline; margin-right: 12px; } -div.h_ctrl .quizButton {padding:2px; border-radius: 5px; margin-left: 8px; background-color: white; border: #b5b5b5 solid 1px; } +div.h_ctrl .quizButton { border-radius: 5px; margin-left: 8px; background-color: white; border: #b5b5b5 solid 1px; } +div.h_ctrl .quizLink {padding:2px 8px 2px 8px; margin-left: 8px; background-color: white; border: #b5b5b5 solid 1px; } .setRootArmed { background-color:rgb(147,32,32); color: #FFF;} @@ -72,12 +73,12 @@ div.h_ctrl .quizButton {padding:2px; border-radius: 5px; margin-left: 8px; backg input.color_button { width:40px; border-radius: 5px; margin-left: 8px; } -#colorchooser { display:inline; }; - - +#colorchooser { display:inline; } +#btnHelp {float:right; padding:3px; width: 24px; height: 24px; font-weight:bold; border-radius: 5px; margin-left: 8px; background-color: white; border: #b5b5b5 solid 1px; } +/*.helpText li {list-style-type: none; font-weight:normal;}*/ #form_controls { padding:10px; } #checkanswer { display:none; } @@ -116,17 +117,17 @@ input.color_button { width:40px; border-radius: 5px; margin-left: 8px; } /* must be under tabs-nohdr */ div#notegroupsUnabridged { font-size:12px; - width: 650px; + width: 660px; display:inline-block; float:left; } -div#notegroupsUnabridged2 { +/*div#notegroupsUnabridged2 { font-size:12px; - width: 650px; + width: 660px; display:inline-block; float:left; -} +}*/ #notegroupsKeysTab a{ @@ -147,6 +148,7 @@ div#notegroupsUnabridged2 { height:24px; } #dashControls input { padding:2px;} + #ngDashboard { border:#aaa thin solid; width: 588px; @@ -250,11 +252,20 @@ div .ngboxChd{ /* end drag drop classes */ +/* jQuery dialog for help popup */ +div.ui-dialog-titlebar.ui-widget-header {background:none repeat scroll 0% 0% rgba(51, 83, 114, 1); color:white; padding:2px 6px 2px 6px; font-size: 16px} +div#helpText.ui-dialog.ui-dialog-content { + font-family: Verdana,Arial,sans-serif; + font-size: .8em; + font-weight: normal; +} +div#helpText.ui-dialog-content li{list-style-type:circle; font-weight:normal; font-weight:normal; font-size: 12px; padding-bottom: 7px; } +/* end jQuery dialog for help popup */ div .playing{ - //color:red; + /*color:red;*/ border:rgb(255,0,0) thin solid; - //text-decoration:underline; - //background-color: rgb(255,102,153); + /*//text-decoration:underline; + //background-color: rgb(255,102,153);*/ } /*@media print { #form_controls { display:none; } }*/ \ No newline at end of file diff --git a/fretboard.html b/fretboard.html index 8ea811c..839f8b3 100644 --- a/fretboard.html +++ b/fretboard.html @@ -13,7 +13,6 @@ -