Miguel Barão / aprendizations

Download as
Browse Code »

Commit c68f0cedc922fc11d6de840395effe32442aa7e2

Authored by Miguel Barão
1 parent 5a4b1ac7
Exists in master and in 1 other branch dev

- added question animations

Showing 6 changed files with 124 additions and 71 deletions   Show diff stats
serve.py
  Diff comments   View file @c68f0ce
... ... @@ -32,12 +32,12 @@ class LearnApp(object):
32 32  
33 33 # returns dictionary
34 34 def next_question(self):
35   - print('next question')
  35 + # print('next question')
36 36 # q = self.factory.generate('math-expressions')
37 37 questions = list(self.factory)
38   - print(questions)
  38 + # print(questions)
39 39 q = self.factory.generate(random.choice(questions))
40   - print(q)
  40 + # print(q)
41 41 self.q = q
42 42 return q
43 43  
... ... @@ -80,7 +80,7 @@ class BaseHandler(tornado.web.RequestHandler):
80 80  
81 81 def get_current_user(self):
82 82 user_cookie = self.get_secure_cookie("user")
83   - print('base.get_current_user -> ', user_cookie)
  83 + # print('base.get_current_user -> ', user_cookie)
84 84 if user_cookie:
85 85 return user_cookie # json.loads(user_cookie)
86 86  
... ... @@ -152,16 +152,24 @@ class QuestionHandler(BaseHandler):
152 152 print('Reference' + str(ref))
153 153  
154 154 question = self.application.learn.q # get current question
  155 + print('=====================================')
  156 + print(' ' + str(question))
  157 + print('-------------------------------------')
  158 +
  159 +
155 160 if question is not None:
156 161 ans = self.get_body_arguments('answer')
157   - print(ans)
  162 + print(' answer = ' + str(ans))
158 163 question['answer'] = ans # insert answer
159 164 grade = question.correct() # correct answer
160   - print('grade = ' + str(grade))
  165 + print(' grade = ' + str(grade))
161 166  
162   - if grade > 0.99999:
  167 + correct = grade > 0.99999
  168 + if correct:
163 169 question = self.application.learn.next_question()
  170 +
164 171 else:
  172 + correct = True # to animate correctly
165 173 question = self.application.learn.next_question()
166 174  
167 175 templates = {
... ... @@ -172,10 +180,14 @@ class QuestionHandler(BaseHandler):
172 180 'text_numeric': 'question-text.html',
173 181 'textarea': 'question-textarea.html',
174 182 }
175   - self.render(templates[question['type']],
  183 + html_out = self.render_string(templates[question['type']],
176 184 question=question, # the dictionary with the question??
177 185 md=md, # passes function that renders markdown to html
178 186 )
  187 + self.write({
  188 + 'html': tornado.escape.to_unicode(html_out),
  189 + 'correct': correct,
  190 + })
179 191  
180 192 # if question['type'] == 'checkbox':
181 193 # self.render('question-checkbox.html',
... ...
templates/learn.html
  Diff comments   View file @c68f0ce
... ... @@ -36,7 +36,7 @@
36 36 </head>
37 37 <!-- ===================================================================== -->
38 38 <body>
39   -<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  39 +<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
40 40 <div class="container-fluid drop-shadow">
41 41 <div class="navbar-header">
42 42 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
... ... @@ -70,45 +70,66 @@
70 70 <!-- ===================================================================== -->
71 71 <div class="container">
72 72  
  73 +
73 74 <form action="/question" method="post" id="question_form" autocomplete="off">
74 75 {% module xsrf_form_html() %}
75 76  
76 77 <div id="question_div">O jogo está prestes a começar. A bola está do teu lado.
77 78 </div>
78   -</form>
79 79  
  80 + </form>
80 81 <button class="btn btn-primary" id="submit">Chuta!</button>
81 82  
  83 +
  84 +
  85 +
82 86 </div> <!-- container -->
83 87  
84 88 <script>
85 89 $.fn.extend({
86   - animateCss: function (animationName) {
  90 + animateCSS: function (animation) {
87 91 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
88   - this.addClass('animated ' + animationName).one(animationEnd, function() {
89   - $(this).removeClass('animated ' + animationName);
  92 + this.addClass('animated ' + animation).one(animationEnd, function() {
  93 + $(this).removeClass('animated ' + animation);
90 94 });
  95 + // $("#question_div").html(response["html"]);
  96 + // MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question"]);
  97 + // this.addClass('animated pulse').one(animationEnd, function() {
  98 + // $(this).removeClass('animated bounceOutLeft');
  99 + // });
91 100 }
92 101 });
93 102  
94   -
95 103 function getQuestion() {
96 104 $.ajax({
97 105 type: "POST",
98 106 url: "/question",
99 107 // headers: {"X-XSRFToken": token},
100 108 data: $("#question_form").serialize(),//{'a':10,'b':20},
101   - dataType: "html", // expected from server
  109 + dataType: "json", // expected from server
102 110 success: function(response){
103   - $("#question_div").html(response);
104   - $('#question_div').animateCss('bounceInDown');
  111 + // alert(response["correct"]);
  112 + $("#question_div").html(response["html"]);
105 113 MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question"]);
  114 +
  115 + if (response["correct"]) {
  116 + $('#question_div').animateCSS('pulse');
  117 + }
  118 + else {
  119 + $('#question_div').animateCSS('shake');
  120 + }
  121 +
  122 + $("input:text").bind("keypress", function (e) {
  123 + if (e.keyCode == 13) {
  124 + e.preventDefault();
  125 + getQuestion();
  126 + }
  127 + });
106 128 },
107   - error: function() {alert("Servidor não responde.");}
  129 + error: function() {alert("O servidor não responde.");}
108 130 });
109 131 }
110 132  
111   -
112 133 $(document).ready(function() {
113 134 // getQuestion();
114 135 $("#submit").click(getQuestion);
... ...
templates/question-checkbox.html
  Diff comments   View file @c68f0ce
1 1 {% autoescape %}
2 2  
  3 +<div class="panel panel-default">
  4 + <div class="panel-heading">
  5 + <!-- <h3 id="title"> -->
  6 + {{ question['title'] }}
  7 + <!-- </h3> -->
  8 + </div>
  9 + <div class="panel-body">
3 10  
4   -<h3 id="title">
5   - {{ question['title'] }}
6   -</h3>
7   -
8   -<div id="text">
9   -{{ md(question['text']) }}
10   -</div>
11   -
12   - <fieldset data-role="controlgroup">
13   - <div class="list-group">
14   - {% for n,opt in enumerate(question['options']) %}
15   - <a class="list-group-item">
16   - <input type="checkbox" id="{{ n }}" name="answer" value="{{ n }}">
17   - {{ opt }}
18   - </a>
19   - {% end %}
  11 + <div id="text">
  12 + {{ md(question['text']) }}
20 13 </div>
21   - </fieldset>
22 14  
  15 + <fieldset data-role="controlgroup">
  16 + <div class="list-group">
  17 + {% for n,opt in enumerate(question['options']) %}
  18 + <a class="list-group-item">
  19 + <input type="checkbox" id="{{ n }}" name="answer" value="{{ n }}">
  20 + {{ opt }}
  21 + </a>
  22 + {% end %}
  23 + </div>
  24 + </fieldset>
  25 + </div>
  26 +</div>
... ...
templates/question-radio.html
  Diff comments   View file @c68f0ce
1 1 {% autoescape %}
2 2  
  3 +<div class="panel panel-default">
  4 + <div class="panel-heading">
  5 + <!-- <h3 id="title"> -->
  6 + {{ question['title'] }}
  7 + <!-- </h3> -->
  8 + </div>
3 9  
4   -<h3 id="title">
5   - {{ question['title'] }}
6   -</h3>
  10 + <div class="panel-body">
7 11  
8   -<div id="text">
9   -{{ md(question['text']) }}
10   -</div>
11   -
12   - <fieldset data-role="controlgroup">
13   - <div class="list-group">
14   - {% for n,opt in enumerate(question['options']) %}
15   - <a class="list-group-item">
16   - <input type="radio" id="{{ n }}" name="answer" value="{{ n }}">
17   - {{ md(opt) }}
18   - </a>
19   - {% end %}
  12 + <div id="text">
  13 + {{ md(question['text']) }}
20 14 </div>
21   - </fieldset>
22 15  
  16 + <fieldset data-role="controlgroup">
  17 + <div class="list-group">
  18 + {% for n,opt in enumerate(question['options']) %}
  19 + <a class="list-group-item">
  20 + <input type="radio" id="{{ n }}" name="answer" value="{{ n }}">
  21 + {{ md(opt) }}
  22 + </a>
  23 + {% end %}
  24 + </div>
  25 + </fieldset>
  26 +
  27 + </div>
  28 +</div>
23 29 \ No newline at end of file
... ...
templates/question-text.html
  Diff comments   View file @c68f0ce
1 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>
... ...
templates/question-textarea.html
  Diff comments   View file @c68f0ce
1 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">
  12 + <div id="text">
  13 + {{ md(question['text']) }}
  14 + </div>
11 15  
12   -<!-- <fieldset data-role="controlgroup"> -->
13   -<textarea class="form-control" rows="{{ question['lines'] }}" name="answer"></textarea><br />
14   -<!-- </fieldset> -->
15   -<input type="hidden" name="question_ref" value="{{ question['ref'] }}">
16 16 \ No newline at end of file
  17 + <textarea class="form-control" rows="{{ question['lines'] }}" name="answer"></textarea><br />
  18 + <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
  19 + </div>
  20 +</div>
... ...