, i.e., "Type" and "Inversion";
for (i = 0, len = a.length; i < len; i++) {
JSLITE.dom.create({tag: "a",
attr: {
href: "#"
},
children: [
JSLITE.dom.create({tag: "span",
attr: {
className: sName,
innerHTML: sName === "inversions" ? a[i].replace(/(Position|Inversion)/, " $1") : a[i] //add a space, i.e., "Third Inversion";
}
})
],
parent: $(sName)
});
}
};
if (!fnSetQuiz.initiated) {
for (i = 0, len = aNotes.length; i < len; i++) {
JSLITE.dom.create({tag: "a",
attr: {
className: "notes",
href: "#",
sortOrder: i
},
children: [
JSLITE.dom.create({tag: "span",
attr: {
innerHTML: aNotes[i],
note: aNotes[i] //bind an expando property for when comparing values in the event handler;
}
})
],
parent: $("notes")
});
}
fnSetElements(aInversions, "inversions");
}
/*
the chords change depending upon the skill level but the notes and inversions never do
*/
fnSetQuiz.initiated = true; //set an expando so this is only done once;
fnSetElements(oCache[sSkillLevel].chords, "chords");
};
var fnReset = function () {
var arr = JSLITE.makeArray($("notes").childNodes).concat(JSLITE.makeArray(JSLITE.dom.gets("#dropZoneContainer .JSLITE_draggable", true))).filter(function (v) { //get all child nodes within the drop zone that have a "sortOrder" property;
return (typeof v.sortOrder === "number"); //should there be a better check?;
}),
oFrag = document.createDocumentFragment(),
oDropZone = JSLITE.dom.get("notes");
arr.sort(function (a, b) { //sort all nodes in this drop zone by their sort order property;
return a.sortOrder - b.sortOrder;
});
oDropZone.remove(true); //remove all the nodes...;
arr.forEach(function (v) { //...and readd them to the document fragment;
//v.style.border = v.style.margin = null; //null out the inline styles that were bound to the element when it was dragged to the drop zone (b/c of specificity the the rules set in the class won't "shine" through);
delete v.style.border;
delete v.style.margin;
oFrag.appendChild(v);
});
oDropZone.append(oFrag); //only append once!;
};
JSLITE.ready(function () {
/*
init the drag 'n' drop stuff
*/
JSLITE.ux.DropZoneManager.add(JSLITE.dom.gets("#notes"), {
sort: true
});
JSLITE.ux.DropZoneManager.add(JSLITE.dom.gets(".dropZone"), {
snapToZone: true,
subscribe: {
beforenodedrop: function (e) {
if (JSLITE.dom.gets(".JSLITE_draggable", this).length) { //only drop if there isn't another child element in the target drop zone;
return false;
}
},
afternodedrop: function (e) {
var aDragged = JSLITE.dom.gets("#dropZoneContainer .JSLITE_draggable", true),
i,
len,
arr = [];
if (aDragged.length === 4) {
for (i = 0, len = aDragged.length; i < len; i++) {
arr.push(JSLITE.dom.get("span", aDragged[i], true).note);
}
if ($("currentChord").currentChord === arr.join("")) {
alert("Correct!");
aDragged.forEach(function (v) { //re-apply the original styles or else it looks like a$$;
JSLITE.dom.fly(v).setStyle(v.originalStyles);
v.snapped = false; //also, make sure to reset the snapped property!;
});
fnReset();
fnGetChord();
} else {
alert("Incorrect!");
}
}
}
}
});
/*********************************************************************************/
init();
JSLITE.dom.fly("chordQuiz").on("click", function (e) { //note we're only binding one event listener for the entire page (because of this make sure each entirely covers each );
var oTarget = e.target,
sNote,
sChord,
sInversion;
if (oTarget.nodeName === "SPAN" && oTarget.className !== "blank") {
JSLITE.dom.gets("span", $(JSLITE.trim(oTarget.className))).removeClass("selected"); //the classname needs to be trimmed b/c if it removeClass() was previously called on this then there will be an extra space in the classname, i.e., "notes " (is this a bug?);
JSLITE.dom.fly(oTarget).addClass("selected");
if (JSLITE.dom.get("#notes span.selected", true) && JSLITE.dom.get("#chords span.selected", true) && JSLITE.dom.get("#inversions span.selected", true)) { //user selected one of each so see if he selected correctly;
sNote = JSLITE.dom.get("#notes .selected").dom.note;
sChord = JSLITE.dom.get("#chords .selected").value();
sInversion = JSLITE.dom.get("#inversions .selected").value().replace(/\s/, ""); //remove the space that was put in when the dom element was created, i.e., "Second Inversion";
if (oDeepCopy[sNote][sChord + (sInversion === "RootPosition" ? "" : sInversion)] === $("currentChord").currentChord) { //remember root position is the only inversion that doesn't have its inversion as part of its name in oDeepCopy;
alert("Correct!");
fnGetChord();
} else {
alert("Incorrect!");
}
JSLITE.dom.gets("span").removeClass("selected");
if ($("beginner").checked) { //if beginner skill level is selected, make sure the "Root Position" element is given the selected class (to understand why see the logic w/in the handler bound to the "chordQuiz" element);
JSLITE.dom.get("#inversions span").addClass("selected");
}
}
e.preventDefault();
}
});
JSLITE.dom.get(".skipChord").on("click", skip);
JSLITE.dom.gets("input[type=radio]").on("click", function (e) {
var oForm = e.target.form,
sValue = e.target.value;
if (oForm.id === "mainMenu") {
var oChordQuiz = JSLITE.dom.get("chordQuiz"),
oKeyQuiz = JSLITE.dom.get("keySignaturesQuiz"),
fnToggleElements = function (sDiv) {
//elements to toggle: the s, the value of #notes p, rest are self-evident;
var a = sDiv === "chordQuiz" ? ["none", "block"] : ["block", "none"];
oChordQuiz.show();
JSLITE.dom.gets("#notes span").removeClass("selected"); //no matter which "view" was selected remove any previously selected notes;
JSLITE.dom.get("#chordQuiz h3 + h3", true).style.display = $("dropZoneContainer").style.display = a[0];
JSLITE.dom.get("#chordQuiz h3", true).style.display = $("chordMenu").style.display = $("chords").style.display = $("inversions").style.display = a[1];
fnReset(); //finally, reset the notes div (in case any were dragged in the chord builder);
};
if (sValue === "chordQuiz") {
fnToggleElements("chordQuiz");
JSLITE.dom.get("h3 + div + p").hide(); //hide the first paragraph;
JSLITE.dom.gets("p + div + p").show(); //show every other paragraph;
JSLITE.dom.gets("#notes a.notes").removeClass("JSLITE_draggable");
oKeyQuiz.hide();
init();
} else if (sValue === "chordBuilder") {
sSkillLevel = "chordBuilder"; //set this so we know which object to look up in the cache;
fnToggleElements("chordBuilder");
JSLITE.dom.get("h3 + div + p").show(); //show the first paragraph;
JSLITE.dom.gets("p + div + p").hide(); //hide every other paragraph;
JSLITE.dom.gets("#notes a.notes").addClass("JSLITE_draggable");
oKeyQuiz.hide();
init(sValue);
} else {
oChordQuiz.hide();
oKeyQuiz.show();
}
} else if (oForm.id === "chordMenu") {
JSLITE.dom.get("#inversions span").removeClass("selected");
if (sValue === "beginner") { //if beginner skill level is selected, make sure the "Root Position" element is given the selected class (to understand why see the logic w/in the handler bound to the "chordQuiz" element);
JSLITE.dom.get("#inversions span").addClass("selected");
}
init(sValue);
}
});
//if (navigator.userAgent.indexOf("iPhone") !== -1 || navigator.userAgent.indexOf("Android") !== -1) { //if user agent is an iphone tweak the styles so everything fits in the screen;
if (navigator.userAgent.indexOf("iPhone") !== -1) { //if user agent is an iphone tweak the styles so everything fits in the screen;
$("chords").style.width = "450px";
$("inversions").style.width = "330px";
}
});
}());