A Simple Javascript Problem


(Matt) #1

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 withvar 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


(Hans-Gerd Claßen) #2

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 :slight_smile:


(Matt) #3

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); 
        
        
        window.scoreView.addEventListener('playbackStop', function(event) {
        
        
        
       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();

(Mark Hunte) #4

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 stepKeysAnswers  = [['vAnswer',vStepAnswer,"E"],['wAnswer',wStepAnswer,"F"],['xAnswer',xStepAnswer,"D"]]// we put the feed back answers in arrays with the correct answer key name.
  
 
   var  correctAnswers = {vAnswer:["2" , "4", "0"],wAnswer:["3","5","1"],xAnswer:[ "1","3","6"] } //-- all correct answers
     
 
    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
 

 var thisIsCorrect =   correctAnswers[stepKeysAnswers[i][0]].includes(stepKeysAnswers[i][1]) //- i.e correctAnswers[wAnswer].includes(4)
 

 if (!thisIsCorrect){
  // push the   false stepKeysAnswers to the answerCheckIncorrect array.
 answerCheckIncorrect.push(stepKeysAnswers[i]);
 
 
 }
}
 
   //-- All Correct
if (answerCheckIncorrect.length == 0 ){   
	
	 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
   if (answerCheckIncorrect.length == 1 ){   
	
	
		
	 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
 	if (answerCheckIncorrect.length == stepKeysAnswers.length ){
 	
 	    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,


answerCheck_MHv1.hype.zip (17.0 KB)

(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."

It should read :
" // push the false stepKeysAnswers to the answerCheckIncorrect array. "
)


Creating a Correct Order For Buttons To Be Pressed?
(Mark Hunte) #5

Would love to hear some feed back on this…
:wink:


(Matt) #6

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


(Mark Hunte) #7

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


#8

This one is a keeper.


(Matt) #9

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


(Matt) #10

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;
	var wStepAnswer = scoreData.staves[1].measures[0].noteSets[0].notes[0].step;
	var xStepAnswer = scoreData.staves[2].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


(Matt) #11

Here is the entire code:

	window.scoreView.getScore().done(function(scoreData) {
	
	
 
	
	
	
	var vStepAnswer = scoreData.staves[0].measures[0].noteSets[0].notes[0].step;
	var wStepAnswer = scoreData.staves[1].measures[0].noteSets[0].notes[0].step;
	var xStepAnswer = scoreData.staves[2].measures[0].noteSets[0].notes[0].step;
	
	
	
	
	
	

	
	var stepKeysAnswers  = [['vAnswer',vStepAnswer,"E"],['wAnswer',wStepAnswer,"F"],['xAnswer',xStepAnswer,"D"]]// we put the feed back answers in arrays with the correct answer key name.
  
 
   var  correctAnswers = {vAnswer:["2" , "4", "0"],wAnswer:["3","5","1"],xAnswer:[ "1","3","6"] } //-- all correct answers
     
 
    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
 

 var thisIsCorrect =   correctAnswers[stepKeysAnswers[i][0]].includes(stepKeysAnswers[i][1]) //- i.e correctAnswers[wAnswer].includes(4)
 
 // push the true or false result to the answerCheck array.
 if (!thisIsCorrect){
 
 answerCheckIncorrect.push(stepKeysAnswers[i]);
 
 
 }
}
  
//console.log(answerCheckIncorrect);		
 	
 	

   //-- All Correct
if (answerCheckIncorrect.length == 0 ){   
	
	 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
   if (answerCheckIncorrect.length == 1 ){   
	
	
		
	 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
 	if (answerCheckIncorrect.length == stepKeysAnswers.length ){
 	
 	    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!"; 
         
 });

(Mark Hunte) #12

What actually is being returned?

Is it for example

5

or

“5”

One is a number the other a string


(Mark Hunte) #13

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
vAnswer:[“2” , “4”, “0”]

To

vAnswer:[2 , 4, 0]


(Matt) #14

Yes, that fixed i! Works brilliantly!

Thank you!


(Matt) #15

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


(Mark Hunte) #16

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


(Matt) #17

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


#18

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


(Matt) #19

@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

If 1 were entered as the answer for vAnswer it could not be used as a correct answer for wAnswer or x Answer.

Does that make sense?


(Mark Hunte) #20

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

var correctAnswers = {vAnswer:[1, 3, 5],wAnswer:[1,3,5],xAnswer:[ 1,3,5] } //-- all correct answers

will give you

The note you entered above ‘D’ is incorrect. The other notes are all correct. Try again!

and for
var vStepAnswer = 1 /// mock of the step feed back
var wStepAnswer = 2 /// mock of the step feed back
var xStepAnswer = 6/// mock of the step feed bac

The notes you entered above ‘F’ , ‘D’ , are wrong, The other notes are all correct. Try again!

Is that not what you describe?