Commit 8dbbfdacdff6f4965f567a4929eeac86076a8b16

Authored by Miguel Barão
1 parent 547f0148
Exists in master and in 1 other branch dev

- update to bootstrap 5.1 and general UI redesign

- update and fix animateCSS
- fixed error in sqlalchemy on finished topic
- version bump to 2021.08.dev1
aprendizations/__init__.py
@@ -30,7 +30,7 @@ are progressively uncovered as the students progress. @@ -30,7 +30,7 @@ are progressively uncovered as the students progress.
30 ''' 30 '''
31 31
32 APP_NAME = 'aprendizations' 32 APP_NAME = 'aprendizations'
33 -APP_VERSION = '2021.07.dev1' 33 +APP_VERSION = '2021.08.dev1'
34 APP_DESCRIPTION = __doc__ 34 APP_DESCRIPTION = __doc__
35 35
36 __author__ = 'Miguel Barão' 36 __author__ = 'Miguel Barão'
aprendizations/learnapp.py
@@ -288,10 +288,7 @@ class LearnApp(): @@ -288,10 +288,7 @@ class LearnApp():
288 logger.info('User "%s" finished "%s" (level=%.2f)', 288 logger.info('User "%s" finished "%s" (level=%.2f)',
289 uid, topic_id, level) 289 uid, topic_id, level)
290 290
291 - query = select(StudentTopic).where(  
292 - StudentTopic.student_id == uid and  
293 - StudentTopic.topic_id == topic_id  
294 - ) 291 + query = select(StudentTopic).where(StudentTopic.student_id == uid).where(StudentTopic.topic_id == topic_id)
295 with Session(self._engine, future=True) as session: 292 with Session(self._engine, future=True) as session:
296 student_topic = session.execute(query).scalar_one_or_none() 293 student_topic = session.execute(query).scalar_one_or_none()
297 294
aprendizations/static/js/topic.js
1 $.fn.extend({ 1 $.fn.extend({
2 animateCSS: function (animation, run_on_end) { 2 animateCSS: function (animation, run_on_end) {
3 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 3 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
4 - this.addClass('animated ' + animation).one(animationEnd, function() {  
5 - $(this).removeClass('animated ' + animation); 4 + this.addClass('animate__animated ' + animation).one(animationEnd, function() {
  5 + $(this).removeClass('animate__animated ' + animation);
6 if (run_on_end !== undefined) { 6 if (run_on_end !== undefined) {
7 run_on_end(); 7 run_on_end();
8 } 8 }
@@ -46,7 +46,7 @@ function updateQuestion(response) { @@ -46,7 +46,7 @@ function updateQuestion(response) {
46 break; 46 break;
47 case "finished_topic": 47 case "finished_topic":
48 $('#submit, #comments, #solution').remove(); 48 $('#submit, #comments, #solution').remove();
49 - $("#content").html(params["question"]).animateCSS('tada'); 49 + $("#content").html(params["question"]).animateCSS('animate__tada');
50 $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100); 50 $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
51 setTimeout(function(){window.location.replace('/course/');}, 2000); 51 setTimeout(function(){window.location.replace('/course/');}, 2000);
52 break; 52 break;
@@ -57,10 +57,10 @@ function new_question(type, question, tries, progress) { @@ -57,10 +57,10 @@ function new_question(type, question, tries, progress) {
57 window.scrollTo(0, 0); 57 window.scrollTo(0, 0);
58 58
59 $("#submit").hide(); 59 $("#submit").hide();
60 - $("#question_div").animateCSS('fadeOut', function() { 60 + $("#question_div").animateCSS('animate__fadeOut', function() {
61 $("#question_div").html(question); 61 $("#question_div").html(question);
62 MathJax.typeset(); 62 MathJax.typeset();
63 - $("#question_div").animateCSS('fadeIn', function() { 63 + $("#question_div").animateCSS('animate__fadeIn', function() {
64 showTriesLeft(tries); 64 showTriesLeft(tries);
65 $("#submit").removeClass("disabled").show(); 65 $("#submit").removeClass("disabled").show();
66 66
@@ -120,7 +120,7 @@ function getFeedback(response) { @@ -120,7 +120,7 @@ function getFeedback(response) {
120 $('#comments').html(params['comments']).show(); 120 $('#comments').html(params['comments']).show();
121 $('#solution_right').html(params['solution']); 121 $('#solution_right').html(params['solution']);
122 MathJax.typeset(); 122 MathJax.typeset();
123 - $('#right').show().animateCSS('zoomIn', function(){ 123 + $('#right').show().animateCSS('animate__zoomIn', function(){
124 $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion); 124 $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
125 }); 125 });
126 break; 126 break;
@@ -129,7 +129,10 @@ function getFeedback(response) { @@ -129,7 +129,10 @@ function getFeedback(response) {
129 $('#comments').html(params['comments']).show(); 129 $('#comments').html(params['comments']).show();
130 MathJax.typeset(); 130 MathJax.typeset();
131 $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]); 131 $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
132 - $('#question_div').animateCSS('shake', function() { 132 +
  133 +
  134 +
  135 + $('#question_div').animateCSS('animate__shakeX', function() {
133 showTriesLeft(params["tries"]); 136 showTriesLeft(params["tries"]);
134 $("fieldset").prop("disabled", false); 137 $("fieldset").prop("disabled", false);
135 $("#submit").html("Responder").removeClass("disabled"); 138 $("#submit").html("Responder").removeClass("disabled");
@@ -142,9 +145,9 @@ function getFeedback(response) { @@ -142,9 +145,9 @@ function getFeedback(response) {
142 $('#comments').html(params['comments']).show(); 145 $('#comments').html(params['comments']).show();
143 $('#solution_wrong').html(params['solution']); 146 $('#solution_wrong').html(params['solution']);
144 MathJax.typeset(); 147 MathJax.typeset();
145 - $('#question_div').animateCSS('shake', function() { 148 + $('#question_div').animateCSS('animate__shakeX', function() {
146 showTriesLeft(params["tries"]); 149 showTriesLeft(params["tries"]);
147 - $('#wrong').show().animateCSS('zoomIn', function() { 150 + $('#wrong').show().animateCSS('animate__zoomIn', function() {
148 $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion); 151 $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
149 }); 152 });
150 }); 153 });
aprendizations/static/signin.css 0 → 100644
@@ -0,0 +1,39 @@ @@ -0,0 +1,39 @@
  1 +html,
  2 +body {
  3 + height: 100%;
  4 +}
  5 +
  6 +body {
  7 + display: flex;
  8 + align-items: center;
  9 + padding-top: 40px;
  10 + padding-bottom: 40px;
  11 + background-color: #f5f5f5;
  12 +}
  13 +
  14 +.form-signin {
  15 + width: 100%;
  16 + max-width: 330px;
  17 + padding: 15px;
  18 + margin: auto;
  19 +}
  20 +
  21 +.form-signin .checkbox {
  22 + font-weight: 400;
  23 +}
  24 +
  25 +.form-signin .form-floating:focus-within {
  26 + z-index: 2;
  27 +}
  28 +
  29 +.form-signin input[type="email"] {
  30 + margin-bottom: -1px;
  31 + border-bottom-right-radius: 0;
  32 + border-bottom-left-radius: 0;
  33 +}
  34 +
  35 +.form-signin input[type="password"] {
  36 + margin-bottom: 10px;
  37 + border-top-left-radius: 0;
  38 + border-top-right-radius: 0;
  39 +}
aprendizations/templates/courses.html
1 {% autoescape %} 1 {% autoescape %}
2 -<!doctype html>  
3 -<html lang="pt-PT">  
4 2
5 -<head>  
6 - <title>{{appname}}</title>  
7 - <link rel="icon" href="favicon.ico">  
8 - <meta charset="utf-8">  
9 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 3 +<!DOCTYPE html>
  4 +<html lang="pt-PT">
  5 + <head>
  6 + <meta charset="utf-8" />
  7 + <meta name="viewport" content="width=device-width, initial-scale=1">
10 <meta name="author" content="Miguel Barão"> 8 <meta name="author" content="Miguel Barão">
  9 + <link rel="icon" href="favicon.ico">
11 <!-- Styles --> 10 <!-- Styles -->
12 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/bootstrap.min.css')}}">  
13 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/mdb.min.css')}}"> 11 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
14 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}"> 12 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
15 <link rel="stylesheet" href="{{static_url('css/sticky-footer-navbar.css')}}"> 13 <link rel="stylesheet" href="{{static_url('css/sticky-footer-navbar.css')}}">
16 <!-- Scripts --> 14 <!-- Scripts -->
17 - <script defer src="{{static_url('mdbootstrap/js/jquery.min.js')}}"></script>  
18 - <script defer src="{{static_url('mdbootstrap/js/popper.min.js')}}"></script>  
19 - <script defer src="{{static_url('mdbootstrap/js/bootstrap.min.js')}}"></script>  
20 - <script defer src="{{static_url('mdbootstrap/js/mdb.min.js')}}"></script> 15 + <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  16 + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
21 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script> 17 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
22 <script defer src="{{static_url('js/maintopics.js')}}"></script> 18 <script defer src="{{static_url('js/maintopics.js')}}"></script>
23 -</head>  
24 19
25 -<body>  
26 - <!-- ===== navbar ==================================================== -->  
27 - <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary"> 20 + <title>{{appname}}</title>
  21 + </head>
  22 +
  23 + <body>
  24 + <!-- ===== navbar ======================================================== -->
  25 + <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top shadow">
  26 + <div class="container-fluid">
28 <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora"> 27 <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">
29 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
30 - <span class="navbar-toggler-icon"></span> 28 + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  29 + <span class="navbar-toggler-icon"></span>
31 </button> 30 </button>
32 - <div class="collapse navbar-collapse" id="navbarText">  
33 - <div class="navbar-nav mr-auto">  
34 - <a class="nav-item nav-link active" href="#">Cursos <span class="sr-only">(actual)</span></a>  
35 - <a class="nav-item nav-link disabled" href="#">Tópicos</a>  
36 - <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Classificação</a>  
37 - </div>  
38 - <ul class="navbar-nav">  
39 - <li class="nav-item dropdown">  
40 - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
41 - <i class="fas fa-user-graduate" aria-hidden="true"></i>  
42 - <span id="name">{{ escape(name) }}</span>  
43 - <span class="caret"></span>  
44 - </a>  
45 - <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">  
46 - <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>  
47 - <div class="dropdown-divider"></div>  
48 - <a class="dropdown-item" href="/logout">Sair</a>  
49 - </div>  
50 - </li>  
51 - </ul> 31 +
  32 + <div class="collapse navbar-collapse" id="navbarNavText">
  33 + <ul class="navbar-nav">
  34 + <li class="nav-item"><a class="nav-link active" aria-current="page" href="/courses">Cursos</a></li>
  35 + <!-- <li class="nav-item"><a class="nav-link disabled" href="#">Tópicos</a></li> -->
  36 + <!-- <li class="nav-item"><a class="nav-link disabled" href="#">Classificação</a></li> -->
  37 + </ul>
  38 + <ul class="navbar-nav ms-auto">
  39 + <li class="nav-item dropdown">
  40 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  41 + <i class="fas fa-user-graduate" aria-hidden="true"></i>
  42 + &nbsp;
  43 + <span id="name">{{ escape(name) }}</span>
  44 + <span class="caret"></span>
  45 + </a>
  46 + <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
  47 + <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#password_modal">Mudar Password</a></li>
  48 + <li><hr class="dropdown-divider"></li>
  49 + <li><a class="dropdown-item" href="/logout">Sair</a></li>
  50 + </ul>
  51 + </li>
  52 + </ul>
52 </div> 53 </div>
  54 + </div>
53 </nav> 55 </nav>
54 - <!-- ===== page ====================================================== -->  
55 - <div class="container">  
56 - <div id="notifications"></div>  
57 - <div class="row justify-content-left">  
58 - {% for k,v in courses.items() %}  
59 - <div class="card-deck col-md-4">  
60 - <a href="/course/{{k}}" class="card mb-3">  
61 - <div class="card-body">  
62 - <h6 class="card-title">{{ v['title'] }}</h6>  
63 - <p class="card-text">{{ v.get('description', '') }}</p>  
64 - </div>  
65 - </a> 56 + <!-- === Change Password Modal =========================================== -->
  57 + <div id="password_modal" class="modal fade" tabindex="-1" aria-labelledby="password_modal" aria-hidden="true">
  58 + <div class="modal-dialog">
  59 + <div class="modal-content">
  60 + <!-- header -->
  61 + <div class="modal-header">
  62 + <h5 class="modal-title">Alterar Password</h5>
  63 + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  64 + </div>
  65 + <!-- body -->
  66 + <div class="modal-body">
  67 + <div class="control-group">
  68 + <label for="new_password" class="control-label">Introduza a nova password:</label>
  69 + <div class="controls">
  70 + <input type="password" id="new_password" name="new_password" autocomplete="new-password">
  71 + </div>
66 </div> 72 </div>
67 - {% end %} <!-- for --> 73 + </div>
  74 + <!-- footer -->
  75 + <div class="modal-footer">
  76 + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  77 + <button id="change_password" type="button" class="btn btn-primary" data-bs-dismiss="modal">Alterar</button>
  78 + </div>
  79 + <!-- end -->
68 </div> 80 </div>
  81 + </div>
69 </div> 82 </div>
70 83
71 - <footer class="footer">  
72 - <div class="container">  
73 - <small class="text-muted">  
74 - <a href="mailto:mjsb@uevora.pt?subject=Encontrei um erro&body=Descreva detalhadamente a situação na qual encontrou o erro. Indique qual o curso, tópico e pergunta. No caso de problemas técnicos indique também qual o seu sistema operativo e browser.">Reportar erros</a>  
75 - &nbsp;/&nbsp;  
76 - <a href="mailto:mjsb@uevora.pt?subject=Sugestões">Enviar sugestões</a>  
77 - </small>  
78 - </div>  
79 - </footer> 84 + <!-- ===== page ========================================================== -->
  85 + <div class="container">
  86 + <div id="notifications" style="position:fixed; z-index: 999;"></div>
80 87
81 - <!-- === Change Password Modal =========================================== -->  
82 - <div id="password_modal" class="modal fade" tabindex="-1" role="dialog">  
83 - <div class="modal-dialog" role="document">  
84 - <div class="modal-content">  
85 - <!-- header -->  
86 - <div class="modal-header">  
87 - <h5 class="modal-title">Alterar Password</h5> 88 + <div class="row row-cols-1 row-cols-md-3 g-4">
  89 + {% for k,v in courses.items() %}
  90 + <div class="col">
  91 + <div class="card bg-light shadow">
  92 + <!-- <div class="row g-0"> -->
  93 + <!-- <div class="col-md-1 bg-primary"> -->
  94 + <!-- <img src="..." class="img-fluid rounded-start" alt="..."> -->
  95 + <!-- </div> -->
  96 + <!-- <div class="col-md-11"> -->
  97 + <div class="card-body">
  98 + <h5>{{ v['title'] }}</h5>
  99 + <p class="card-text">{{ v.get('description', '') }}</p>
  100 + <a href="/course/{{k}}" class="card-link">Começar</a>
88 </div> 101 </div>
89 - <!-- body -->  
90 - <div class="modal-body">  
91 - <div class="control-group">  
92 - <label for="new_password" class="control-label">Introduza a nova password:</label>  
93 - <div class="controls">  
94 - <input type="password" id="new_password" name="new_password" autocomplete="new-password">  
95 - </div>  
96 - </div>  
97 - </div>  
98 - <!-- footer -->  
99 - <div class="modal-footer">  
100 - <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>  
101 - <button id="change_password" type="button" class="btn btn-danger" data-dismiss="modal">Alterar</button>  
102 - </div>  
103 - </div><!-- /.modal-content -->  
104 - </div><!-- /.modal-dialog -->  
105 - </div><!-- /.modal -->  
106 -</body> 102 + <!-- </div> -->
  103 + <!-- </div> -->
  104 + </div>
  105 + </div>
  106 + {% end %}
  107 + </div>
  108 + </div>
107 109
  110 + <!-- <footer class="footer"> -->
  111 + <!-- <div class="container"> -->
  112 + <!-- <small class="text-muted"> -->
  113 + <!-- <a href="mailto:mjsb@uevora.pt?subject=Encontrei um erro&body=Descreva detalhadamente a situação na qual encontrou o erro. Indique qual o curso, tópico e pergunta. No caso de problemas técnicos indique também qual o seu sistema operativo e browser.">Reportar erros</a> -->
  114 + <!-- &nbsp;/&nbsp; -->
  115 + <!-- <a href="mailto:mjsb@uevora.pt?subject=Sugestões">Enviar sugestões</a> -->
  116 + <!-- </small> -->
  117 + <!-- </div> -->
  118 + <!-- </footer> -->
  119 + </body>
108 </html> 120 </html>
aprendizations/templates/login.html
1 -<!doctype html>  
2 -<html lang="pt">  
3 -<head>  
4 - <title>{{appname}}</title>  
5 - <link rel="icon" href="/static/favicon.ico">  
6 -  
7 - <meta charset="utf-8">  
8 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
9 - <meta name="author" content="Miguel Barão">  
10 -  
11 - <!-- Styles -->  
12 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/bootstrap.min.css')}}">  
13 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/mdb.min.css')}}">  
14 -  
15 - <!-- Scripts -->  
16 - <script defer src="{{static_url('mdbootstrap/js/jquery.min.js')}}"></script>  
17 - <script defer src="{{static_url('mdbootstrap/js/popper.min.js')}}"></script>  
18 - <script defer src="{{static_url('mdbootstrap/js/bootstrap.min.js')}}"></script>  
19 - <script defer src="{{static_url('mdbootstrap/js/mdb.min.js')}}"></script>  
20 - <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>  
21 -  
22 -</head>  
23 -<!-- =================================================================== -->  
24 -<body>  
25 - <div class="container-fluid">  
26 - <div class="card bg-light border-dark mt-3">  
27 - <div class="card-body">  
28 - <div class="row">  
29 -  
30 - <div class="col-sm-9">  
31 - <img src="{{static_url('logo_horizontal_login.png') }}" class="img-responsive mb-3" width="50%" alt="Universidade de Évora">  
32 - </div>  
33 -  
34 - <div class="col-sm-3">  
35 -  
36 - <form method="post" action="/login" class="form-signin">  
37 - {% module xsrf_form_html() %}  
38 - <div class="form-group">  
39 - <input type="text" name="uid" class="form-control mb-3" placeholder="Número de aluno" required autofocus>  
40 - <input type="password" name="pw" class="form-control mb-3" placeholder="Senha" required>  
41 - <p class="text-danger"> {{ error }} </p>  
42 - <button class="btn btn-primary" type="submit">  
43 - Entrar  
44 - </button>  
45 - </div>  
46 - </form>  
47 - </div>  
48 -  
49 - </div> <!-- row -->  
50 - </div> <!-- card-body -->  
51 - </div> <!-- card -->  
52 - </div> <!-- container -->  
53 -</body> 1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 + <head>
  4 + <meta charset="utf-8" />
  5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 + <meta name="author" content="Miguel Barão">
  7 +
  8 + <!-- <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/"> -->
  9 +
  10 + <!-- Bootstrap core CSS -->
  11 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  12 + <!-- <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet"> -->
  13 +
  14 + <style>
  15 + .bd-placeholder-img {
  16 + font-size: 1.125rem;
  17 + text-anchor: middle;
  18 + -webkit-user-select: none;
  19 + -moz-user-select: none;
  20 + user-select: none;
  21 + }
  22 +
  23 + @media (min-width: 768px) {
  24 + .bd-placeholder-img-lg {
  25 + font-size: 3.5rem;
  26 + }
  27 + }
  28 + </style>
  29 +
  30 + <link href="{{static_url('signin.css')}}" rel="stylesheet">
  31 +
  32 + <title>{{appname}}</title>
  33 + </head>
  34 + <body class="text-center">
  35 +
  36 + <main class="form-signin">
  37 + <form method="post" action="/login" class="form-signin">
  38 + {% module xsrf_form_html() %}
  39 + <img class="mb-4" src="{{ static_url('logo_horizontal_login.png') }}" alt="Universidade de Évora" height="80">
  40 + <!-- <h1 class="h3 mb-3 fw-normal">Please sign in</h1> -->
  41 +
  42 + <div class="form-floating">
  43 + <input type="text" class="form-control" id="uid" name="uid" placeholder="99999" required autofocus>
  44 + <label for="uid">Número de aluno</label>
  45 + </div>
  46 + <div class="form-floating">
  47 + <input type="password" class="form-control" id="pw" name="pw" placeholder="Senha" required>
  48 + <label for="pw">Senha</label>
  49 + </div>
  50 +
  51 + <p class="text-danger"> {{ error }} </p>
  52 +
  53 + <button class="w-100 btn btn-lg btn-primary" type="submit">Entrar</button>
  54 + <!-- <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p> -->
  55 + </form>
  56 + </main>
  57 +
  58 + </body>
54 </html> 59 </html>
aprendizations/templates/maintopics-table.html
1 {% autoescape %} 1 {% autoescape %}
2 2
3 -<!doctype html> 3 +<!DOCTYPE html>
4 <html lang="pt"> 4 <html lang="pt">
5 <head> 5 <head>
6 - <title>{{appname}}</title>  
7 - <link rel="icon" href="/static/favicon.ico">  
8 -  
9 - <meta charset="utf-8">  
10 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 + <meta charset="utf-8" />
  7 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 <meta name="author" content="Miguel Barão"> 8 <meta name="author" content="Miguel Barão">
  9 + <link rel="icon" href="/static/favicon.ico">
12 10
13 <!-- Styles --> 11 <!-- Styles -->
14 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/bootstrap.min.css')}}">  
15 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/mdb.min.css')}}"> 12 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
16 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}"> 13 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
17 14
18 <!-- Scripts --> 15 <!-- Scripts -->
19 - <script defer src="{{static_url('mdbootstrap/js/jquery.min.js')}}"></script>  
20 - <script defer src="{{static_url('mdbootstrap/js/popper.min.js')}}"></script>  
21 - <script defer src="{{static_url('mdbootstrap/js/bootstrap.min.js')}}"></script>  
22 - <script defer src="{{static_url('mdbootstrap/js/mdb.min.js')}}"></script> 16 + <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  17 + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  18 +
23 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script> 19 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
24 <script defer src="{{static_url('js/maintopics.js')}}"></script> 20 <script defer src="{{static_url('js/maintopics.js')}}"></script>
25 21
  22 + <title>{{appname}}</title>
26 </head> 23 </head>
27 <!-- ===================================================================== --> 24 <!-- ===================================================================== -->
28 <body> 25 <body>
29 -<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">  
30 - <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">  
31 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
32 - <span class="navbar-toggler-icon"></span>  
33 - </button>  
34 -  
35 - <div class="collapse navbar-collapse" id="navbarText">  
36 - <div class="navbar-nav mr-auto">  
37 - <a class="nav-item nav-link" href="/courses">Cursos</a>  
38 - <a class="nav-item nav-link active" href="#">Tópicos <span class="sr-only">(actual)</span></a>  
39 - <a class="nav-item nav-link" href="/rankings?course={{course_id}}">Classificação</a> 26 +<nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top shadow">
  27 + <div class="container-fluid">
  28 + <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">
  29 + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  30 + <span class="navbar-toggler-icon"></span>
  31 + </button>
  32 +
  33 + <div class="collapse navbar-collapse" id="navbarNavText">
  34 + <ul class="navbar-nav">
  35 + <li class="nav-item"><a class="nav-link" href="/courses">Cursos</a></li>
  36 + <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Tópicos</a></li>
  37 + <li class="nav-item"><a class="nav-link" href="/rankings?course={{course_id}}">Classificação</a></li>
  38 + </ul>
  39 + <ul class="navbar-nav ms-auto">
  40 + <li class="nav-item dropdown">
  41 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  42 + <i class="fas fa-user-graduate" aria-hidden="true"></i>
  43 + &nbsp;
  44 + <span id="name">{{ escape(name) }}</span>
  45 + <span class="caret"></span>
  46 + </a>
  47 + <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
  48 + <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#password_modal">Mudar Password</a></li>
  49 + <li><hr class="dropdown-divider"></li>
  50 + <li><a class="dropdown-item" href="/logout">Sair</a></li>
  51 + </ul>
  52 + </li>
  53 + </ul>
40 </div> 54 </div>
  55 + </div>
  56 +</nav>
41 57
42 - <ul class="navbar-nav">  
43 - <li class="nav-item dropdown">  
44 - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
45 - <i class="fas fa-user-graduate" aria-hidden="true"></i>  
46 - <span id="name">{{ escape(name) }}</span>  
47 - <span class="caret"></span>  
48 - </a>  
49 - <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">  
50 - <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>  
51 - <div class="dropdown-divider"></div>  
52 - <a class="dropdown-item" href="/logout">Sair</a> 58 +<!-- === Change Password Modal =========================================== -->
  59 +<div id="password_modal" class="modal fade" tabindex="-1" aria-labelledby="password_modal" aria-hidden="true">
  60 + <div class="modal-dialog">
  61 + <div class="modal-content">
  62 + <!-- header -->
  63 + <div class="modal-header">
  64 + <h5 class="modal-title">Alterar Password</h5>
  65 + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  66 + </div>
  67 + <!-- body -->
  68 + <div class="modal-body">
  69 + <div class="control-group">
  70 + <label for="new_password" class="control-label">Introduza a nova password:</label>
  71 + <div class="controls">
  72 + <input type="password" id="new_password" name="new_password" autocomplete="new-password">
  73 + </div>
53 </div> 74 </div>
54 - </li>  
55 - </ul> 75 + </div>
  76 + <!-- footer -->
  77 + <div class="modal-footer">
  78 + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  79 + <button id="change_password" type="button" class="btn btn-primary" data-bs-dismiss="modal">Alterar</button>
  80 + </div>
  81 + <!-- end -->
  82 + </div>
56 </div> 83 </div>
57 -</nav> 84 +</div>
  85 +
58 <!-- ===================================================================== --> 86 <!-- ===================================================================== -->
59 <div class="container"> 87 <div class="container">
60 88
61 <div id="notifications"></div> 89 <div id="notifications"></div>
62 90
63 - <div class="alert alert-warning alert-dismissible fade show" role="warning">  
64 - <h5 class="my-3">Legenda:</h5>  
65 - <dl class="row ml-3">  
66 - <dt class="my-0 col-sm-1"><i class="fas fa-book"></i></dt>  
67 - <dd class="my-0 col-sm-11">Material de estudo</dd>  
68 - <dt class="my-0 col-sm-1"><i class="fas fa-pencil-alt"></i></dt>  
69 - <dd class="my-0 col-sm-11">Exercícios</dd>  
70 - <dt class="my-0 col-sm-1"><i class="fas fa-puzzle-piece"></i></dt>  
71 - <dd class="my-0 col-sm-11">Não faz parte deste curso mas é necessário saber</dd>  
72 - <dt class="my-0 col-sm-1"><i class="fas fa-flag"></i></dt>  
73 - <dd class="my-0 col-sm-11">Milestone (terminou um certo conjunto de tópicos)</dd>  
74 - </dl>  
75 - <button type="button" class="close" data-dismiss="alert" aria-label="Close">  
76 - <span aria-hidden="true">&times;</span>  
77 - </button>  
78 - </div>  
79 -  
80 - <h1 class="display-5 p-4">{{ course['title'] }}</h1> 91 + <h1 class="display-6">{{ course['title'] }}</h1>
81 92
82 <table class="table table-hover"> 93 <table class="table table-hover">
83 - <thead class=""> 94 + <thead>
84 <tr> 95 <tr>
85 - <th>Tópico</th>  
86 - <th class="text-center">Nível</th> 96 + <th scope="col"></th>
  97 + <th scope="col">Tópico</th>
  98 + <th scope="col" class="text-center">Estado</th>
87 </tr> 99 </tr>
88 </thead> 100 </thead>
89 <tbody> 101 <tbody>
90 {% for t in state %} 102 {% for t in state %}
91 <!-- ------------------------------------------------------------- --> 103 <!-- ------------------------------------------------------------- -->
92 {% if t['level'] is None %} 104 {% if t['level'] is None %}
93 - <tr class="table-secondary"> 105 + <tr>
  106 + <th scope="row" class="text-muted text-center">
  107 + {% if t['type']=='chapter' %}
  108 + <i class="fas fa-flag"></i>
  109 + {% elif t['type']=='learn' %}
  110 + <i class="fas fa-book"></i>&nbsp;
  111 + {% else %}
  112 + <i class="fas fa-pencil-alt"></i>&nbsp;
  113 + {% end %}
  114 + </th>
94 <td> 115 <td>
95 <div class="text-muted"> 116 <div class="text-muted">
96 {% if t['ref'] not in course['goals'] %} 117 {% if t['ref'] not in course['goals'] %}
97 <i class="fas fa-puzzle-piece"></i> 118 <i class="fas fa-puzzle-piece"></i>
98 {% end %} 119 {% end %}
99 120
100 - {% if t['type']=='chapter' %}  
101 - <i class="fas fa-flag"></i>  
102 - {% elif t['type']=='learn' %}  
103 - <i class="fas fa-book"></i>&nbsp;  
104 - {% else %}  
105 - <i class="fas fa-pencil-alt"></i>&nbsp;  
106 - {% end %}  
107 121
108 {{ t['name'] }} 122 {{ t['name'] }}
109 </div> 123 </div>
@@ -116,11 +130,7 @@ @@ -116,11 +130,7 @@
116 {% else %} 130 {% else %}
117 131
118 <tr class="clickable-row " data-href="/topic/{{t['ref']}}"> 132 <tr class="clickable-row " data-href="/topic/{{t['ref']}}">
119 - <td class="text-primary">  
120 - {% if t['ref'] not in course['goals'] %}  
121 - <i class="fas fa-puzzle-piece"></i>  
122 - {% end %}  
123 - 133 + <th scope="row" class="text-primary text-center">
124 {% if t['type']=='chapter' %} 134 {% if t['type']=='chapter' %}
125 <i class="fas fa-flag-checkered"></i>&nbsp; 135 <i class="fas fa-flag-checkered"></i>&nbsp;
126 {% elif t['type']=='learn' %} 136 {% elif t['type']=='learn' %}
@@ -128,6 +138,11 @@ @@ -128,6 +138,11 @@
128 {% else %} 138 {% else %}
129 <i class="fas fa-pencil-alt"></i>&nbsp; 139 <i class="fas fa-pencil-alt"></i>&nbsp;
130 {% end %} 140 {% end %}
  141 + </th>
  142 + <td class="text-primary">
  143 + {% if t['ref'] not in course['goals'] %}
  144 + <i class="fas fa-puzzle-piece"></i>
  145 + {% end %}
131 146
132 {{ t['name'] }} 147 {{ t['name'] }}
133 </td> 148 </td>
@@ -150,34 +165,5 @@ @@ -150,34 +165,5 @@
150 </tbody> 165 </tbody>
151 </table> 166 </table>
152 </div> 167 </div>
153 -  
154 -  
155 -<!-- === Change Password Modal =========================================== -->  
156 -<div id="password_modal" class="modal fade" tabindex="-1" role="dialog">  
157 - <div class="modal-dialog" role="document">  
158 - <div class="modal-content">  
159 -<!-- header -->  
160 - <div class="modal-header">  
161 - <h5 class="modal-title">Alterar Password</h5>  
162 - </div>  
163 -<!-- body -->  
164 - <div class="modal-body">  
165 - <div class="control-group">  
166 - <label for="new_password" class="control-label">Introduza a nova password:</label>  
167 - <div class="controls">  
168 - <input type="password" id="new_password" name="new_password" autocomplete="new-password">  
169 - </div>  
170 - </div>  
171 - </div>  
172 -<!-- footer -->  
173 - <div class="modal-footer">  
174 - <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>  
175 - <button id="change_password" type="button" class="btn btn-danger" data-dismiss="modal">Alterar</button>  
176 - </div>  
177 -  
178 - </div><!-- /.modal-content -->  
179 - </div><!-- /.modal-dialog -->  
180 -</div><!-- /.modal -->  
181 -  
182 </body> 168 </body>
183 </html> 169 </html>
aprendizations/templates/question-checkbox.html
@@ -3,20 +3,14 @@ @@ -3,20 +3,14 @@
3 3
4 {% block answer %} 4 {% block answer %}
5 <fieldset data-role="controlgroup"> 5 <fieldset data-role="controlgroup">
6 - <div class="list-group">  
7 - {% for n,opt in enumerate(question['options']) %}  
8 - <a class="list-group-item list-group-item-action">  
9 - <div class="custom-control custom-checkbox">  
10 - <input type="checkbox" class="custom-control-input"  
11 - id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">  
12 - <label for="{{ n }}" class="custom-control-label">  
13 - {{ md(opt, strip_p_tag=True) }}  
14 - </label>  
15 - </div>  
16 - </a>  
17 - {% end %}  
18 - </div> 6 + <div class="list-group">
  7 + {% for n,opt in enumerate(question['options']) %}
  8 + <label class="list-group-item list-group-item-action">
  9 + <input type="checkbox" class="form-check-input" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
  10 + {{ md(opt, strip_p_tag=True) }}
  11 + </label>
  12 + {% end %}
  13 + </div>
19 </fieldset> 14 </fieldset>
20 <input type="hidden" name="qid" value="{{ question['qid'] }}"> 15 <input type="hidden" name="qid" value="{{ question['qid'] }}">
21 -  
22 -{% end %}  
23 \ No newline at end of file 16 \ No newline at end of file
  17 +{% end %}
aprendizations/templates/question-information.html
1 {% autoescape %} 1 {% autoescape %}
2 2
3 -<h2 class="page-header">{{ question['title'] }}</h4> 3 +<h1 class="display-6">{{ question['title'] }}</h1>
4 4
5 <div id="text"> 5 <div id="text">
6 {{ md(question['text']) }} 6 {{ md(question['text']) }}
aprendizations/templates/question-radio.html
@@ -3,19 +3,14 @@ @@ -3,19 +3,14 @@
3 3
4 {% block answer %} 4 {% block answer %}
5 <fieldset data-role="controlgroup"> 5 <fieldset data-role="controlgroup">
6 - <div class="list-group">  
7 - {% for n,opt in enumerate(question['options']) %}  
8 - <a class="list-group-item list-group-item-action">  
9 - <div class="custom-control custom-radio">  
10 - <input type="radio" class="custom-control-input"  
11 - id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">  
12 - <label for="{{ n }}" class="custom-control-label">  
13 - {{ md(opt, strip_p_tag=True) }}  
14 - </label>  
15 - </div>  
16 - </a>  
17 - {% end %}  
18 - </div> 6 + <div class="list-group">
  7 + {% for n,opt in enumerate(question['options']) %}
  8 + <label class="list-group-item list-group-item-action">
  9 + <input type="radio" class="form-check-input" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
  10 + {{ md(opt, strip_p_tag=True) }}
  11 + </label>
  12 + {% end %}
  13 + </div>
19 </fieldset> 14 </fieldset>
20 <input type="hidden" name="qid" value="{{ question['qid'] }}"> 15 <input type="hidden" name="qid" value="{{ question['qid'] }}">
21 -{% end %}  
22 \ No newline at end of file 16 \ No newline at end of file
  17 +{% end %}
aprendizations/templates/question.html
1 {% autoescape %} 1 {% autoescape %}
2 2
3 -<h2 class="page-header">{{ md(question['title']) }}</h4> 3 +<h1 class="display-6">{{ md(question['title']) }}</h1>
4 4
5 <div id="text"> 5 <div id="text">
6 {{ md(question['text']) }} 6 {{ md(question['text']) }}
@@ -8,4 +8,4 @@ @@ -8,4 +8,4 @@
8 8
9 {% block answer %}{% end %} 9 {% block answer %}{% end %}
10 10
11 -<p class="text-right font-italic" id="tries"></p> 11 +<p class="text-end"><em id="tries"></em></p>
aprendizations/templates/rankings.html
1 {% autoescape %} 1 {% autoescape %}
2 2
3 -<!doctype html> 3 +<!DOCTYPE html>
4 <html lang="pt"> 4 <html lang="pt">
5 <head> 5 <head>
6 - <title>{{appname}}</title>  
7 - <link rel="icon" href="/static/favicon.ico">  
8 -  
9 - <meta charset="utf-8">  
10 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 + <meta charset="utf-8" />
  7 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 <meta name="author" content="Miguel Barão"> 8 <meta name="author" content="Miguel Barão">
12 -  
13 -<!-- Styles -->  
14 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/bootstrap.min.css')}}">  
15 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/mdb.min.css')}}"> 9 + <link rel="icon" href="/static/favicon.ico">
  10 + <!-- Styles -->
  11 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
16 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}"> 12 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
17 -  
18 -<!-- Scripts -->  
19 - <script defer src="{{static_url('mdbootstrap/js/jquery.min.js')}}"></script>  
20 - <script defer src="{{static_url('mdbootstrap/js/popper.min.js')}}"></script>  
21 - <script defer src="{{static_url('mdbootstrap/js/bootstrap.min.js')}}"></script>  
22 - <script defer src="{{static_url('mdbootstrap/js/mdb.min.js')}}"></script> 13 + <!-- Scripts -->
  14 + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
23 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script> 15 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
24 <script defer src="{{static_url('js/maintopics.js')}}"></script> 16 <script defer src="{{static_url('js/maintopics.js')}}"></script>
25 17
  18 + <title>{{appname}}</title>
26 </head> 19 </head>
27 <!-- ===================================================================== --> 20 <!-- ===================================================================== -->
28 <body> 21 <body>
29 -<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">  
30 - <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">  
31 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
32 - <span class="navbar-toggler-icon"></span>  
33 - </button> 22 +<nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
  23 + <div class="container-fluid">
  24 + <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">
  25 + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  26 + <span class="navbar-toggler-icon"></span>
  27 + </button>
34 28
35 - <div class="collapse navbar-collapse" id="navbarText">  
36 - <div class="navbar-nav mr-auto">  
37 - <a class="nav-item nav-link" href="/courses">Cursos <span class="sr-only">(actual)</span></a>  
38 - <a class="nav-item nav-link" href="/course/{{course_id}}">Tópicos</a>  
39 - <a class="nav-item nav-link active" href="#">Classificação</a> 29 + <div class="collapse navbar-collapse" id="navbarNavText">
  30 + <ul class="navbar-nav">
  31 + <li class="nav-item"><a class="nav-link" href="/courses">Cursos</a></li>
  32 + <li class="nav-item"><a class="nav-link" href="/course/{{course_id}}">Tópicos</a></li>
  33 + <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Classificação</a></li>
  34 + </ul>
  35 + <ul class="navbar-nav ms-auto">
  36 + <li class="nav-item dropdown">
  37 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  38 + <i class="fas fa-user-graduate" aria-hidden="true"></i>
  39 + &nbsp;
  40 + <span id="name">{{ escape(name) }}</span>
  41 + <span class="caret"></span>
  42 + </a>
  43 + <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
  44 + <li><a class="dropdown-item" href="/logout">Sair</a></li>
  45 + </ul>
  46 + </li>
  47 + </ul>
40 </div> 48 </div>
41 -  
42 - <ul class="navbar-nav">  
43 - <li class="nav-item dropdown">  
44 - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
45 - <i class="fas fa-user-graduate" aria-hidden="true"></i>  
46 - <span id="name">{{ escape(name) }}</span>  
47 - <span class="caret"></span>  
48 - </a>  
49 - <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">  
50 - <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>  
51 - <div class="dropdown-divider"></div>  
52 - <a class="dropdown-item" href="/logout">Sair</a>  
53 - </div>  
54 - </li>  
55 - </ul>  
56 </div> 49 </div>
57 </nav> 50 </nav>
  51 +
58 <!-- ===================================================================== --> 52 <!-- ===================================================================== -->
59 <div class="container"> 53 <div class="container">
60 -<h4>{{course_title}}</h4> 54 + <h1 class="display-6">{{ course_title }}</h1>
  55 +
61 <table class="table table-hover"> 56 <table class="table table-hover">
62 <col width="100"> 57 <col width="100">
63 <thead> 58 <thead>
64 <tr> 59 <tr>
65 - <th># Posição</th>  
66 - <th>Aluno</th>  
67 - <th>Progresso</th> 60 + <th scope="col" class="text-center">Posição</th>
  61 + <th scope="col">Aluno</th>
  62 + <th scope="col"></th>
  63 + <th scope="col">Progresso</th>
68 </tr> 64 </tr>
69 </thead> 65 </thead>
70 <tbody> 66 <tbody>
71 {% for i,r in enumerate(rankings) %} 67 {% for i,r in enumerate(rankings) %}
72 - <tr class="{{ 'table-warning' if r[0] == uid else '' }}">  
73 - <td class="text-center"> <!-- rank -->  
74 - <strong>  
75 - {{ '<i class="fas fa-crown fa-2x text-warning"></i>' if i==0 else i+1 }}  
76 - </strong>  
77 - </td>  
78 - <td> <!-- student name -->  
79 - {{ ' '.join(r[1].split()[n] for n in (0,-1)) }}  
80 - &nbsp;  
81 - {{ '<i class="far fa-thumbs-up text-success" title="Mais de 75% de respostas correctas"></i>' if r[3] > 0.75 else '' }}  
82 - </td>  
83 - <td> <!-- progress -->  
84 - <div class="progress">  
85 - <div class="progress-bar" role="progressbar" style="width: {{100*r[2]}}%;" aria-valuenow="{{round(100*r[2])}}%" aria-valuemin="0" aria-valuemax="100">{{round(100*r[2])}}%</div>  
86 - </div>  
87 - </td>  
88 - </tr> 68 + <tr class="{{ 'table-primary' if r[0] == uid else '' }}">
  69 + <td class="text-center"> <!-- rank -->
  70 + <strong>
  71 + {{ '<i class="fas fa-crown fa-lg text-warning"></i>' if i==0 else i+1 }}
  72 + </strong>
  73 + </td>
  74 + <td> <!-- student name -->
  75 + {{ ' '.join(r[1].split()[n] for n in (0,-1)) }}
  76 + </td>
  77 + <td> <!-- nice -->
  78 + {{ '<i class="far fa-thumbs-up text-success" title="Mais de 75% de respostas correctas"></i>' if r[3] > 0.75 else '' }}
  79 + </td>
  80 + <td> <!-- progress -->
  81 + <div class="progress" style="height: 24px;">
  82 + <div class="progress-bar" role="progressbar" style="width: {{ 100*r[2] }}%;" aria-valuenow="{{round(100*r[2])}}%" aria-valuemin="0" aria-valuemax="100">{{round(100*r[2])}}%</div>
  83 + </div>
  84 + </td>
  85 + </tr>
89 {% end %} 86 {% end %}
90 </tbody> 87 </tbody>
91 </table> 88 </table>
92 -<!-- === Change Password Modal =========================================== -->  
93 -  
94 -<div id="password_modal" class="modal fade" tabindex="-1" role="dialog">  
95 - <div class="modal-dialog" role="document">  
96 - <div class="modal-content">  
97 -<!-- header -->  
98 - <div class="modal-header">  
99 - <h5 class="modal-title">Alterar Password</h5>  
100 - </div>  
101 -<!-- body -->  
102 - <div class="modal-body">  
103 - <div class="control-group">  
104 - <label for="new_password" class="control-label">Introduza a nova password:</label>  
105 - <div class="controls">  
106 - <input type="password" id="new_password" name="new_password" autocomplete="new-password">  
107 - </div>  
108 - </div>  
109 - </div>  
110 -<!-- footer -->  
111 - <div class="modal-footer">  
112 - <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>  
113 - <button id="change_password" type="button" class="btn btn-danger" data-dismiss="modal">Alterar</button>  
114 - </div>  
115 -  
116 - </div><!-- /.modal-content -->  
117 - </div><!-- /.modal-dialog -->  
118 -</div>  
119 -  
120 -<!-- /.modal -->  
121 -  
122 </body> 89 </body>
123 </html> 90 </html>
aprendizations/templates/topic.html
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="pt-PT"> 2 <html lang="pt-PT">
3 -<head>  
4 - <title>{{appname}}</title>  
5 - <meta charset="utf-8">  
6 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
7 - <meta name="author" content="Miguel Barão"> 3 + <head>
  4 + <meta charset="utf-8" />
  5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 + <meta name="author" content="Miguel Barão" />
8 <link rel="icon" href="/static/favicon.ico"> 7 <link rel="icon" href="/static/favicon.ico">
9 8
  9 + <!-- Styles -->
  10 + <!-- <link rel="stylesheet" href="{{static_url('mdbootstrap/css/bootstrap.min.css')}}"> -->
  11 + <!-- <link rel="stylesheet" href="{{static_url('mdbootstrap/css/mdb.min.css')}}"> -->
  12 +
  13 + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  14 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  15 +
  16 + <link rel="stylesheet" href="{{static_url('codemirror/lib/codemirror.css')}}">
  17 + <link rel="stylesheet" href="{{static_url('css/github.css')}}">
  18 + <link rel="stylesheet" href="{{static_url('css/topic.css')}}">
  19 +
10 <!-- MathJax3 --> 20 <!-- MathJax3 -->
11 <script> 21 <script>
12 - MathJax = { 22 + MathJax = {
13 tex: { 23 tex: {
14 - inlineMath: [['$$$', '$$$'], ['\(', '\)']] 24 + inlineMath: [['$$$', '$$$'], ['\(', '\)']]
15 }, 25 },
16 svg: { 26 svg: {
17 - fontCache: 'global' 27 + fontCache: 'global'
18 } 28 }
19 - }; 29 + };
20 </script> 30 </script>
21 <!-- Scripts --> 31 <!-- Scripts -->
22 <script async type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> 32 <script async type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
23 - <!-- <script async type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg-full.js"></script> -->  
24 - <script defer src="{{static_url('mdbootstrap/js/jquery.min.js')}}"></script>  
25 - <script defer src="{{static_url('mdbootstrap/js/popper.min.js')}}"></script>  
26 - <script defer src="{{static_url('mdbootstrap/js/bootstrap.min.js')}}"></script>  
27 - <script defer src="{{static_url('mdbootstrap/js/mdb.min.js')}}"></script> 33 +
  34 + <script defer src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  35 + <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  36 +
28 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script> 37 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
29 <script defer src="{{static_url('codemirror/lib/codemirror.js')}}"></script> 38 <script defer src="{{static_url('codemirror/lib/codemirror.js')}}"></script>
30 <script defer src="{{static_url('js/topic.js')}}"></script> 39 <script defer src="{{static_url('js/topic.js')}}"></script>
31 40
32 - <!-- Styles -->  
33 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/bootstrap.min.css')}}">  
34 - <link rel="stylesheet" href="{{static_url('mdbootstrap/css/mdb.min.css')}}">  
35 - <link rel="stylesheet" href="{{static_url('codemirror/lib/codemirror.css')}}">  
36 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">  
37 -<!-- <link rel="stylesheet" href="{{static_url('css/animate.min.css')}}"> -->  
38 - <link rel="stylesheet" href="{{static_url('css/github.css')}}">  
39 - <link rel="stylesheet" href="{{static_url('css/topic.css')}}">  
40 -</head>  
41 -<!-- ===================================================================== -->  
42 -  
43 -<body> 41 + <title>{{appname}}</title>
  42 + </head>
  43 + <!-- ===================================================================== -->
  44 + <body>
44 <!-- Progress bar --> 45 <!-- Progress bar -->
45 <div class="progress fixed-top" style="height: 70px; border-radius: 0px;"> 46 <div class="progress fixed-top" style="height: 70px; border-radius: 0px;">
46 - <div class="progress-bar bg-warning" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div> 47 + <div class="progress-bar bg-warning" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
47 </div> 48 </div>
48 49
49 <!-- Navbar --> 50 <!-- Navbar -->
50 - <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary"> 51 + <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top shadow">
  52 + <div class="container-fluid">
51 <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora"> 53 <img src="{{static_url('logo_horizontal.png')}}" height="48" width="120" class="navbar-brand" alt="UEvora">
52 - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
53 - <span class="navbar-toggler-icon"></span> 54 + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  55 + <span class="navbar-toggler-icon"></span>
54 </button> 56 </button>
55 - <div class="collapse navbar-collapse" id="navbarText">  
56 - <div class="navbar-nav mr-auto">  
57 - <a class="nav-item nav-link" href="/courses">Cursos</a>  
58 - <a class="nav-item nav-link active" href="/course/{{course_id}}">Tópicos <span class="sr-only">(actual)</span></a>  
59 - <a class="nav-item nav-link" href="/rankings?course={{course_id}}">Classificação</a>  
60 - </div>  
61 - <ul class="navbar-nav">  
62 - <li class="nav-item dropdown">  
63 - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
64 - <i class="fas fa-user-graduate" aria-hidden="true"></i>  
65 - <span id="name">{{ escape(name) }}</span>  
66 - <span class="caret"></span>  
67 - </a>  
68 - <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">  
69 - <a class="dropdown-item" href="/logout">Sair</a>  
70 - </div>  
71 - </li>  
72 - </ul> 57 +
  58 + <div class="collapse navbar-collapse" id="navbarNavText">
  59 + <ul class="navbar-nav">
  60 + <li class="nav-item"><a class="nav-link" href="/courses">Cursos</a></li>
  61 + <li class="nav-item"><a class="nav-link active" aria-current="page" href="/course/{{course_id}}">Tópicos</a></li>
  62 + <!-- <li class="nav-item"><a class="nav-link disabled" href="#">Classificação</a></li> -->
  63 + </ul>
  64 + <ul class="navbar-nav ms-auto">
  65 + <li class="nav-item dropdown">
  66 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  67 + <i class="fas fa-user-graduate" aria-hidden="true"></i>
  68 + &nbsp;
  69 + <span id="name">{{ escape(name) }}</span>
  70 + <span class="caret"></span>
  71 + </a>
  72 + <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
  73 + <li><a class="dropdown-item" href="/logout">Sair</a></li>
  74 + </ul>
  75 + </li>
  76 + </ul>
73 </div> 77 </div>
  78 + </div>
74 </nav> 79 </nav>
  80 +
75 <!-- ===================================================================== --> 81 <!-- ===================================================================== -->
76 <!-- main panel with questions --> 82 <!-- main panel with questions -->
77 <div class="container" id="container" style="padding-top: 100px;"> 83 <div class="container" id="container" style="padding-top: 100px;">
78 - <div id="notifications"></div>  
79 - <div class="my-5" id="content">  
80 - <form action="/question" method="post" id="question_form" autocomplete="off">  
81 - {% module xsrf_form_html() %}  
82 - <div id="question_div"></div>  
83 - </form>  
84 - <div id="comments"></div>  
85 - </div>  
86 - <div id="wrong" style="display: none">  
87 - <div class="alert alert-danger">  
88 - <h4><i class="fas fa-thumbs-down fa-3x"></i> Não acertou, mas também se aprende com os erros...</h4>  
89 - <div id="solution_wrong"></div>  
90 - </div> 84 +
  85 + <div id="notifications"></div>
  86 +
  87 + <div class="my-5" id="content">
  88 + <form action="/question" method="post" id="question_form" autocomplete="off">
  89 + {% module xsrf_form_html() %}
  90 + <div id="question_div"></div>
  91 + </form>
  92 + <div id="comments"></div>
  93 + </div>
  94 + <!-- feedback right / wrong -->
  95 + <div id="right" style="display: none">
  96 + <div class="alert alert-success shadow">
  97 + <h4><i class="fas fa-thumbs-up fa-3x"></i> Muito bem!</h4>
  98 + <div id="solution_right"></div>
91 </div> 99 </div>
92 - <div id="right" style="display: none">  
93 - <div class="alert alert-success">  
94 - <h4><i class="fas fa-thumbs-up fa-3x"></i> Muito bem!</h4>  
95 - <div id="solution_right"></div>  
96 - </div> 100 + </div>
  101 + <div id="wrong" style="display: none">
  102 + <div class="alert alert-danger shadow">
  103 + <h4><i class="fas fa-thumbs-down fa-3x"></i> Não acertou, mas também se aprende com os erros...</h4>
  104 + <div id="solution_wrong"></div>
97 </div> 105 </div>
98 - <!-- reponder / continuar -->  
99 - <a class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" href="#solution"></a>  
100 - <!-- title="Shift-Enter" --> 106 + </div>
  107 + <!-- button reponder / continuar -->
  108 + <div class="d-grid gap-2">
  109 + <button type="submit" class="btn btn-primary btn-lg btn-block my-5 shadow bg-gradient" id="submit" data-bs-toggle="button" href="#solution" style="display: none"></button>
  110 + </div>
101 </div> 111 </div>
102 -</body> 112 + </body>
103 </html> 113 </html>
aprendizations/tools.py
@@ -136,7 +136,7 @@ markdown = MarkdownWithMath(HighlightRenderer(escape=True)) @@ -136,7 +136,7 @@ markdown = MarkdownWithMath(HighlightRenderer(escape=True))
136 136
137 def md_to_html(text: str, strip_p_tag: bool = False) -> str: 137 def md_to_html(text: str, strip_p_tag: bool = False) -> str:
138 md: str = markdown(text) 138 md: str = markdown(text)
139 - if strip_p_tag and md.startswith('<p>') and md.endswith('</p>'): 139 + if strip_p_tag and md.startswith('<p>') and md.endswith('</p>\n'):
140 return md[3:-5] 140 return md[3:-5]
141 else: 141 else:
142 return md 142 return md
package-lock.json
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 "": { 6 "": {
7 "dependencies": { 7 "dependencies": {
8 "@fortawesome/fontawesome-free": "^5.15.3", 8 "@fortawesome/fontawesome-free": "^5.15.3",
  9 + "bootstrap": "^5.1",
9 "codemirror": "^5.59.4", 10 "codemirror": "^5.59.4",
10 "mdbootstrap": "^4.19.2" 11 "mdbootstrap": "^4.19.2"
11 } 12 }
@@ -19,6 +20,28 @@ @@ -19,6 +20,28 @@
19 "node": ">=6" 20 "node": ">=6"
20 } 21 }
21 }, 22 },
  23 + "node_modules/@popperjs/core": {
  24 + "version": "2.9.3",
  25 + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
  26 + "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==",
  27 + "peer": true,
  28 + "funding": {
  29 + "type": "opencollective",
  30 + "url": "https://opencollective.com/popperjs"
  31 + }
  32 + },
  33 + "node_modules/bootstrap": {
  34 + "version": "5.1.0",
  35 + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz",
  36 + "integrity": "sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==",
  37 + "funding": {
  38 + "type": "opencollective",
  39 + "url": "https://opencollective.com/bootstrap"
  40 + },
  41 + "peerDependencies": {
  42 + "@popperjs/core": "^2.9.3"
  43 + }
  44 + },
22 "node_modules/codemirror": { 45 "node_modules/codemirror": {
23 "version": "5.62.0", 46 "version": "5.62.0",
24 "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz", 47 "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
@@ -36,6 +59,18 @@ @@ -36,6 +59,18 @@
36 "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz", 59 "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
37 "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==" 60 "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w=="
38 }, 61 },
  62 + "@popperjs/core": {
  63 + "version": "2.9.3",
  64 + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
  65 + "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==",
  66 + "peer": true
  67 + },
  68 + "bootstrap": {
  69 + "version": "5.1.0",
  70 + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz",
  71 + "integrity": "sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==",
  72 + "requires": {}
  73 + },
39 "codemirror": { 74 "codemirror": {
40 "version": "5.62.0", 75 "version": "5.62.0",
41 "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz", 76 "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
@@ -3,8 +3,7 @@ @@ -3,8 +3,7 @@
3 "email": "mjsb@uevora.pt", 3 "email": "mjsb@uevora.pt",
4 "dependencies": { 4 "dependencies": {
5 "@fortawesome/fontawesome-free": "^5.15.3", 5 "@fortawesome/fontawesome-free": "^5.15.3",
6 - "codemirror": "^5.59.4",  
7 - "mdbootstrap": "^4.19.2" 6 + "codemirror": "^5.59.4"
8 }, 7 },
9 "private": true 8 "private": true
10 } 9 }