- added question animations

Miguel Barão
1 parent 5a4b1ac7
Showing 6 changed files with 124 additions and 71 deletions Show diff stats
serve.py
templates/learn.html
templates/question-checkbox.html
templates/question-radio.html
templates/question-text.html
templates/question-textarea.html
@@ -32,12 +32,12 @@ class LearnApp(object):
     # returns dictionary
     def next_question(self):
-        print('next question')
+        # print('next question')
         # q = self.factory.generate('math-expressions')
         questions = list(self.factory)
-        print(questions)
+        # print(questions)
         q = self.factory.generate(random.choice(questions))
-        print(q)
+        # print(q)
         self.q = q
         return q
@@ -80,7 +80,7 @@ class BaseHandler(tornado.web.RequestHandler):
     def get_current_user(self):
         user_cookie = self.get_secure_cookie("user")
-        print('base.get_current_user -> ', user_cookie)
+        # print('base.get_current_user -> ', user_cookie)
         if user_cookie:
             return user_cookie # json.loads(user_cookie)
@@ -152,16 +152,24 @@ class QuestionHandler(BaseHandler):
         print('Reference' + str(ref))
         question = self.application.learn.q # get current question
+        print('=====================================')
+        print('  ' + str(question))
+        print('-------------------------------------')
+
+
         if question is not None:
             ans = self.get_body_arguments('answer')
-            print(ans)
+            print('  answer = ' + str(ans))
             question['answer'] = ans          # insert answer
             grade = question.correct()       # correct answer
-            print('grade = ' + str(grade))
+            print('  grade = ' + str(grade))
-            if grade > 0.99999:
+            correct = grade > 0.99999
+            if correct:
                 question = self.application.learn.next_question()
+
         else:
+            correct = True # to animate correctly
             question = self.application.learn.next_question()
         templates = {
@@ -172,10 +180,14 @@ class QuestionHandler(BaseHandler):
             'text_numeric': 'question-text.html',
             'textarea':     'question-textarea.html',
         }
-        self.render(templates[question['type']],
+        html_out = self.render_string(templates[question['type']],
             question=question, # the dictionary with the question??
             md=md,  # passes function that renders markdown to html
             )
+        self.write({
+            'html': tornado.escape.to_unicode(html_out),
+            'correct': correct,
+            })
         # if question['type'] == 'checkbox':
         #     self.render('question-checkbox.html',
@@ -36,7 +36,7 @@
 </head>
 <!-- ===================================================================== -->
 <body>
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
     <div class="container-fluid drop-shadow">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
@@ -70,45 +70,66 @@
 <!-- ===================================================================== -->
 <div class="container">
+
 <form action="/question" method="post" id="question_form" autocomplete="off">
     {% module xsrf_form_html() %}
     <div id="question_div">O jogo está prestes a começar. A bola está do teu lado.
     </div>
-</form>
+ </form>
 <button class="btn btn-primary" id="submit">Chuta!</button>
+
+
+
 </div> <!-- container -->
 <script>
 $.fn.extend({
-    animateCss: function (animationName) {
+    animateCSS: function (animation) {
         var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
-        this.addClass('animated ' + animationName).one(animationEnd, function() {
-            $(this).removeClass('animated ' + animationName);
+        this.addClass('animated ' + animation).one(animationEnd, function() {
+            $(this).removeClass('animated ' + animation);
         });
+        // $("#question_div").html(response["html"]);
+        // MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question"]);
+        // this.addClass('animated pulse').one(animationEnd, function() {
+        //     $(this).removeClass('animated bounceOutLeft');
+        // });
     }
 });
-
 function getQuestion() {
     $.ajax({
         type: "POST",
         url: "/question",
         // headers: {"X-XSRFToken": token},
         data: $("#question_form").serialize(),//{'a':10,'b':20},
-        dataType: "html", // expected from server
+        dataType: "json", // expected from server
         success: function(response){
-            $("#question_div").html(response);
-            $('#question_div').animateCss('bounceInDown');
+            // alert(response["correct"]);
+            $("#question_div").html(response["html"]);
             MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question"]);
+
+            if (response["correct"]) {
+                $('#question_div').animateCSS('pulse');
+            }
+            else {
+                $('#question_div').animateCSS('shake');
+            }
+
+            $("input:text").bind("keypress", function (e) {
+                if (e.keyCode == 13) {
+                    e.preventDefault();
+                    getQuestion();
+                }
+            });
         },
-        error: function() {alert("Servidor não responde.");}
+        error: function() {alert("O servidor não responde.");}
     });
 }
-
 $(document).ready(function() {
     // getQuestion();
     $("#submit").click(getQuestion);
 {% autoescape %}
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <!-- <h3 id="title"> -->
+            {{ question['title'] }}
+        <!-- </h3> -->
+    </div>
+    <div class="panel-body">
-<h3 id="title">
-    {{ question['title'] }}
-</h3>
-
-<div id="text">
-{{ md(question['text']) }}
-</div>
-
-    <fieldset data-role="controlgroup">
-        <div class="list-group">
-        {% for n,opt in enumerate(question['options']) %}
-                <a class="list-group-item">
-                    <input type="checkbox" id="{{ n }}" name="answer" value="{{ n }}">
-                    {{ opt }}
-                </a>
-        {% end %}
+        <div id="text">
+        {{ md(question['text']) }}
         </div>
-    </fieldset>
+        <fieldset data-role="controlgroup">
+            <div class="list-group">
+            {% for n,opt in enumerate(question['options']) %}
+                    <a class="list-group-item">
+                        <input type="checkbox" id="{{ n }}" name="answer" value="{{ n }}">
+                        {{ opt }}
+                    </a>
+            {% end %}
+            </div>
+        </fieldset>
+    </div>
+</div>
 {% autoescape %}
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <!-- <h3 id="title"> -->
+            {{ question['title'] }}
+        <!-- </h3> -->
+    </div>
-<h3 id="title">
-    {{ question['title'] }}
-</h3>
+    <div class="panel-body">
-<div id="text">
-{{ md(question['text']) }}
-</div>
-
-    <fieldset data-role="controlgroup">
-        <div class="list-group">
-        {% for n,opt in enumerate(question['options']) %}
-                <a class="list-group-item">
-                    <input type="radio" id="{{ n }}" name="answer" value="{{ n }}">
-                    {{ md(opt) }}
-                </a>
-        {% end %}
+        <div id="text">
+        {{ md(question['text']) }}
         </div>
-    </fieldset>
+        <fieldset data-role="controlgroup">
+            <div class="list-group">
+            {% for n,opt in enumerate(question['options']) %}
+                    <a class="list-group-item">
+                        <input type="radio" id="{{ n }}" name="answer" value="{{ n }}">
+                        {{ md(opt) }}
+                    </a>
+            {% end %}
+            </div>
+        </fieldset>
+
+    </div>
+</div>
 \ No newline at end of file
 {% autoescape %}
-<h3 id="title">
-    {{ question['title'] }}
-</h3>
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <!-- <h3 id="title"> -->
+            {{ question['title'] }}
+        <!-- </h3> -->
+    </div>
-<div id="text">
-{{ md(question['text']) }}
-</div>
+    <div class="panel-body">
-<fieldset data-role="controlgroup">
-    <input type="text" class="form-control" id="answer" name="answer" value="">
-</fieldset>
+        <div id="text">
+        {{ md(question['text']) }}
+        </div>
+        <fieldset data-role="controlgroup">
+            <input type="text" class="form-control" id="answer" name="answer" value="">
+        </fieldset>
+    </div>
+</div>
 {% autoescape %}
-<h3 id="title">
-    {{ question['title'] }}
-</h3>
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <!-- <h3 id="title"> -->
+            {{ question['title'] }}
+        <!-- </h3> -->
+    </div>
-<div id="text">
-{{ md(question['text']) }}
-</div>
+    <div class="panel-body">
+        <div id="text">
+            {{ md(question['text']) }}
+        </div>
-<!-- <fieldset data-role="controlgroup"> -->
-<textarea class="form-control" rows="{{ question['lines'] }}" name="answer"></textarea><br />
-<!-- </fieldset> -->
-<input type="hidden" name="question_ref" value="{{ question['ref'] }}">
 \ No newline at end of file
+        <textarea class="form-control" rows="{{ question['lines'] }}" name="answer"></textarea><br />
+        <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
+    </div>
+</div>
1	{% autoescape %}	1	{% autoescape %}
2		2
3		3
4	-<h3 id="title">
5	- {{ question['title'] }}
6	-</h3>	4	+<div class="panel panel-default">
		5	+ <div class="panel-heading">
		6	+ <!-- <h3 id="title"> -->
		7	+ {{ question['title'] }}
		8	+ <!-- </h3> -->
		9	+ </div>
7		10
8	-<div id="text">
9	-{{ md(question['text']) }}
10	-</div>	11	+ <div class="panel-body">
11		12
12	-<fieldset data-role="controlgroup">
13	- <input type="text" class="form-control" id="answer" name="answer" value="">
14	-</fieldset>	13	+ <div id="text">
		14	+ {{ md(question['text']) }}
		15	+ </div>
15		16
		17	+ <fieldset data-role="controlgroup">
		18	+ <input type="text" class="form-control" id="answer" name="answer" value="">
		19	+ </fieldset>
		20	+ </div>
		21	+</div>