# A Simple Javascript Problem

Hi All -
I’ve been searching for a while for a solution to what I’m sure has a simple javascript solution. I just can’t figure it out!

I have data that is being returned by a user entry that could be a number 0 thru 6. Let’s call it var “v”. There are 5 of these so:

``````var v =
var w =
var x =
var y =
var z =
``````

I also have 5 other variables that are fixed numbers like this:

``````var fixed1 = 2
var fixed2 = 3
var fixed3 = 1
var fixed4 = 4
var fixed5 = 0
``````

I need to compare `var v` with `var fixed1` and `var w` with`var fixed2` and so on…

I need to return a certain result whenever each of the letter variables is 2 greater, 2 less OR the same as it’s corresponding fixed variable. This needs to be taken as a whole so it could be any combination of 2 >, 2< or ==.

Since there is no plus/minus operator for javascript I can’t figure this out. Perhaps using an absolute number would be the way to go but I can’t get that to work either.

Thank you for any help!

Matt

as i can’t understand your exact approach, others may not get it either …
try specify it more exact … or train your js-skills if-else-statements and simular approaches should be a good hint

Thanks.
I’m running this function. Which I could continue for every case but it is certainly not the most efficient. I had asked in my first post about comparing variables v, w, x, y and z to these other fixed variables because I thought that comparing the fixed variables with the user entered data would be a much simpler and more logical approach. Does this make sense?

``````	  window.scoreView.getScore().done(function(scoreData) {
// do something with the returned score data

var v = scoreData.staves[0].measures[0].noteSets[0].notes[0].step;
var w = scoreData.staves[0].measures[1].noteSets[0].notes[0].step;
var x = scoreData.staves[0].measures[2].noteSets[0].notes[0].step;
var y = scoreData.staves[0].measures[3].noteSets[0].notes[0].step;
var z = scoreData.staves[0].measures[4].noteSets[0].notes[0].step;

//evaluate  entries
switch(true) {

case (

((v == "2") || (v == "4") || (v == "0")) &&
((w == "3") || (w == "5") || (w == "1")) &&
((x == "1") || (x == "3") || (x == "6")) &&
((y == "4") || (y == "2") || (y == "6")) &&
((z == "0") || (z == "2") || (z == "5"))

):

hypeDocument.getElementById("feedback6").innerHTML = "Great job! You have successfully entered a consonant note for each of the violin notes.";
hypeDocument.getElementById("feedback6").style.color = "#008F00";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid green";
hypeDocument.getElementById("check4").innerHTML = "Play Again!";

window.scoreView.playFromMeasure(0);

hypeDocument.getElementById('next8').style.display="block";
});
break;

// All wrong notes

case (

((v == "1") || (v == "3") || (v == "5") || (v == "6")) &&
((w == "2") || (w == "4") || (w == "0") || (w == "6")) &&
((x == "0") || (x == "2") || (x == "4") || (x == "5")) &&
((y == "3") || (y == "5") || (y == "0") || (y == "1")) &&
((z == "6") || (z == "1") || (z == "3") || (z == "4"))

):

hypeDocument.getElementById("feedback6").innerHTML = "Try again! All of the notes you've entered are incorrect. ";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";

window.scoreView.playFromMeasure(0);

break;

// First note only is wrong
case (

((v != "2") || (v != "4") || (v != "0")) &&
((w == "3") || (w == "5") || (w == "1")) &&
((x == "1") || (x == "3") || (x == "6")) &&
((y == "4") || (y == "2") || (y == "6")) &&
((z == "0") || (z == "2") || (z == "5"))

):
hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above the first note E is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";
window.scoreView.selectRange(0, 0, 0, 1, [0]);

break;

// Second note only is wrong
case (

((v == "2") || (v == "4") || (v = "0")) &&
((w != "3") || (w != "5") || (w != "1")) &&
((x == "1") || (x == "3") || (x == "6")) &&
((y == "4") || (y == "2") || (y == "6")) &&
((z == "0") || (z == "2") || (z == "5"))

):
hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above the second note F is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";
window.scoreView.selectRange(0, 1, 0, 2, [0]);

break;

// Third note only is wrong
case (

((v == "2") || (v == "4") || (v = "0")) &&
((w == "3") || (w == "5") || (w == "1")) &&
((x != "1") || (x != "3") || (x != "6")) &&
((y == "4") || (y == "2") || (y == "6")) &&
((z == "0") || (z == "2") || (z == "5"))

):
hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above the third note D is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";
window.scoreView.selectRange(0, 2, 0, 3, [0]);

break;

// Fourth note only is wrong...
case (

((v == "2") || (v == "4") || (v = "0")) &&
((w == "3") || (w == "5") || (w == "1")) &&
((x == "1") || (x == "3") || (x == "6")) &&
((y != "4") || (y != "2") || (y != "6")) &&
((z == "0") || (z == "2") || (z == "5"))

):
hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above the fourth note G is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";
window.scoreView.selectRange(0, 2, 0, 3, [0]);

break;

case (

((v == "2") || (v == "4") || (v = "0")) &&
((w == "3") || (w == "5") || (w == "1")) &&
((x == "1") || (x == "3") || (x == "6")) &&
((y == "4") || (y == "2") || (y == "6")) &&
((z != "0") || (z != "2") || (z != "5"))

):
hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above the fifth note C is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";
window.scoreView.selectRange(0, 2, 0, 3, [0]);

break;

default:

return;

}

console.log(scoreData);

});

score8.focus();``````

Well off the top of my head and if I understand the code correctly.

You just need the correct answers in an associative array.

i.e key, value.

You then get your individual answers and place them in an array alongside a string that is the associated key name for that answer and the note.

You then just need to find out if the answer given as feed back is in the associated array. If it is you get a true value result if not you get a false value result. Push the answer results that come up false into an array.

At the end you can check which answer generated a false and do you innerHTML stuff answer…

``````	var vStepAnswer = "2"  /// mock of the step feed back
var wStepAnswer = "6" /// mock of the step feed back
var xStepAnswer = "4"/// mock of the step feed back

var answerCheckIncorrect = []; //-- final array to hold the false results below.

for (i = 0; i < stepKeysAnswers.length; i++) {
//-- we iterate over each setp answer array and work through each answer using the key and feed back answer for that key

if (!thisIsCorrect){

}
}

//-- All Correct

hypeDocument.getElementById("feedback6").innerHTML = "Great job! You have successfully entered a consonant note for each of the violin notes.";
hypeDocument.getElementById("feedback6").style.color = "#008F00";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid green";
hypeDocument.getElementById("check4").innerHTML = "Play Again!";

return;

}

//-- One wrong

hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above '" + answerCheckIncorrect[0][2] + "' is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";

return;

}

//-- All wrong

hypeDocument.getElementById("feedback6").innerHTML = "Try again! All of the notes you've entered are incorrect. ";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";

return;
}

//-- some wrong.
var theNoticeString = ""

for (i = 0; i < answerCheckIncorrect.length; i++) {

theNoticeString +=  "'" + answerCheckIncorrect[i][2] + "' , " ;

}

theNoticeString = "The notes you entered above  "  +     theNoticeString  + " are wrong, The other notes are all correct. Try again!";

hypeDocument.getElementById("feedback6").innerHTML = theNoticeString;
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";
``````

Also note how I have changed the single character var names to full worded var names.

It would be a good idea to get out of the habit of using a single character as a name for a var.
Doing so will help avoid a few problems.

1, they may clash with minified js, such as the ones the run the Hype runtime. This is BAD.
2, When you look back at this code sometime later, it will be hard to follow. You will not know straight away what x or y is and working out what the intention of the var was for may take longer.
3, When others such as myself read through your code we have the same problem as you do in 2. But worse… this makes it hard to follow your code and thinking,

(Note - not going to edit the comment in the downlaod file, but where one of the comments in the code says;
“// push the true or false result to the answerCheck array.”

)

4 Likes

Would love to hear some feed back on this…

Hi Mark-
First, thank you SO much for this.
I’ve been swamped and haven’t had a chance to implement it yet. When I do I will likely have a couple of questions and will definitely provide more feedback.
As with all of your help, I have learned a ton more JS through utilizing it.

Thank you!!
Matt

No prob. I know how that is. Only nudging as I liked this one…

This one is a keeper.

2 Likes

Ok, I’m now finally beginning to implement this. Thanks so much again @MarkHunte

I’m having one problem. When I put in the real data in place of the mock data. For example:

``````var vStepAnswer = scoreData.staves[0].measures[0].noteSets[0].notes[0].step;
``````

in place of the mock data:

`````` var vStepAnswer = "2"  /// mock of the step feed back
var wStepAnswer = "5" /// mock of the step feed back
var xStepAnswer = "6"/// mock of the step feed back
``````

No matter what numbers the real data returns I’m always getting the “All wrong” response. I’ve tried plugging in the mock variable again and it works fine. I’ve tried editing the answer key to different correct responses but that hasn’t changed anything.

Do I need to make some other edit?

Thank you!
Matt

Here is the entire code:

``````	window.scoreView.getScore().done(function(scoreData) {

var answerCheckIncorrect = []; //-- final array to hold the false results below.

for (i = 0; i < stepKeysAnswers.length; i++) {
//-- we iterate over each setp answer array and work through each answer using the key and feed back answer for that key

// push the true or false result to the answerCheck array.
if (!thisIsCorrect){

}
}

//-- All Correct

hypeDocument.getElementById("feedback6").innerHTML = "Great job! You have successfully entered a consonant note for each of the violin notes.";
hypeDocument.getElementById("feedback6").style.color = "#008F00";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid green";
hypeDocument.getElementById("check4").innerHTML = "Play Again!";

return;

}

//-- One wrong

hypeDocument.getElementById("feedback6").innerHTML = "The note you entered above '" + answerCheckIncorrect[0][2] + "' is incorrect. The other notes are all correct. Try again!";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";

return;

}

//-- All wrong

hypeDocument.getElementById("feedback6").innerHTML = "Try again! All of the notes you've entered are incorrect. ";
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";

return;
}

//-- some wrong.
var theNoticeString = ""

for (i = 0; i < answerCheckIncorrect.length; i++) {

theNoticeString +=  "'" + answerCheckIncorrect[i][2] + "' , " ;

}

theNoticeString = "The notes you entered above  "  +     theNoticeString  + " are wrong, The other notes are all correct. Try again!";

hypeDocument.getElementById("feedback6").innerHTML = theNoticeString;
hypeDocument.getElementById("feedback6").style.color = "red";
hypeDocument.getElementById("feedback6").style.borderLeft =  "6px solid red";
hypeDocument.getElementById("check4").innerHTML = "Check Again!";

});``````

What actually is being returned?

Is it for example

5

or

“5”

One is a number the other a string

Not on my mac at the mo, but I was able to test the code on my iPad.

It probably is what I am suggesting above and my fault as I used strings as the answers instead of numbers.

So just change the answers to numbers. I.e

Change

To

1 Like

Yes, that fixed i! Works brilliantly!

Thank you!

1 Like

Thanks again @MarkHunte
You can see it in action here and learn about Diatonic Chords.

3 Likes

I was hoping to see what all your hard work was for.
Great job @matt5834,

1 Like

Though this latest one is not listed here, interested folks can see a preview of the way we are using Hype to build a progressive music composition curriculum used by teachers throughout the US and beyond here: YCIW Preview

2 Likes

@MarkHunte
And great job Mark Hunte… giving your time and expertise to help see things through

2 Likes

@MarkHunte I’m having one issue with this that I can’t seem to figure out. As mentioned above the code is working wonderfully.
However, how can I implement a wrong answer if two of three or three of the same correct answers are entered. In other words let’s that we had
`var correctAnswers = {vAnswer:[1, 3, 5],wAnswer:[1,3,5],xAnswer:[1,3,5] } //-- all correct answers`

Does that make sense?

Nope. I do not understand.

What I do under stand is.

var vStepAnswer = 1 /// mock of the step feed back
var wStepAnswer = 1 /// mock of the step feed back
var xStepAnswer = 6/// mock of the step feed back

and