- login and maintopics ok.

- generating question for topics not working... in progress...

- login and maintopics ok.
- generating question for topics not working... in progress...
Miguel Barão
1 parent 7c5719d8
Showing 6 changed files with 90 additions and 23 deletions Show diff stats
serve.py
static/logo_horizontal.png
static/logo_horizontal_login.png
templates/login.html
templates/maintopics.html
templates/topic.html
@@ -30,11 +30,11 @@ class WebApplication(tornado.web.Application):
         handlers = [
             (r'/login',         LoginHandler),
             (r'/logout',        LogoutHandler),
-            (r'/change_password', ChangePasswordHandler),
-            (r'/question',      QuestionHandler),       
+            # (r'/change_password', ChangePasswordHandler),
+            (r'/question',      QuestionHandler),       # each question
+            (r'/topic/(.+)',    TopicHandler),          # page for doing a topic
             (r'/',              RootHandler),           # show list of topics
-            (r'/topic/(.+)',    TopicHandler),
-            (r'/(.+)',          FileHandler),
+            # (r'/(.+)',          FileHandler),
         ]
         settings = {
             'template_path': path.join(path.dirname(__file__), 'templates'),
@@ -135,7 +135,7 @@ class TopicHandler(BaseHandler):
         self.render('topic.html',
             uid=uid,
             name=self.learn.get_student_name(uid),
-            title=self.learn.get_title()
+            # title=self.learn.get_title()
             )
  
  
@@ -218,23 +218,35 @@ class QuestionHandler(BaseHandler):
             }
  
     @tornado.web.authenticated
-    def get(self, topic=''):
+    def get(self):
         logging.debug('QuestionHandler.get')
-        print("topic: " + topic)
+
         uid = self.current_user
-        question = self.learn.get_student_question(self, uid)
-        print(question)
  
-        question_html = self.render_string(self.templates[question['type']],question=question, md=md)
-        response = {
+        question = self.learn.get_student_question(uid)
+        print(question)  # FIXME its returning different questions on reload...
+        template = self.templates[question['type']]
+        question_html = self.render_string(template, question=question, md=md)
+        print(question_html)
+
+        self.write({
             'method': 'new_question',
             'params': {
                 'question': tornado.escape.to_unicode(question_html),
-                'state': tornado.escape.to_unicode(topics_html),
-                'progress': progress,
+                'progress': 0.3, #self.learn.get_student_progress(uid) ,
                 }
-            }
-        self.write(response)
+            })
+
+
+        # question_html = self.render_string(self.templates[question['type']],question=question, md=md)
+        # response = {
+        #     'method': 'new_question',
+        #     'params': {
+        #         'question': tornado.escape.to_unicode(question_html),
+        #         'progress': progress,
+        #         }
+        #     }
+        # self.write(response)
  
     # handles answer posted
     @tornado.web.authenticated
@@ -18,7 +18,7 @@
         <div class="row">
  
           <div class="col-sm-4">
-            <img src="/static/logo_horizontal.png" class="img-responsive" width="60%">
+            <img src="/static/logo_horizontal_login.png" class="img-responsive" width="60%">
           </div>
  
           <div class="col-sm-8">
@@ -15,7 +15,14 @@
     <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
  
 <!-- Other -->
-    <link rel="stylesheet" href="/static/css/learn.css">
+    <!-- <link rel="stylesheet" href="/static/css/learn.css"> -->
+
+    <style>
+        body {
+            margin: 0;
+            padding-top: 100px;
+        }
+    </style>
  
 </head>
 <!-- ===================================================================== -->
@@ -75,14 +75,10 @@
  
     <div id="notifications"></div>
  
-    <!-- Question body -->
     <form action="/question" method="post" id="question_form" autocomplete="off">
         {% module xsrf_form_html() %}
  
-        <div id="question_div">
-            Question goes here!!!!
-            <!-- questions go here -->
-        </div>
+        <div id="question_div">Question goes here!!!!</div>
  
     </form>
     <button class="btn btn-primary" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Continuar</button>
@@ -97,13 +93,65 @@
 <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  
 <script>
+    // Process the response given by the server
+    function updateQuestion(response){
+        switch (response["method"]) {
+        case "new_question":
+            $("#question_div").html(response["params"]["question"]);
+            $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
+
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
+
+            // enable shift+enter to submit and tab to spaces conversion
+            $("input:text, input:radio, input:checkbox").keydown(function (e) {
+                if (e.keyCode == 13) {
+                    e.preventDefault();
+                    if (e.shiftKey) postQuestion();
+                    return false;
+                }});
+            $("textarea").keydown(function (e) {
+                if (e.keyCode == 13 && e.shiftKey) { // shift enter
+                    e.preventDefault();
+                    postQuestion();
+                }
+                else if (e.keyCode === 9) { // tab
+                    e.preventDefault();     // prevent loosing focus
+                    // get caret position/selection
+                    var start = this.selectionStart;
+                    var end = this.selectionEnd;
+                    var value = $(this).val();
+
+                    // set textarea value to: text before caret + tab + text after caret
+                    $(this).val(value.substring(0, start) + "    " + value.substring(end));
+
+                    // put caret at right position again (add one for the tab)
+                    this.selectionStart = this.selectionEnd = start + 4;
+                }});
+            $('#question_div').animateCSS('zoomIn');
+            break;
+
+        case "shake":
+            $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
+            $('#question_div').animateCSS('shake');
+            break;
+
+        case "finished_topic":
+            $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
+            $("#question_div").html('<img src="/static/trophy.png" alt="trophy" class="img-rounded img-responsive center-block">');  // FIXME size
+            break;
+        }
+    }
+
+
+
     // Get current question
     function getQuestion() {
         $.ajax({
+            type: "GET",
             url: "/question",
             // headers: {"X-XSRFToken": token},
             dataType: "json", // expected from server
-            success: function(r) {alert(r); },//updateQuestion,
+            success: updateQuestion,
             error: function() {alert("O servidor não responde.");}
         });
     }
...	...	@@ -30,11 +30,11 @@ class WebApplication(tornado.web.Application):
30	30	handlers = [
31	31	(r'/login', LoginHandler),
32	32	(r'/logout', LogoutHandler),
33		- (r'/change_password', ChangePasswordHandler),
34		- (r'/question', QuestionHandler),
	33	+ # (r'/change_password', ChangePasswordHandler),
	34	+ (r'/question', QuestionHandler), # each question
	35	+ (r'/topic/(.+)', TopicHandler), # page for doing a topic
35	36	(r'/', RootHandler), # show list of topics
36		- (r'/topic/(.+)', TopicHandler),
37		- (r'/(.+)', FileHandler),
	37	+ # (r'/(.+)', FileHandler),
38	38	]
39	39	settings = {
40	40	'template_path': path.join(path.dirname(__file__), 'templates'),
...	...	@@ -135,7 +135,7 @@ class TopicHandler(BaseHandler):
135	135	self.render('topic.html',
136	136	uid=uid,
137	137	name=self.learn.get_student_name(uid),
138		- title=self.learn.get_title()
	138	+ # title=self.learn.get_title()
139	139	)
140	140
141	141
...	...	@@ -218,23 +218,35 @@ class QuestionHandler(BaseHandler):
218	218	}
219	219
220	220	@tornado.web.authenticated
221		- def get(self, topic=''):
	221	+ def get(self):
222	222	logging.debug('QuestionHandler.get')
223		- print("topic: " + topic)
	223	+
224	224	uid = self.current_user
225		- question = self.learn.get_student_question(self, uid)
226		- print(question)
227	225
228		- question_html = self.render_string(self.templates[question['type']],question=question, md=md)
229		- response = {
	226	+ question = self.learn.get_student_question(uid)
	227	+ print(question) # FIXME its returning different questions on reload...
	228	+ template = self.templates[question['type']]
	229	+ question_html = self.render_string(template, question=question, md=md)
	230	+ print(question_html)
	231	+
	232	+ self.write({
230	233	'method': 'new_question',
231	234	'params': {
232	235	'question': tornado.escape.to_unicode(question_html),
233		- 'state': tornado.escape.to_unicode(topics_html),
234		- 'progress': progress,
	236	+ 'progress': 0.3, #self.learn.get_student_progress(uid) ,
235	237	}
236		- }
237		- self.write(response)
	238	+ })
	239	+
	240	+
	241	+ # question_html = self.render_string(self.templates[question['type']],question=question, md=md)
	242	+ # response = {
	243	+ # 'method': 'new_question',
	244	+ # 'params': {
	245	+ # 'question': tornado.escape.to_unicode(question_html),
	246	+ # 'progress': progress,
	247	+ # }
	248	+ # }
	249	+ # self.write(response)
238	250
239	251	# handles answer posted
240	252	@tornado.web.authenticated
...	...
...	...	@@ -18,7 +18,7 @@
18	18	<div class="row">
19	19
20	20	<div class="col-sm-4">
21		- <img src="/static/logo_horizontal.png" class="img-responsive" width="60%">
	21	+ <img src="/static/logo_horizontal_login.png" class="img-responsive" width="60%">
22	22	</div>
23	23
24	24	<div class="col-sm-8">
...	...
...	...	@@ -15,7 +15,14 @@
15	15	<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
16	16
17	17	<!-- Other -->
18		- <link rel="stylesheet" href="/static/css/learn.css">
	18	+ <!-- <link rel="stylesheet" href="/static/css/learn.css"> -->
	19	+
	20	+ <style>
	21	+ body {
	22	+ margin: 0;
	23	+ padding-top: 100px;
	24	+ }
	25	+ </style>
19	26
20	27	</head>
21	28	<!-- ===================================================================== -->
...	...
...	...	@@ -75,14 +75,10 @@
75	75
76	76	<div id="notifications"></div>
77	77
78		- <!-- Question body -->
79	78	<form action="/question" method="post" id="question_form" autocomplete="off">
80	79	{% module xsrf_form_html() %}
81	80
82		- <div id="question_div">
83		- Question goes here!!!!
84		- <!-- questions go here -->
85		- </div>
	81	+ <div id="question_div">Question goes here!!!!</div>
86	82
87	83	</form>
88	84	<button class="btn btn-primary" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Continuar</button>
...	...	@@ -97,13 +93,65 @@
97	93	<script src="/static/bootstrap/js/bootstrap.min.js"></script>
98	94
99	95	<script>
	96	+ // Process the response given by the server
	97	+ function updateQuestion(response){
	98	+ switch (response["method"]) {
	99	+ case "new_question":
	100	+ $("#question_div").html(response["params"]["question"]);
	101	+ $('#topic_progress').css('width', (100response["params"]["progress"])+'%').attr('aria-valuenow', 100response["params"]["progress"]);
	102	+
	103	+ MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
	104	+
	105	+ // enable shift+enter to submit and tab to spaces conversion
	106	+ $("input:text, input:radio, input:checkbox").keydown(function (e) {
	107	+ if (e.keyCode == 13) {
	108	+ e.preventDefault();
	109	+ if (e.shiftKey) postQuestion();
	110	+ return false;
	111	+ }});
	112	+ $("textarea").keydown(function (e) {
	113	+ if (e.keyCode == 13 && e.shiftKey) { // shift enter
	114	+ e.preventDefault();
	115	+ postQuestion();
	116	+ }
	117	+ else if (e.keyCode === 9) { // tab
	118	+ e.preventDefault(); // prevent loosing focus
	119	+ // get caret position/selection
	120	+ var start = this.selectionStart;
	121	+ var end = this.selectionEnd;
	122	+ var value = $(this).val();
	123	+
	124	+ // set textarea value to: text before caret + tab + text after caret
	125	+ $(this).val(value.substring(0, start) + " " + value.substring(end));
	126	+
	127	+ // put caret at right position again (add one for the tab)
	128	+ this.selectionStart = this.selectionEnd = start + 4;
	129	+ }});
	130	+ $('#question_div').animateCSS('zoomIn');
	131	+ break;
	132	+
	133	+ case "shake":
	134	+ $('#topic_progress').css('width', (100response["params"]["progress"])+'%').attr('aria-valuenow', 100response["params"]["progress"]);
	135	+ $('#question_div').animateCSS('shake');
	136	+ break;
	137	+
	138	+ case "finished_topic":
	139	+ $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
	140	+ $("#question_div").html('<img src="/static/trophy.png" alt="trophy" class="img-rounded img-responsive center-block">'); // FIXME size
	141	+ break;
	142	+ }
	143	+ }
	144	+
	145	+
	146	+
100	147	// Get current question
101	148	function getQuestion() {
102	149	$.ajax({
	150	+ type: "GET",
103	151	url: "/question",
104	152	// headers: {"X-XSRFToken": token},
105	153	dataType: "json", // expected from server
106		- success: function(r) {alert(r); },//updateQuestion,
	154	+ success: updateQuestion,
107	155	error: function() {alert("O servidor não responde.");}
108	156	});
109	157	}
...	...