Skip to content

Commit

Permalink
Interval Quiz, added A#, Instructions
Browse files Browse the repository at this point in the history 
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'
  • Loading branch information
@deltadada
deltadada committed Sep 11, 2014
1 parent 94c2884 commit 7b12ca9
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 42 deletions.
2 changes: 0 additions & 2 deletions IntervalQuiz.js
View file

This file was deleted.

8 changes: 7 additions & 1 deletion ScaleDictionary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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'];
Expand Down Expand Up @@ -390,6 +392,10 @@ var FretboardModel = {
}

this["ng"] = ng;

if(QUIZZINGINTERVAL){
ctl_updateQuizzingInterval(false);
}
},

"getNGname" : function(){
Expand Down
112 changes: 95 additions & 17 deletions boxfrets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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){
Expand Down Expand Up @@ -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();
Expand All @@ -445,6 +453,10 @@ var ctl_updateIntervalMode = function(boolNewMode){
set_notespans();
update_link();
}

if(QUIZZINGINTERVAL){
ctl_updateQuizzingInterval(false);
}
}

var ctl_populateDash = function(str){
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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");

}
Expand All @@ -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 <strong>"+mFB.getKeyTextName();
// if(ngType != "ARP"){msg += " ";}
Expand Down Expand Up @@ -751,7 +796,10 @@ var updateSetRootView = function(){
if(SETTINGROOT){
$("#setRoot").addClass( 'setRootArmed' );
}else{
$("#setRoot").removeClass( 'setRootArmed' )
$("#setRoot").removeClass( 'setRootArmed' );
if(QUIZZINGINTERVAL){
ctl_updateQuizzingInterval(false);
}
}
}

Expand Down Expand Up @@ -1006,14 +1054,31 @@ jQuery(document).ready(function() {
{
td_paint($('#'+'nc_'+s+'_'+fret), COLOR);
}

}
}
// create new link
update_link();

})

$(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
Expand Down Expand Up @@ -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
Expand All @@ -1085,6 +1153,7 @@ jQuery(document).ready(function() {
ctl_updateColorIntMode(true);
}

ctl_updateQuizzingInterval(false);

});

Expand All @@ -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
Expand All @@ -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
Expand Down
37 changes: 24 additions & 13 deletions fretboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
Expand All @@ -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; }
Expand Down Expand Up @@ -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{
Expand All @@ -147,6 +148,7 @@ div#notegroupsUnabridged2 {
height:24px;
}
#dashControls input { padding:2px;}

#ngDashboard {
border:#aaa thin solid;
width: 588px;
Expand Down Expand Up @@ -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; } }*/
Loading

0 comments on commit 7b12ca9

Please sign in to comment.