add happy face and sad face to feedback

3 files changed, 67 insertions, 23 deletions

diff --git a/css/ui.feedback.css b/css/ui.feedback.css
index a8063cf..c1b5420 100755
--- a/css/ui.feedback.css
+++ b/css/ui.feedback.css
@@ -15,18 +15,42 @@
     background-image: url(./epaath_images/incorrect200x190.png);
 }
 
-.ui-feedback .ui-feedback-win{
-    /*display: none;*/
+
+.ui-feedback .ui-feedback-over{
+    display: none;
+    width: 184px;
+    height: 240px;
+    overflow: visible;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.ui-feedback .ui-feedback-over .ui-feedback-win{
     width: 184px;
     height: 222px;
     background-image: url(./epaath_images/happy-face.png);
     overflow: visible;
-    z-index: 10;
 }
 
-.ui-feedback .ui-feedback-overlay {
+
+.ui-feedback .ui-feedback-over .ui-feedback-lose{
+    width: 184px;
+    height: 222px;
+    background-image: url(./epaath_images/sad-face.png);
+    overflow: visible;
+}
+
+.ui-feedback .ui-feedback-txt{
+    color:purple;
+    font-size:3em;
+    margin-top:-50px;
+    width:300px;
+}
+
+.ui-feedback-overlay {
     position: absolute;
+    display: none;
     width: 100%;
     height: 100%;
-    background-color: rgba(255,255,255, 0.4);
+    background-color: rgba(255,255,255, 0.6);
 }
\ No newline at end of file
diff --git a/examples/English_Animal_Identification/js/lesson.js b/examples/English_Animal_Identification/js/lesson.js
index 845e383..2df6fdd 100755
--- a/examples/English_Animal_Identification/js/lesson.js
+++ b/examples/English_Animal_Identification/js/lesson.js
@@ -67,12 +67,14 @@ $(document).ready(
 
 	 
 	 function checkDisplay(){   //Displays the correct and incorrect info
-		 if(wrong_selected == 1){
-		     $feedback.feedback('incorrect');
-		 }
-		 else{
-		      $feedback.feedback('correct');
-		 }
+	     if(wrong_selected == 1){
+		 $feedback.feedback('incorrect');
+	     }
+	     else if (object_counter === 3 ){
+		 $feedback.feedback('win');
+	     } else{
+		 $feedback.feedback('correct');
+	     }
 	 }
 	 
 	 $("#anchorPlayAgain").click(function(){
diff --git a/js/ui.feedback.js b/js/ui.feedback.js
index f325861..f9304c5 100755
--- a/js/ui.feedback.js
+++ b/js/ui.feedback.js
@@ -48,10 +48,12 @@
 		      
 		  },
 		  win: function(){
-		      
+		      this.$win.show();
+		      this.$overlay.show();
 		  },
 		  lose: function(){
-		      
+		      this.$lose.show();
+		      this.$overlay.show();
 		  },
 		  _init : function(){
 		      var self = this;
@@ -69,29 +71,45 @@
 			  .addClass('ui-feedback-incorrect')
 			  .appendTo(this.element);
 		      
-		      this.$win = $('<div></div>')
-			  .addClass('ui-feedback-win')
-			  .appendTo(this.element);
+		      this.$win = $("<div class='ui-feedback-over'>" +
+				     "<div class='ui-feedback-win'></div>" +
+				     "<div class='ui-feedback-txt'>You win!" +
+				     "</div></div>")
+				    .click(
+					function(){
+					    self.$win.hide();
+					    self.$overlay.hide();
+					}
+				    )
+				    .appendTo(this.element);
 
-		      this.$lose = $('<div></div>')
-			  .addClass('ui-feedback-lose')
-			  .appendTo(this.element);
+		      this.$lose = $("<div class='ui-feedback-over'>" +
+				     "<div class='ui-feedback-lose'></div>" +
+				     "<div class='ui-feedback-txt'>You lose!" +
+				     "</div></div>")
+				     .click(
+					 function(){
+					     self.$lose.hide();
+					     self.$overlay.hide();
+					 }
+				     )
+				     .appendTo(this.element);
 		      
 		      this.$overlay = $('<div></div>')
 			  .addClass('ui-feedback-overlay')
-			  .appendTo(this.element);
+			  .appendTo($('body'));
 
 		      
 
 		      $('body')
 			  .bind('feedbackCorrect', function(){
 				    self.correct();
-				     })
+				})
 			  .bind('feedbackIncorrect', function(){
 				    self.incorrect();
 				});
-		      
-					},
+		     
+		  },
 		  /** Removes the feedback widget and all related data from the DOM */
 		  destroy : function(){
 		      this.element.remove();