Miguel Barão / aprendizations

Download as
Browse Code »

Commit 9f52cf60fd24a46ff51ed5513b474f8cd46ff5a1

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

- changes in the interface. 

- using material theme for bootstrap.
Showing 11 changed files with 164 additions and 136 deletions   Show diff stats
BUGS.md
  Diff comments   View file @9f52cf6
1 1  
2 2 # BUGS
3 3  
  4 +- esta a permitir 2 logins em simultaneo do mesmo user. fica tudo baralhado...
  5 +- shift-enter não está a funcionar
4 6 - falha intermitent no file handler quando o browser envia 2 GET requests ao mesmo tempo (porquê?)
5 7 - nos topicos learn.yaml, qd falha acrescenta no fim. nao faz sentido.
6 8 - ocorreu uma vez o sqlalchemy dar mesg erro a indicar que as threads sao diferents quando se faz o get da primeira pergunta do topico. Muitas vezes nao mostar erro, mas a pagina da erro ou fica em branco...
... ...
static/MDB 0 → 120000
  Diff comments   View file @9f52cf6
... ... @@ -0,0 +1 @@
  1 +libs/MDB-Free_4/
0 2 \ No newline at end of file
... ...
static/js/topic.js
  Diff comments   View file @9f52cf6
... ... @@ -24,6 +24,9 @@ function updateQuestion(response) {
24 24 var method = response["method"];
25 25 var params = response["params"];
26 26  
  27 + $('#right').hide();
  28 + $('#wrong').hide();
  29 +
27 30 switch (method) {
28 31 case "new_question":
29 32 new_question(params["type"], params["question"], params["tries"], params["progress"]);
... ... @@ -58,13 +61,15 @@ function new_question(type, question, tries, progress) {
58 61  
59 62 $('#question_div').animateCSS('bounceInDown');
60 63  
61   - // enable shift+enter to submit
62   - $("input:text, input:radio, input:checkbox").keydown(function (e) {
63   - if (e.keyCode == 13) {
64   - e.preventDefault();
65   - if (e.shiftKey) postQuestion();
66   - return false;
67   - }});
  64 + // enable shift+enter to submit
  65 + // $("input:text, input:radio, input:checkbox").keydown(function (e) {
  66 + // if (e.keyCode == 13) {
  67 + // e.preventDefault();
  68 + // if (e.shiftKey) {
  69 + // $("#submit").click();
  70 + // }
  71 + // return false;
  72 + // }});
68 73 }
69 74  
70 75 // ===========================================================================
... ... @@ -96,10 +101,11 @@ function getFeedback(response) {
96 101  
97 102 switch (method) {
98 103 case "right":
  104 + $('#right').show();
  105 + $('#wrong').hide();
99 106 $('#comments').html(params['comments']);
100 107 MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#comments"]);
101 108 $("#submit").html("Continuar");
102   - // $("#submit").toggleClass("btn-info btn-primary");
103 109 $("#submit").off();
104 110 $("#submit").click(getQuestion);
105 111 break;
... ... @@ -113,13 +119,16 @@ function getFeedback(response) {
113 119 break;
114 120  
115 121 case "wrong":
116   - $('#question_div').animateCSS('shake');
  122 + $('#right').hide();
  123 + $('#wrong').show();
  124 + // $('#question_div').animateCSS('shake');
117 125 $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
118 126 $("#tries").html(params["tries"]);
119 127 $('#comments').html(params['comments']);
120 128 MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#comments"]);
121 129 $('#solution').html(params['solution']);
122 130 MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#solution"]);
  131 + $('#solution').animateCSS('flipInX');
123 132 $("fieldset").attr("disabled", "disabled");
124 133 $("#submit").html("Continuar");
125 134 $("#submit").off();
... ...
templates/comments-right.html
  Diff comments   View file @9f52cf6
1 1 {% autoescape %}
2 2  
  3 +{% if comments %}
3 4 <div class="alert alert-success">
4   - <i class="fas fa-thumbs-up fa-3x"></i> Certo!
5   - {% if comments %}
6   - <hr>
7   - {{ md(comments) }}
8   - {% end %}
  5 + {{ md(comments) }}
9 6 </div>
  7 +{% end %}
... ...
templates/comments.html
  Diff comments   View file @9f52cf6
1 1 {% autoescape %}
2 2  
3 3 {% if comments %}
4   -<div class="alert alert-danger">
5   - {{ md(comments) }}
  4 +<div class="alert alert-warning">
  5 + {{ md(comments) }}
6 6 </div>
7 7 {% end %}
... ...
templates/login.html
  Diff comments   View file @9f52cf6
... ... @@ -16,6 +16,9 @@
16 16 <script defer src="/static/fontawesome/js/all.js"></script>
17 17 <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
18 18  
  19 +<!-- Material Design for Bootstrap -->
  20 + <link href="/static/MDB/css/mdb.min.css" rel="stylesheet">
  21 +
19 22 </head>
20 23 <!-- =================================================================== -->
21 24 <body>
... ... @@ -24,23 +27,31 @@
24 27 <div class="card-body">
25 28 <div class="row">
26 29  
27   - <div class="col-sm-4">
  30 + <div class="col-sm-8">
28 31 <img src="/static/logo_horizontal_login.png" class="img-responsive" width="80%">
29 32 </div>
30 33  
31   - <div class="col-sm-8">
32   - <h4>Identificação:</h4>
33   -
  34 + <div class="col-sm-4">
34 35 <form method="post" action="/login" class="form-signin">
35 36 {% module xsrf_form_html() %}
36   - <div class="form-group">
37   - <input type="text" name="uid" class="form-control" placeholder="Número" required autofocus>
38   - <input type="password" name="pw" class="form-control" placeholder="Password" required>
39   - <p class="text-danger"> {{ error }} </p>
  37 +
  38 + <div class="form-row">
  39 + <div class="col-md-6 mt-5">
  40 + <label for="uid">Número de aluno</label>
  41 + <input type="text" id="uid" name="uid" class="form-control" placeholder="e.g., 99999" required autofocus>
  42 + </div>
  43 +
  44 + <div class="col-md-6 mt-5">
  45 + <label for="uid">Senha secreta</label>
  46 + <input type="password" name="pw" class="form-control" placeholder="" required>
  47 + </div>
40 48 </div>
  49 +
  50 + <p class="text-danger"> {{ error }} </p>
41 51 <button class="btn btn-primary" type="submit">
42 52 Entrar
43 53 </button>
  54 +
44 55 </form>
45 56 </div>
46 57 </div>
... ...
templates/maintopics-table.html
  Diff comments   View file @9f52cf6
... ... @@ -21,6 +21,9 @@
21 21 <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
22 22 <script defer src="/static/js/maintopics.js"></script>
23 23  
  24 +<!-- Material Design for Bootstrap -->
  25 + <link href="/static/MDB/css/mdb.min.css" rel="stylesheet">
  26 +
24 27 </head>
25 28 <!-- ===================================================================== -->
26 29 <body>
... ... @@ -60,8 +63,7 @@
60 63 <thead>
61 64 <tr>
62 65 <th>Tópico</th>
63   - <!-- <th class="text-center">Lição</th> -->
64   - <th class="text-center">Exercícios</th>
  66 + <th class="text-center">Nível</th>
65 67 </tr>
66 68 </thead>
67 69 <tbody>
... ... @@ -79,11 +81,6 @@
79 81 </div>
80 82 {% end %}
81 83 </td>
82   -
83   - <!-- <td class="text-center text-muted">
84   - <i class="fas fa-graduation-cap"></i>
85   - </td> -->
86   -
87 84 <td class="text-center">
88 85 <i class="fas fa-lock text-muted"></i>
89 86 </td>
... ... @@ -100,22 +97,13 @@
100 97 {{ t['name'] }}
101 98 {% end %}
102 99 </td>
103   -
104   - <!-- <td class="text-center text-success">
105   - <i class="fas fa-graduation-cap"></i>
106   - </td> -->
107   -
108 100 <td class="text-center">
109 101 <a href="/topic/{{t['ref']}}">
110 102 {% if t['level'] < 0.01 %}
111   - <!-- <div class="ml-auto p-2"> -->
112   - <i class="fas fa-lock-open text-success"></i>
113   - <!-- </div> -->
  103 + <i class="fas fa-lock-open text-success"></i>
114 104 {% elif t['type']=='chapter' %}
115 105 <div class="text-xs-right">
116   - <!-- <div class="ml-auto p-2"> -->
117 106 <i class="fas fa-trophy fa-lg text-warning"></i>
118   - <!-- </div> -->
119 107 </div>
120 108 {% else %}
121 109 <div class="text-xs-right">
... ...
templates/question-checkbox.html
  Diff comments   View file @9f52cf6
... ... @@ -3,20 +3,17 @@
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">
9   - <div class="d-flex flex-row align-items-stretch">
10   - <div class="p-1">
11   - <input type="checkbox" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
12   - </div>
13   - <div class="p-1">
14   - <label for="{{ n }}">{{ md(opt) }}</label>
15   - </div>
16   - </div>
17   - </a>
18   - {% end %}
19   - </div>
  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" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
  11 + <label for="{{ n }}" class="custom-control-label">{{ md(opt)[3:-5] }}</label>
  12 + </div>
  13 + </a>
  14 + {% end %}
  15 + </div>
20 16 </fieldset>
21 17 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
  18 +
22 19 {% end %}
23 20 \ No newline at end of file
... ...
templates/question-radio.html
  Diff comments   View file @9f52cf6
... ... @@ -3,20 +3,17 @@
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">
9   - <div class="d-flex flex-row">
10   - <div class="p-1">
11   - <input type="radio" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
12   - </div>
13   - <div class="p-1">
14   - <label for="{{ n }}">{{ md(opt) }}</label>
15   - </div>
16   - </div>
17   - </a>
18   - {% end %}
19   - </div>
  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" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
  11 + <label for="{{ n }}" class="custom-control-label">{{ md(opt)[3:-5] }}</label>
  12 + </div>
  13 + </a>
  14 + {% end %}
  15 + </div>
20 16 </fieldset>
21 17 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
  18 +
22 19 {% end %}
23 20 \ No newline at end of file
... ...
templates/question-text.html
  Diff comments   View file @9f52cf6
... ... @@ -2,11 +2,11 @@
2 2  
3 3 {% block answer %}
4 4 <fieldset data-role="controlgroup">
5   - {% if question['answer'] %}
6   - <input type="text" class="form-control" id="answer" name="answer" value="{{ question['answer'] }}" autofocus>
7   - {% else %}
8   - <input type="text" class="form-control" id="answer" name="answer" value="" autofocus>
9   - {% end %}
  5 + {% if question['answer'] %}
  6 + <input type="text" class="form-control" id="answer" name="answer" value="{{ question['answer'] }}" autofocus>
  7 + {% else %}
  8 + <input type="text" class="form-control" id="answer" name="answer" value="" autofocus>
  9 + {% end %}
10 10 </fieldset><br />
11 11 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
12 12 {% end %}
... ...
templates/topic.html
  Diff comments   View file @9f52cf6
1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4   - <title>iLearn</title>
5   - <link rel="icon" href="/static/favicon.ico">
  4 + <title>iLearn</title>
  5 + <link rel="icon" href="/static/favicon.ico">
6 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">
  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 10  
11 11 <!-- MathJax -->
12   - <script type="text/x-mathjax-config">
13   - MathJax.Hub.Config({
14   - tex2jax: {
15   - inlineMath: [["$$$","$$$"], ["$","$"], ["\\(","\\)"]]
16   - }
17   - });
18   - </script>
19   - <script type="text/javascript" src="/static/mathjax/MathJax.js?delayStartupUntil=onload&config=TeX-AMS_CHTML-full"></script>
  12 + <script type="text/x-mathjax-config">
  13 + MathJax.Hub.Config({
  14 + tex2jax: {
  15 + inlineMath: [["$$$","$$$"], ["$","$"], ["\\(","\\)"]]
  16 + }
  17 + });
  18 + </script>
  19 + <script type="text/javascript" src="/static/mathjax/MathJax.js?delayStartupUntil=onload&config=TeX-AMS_CHTML-full"></script>
20 20  
21 21 <!-- Styles -->
22   - <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
23   - <link rel="stylesheet" href="/static/css/animate.min.css">
24   - <link rel="stylesheet" href="/static/css/github.css">
25   - <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
26   - <link rel="stylesheet" href="/static/css/topic.css">
  22 + <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  23 + <link rel="stylesheet" href="/static/css/animate.min.css">
  24 + <link rel="stylesheet" href="/static/css/github.css">
  25 + <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
  26 + <link rel="stylesheet" href="/static/css/topic.css">
27 27  
28 28 <!-- Scripts -->
29   - <script defer src="/static/libs/jquery-3.3.1.min.js"></script>
30   - <script defer src="/static/popper/popper.min.js"></script>
31   - <script defer src="/static/fontawesome/js/all.js"></script>
32   - <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
33   - <script defer src="/static/codemirror/lib/codemirror.js"></script>
  29 + <script defer src="/static/libs/jquery-3.3.1.min.js"></script>
  30 + <script defer src="/static/popper/popper.min.js"></script>
  31 + <script defer src="/static/fontawesome/js/all.js"></script>
  32 + <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
  33 + <script defer src="/static/codemirror/lib/codemirror.js"></script>
  34 +
  35 + <script defer src="/static/js/topic.js"></script>
  36 +
  37 +<!-- Material Design for Bootstrap -->
  38 + <link href="/static/MDB/css/mdb.min.css" rel="stylesheet">
34 39  
35   - <script defer src="/static/js/topic.js"></script>
36 40 </head>
37 41 <!-- ===================================================================== -->
38 42 <body>
39   -
40 43 <!-- Navbar -->
41 44 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
42   - <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
43   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
44   - <span class="navbar-toggler-icon"></span>
45   - </button>
46   -
47   - <div class="collapse navbar-collapse" id="navbarText">
48   - <ul class="navbar-nav mr-auto"></ul>
49   -
50   - <ul class="navbar-nav">
51   - <li class="nav-item dropdown">
52   - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
53   - <i class="fas fa-user" aria-hidden="true"></i>
54   - <span id="name">{{ escape(name) }}</span>
55   - <span class="caret"></span>
56   - </a>
57   - <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
58   - <a class="dropdown-item" href="/">Voltar aos tópicos</a>
59   - </div>
60   - </li>
61   - </ul>
62   - </div>
  45 + <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
  46 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  47 + <span class="navbar-toggler-icon"></span>
  48 + </button>
  49 +
  50 + <div class="collapse navbar-collapse" id="navbarText">
  51 + <ul class="navbar-nav mr-auto"></ul>
  52 +
  53 + <ul class="navbar-nav">
  54 + <li class="nav-item dropdown">
  55 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  56 + <i class="fas fa-user" aria-hidden="true"></i>
  57 + <span id="name">{{ escape(name) }}</span>
  58 + <span class="caret"></span>
  59 + </a>
  60 + <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
  61 + <a class="dropdown-item" href="/">Voltar aos tópicos</a>
  62 + </div>
  63 + </li>
  64 + </ul>
  65 + </div>
63 66 </nav>
64 67  
65 68 <!-- ===================================================================== -->
66 69 <div class="progress">
67   - <div class="progress-bar bg-primary" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
  70 + <div class="progress-bar bg-primary" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
68 71 </div>
  72 +
69 73 <!-- ===================================================================== -->
70 74 <!-- main panel with questions -->
71 75 <div class="container" id="container">
72 76  
73   - <div id="notifications"></div>
  77 + <div id="notifications"></div>
74 78  
75   - <div class="my-5" id="content">
76   - <form action="/question" method="post" id="question_form" autocomplete="off">
77   - {% module xsrf_form_html() %}
78   - <div id="question_div"></div>
79   - </form>
  79 + <!-- <div class="container"> -->
  80 + <div class="row">
  81 + <div class="col col-9">
  82 + <div class="my-5" id="content">
  83 + <form action="/question" method="post" id="question_form" autocomplete="off">
  84 + {% module xsrf_form_html() %}
  85 + <div id="question_div"></div>
  86 + </form>
80 87  
81   - <div id="comments"></div>
82   - <div id="solution"></div>
  88 + <div id="comments"></div>
  89 + <div id="solution"></div>
83 90  
84   - </div>
85   -</div>
  91 + </div>
86 92  
87   -<footer class="footer">
88   - <div class="container">
89   - <button class="btn btn-primary btn-lg btn-block my-3" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Responder</button>
90   - </div>
91   -</footer>
  93 + </div> <!-- col -->
  94 + <div class="col col-3">
  95 + <button class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Responder</button>
  96 +
  97 + <div id="right" style="display: none">
  98 + <div class="alert alert-success">
  99 + <i class="fas fa-thumbs-up fa-3x"></i>
  100 + <br><br>
  101 + Excelente resposta!
  102 + </div>
  103 + </div>
  104 + <div id="wrong" style="display: none">
  105 + <div class="alert alert-danger">
  106 + <i class="fas fa-thumbs-down fa-3x"></i>
  107 + <br><br>
  108 + Desta vez não acertou,
  109 + <br>
  110 + mas também se aprende com os erros...
  111 + </div>
  112 + </div>
  113 + </div> <!-- col -->
  114 + </div> <!-- row -->
  115 + <!-- </div> --> <!-- container -->
  116 +</div>
92 117  
93 118 </body>
94 119 </html>
... ...