- add support for courses.

- solution always shown. - fixed image rendering: always left aligned as text. - formulas are inserted with latex delimiters \(x\) and \[x\] for mathjax rendering.

- add support for courses.
- solution always shown. - fixed image rendering: always left aligned as text. - formulas are inserted with latex delimiters \(x\) and \[x\] for mathjax rendering.
Miguel Barão
1 parent 6b619adb
Showing 6 changed files with 178 additions and 182 deletions Show diff stats
BUGS.md
aprendizations/learnapp.py
aprendizations/templates/courses.html
aprendizations/templates/solution.html
aprendizations/templates/topic.html
aprendizations/tools.py
 # BUGS
+- não suporta definition lists em markdown
 - double click submits twice.
 - nao esta a seguir o max_tries definido no ficheiro de dependencias.
 - obter rankings por curso GET course=course_id
@@ -335,7 +335,7 @@ class LearnApp(object):
         default_shuffle_questions: bool = config.get('shuffle_questions', True)
         default_choose: int = config.get('choose', 9999)
         default_forgetting_factor: float = config.get('forgetting_factor', 1.0)
-        default_maxtries: int = config.get('max_tries', 3)
+        default_maxtries: int = config.get('max_tries', 1)
         default_append_wrong: bool = config.get('append_wrong', True)
         default_min_level: float = config.get('min_level', 0.01)  # to unlock
 {% autoescape %}
-
 <!doctype html>
 <html lang="pt-PT">
-<head>
-  <title>{{appname}}</title>
-  <link rel="icon" href="/static/favicon.ico">
-
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="author" content="Miguel Barão">
-
-<!-- Styles -->
-  <link rel="stylesheet" href="/static/mdbootstrap/css/bootstrap.min.css">
-  <link rel="stylesheet" href="/static/mdbootstrap/css/mdb.min.css">
-  <link rel="stylesheet" href="/static/css/maintopics.css">
-
-<!-- Scripts -->
-  <script defer src="/static/mdbootstrap/js/jquery-3.4.1.min.js"></script>
-  <script defer src="/static/mdbootstrap/js/popper.min.js"></script>
-  <script defer src="/static/mdbootstrap/js/bootstrap.min.js"></script>
-  <script defer src="/static/mdbootstrap/js/mdb.min.js"></script>
-  <script defer src="/static/fontawesome-free/js/all.min.js"></script>
-  <script defer src="/static/js/maintopics.js"></script>
+<head>
+    <title>{{appname}}</title>
+    <link rel="icon" href="/static/favicon.ico">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="author" content="Miguel Barão">
+    <!-- Styles -->
+    <link rel="stylesheet" href="/static/mdbootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/static/mdbootstrap/css/mdb.min.css">
+    <link rel="stylesheet" href="/static/css/maintopics.css">
+    <!-- Scripts -->
+    <script defer src="/static/mdbootstrap/js/jquery-3.4.1.min.js"></script>
+    <script defer src="/static/mdbootstrap/js/popper.min.js"></script>
+    <script defer src="/static/mdbootstrap/js/bootstrap.min.js"></script>
+    <script defer src="/static/mdbootstrap/js/mdb.min.js"></script>
+    <script defer src="/static/fontawesome-free/js/all.min.js"></script>
+    <script defer src="/static/js/maintopics.js"></script>
 </head>
-<!-- ===================================================================== -->
-<body>
-<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
-  <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="collapse navbar-collapse" id="navbarText">
-    <div class="navbar-nav mr-auto">
-      <a class="nav-item nav-link active" href="#">Cursos <span class="sr-only">(actual)</span></a>
-      <a class="nav-item nav-link disabled" href="#">Tópicos</a>
-      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Classificação</a>
-    </div>
-    <ul class="navbar-nav">
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <i class="fas fa-user-graduate" aria-hidden="true"></i>
-          <span id="name">{{ escape(name) }}</span>
-          <span class="caret"></span>
-        </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-          <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="/logout">Sair</a>
+<body>
+    <!-- ===== navbar ==================================================== -->
+    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
+        <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarText">
+            <div class="navbar-nav mr-auto">
+                <a class="nav-item nav-link active" href="#">Cursos <span class="sr-only">(actual)</span></a>
+                <a class="nav-item nav-link disabled" href="#">Tópicos</a>
+                <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Classificação</a>
+            </div>
+            <ul class="navbar-nav">
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="fas fa-user-graduate" aria-hidden="true"></i>
+                        <span id="name">{{ escape(name) }}</span>
+                        <span class="caret"></span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="/logout">Sair</a>
+                    </div>
+                </li>
+            </ul>
         </div>
-      </li>
-    </ul>
-  </div>
-</nav>
-<!-- ===================================================================== -->
-<div class="container">
-
-  <div id="notifications"></div>
-
-  {% for k,v in courses.items() %}
-
-    <a href="/course/{{k}}" class="card text-dark mb-3" style="width: 18rem;">
-      <div class="card-body">
-        <h6 class="card-title">{{ v['title'] }}</h6>
-      </div>
-    </a>
-
-  {% end %} <!-- for -->
-
-
-<!-- === Change Password Modal =========================================== -->
-<div id="password_modal" class="modal fade" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-<!-- header -->
-      <div class="modal-header">
-        <h5 class="modal-title">Alterar Password</h5>
-      </div>
-<!-- body -->
-      <div class="modal-body">
-        <div class="control-group">
-            <label for="new_password" class="control-label">Introduza a nova password:</label>
-            <div class="controls">
-              <input type="password" id="new_password" name="new_password" autocomplete="new-password">
+    </nav>
+    <!-- ===== page ====================================================== -->
+    <div class="container">
+        <div id="notifications"></div>
+        <div class="row">
+                {% for k,v in courses.items() %}
+            <div class="card-deck col-3">
+                <a href="/course/{{k}}" class="card mb-3">
+                    <!-- text-dark mb-3" style="width: 18rem;" -->
+                    <div class="card-body">
+                        <h6 class="card-title">{{ v['title'] }}</h6>
+                        <p class="card-text">{{ v.get('description', '') }}</p>
+                    </div>
+                </a>
             </div>
+                {% end %}
         </div>
-      </div>
-<!-- footer -->
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
-        <button id="change_password" type="button" class="btn btn-danger" data-dismiss="modal">Alterar</button>
-      </div>
-
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-
+    </div>
+    <!-- for -->
+    <!-- === Change Password Modal =========================================== -->
+    <div id="password_modal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <!-- header -->
+                <div class="modal-header">
+                    <h5 class="modal-title">Alterar Password</h5>
+                </div>
+                <!-- body -->
+                <div class="modal-body">
+                    <div class="control-group">
+                        <label for="new_password" class="control-label">Introduza a nova password:</label>
+                        <div class="controls">
+                            <input type="password" id="new_password" name="new_password" autocomplete="new-password">
+                        </div>
+                    </div>
+                </div>
+                <!-- footer -->
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
+                    <button id="change_password" type="button" class="btn btn-danger" data-dismiss="modal">Alterar</button>
+                </div>
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div><!-- /.modal -->
 </body>
-</html>
+
+</html>
 \ No newline at end of file
 {% autoescape %}
 {% if solution %}
-<div class="card">
+<div class="card mt-3">
   <div class="card-body">
     {{ md(solution) }}
   </div>
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>{{appname}}</title>
     <link rel="icon" href="/static/favicon.ico">
-
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="author" content="Miguel Barão">
-
-<!-- MathJax3 -->
-  <script>
-  MathJax = {
-    tex: {
-      inlineMath: [['$$$', '$$$'], ['\\(', '\\)']]
-    },
-    svg: {
-      fontCache: 'global'
-    }
-  };
-  </script>
-  <script async type="text/javascript" id="MathJax-script" src="/static/mathjax/es5/tex-svg.js"></script>
-
-<!-- Styles -->
+    <!-- MathJax3 -->
+    <script>
+    MathJax = {
+        tex: {
+            inlineMath: [
+                ['$$$', '$$$'],
+                ['\\(', '\\)']
+            ]
+        },
+        svg: {
+            fontCache: 'global'
+        }
+    };
+    </script>
+    <script async type="text/javascript" id="MathJax-script" src="/static/mathjax/es5/tex-svg.js"></script>
+    <!-- Styles -->
     <link rel="stylesheet" href="/static/mdbootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/static/mdbootstrap/css/mdb.min.css">
     <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="/static/css/animate.min.css">
     <link rel="stylesheet" href="/static/css/github.css">
     <link rel="stylesheet" href="/static/css/topic.css">
-
-<!-- Scripts -->
+    <!-- Scripts -->
     <script defer src="/static/mdbootstrap/js/jquery-3.4.1.min.js"></script>
     <script defer src="/static/mdbootstrap/js/popper.min.js"></script>
     <script defer src="/static/mdbootstrap/js/bootstrap.min.js"></script>
@@ -37,77 +37,67 @@
     <script defer src="/static/fontawesome-free/js/all.min.js"></script>
     <script defer src="/static/codemirror/lib/codemirror.js"></script>
     <script defer src="/static/js/topic.js"></script>
-
 </head>
 <!-- ===================================================================== -->
-<body>
-<!-- Navbar -->
-<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
-    <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarText">
-        <div class="navbar-nav mr-auto">
-            <a class="nav-item nav-link" href="/courses">Cursos</a>
-            <a class="nav-item nav-link active" href="/course/{{course_id}}">Tópicos <span class="sr-only">(actual)</span></a>
-            <a class="nav-item nav-link" href="/rankings?course={{course_id}}">Classificação</a>
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
+        <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarText">
+            <div class="navbar-nav mr-auto">
+                <a class="nav-item nav-link" href="/courses">Cursos</a>
+                <a class="nav-item nav-link active" href="/course/{{course_id}}">Tópicos <span class="sr-only">(actual)</span></a>
+                <a class="nav-item nav-link" href="/rankings?course={{course_id}}">Classificação</a>
+            </div>
+            <ul class="navbar-nav">
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="fas fa-user-graduate" aria-hidden="true"></i>
+                        <span id="name">{{ escape(name) }}</span>
+                        <span class="caret"></span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="/logout">Sair</a>
+                    </div>
+                </li>
+            </ul>
         </div>
-
-        <ul class="navbar-nav">
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-user-graduate" aria-hidden="true"></i>
-                    <span id="name">{{ escape(name) }}</span>
-                    <span class="caret"></span>
-                </a>
-                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item" href="/logout">Sair</a>
-                </div>
-            </li>
-        </ul>
-    </div>
-</nav>
-
-<!-- ===================================================================== -->
-<div class="progress">
-    <div class="progress-bar bg-primary" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
-</div>
-
-<!-- ===================================================================== -->
-<!-- main panel with questions -->
-<div class="container" id="container">
-
-    <div id="notifications"></div>
-
-    <div class="my-5" id="content">
-        <form action="/question" method="post" id="question_form" autocomplete="off">
-            {% module xsrf_form_html() %}
-            <div id="question_div"></div>
-        </form>
-
-        <div id="comments"></div>
+    </nav>
+    <!-- ===================================================================== -->
+    <div class="progress">
+        <div class="progress-bar bg-primary" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
     </div>
-
-    <div id="wrong" style="display: none">
-        <div class="alert alert-danger">
-            <h4><i class="fas fa-thumbs-down fa-3x"></i> Não acertou, mas também se aprende com os erros...</h4>
-            <div id="solution_wrong"></div>
+    <!-- ===================================================================== -->
+    <!-- main panel with questions -->
+    <div class="container" id="container">
+        <div id="notifications"></div>
+        <div class="my-5" id="content">
+            <form action="/question" method="post" id="question_form" autocomplete="off">
+                {% module xsrf_form_html() %}
+                <div id="question_div"></div>
+            </form>
+            <div id="comments"></div>
         </div>
-    </div>
-
-    <div id="right" style="display: none">
-        <div class="alert alert-success">
-            <h4><i class="fas fa-thumbs-up fa-3x"></i> Muito bem!</h4>
-            <div id="solution_right"></div>
+        <div id="wrong" style="display: none">
+            <div class="alert alert-danger">
+                <h4><i class="fas fa-thumbs-down fa-3x"></i> Não acertou, mas também se aprende com os erros...</h4>
+                <div id="solution_wrong"></div>
+            </div>
+        </div>
+        <div id="right" style="display: none">
+            <div class="alert alert-success">
+                <h4><i class="fas fa-thumbs-up fa-3x"></i> Muito bem!</h4>
+                <div id="solution_right"></div>
+            </div>
         </div>
+        <!-- reponder / continuar -->
+        <a class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" href="#solution"></a>
+        <!-- title="Shift-Enter" -->
     </div>
-
-    <!-- reponder / continuar -->
-    <a class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" href="#solution"></a>
-    <!-- title="Shift-Enter" -->
-</div>
-
 </body>
-</html>
+
+</html>
 \ No newline at end of file
@@ -21,8 +21,12 @@ logger = logging.getLogger(__name__)
 # -------------------------------------------------------------------------
 # Markdown to HTML renderer with support for LaTeX equations
-# Inline math: $x$
-# Block math: $$x$$ or \begin{equation}x\end{equation}
+# -------------------------------------------------------------------------
+
+
+# -------------------------------------------------------------------------
+# Block math:
+#   $$x$$ or \begin{equation}x\end{equation}
 # -------------------------------------------------------------------------
 class MathBlockGrammar(mistune.BlockGrammar):
     block_math = re.compile(r'^\$\$(.*?)\$\$', re.DOTALL)
@@ -47,6 +51,7 @@ class MathBlockLexer(mistune.BlockLexer):
         })
     def parse_latex_environment(self, m):
+        r'''Parse an environment \begin{name}text\end{name}'''
         self.tokens.append({
             'type': 'latex_environment',
             'name': m.group(1),
@@ -54,6 +59,9 @@ class MathBlockLexer(mistune.BlockLexer):
         })
+# -------------------------------------------------------------------------
+# Inline math: $x$
+# -------------------------------------------------------------------------
 class MathInlineGrammar(mistune.InlineGrammar):
     math = re.compile(r'^\$(.+?)\$', re.DOTALL)
     block_math = re.compile(r'^\$\$(.+?)\$\$', re.DOTALL)
@@ -108,18 +116,19 @@ class HighlightRenderer(mistune.Renderer):
     def image(self, src, title, alt):
         alt = mistune.escape(alt, quote=True)
         title = mistune.escape(title or '', quote=True)
-        return f'<img src="/file/{src}" class="img-fluid mx-auto d-block" ' \
+        return f'<img src="/file/{src}" ' \
                f'alt="{alt}" title="{title}">'
+                # class="img-fluid mx-auto d-block"
     # Pass math through unaltered - mathjax does the rendering in the browser
     def block_math(self, text):
-        return fr'$$ {text} $$'
+        return fr'\[ {text} \]'
     def latex_environment(self, name, text):
         return fr'\begin{{{name}}} {text} \end{{{name}}}'
     def inline_math(self, text):
-        return fr'$$$ {text} $$$'
+        return fr'\( {text} \)'
 # hard_wrap=True to insert <br> on newline
1		1
2	# BUGS	2	# BUGS
3		3
		4	+- não suporta definition lists em markdown
4	- double click submits twice.	5	- double click submits twice.
5	- nao esta a seguir o max_tries definido no ficheiro de dependencias.	6	- nao esta a seguir o max_tries definido no ficheiro de dependencias.
6	- obter rankings por curso GET course=course_id	7	- obter rankings por curso GET course=course_id
	@@ -335,7 +335,7 @@ class LearnApp(object):		@@ -335,7 +335,7 @@ class LearnApp(object):
335	default_shuffle_questions: bool = config.get('shuffle_questions', True)	335	default_shuffle_questions: bool = config.get('shuffle_questions', True)
336	default_choose: int = config.get('choose', 9999)	336	default_choose: int = config.get('choose', 9999)
337	default_forgetting_factor: float = config.get('forgetting_factor', 1.0)	337	default_forgetting_factor: float = config.get('forgetting_factor', 1.0)
338	- default_maxtries: int = config.get('max_tries', 3)	338	+ default_maxtries: int = config.get('max_tries', 1)
339	default_append_wrong: bool = config.get('append_wrong', True)	339	default_append_wrong: bool = config.get('append_wrong', True)
340	default_min_level: float = config.get('min_level', 0.01) # to unlock	340	default_min_level: float = config.get('min_level', 0.01) # to unlock
341		341
1	{% autoescape %}	1	{% autoescape %}
2		2
3	{% if solution %}	3	{% if solution %}
4	-<div class="card">	4	+<div class="card mt-3">
5	<div class="card-body">	5	<div class="card-body">
6	{{ md(solution) }}	6	{{ md(solution) }}
7	</div>	7	</div>