Miguel Barão / aprendizations

Download as
Browse Code »

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
Showing 16 changed files with 492 additions and 450 deletions   Show diff stats
aprendizations/__init__.py
  Diff comments   View file @8dbbfda
... ... @@ -30,7 +30,7 @@ are progressively uncovered as the students progress.
30 30 '''
31 31  
32 32 APP_NAME = 'aprendizations'
33   -APP_VERSION = '2021.07.dev1'
  33 +APP_VERSION = '2021.08.dev1'
34 34 APP_DESCRIPTION = __doc__
35 35  
36 36 __author__ = 'Miguel Barão'
... ...
aprendizations/learnapp.py
  Diff comments   View file @8dbbfda
... ... @@ -288,10 +288,7 @@ class LearnApp():
288 288 logger.info('User "%s" finished "%s" (level=%.2f)',
289 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 292 with Session(self._engine, future=True) as session:
296 293 student_topic = session.execute(query).scalar_one_or_none()
297 294  
... ...
aprendizations/static/js/topic.js
  Diff comments   View file @8dbbfda
1 1 $.fn.extend({
2 2 animateCSS: function (animation, run_on_end) {
3 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 6 if (run_on_end !== undefined) {
7 7 run_on_end();
8 8 }
... ... @@ -46,7 +46,7 @@ function updateQuestion(response) {
46 46 break;
47 47 case "finished_topic":
48 48 $('#submit, #comments, #solution').remove();
49   - $("#content").html(params["question"]).animateCSS('tada');
  49 + $("#content").html(params["question"]).animateCSS('animate__tada');
50 50 $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
51 51 setTimeout(function(){window.location.replace('/course/');}, 2000);
52 52 break;
... ... @@ -57,10 +57,10 @@ function new_question(type, question, tries, progress) {
57 57 window.scrollTo(0, 0);
58 58  
59 59 $("#submit").hide();
60   - $("#question_div").animateCSS('fadeOut', function() {
  60 + $("#question_div").animateCSS('animate__fadeOut', function() {
61 61 $("#question_div").html(question);
62 62 MathJax.typeset();
63   - $("#question_div").animateCSS('fadeIn', function() {
  63 + $("#question_div").animateCSS('animate__fadeIn', function() {
64 64 showTriesLeft(tries);
65 65 $("#submit").removeClass("disabled").show();
66 66  
... ... @@ -120,7 +120,7 @@ function getFeedback(response) {
120 120 $('#comments').html(params['comments']).show();
121 121 $('#solution_right').html(params['solution']);
122 122 MathJax.typeset();
123   - $('#right').show().animateCSS('zoomIn', function(){
  123 + $('#right').show().animateCSS('animate__zoomIn', function(){
124 124 $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
125 125 });
126 126 break;
... ... @@ -129,7 +129,10 @@ function getFeedback(response) {
129 129 $('#comments').html(params['comments']).show();
130 130 MathJax.typeset();
131 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 136 showTriesLeft(params["tries"]);
134 137 $("fieldset").prop("disabled", false);
135 138 $("#submit").html("Responder").removeClass("disabled");
... ... @@ -142,9 +145,9 @@ function getFeedback(response) {
142 145 $('#comments').html(params['comments']).show();
143 146 $('#solution_wrong').html(params['solution']);
144 147 MathJax.typeset();
145   - $('#question_div').animateCSS('shake', function() {
  148 + $('#question_div').animateCSS('animate__shakeX', function() {
146 149 showTriesLeft(params["tries"]);
147   - $('#wrong').show().animateCSS('zoomIn', function() {
  150 + $('#wrong').show().animateCSS('animate__zoomIn', function() {
148 151 $("#submit").html("Continuar").removeClass("disabled").off().click(getQuestion);
149 152 });
150 153 });
... ...
aprendizations/static/signin.css 0 → 100644
  Diff comments   View file @8dbbfda
... ... @@ -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
  Diff comments   View file @8dbbfda
1 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 8 <meta name="author" content="Miguel Barão">
  9 + <link rel="icon" href="favicon.ico">
11 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 12 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
15 13 <link rel="stylesheet" href="{{static_url('css/sticky-footer-navbar.css')}}">
16 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 17 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
22 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 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 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 53 </div>
  54 + </div>
53 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 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 80 </div>
  81 + </div>
69 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 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 120 </html>
... ...
aprendizations/templates/login.html
  Diff comments   View file @8dbbfda
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 59 </html>
... ...
aprendizations/templates/maintopics-table.html
  Diff comments   View file @8dbbfda
1 1 {% autoescape %}
2 2  
3   -<!doctype html>
  3 +<!DOCTYPE html>
4 4 <html lang="pt">
5 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 8 <meta name="author" content="Miguel Barão">
  9 + <link rel="icon" href="/static/favicon.ico">
12 10  
13 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 13 <link rel="stylesheet" href="{{static_url('css/maintopics.css')}}">
17 14  
18 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 19 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
24 20 <script defer src="{{static_url('js/maintopics.js')}}"></script>
25 21  
  22 + <title>{{appname}}</title>
26 23 </head>
27 24 <!-- ===================================================================== -->
28 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 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 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 83 </div>
57   -</nav>
  84 +</div>
  85 +
58 86 <!-- ===================================================================== -->
59 87 <div class="container">
60 88  
61 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 93 <table class="table table-hover">
83   - <thead class="">
  94 + <thead>
84 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 99 </tr>
88 100 </thead>
89 101 <tbody>
90 102 {% for t in state %}
91 103 <!-- ------------------------------------------------------------- -->
92 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 115 <td>
95 116 <div class="text-muted">
96 117 {% if t['ref'] not in course['goals'] %}
97 118 <i class="fas fa-puzzle-piece"></i>
98 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 122 {{ t['name'] }}
109 123 </div>
... ... @@ -116,11 +130,7 @@
116 130 {% else %}
117 131  
118 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 134 {% if t['type']=='chapter' %}
125 135 <i class="fas fa-flag-checkered"></i>&nbsp;
126 136 {% elif t['type']=='learn' %}
... ... @@ -128,6 +138,11 @@
128 138 {% else %}
129 139 <i class="fas fa-pencil-alt"></i>&nbsp;
130 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 147 {{ t['name'] }}
133 148 </td>
... ... @@ -150,34 +165,5 @@
150 165 </tbody>
151 166 </table>
152 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 168 </body>
183 169 </html>
... ...
aprendizations/templates/question-checkbox.html
  Diff comments   View file @8dbbfda
... ... @@ -3,20 +3,14 @@
3 3  
4 4 {% block answer %}
5 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 14 </fieldset>
20 15 <input type="hidden" name="qid" value="{{ question['qid'] }}">
21   -
22   -{% end %}
23 16 \ No newline at end of file
  17 +{% end %}
... ...
aprendizations/templates/question-information.html
  Diff comments   View file @8dbbfda
1 1 {% autoescape %}
2 2  
3   -<h2 class="page-header">{{ question['title'] }}</h4>
  3 +<h1 class="display-6">{{ question['title'] }}</h1>
4 4  
5 5 <div id="text">
6 6 {{ md(question['text']) }}
... ...
aprendizations/templates/question-radio.html
  Diff comments   View file @8dbbfda
... ... @@ -3,19 +3,14 @@
3 3  
4 4 {% block answer %}
5 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 14 </fieldset>
20 15 <input type="hidden" name="qid" value="{{ question['qid'] }}">
21   -{% end %}
22 16 \ No newline at end of file
  17 +{% end %}
... ...
aprendizations/templates/question.html
  Diff comments   View file @8dbbfda
1 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 5 <div id="text">
6 6 {{ md(question['text']) }}
... ... @@ -8,4 +8,4 @@
8 8  
9 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
  Diff comments   View file @8dbbfda
1 1 {% autoescape %}
2 2  
3   -<!doctype html>
  3 +<!DOCTYPE html>
4 4 <html lang="pt">
5 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 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 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 15 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
24 16 <script defer src="{{static_url('js/maintopics.js')}}"></script>
25 17  
  18 + <title>{{appname}}</title>
26 19 </head>
27 20 <!-- ===================================================================== -->
28 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 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 49 </div>
57 50 </nav>
  51 +
58 52 <!-- ===================================================================== -->
59 53 <div class="container">
60   -<h4>{{course_title}}</h4>
  54 + <h1 class="display-6">{{ course_title }}</h1>
  55 +
61 56 <table class="table table-hover">
62 57 <col width="100">
63 58 <thead>
64 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 64 </tr>
69 65 </thead>
70 66 <tbody>
71 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 86 {% end %}
90 87 </tbody>
91 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 89 </body>
123 90 </html>
... ...
aprendizations/templates/topic.html
  Diff comments   View file @8dbbfda
1 1 <!DOCTYPE html>
2 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 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 20 <!-- MathJax3 -->
11 21 <script>
12   - MathJax = {
  22 + MathJax = {
13 23 tex: {
14   - inlineMath: [['$$$', '$$$'], ['\(', '\)']]
  24 + inlineMath: [['$$$', '$$$'], ['\(', '\)']]
15 25 },
16 26 svg: {
17   - fontCache: 'global'
  27 + fontCache: 'global'
18 28 }
19   - };
  29 + };
20 30 </script>
21 31 <!-- Scripts -->
22 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 37 <script defer src="{{static_url('fontawesome-free/js/all.min.js')}}"></script>
29 38 <script defer src="{{static_url('codemirror/lib/codemirror.js')}}"></script>
30 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 45 <!-- Progress bar -->
45 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 48 </div>
48 49  
49 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 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 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 77 </div>
  78 + </div>
74 79 </nav>
  80 +
75 81 <!-- ===================================================================== -->
76 82 <!-- main panel with questions -->
77 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 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 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 111 </div>
102   -</body>
  112 + </body>
103 113 </html>
... ...
aprendizations/tools.py
  Diff comments   View file @8dbbfda
... ... @@ -136,7 +136,7 @@ markdown = MarkdownWithMath(HighlightRenderer(escape=True))
136 136  
137 137 def md_to_html(text: str, strip_p_tag: bool = False) -> str:
138 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 140 return md[3:-5]
141 141 else:
142 142 return md
... ...
package-lock.json
  Diff comments   View file @8dbbfda
... ... @@ -6,6 +6,7 @@
6 6 "": {
7 7 "dependencies": {
8 8 "@fortawesome/fontawesome-free": "^5.15.3",
  9 + "bootstrap": "^5.1",
9 10 "codemirror": "^5.59.4",
10 11 "mdbootstrap": "^4.19.2"
11 12 }
... ... @@ -19,6 +20,28 @@
19 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 45 "node_modules/codemirror": {
23 46 "version": "5.62.0",
24 47 "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
... ... @@ -36,6 +59,18 @@
36 59 "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
37 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 74 "codemirror": {
40 75 "version": "5.62.0",
41 76 "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
... ...
package.json
  Diff comments   View file @8dbbfda
... ... @@ -3,8 +3,7 @@
3 3 "email": "mjsb@uevora.pt",
4 4 "dependencies": {
5 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 8 "private": true
10 9 }
... ...