A Simple Javascript Problem

Using JavaScript with Hype
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. "
)

4 Likes