- changed animations and improved submit button dynamics

Miguel Barão
1 parent 0153d41a
Showing 1 changed file with 34 additions and 20 deletions Show diff stats
aprendizations/static/js/topic.js
 $.fn.extend({
-    animateCSS: function (animation) {
+    animateCSS: function (animation, run_on_end) {
         var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
         this.addClass('animated ' + animation).one(animationEnd, function() {
             $(this).removeClass('animated ' + animation);
-            $("#submit").removeClass("disabled");
+            if (run_on_end !== undefined) {
+                run_on_end();
+            }
         });
     }
 });
@@ -13,7 +15,7 @@ function showTriesLeft(tries) {
     if (tries > 1)
         msg = "(" + tries + " tentativas)";
     else if (tries == 1)
-        msg = "(última tentativa)";
+        msg = "(1 tentativa)";
     else
         msg = "";
     $("#tries").html(msg);
@@ -21,7 +23,9 @@ function showTriesLeft(tries) {
 // Get current question
 function getQuestion() {
+    $("#comments").html("").hide();
     $("#submit").addClass("disabled");
+
     $.ajax({
         type: "GET",
         url: "/question",
@@ -37,6 +41,7 @@ function updateQuestion(response) {
     var params = response["params"];
     $("#right, #wrong").hide();
+
     switch (method) {
     case "new_question":
         new_question(params["type"], params["question"], params["tries"], params["progress"]);
@@ -52,13 +57,18 @@ function updateQuestion(response) {
 function new_question(type, question, tries, progress) {
     window.scrollTo(0, 0);
-    $("#question_div").html(question).animateCSS('bounceInDown');
-    showTriesLeft(tries);
-    $("#comments").html("").hide();
+    $("#submit").hide();
+    $("#question_div").animateCSS('bounceOutUp', function() {
+        $("#question_div").html(question);
+        MathJax.typeset();
+        $("#question_div").animateCSS('bounceInDown', function() {
+            showTriesLeft(tries);
+            $("#submit").removeClass("disabled").show();
+        });
+    });
     var btntext = (type == "information") ? "Continuar" : "Responder";
     $("#submit").html(btntext).off().click(postAnswer);
     $('#topic_progress').css('width', (100*progress)+'%').attr('aria-valuenow', 100*progress);
-    MathJax.typeset();
     if (type == "radio") {
         $(".list-group-item").click(function (e) {
@@ -108,35 +118,39 @@ function getFeedback(response) {
     switch (method) {
     case "right":
+        $('#wrong').hide();
         $('#comments').html(params['comments']).show();
         $('#solution_right').html(params['solution']);
         MathJax.typeset();
-        $('#wrong').hide();
-        $('#right').show().animateCSS('zoomIn');
-        $("#submit").html("Continuar").off().click(getQuestion);
+        $('#right').show().animateCSS('zoomIn', function(){
+            $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
+        });
         break;
     case "try_again":
         $('#comments').html(params['comments']).show();
         MathJax.typeset();
-        $('#question_div').animateCSS('shake');
         $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
-        showTriesLeft(params["tries"]);
-        $("fieldset").prop("disabled", false);
-        $("#submit").html("Responder");
+        $('#question_div').animateCSS('shake', function() {
+            showTriesLeft(params["tries"]);
+            $("fieldset").prop("disabled", false);
+            $("#submit").html("Responder").removeClass("disabled");
+        });
         break;
     case "wrong":
+        $("fieldset").prop("disabled", true);
+        $('#right').hide();
         $('#comments').html(params['comments']).show();
         $('#solution_wrong').html(params['solution']);
         MathJax.typeset();
-        $('#right').hide();
-        $('#wrong').show(); //.animateCSS('zoomIn');
+        $('#question_div').animateCSS('shake', function() {
+            showTriesLeft(params["tries"]);
+            $('#wrong').show().animateCSS('zoomIn', function() {
+                $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
+            });
+        });
         $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
-        showTriesLeft(params["tries"]);
-        $("fieldset").prop("disabled", true);
-        $('#question_div').animateCSS('shake');
-        $("#submit").html("Continuar").off().click(getQuestion);
         break;
     case "invalid":