Miguel Barão / aprendizations

Download as
Browse Code »

Commit d0dde4a935791253ea6f7e0e03b3d644ebc656e9

Authored by Miguel Barão
1 parent 0153d41a
Exists in master and in 1 other branch dev

- changed animations and improved submit button dynamics

Showing 1 changed file with 34 additions and 20 deletions   Show diff stats
aprendizations/static/js/topic.js
  Diff comments   View file @d0dde4a
1 1 $.fn.extend({
2   - animateCSS: function (animation) {
  2 + animateCSS: function (animation, run_on_end) {
3 3 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
4 4 this.addClass('animated ' + animation).one(animationEnd, function() {
5 5 $(this).removeClass('animated ' + animation);
6   - $("#submit").removeClass("disabled");
  6 + if (run_on_end !== undefined) {
  7 + run_on_end();
  8 + }
7 9 });
8 10 }
9 11 });
... ... @@ -13,7 +15,7 @@ function showTriesLeft(tries) {
13 15 if (tries > 1)
14 16 msg = "(" + tries + " tentativas)";
15 17 else if (tries == 1)
16   - msg = "(última tentativa)";
  18 + msg = "(1 tentativa)";
17 19 else
18 20 msg = "";
19 21 $("#tries").html(msg);
... ... @@ -21,7 +23,9 @@ function showTriesLeft(tries) {
21 23  
22 24 // Get current question
23 25 function getQuestion() {
  26 + $("#comments").html("").hide();
24 27 $("#submit").addClass("disabled");
  28 +
25 29 $.ajax({
26 30 type: "GET",
27 31 url: "/question",
... ... @@ -37,6 +41,7 @@ function updateQuestion(response) {
37 41 var params = response["params"];
38 42  
39 43 $("#right, #wrong").hide();
  44 +
40 45 switch (method) {
41 46 case "new_question":
42 47 new_question(params["type"], params["question"], params["tries"], params["progress"]);
... ... @@ -52,13 +57,18 @@ function updateQuestion(response) {
52 57  
53 58 function new_question(type, question, tries, progress) {
54 59 window.scrollTo(0, 0);
55   - $("#question_div").html(question).animateCSS('bounceInDown');
56   - showTriesLeft(tries);
57   - $("#comments").html("").hide();
  60 + $("#submit").hide();
  61 + $("#question_div").animateCSS('bounceOutUp', function() {
  62 + $("#question_div").html(question);
  63 + MathJax.typeset();
  64 + $("#question_div").animateCSS('bounceInDown', function() {
  65 + showTriesLeft(tries);
  66 + $("#submit").removeClass("disabled").show();
  67 + });
  68 + });
58 69 var btntext = (type == "information") ? "Continuar" : "Responder";
59 70 $("#submit").html(btntext).off().click(postAnswer);
60 71 $('#topic_progress').css('width', (100*progress)+'%').attr('aria-valuenow', 100*progress);
61   - MathJax.typeset();
62 72  
63 73 if (type == "radio") {
64 74 $(".list-group-item").click(function (e) {
... ... @@ -108,35 +118,39 @@ function getFeedback(response) {
108 118  
109 119 switch (method) {
110 120 case "right":
  121 + $('#wrong').hide();
111 122 $('#comments').html(params['comments']).show();
112 123 $('#solution_right').html(params['solution']);
113 124 MathJax.typeset();
114   - $('#wrong').hide();
115   - $('#right').show().animateCSS('zoomIn');
116   - $("#submit").html("Continuar").off().click(getQuestion);
  125 + $('#right').show().animateCSS('zoomIn', function(){
  126 + $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
  127 + });
117 128 break;
118 129  
119 130 case "try_again":
120 131 $('#comments').html(params['comments']).show();
121 132 MathJax.typeset();
122   - $('#question_div').animateCSS('shake');
123 133 $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
124   - showTriesLeft(params["tries"]);
125   - $("fieldset").prop("disabled", false);
126   - $("#submit").html("Responder");
  134 + $('#question_div').animateCSS('shake', function() {
  135 + showTriesLeft(params["tries"]);
  136 + $("fieldset").prop("disabled", false);
  137 + $("#submit").html("Responder").removeClass("disabled");
  138 + });
127 139 break;
128 140  
129 141 case "wrong":
  142 + $("fieldset").prop("disabled", true);
  143 + $('#right').hide();
130 144 $('#comments').html(params['comments']).show();
131 145 $('#solution_wrong').html(params['solution']);
132 146 MathJax.typeset();
133   - $('#right').hide();
134   - $('#wrong').show(); //.animateCSS('zoomIn');
  147 + $('#question_div').animateCSS('shake', function() {
  148 + showTriesLeft(params["tries"]);
  149 + $('#wrong').show().animateCSS('zoomIn', function() {
  150 + $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
  151 + });
  152 + });
135 153 $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
136   - showTriesLeft(params["tries"]);
137   - $("fieldset").prop("disabled", true);
138   - $('#question_div').animateCSS('shake');
139   - $("#submit").html("Continuar").off().click(getQuestion);
140 154 break;
141 155  
142 156 case "invalid":
... ...