From d0dde4a935791253ea6f7e0e03b3d644ebc656e9 Mon Sep 17 00:00:00 2001
From: Miguel Barão <mjsb@uevora.pt>
Date: Sun, 1 Dec 2019 19:47:36 +0000
Subject: [PATCH] - changed animations and improved submit button dynamics

---
 aprendizations/static/js/topic.js | 54 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/aprendizations/static/js/topic.js b/aprendizations/static/js/topic.js
index 27c6a2b..637a022 100644
--- a/aprendizations/static/js/topic.js
+++ b/aprendizations/static/js/topic.js
@@ -1,9 +1,11 @@
 $.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":
--
libgit2 0.21.2