- titulo da página configurado no ficheiro de configuração.

- mostra o estado dos tópicos numa coluna do lado esquerdo. - adicionado type: information, para perguntas que são apenas informativas.

- titulo da página configurado no ficheiro de configuração.
- mostra o estado dos tópicos numa coluna do lado esquerdo. - adicionado type: information, para perguntas que são apenas informativas.
Miguel Barão
1 parent 0b1675b0
Showing 9 changed files with 106 additions and 24 deletions Show diff stats
BUGS.md
app.py
knowledge.py
serve.py
static/css/learn.css
templates/learn.html
templates/question-information.html
templates/question.html
templates/topics.html
 BUGS:
-- não entra à primeira
+- guardar state cada vez que topico termina
+- mostrar quantas perguntas faltam
 - logs mostram que está a gerar cada pergunta 2 vezes...??
 - mostra tópicos do lado esquerdo, indicando quais estão feitos e quantas perguntas contêm.
 - se students.db não existe, rebenta.
@@ -9,13 +10,14 @@ BUGS:
 TODO:
+- usar codemirror
 - mostrar comments quando falha a resposta
-- configuração e linha de comando.
-- como gerar uma sequencia de perguntas?
 - generators not working: bcrypt (ver blog)
 SOLVED:
+- não entra à primeira
+- configuração e linha de comando.
 - o browser é redireccionado para /question em vez de fazer um post?? quando se pressiona enter numa caixa text edit.
 - load/save the knowledge state of the student
 - servir ficheiros de public temporariamente
@@ -102,6 +102,14 @@ class LearnApp(object):
         return self.online[uid].get('name', '')
     # ------------------------------------------------------------------------
+    def get_student_state(self, uid):
+        return self.online[uid]['state'].get_knowledge_state()
+
+    # ------------------------------------------------------------------------
+    def get_title(self):
+        return self.depgraph.graph['title']
+
+    # ------------------------------------------------------------------------
     def get_current_public_dir(self, uid):
         topic = self.online[uid]['state'].get_current_topic()
         p = self.depgraph.graph['path']
@@ -110,7 +118,7 @@ class LearnApp(object):
     # ------------------------------------------------------------------------
     # check answer and if correct returns new question, otherise returns None
     def check_answer(self, uid, answer):
-        logger.debug(f'check_answer("{uid}", "{answer}")')
+        # logger.debug(f'check_answer("{uid}", "{answer}")')
         knowledge = self.online[uid]['state']
         current_question = knowledge.check_answer(answer)
@@ -159,7 +167,8 @@ class LearnApp(object):
             raise e
         prefix = config['path']     # FIXME default if does not exist?
-        g = nx.DiGraph(path=prefix)
+        title = config.get('title', '')
+        g = nx.DiGraph(path=prefix, title=title)
         # Build dependency graph
         deps = config.get('dependencies', {})
@@ -28,8 +28,8 @@ class Knowledge(object):
     # ------------------------------------------------------------------------
     def topic_generator(self):
-        topics = nx.topological_sort(self.depgraph) # FIXME for now...
-        for t in topics:
+        self.topic_sequence = nx.topological_sort(self.depgraph) # FIXME for now...
+        for t in self.topic_sequence:
             if self.state.get(t, 0.0) > 0.999:
                 continue
             self.questions = self.generate_questions_for_topic(t)
@@ -51,7 +51,7 @@ class Knowledge(object):
     # ------------------------------------------------------------------------
     def get_knowledge_state(self):
-        return self.state
+        return [(t, self.state.get(t, 0.0)) for t in self.topic_sequence]
     # --- generates a new question given the current state -------------------
     def new_question(self):
@@ -76,7 +76,7 @@ class Knowledge(object):
     # --- checks answer ------------------------------------------------------
     #     returns current question with correction, time and comments updated
     def check_answer(self, answer):
-        logger.debug(f'check_answer("{answer}")')
+        logger.debug(f'check_answer {answer}')
         question = self.current_question
         if question is not None:
             question['finish_time'] = datetime.now()
@@ -110,7 +110,8 @@ class LearnHandler(BaseHandler):
         uid = self.current_user
         self.render('learn.html',
             uid=uid,
-            name=self.learn.get_student_name(uid)
+            name=self.learn.get_student_name(uid),
+            title=self.learn.get_title(),
             )
 # ----------------------------------------------------------------------------
@@ -129,6 +130,7 @@ class FileHandler(BaseHandler):
 # respond to AJAX to get a JSON question
 class QuestionHandler(BaseHandler):
     templates = {
+        'information':  'question-information.html',
         'checkbox':     'question-checkbox.html',
         'radio':        'question-radio.html',
         'text':         'question-text.html',
@@ -146,16 +148,21 @@ class QuestionHandler(BaseHandler):
         # ref = self.get_body_arguments('question_ref')
         user = self.current_user
         answer = self.get_body_arguments('answer')
-        # logger.debug(f'Answer POST from "{user}"')
         next_question = self.learn.check_answer(user, answer)
+        state = self.learn.get_student_state(user)
         if next_question is not None:
-            html_out = self.render_string(self.templates[next_question['type']],
+            question_html = self.render_string(self.templates[next_question['type']],
                 question=next_question, # dictionary with the question
                 md=md,                  # function that renders markdown to html
                 )
+            topics_html = self.render_string('topics.html', state=state)
+
             self.write({
-                'params': tornado.escape.to_unicode(html_out),
+                'params': {
+                    'question': tornado.escape.to_unicode(question_html),
+                    'state': tornado.escape.to_unicode(topics_html),
+                    },
                 'method': 'new_question',
                 })
         else:
@@ -6,4 +6,27 @@ img {
     display: block;
     margin:  auto;
     width: 80%;
-}
 \ No newline at end of file
+}
+
+/* progress bars have height of 4 pixels */
+.progress {height: 4px;}
+
+/* make markdown tables beautiful */
+table {
+    border-collapse: collapse;
+    margin-left: 50px;
+}
+thead, tbody, td, th {
+    padding: 5px;
+    border-bottom: 1px solid #ddd;
+}
+
+textarea {
+    font-family: monospace !important;
+}
+
+/* Hack to avoid name clash between pygments and mathjax */
+.MathJax .mo,
+.MathJax .mi {
+    color: inherit;
+}
@@ -2,7 +2,11 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>Learn</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Miguel Barão">
+
+    <title>iLearn</title>
     <link rel="icon" href="/static/favicon.ico">
 <!-- MathJax -->
@@ -31,7 +35,7 @@
 <body>
 <!-- ===================================================================== -->
 <!-- Navbar -->
-<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
     <div class="container-fluid">
         <div class="navbar-header">
@@ -41,7 +45,7 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand" href="#">BrainPower</a>
+            <a class="navbar-brand" href="#">{{ title }}</a>
         </div>
         <div class="collapse navbar-collapse" id="myNavbar">
@@ -65,7 +69,17 @@
 <!-- ===================================================================== -->
 <!-- Container -->
-<div class="container">
+<div class="container-fluid">
+<div class="row">
+<div class="col-lg-2">
+    <div id="topics"></div>
+</div>
+
+
+
+            <!-- Blog Post Content Column -->
+            <div class="col-md-10">
+
 <!-- <audio>
     <source id="snd-intro" src="/static/sounds/intro.mp3" type="audio/mpeg">
     <source id="snd-correct" src="/static/sounds/correct.mp3" type="audio/mpeg">
@@ -76,15 +90,15 @@
     {% module xsrf_form_html() %}
     <div id="question_div">
-        O jogo está prestes a começar. A bola está do teu lado.
+    Pronto?
     </div>
  </form>
-<button class="btn btn-primary" id="submit">Próxima</button>
+<button class="btn btn-primary" id="submit">Continuar</button>
+</div> <!-- col -->
 </div> <!-- container -->
-
 <!-- ===================================================================== -->
 <!--                          JAVASCRIP                                    -->
 <!-- ===================================================================== -->
@@ -102,7 +116,8 @@ $.fn.extend({
 function updateQuestion(response){
     switch (response["method"]) {
     case "new_question":
-        $("#question_div").html(response["params"]);
+        $("#question_div").html(response["params"]["question"]);
+        $("#topics").html(response["params"]["state"]);
         MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
         $("textarea, input:text, input:radio, input:checkbox").keydown(function (e) {
@@ -142,6 +157,7 @@ function getQuestion() {
 $(document).ready(function() {
     // var audio = new Audio('/static/sounds/intro.mp3');
     // audio.play();
+    getQuestion();
     $("#submit").click(getQuestion);
 });
 </script>
@@ -0,0 +1,5 @@
+{% extends "question.html" %}
+
+{% block answer %}
+<input type="hidden" name="question_ref" value="{{ question['ref'] }}">
+{% end %}
@@ -3,8 +3,7 @@
 <!-- <div class="panel panel-default">
     <div class="panel-body">
  -->
-        <h3>{{ question['title'] }}</h3>
-
+        <h1 class="page-header">{{ question['title'] }}</h1>
         <div id="text">
             {{ md(question['text']) }}
         </div>
@@ -0,0 +1,21 @@
+{% autoescape %}
+
+<!-- <div class="well"> -->
+<div class="panel panel-default">
+    <div class="panel-heading">Tópicos</div>
+    <div class="panel-body">
+    <!-- <ul class="list-group"> -->
+        {% for t in state %}
+        <!-- <li class="list-group-item"> -->
+            <p>{{ t[0] }}</p>
+
+            <div class="progress">
+              <div class="progress-bar {{ 'progress-bar-success' if t[1]>=0.9 else 'progress-bar-danger' }}" role="progressbar" aria-valuenow="{{ 100*t[1] }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: {{ 100*t[1] }}%">
+
+              </div>
+            </div>
+        <!-- </li> -->
+        {% end %}
+    <!-- </ul> -->
+    </div>
+</div>
1	BUGS:	1	BUGS:
2		2
3	-- não entra à primeira	3	+- guardar state cada vez que topico termina
		4	+- mostrar quantas perguntas faltam
4	- logs mostram que está a gerar cada pergunta 2 vezes...??	5	- logs mostram que está a gerar cada pergunta 2 vezes...??
5	- mostra tópicos do lado esquerdo, indicando quais estão feitos e quantas perguntas contêm.	6	- mostra tópicos do lado esquerdo, indicando quais estão feitos e quantas perguntas contêm.
6	- se students.db não existe, rebenta.	7	- se students.db não existe, rebenta.
	@@ -9,13 +10,14 @@ BUGS:		@@ -9,13 +10,14 @@ BUGS:
9		10
10	TODO:	11	TODO:
11		12
		13	+- usar codemirror
12	- mostrar comments quando falha a resposta	14	- mostrar comments quando falha a resposta
13	-- configuração e linha de comando.
14	-- como gerar uma sequencia de perguntas?
15	- generators not working: bcrypt (ver blog)	15	- generators not working: bcrypt (ver blog)
16		16
17	SOLVED:	17	SOLVED:
18		18
		19	+- não entra à primeira
		20	+- configuração e linha de comando.
19	- o browser é redireccionado para /question em vez de fazer um post?? quando se pressiona enter numa caixa text edit.	21	- o browser é redireccionado para /question em vez de fazer um post?? quando se pressiona enter numa caixa text edit.
20	- load/save the knowledge state of the student	22	- load/save the knowledge state of the student
21	- servir ficheiros de public temporariamente	23	- servir ficheiros de public temporariamente
	@@ -6,4 +6,27 @@ img {		@@ -6,4 +6,27 @@ img {
6	display: block;	6	display: block;
7	margin: auto;	7	margin: auto;
8	width: 80%;	8	width: 80%;
9	-}
10	\ No newline at end of file	9	\ No newline at end of file
		10	+}
		11	+
		12	+/* progress bars have height of 4 pixels */
		13	+.progress {height: 4px;}
		14	+
		15	+/* make markdown tables beautiful */
		16	+table {
		17	+ border-collapse: collapse;
		18	+ margin-left: 50px;
		19	+}
		20	+thead, tbody, td, th {
		21	+ padding: 5px;
		22	+ border-bottom: 1px solid #ddd;
		23	+}
		24	+
		25	+textarea {
		26	+ font-family: monospace !important;
		27	+}
		28	+
		29	+/* Hack to avoid name clash between pygments and mathjax */
		30	+.MathJax .mo,
		31	+.MathJax .mi {
		32	+ color: inherit;
		33	+}
@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
	1	+{% extends "question.html" %}
	2	+
	3	+{% block answer %}
	4	+<input type="hidden" name="question_ref" value="{{ question['ref'] }}">
	5	+{% end %}
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+{% autoescape %}
	2	+
	3	+<!-- <div class="well"> -->
	4	+<div class="panel panel-default">
	5	+ <div class="panel-heading">Tópicos</div>
	6	+ <div class="panel-body">
	7	+ <!-- <ul class="list-group"> -->
	8	+ {% for t in state %}
	9	+ <!-- <li class="list-group-item"> -->
	10	+ <p>{{ t[0] }}</p>
	11	+
	12	+ <div class="progress">
	13	+ <div class="progress-bar {{ 'progress-bar-success' if t[1]>=0.9 else 'progress-bar-danger' }}" role="progressbar" aria-valuenow="{{ 100t[1] }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: {{ 100t[1] }}%">
	14	+
	15	+ </div>
	16	+ </div>
	17	+ <!-- </li> -->
	18	+ {% end %}
	19	+ <!-- </ul> -->
	20	+ </div>
	21	+</div>