- changes in the interface.

- using material theme for bootstrap.

- changes in the interface.
- using material theme for bootstrap.
Miguel Barão
1 parent e6915ba0
Showing 11 changed files with 164 additions and 136 deletions Show diff stats
BUGS.md
static/MDB
static/js/topic.js
templates/comments-right.html
templates/comments.html
templates/login.html
templates/maintopics-table.html
templates/question-checkbox.html
templates/question-radio.html
templates/question-text.html
templates/topic.html
 # BUGS
+- esta a permitir 2 logins em simultaneo do mesmo user. fica tudo baralhado...
+- shift-enter não está a funcionar
 - falha intermitent no file handler quando o browser envia 2 GET requests ao mesmo tempo (porquê?)
 - nos topicos learn.yaml, qd falha acrescenta no fim. nao faz sentido.
 - 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...
@@ -0,0 +1 @@
+libs/MDB-Free_4/
 \ No newline at end of file
@@ -24,6 +24,9 @@ function updateQuestion(response) {
     var method = response["method"];
     var params = response["params"];
+    $('#right').hide();
+    $('#wrong').hide();
+
     switch (method) {
     case "new_question":
         new_question(params["type"], params["question"], params["tries"], params["progress"]);
@@ -58,13 +61,15 @@ function new_question(type, question, tries, progress) {
     $('#question_div').animateCSS('bounceInDown');
-    // enable shift+enter to submit
-    $("input:text, input:radio, input:checkbox").keydown(function (e) {
-        if (e.keyCode == 13) {
-            e.preventDefault();
-            if (e.shiftKey) postQuestion();
-            return false;
-        }});
+       // enable shift+enter to submit
+    // $("input:text, input:radio, input:checkbox").keydown(function (e) {
+    //     if (e.keyCode == 13) {
+    //         e.preventDefault();
+    //         if (e.shiftKey) {
+    //             $("#submit").click();
+    //         }
+    //         return false;
+    //     }});
 }
 // ===========================================================================
@@ -96,10 +101,11 @@ function getFeedback(response) {
     switch (method) {
     case "right":
+        $('#right').show();
+        $('#wrong').hide();
         $('#comments').html(params['comments']);
         MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#comments"]);
         $("#submit").html("Continuar");
-        // $("#submit").toggleClass("btn-info btn-primary");
         $("#submit").off();
         $("#submit").click(getQuestion);
         break;
@@ -113,13 +119,16 @@ function getFeedback(response) {
         break;
     case "wrong":
-        $('#question_div').animateCSS('shake');
+        $('#right').hide();
+        $('#wrong').show();
+        // $('#question_div').animateCSS('shake');
         $('#topic_progress').css('width', (100*params["progress"])+'%').attr('aria-valuenow', 100*params["progress"]);
         $("#tries").html(params["tries"]);
         $('#comments').html(params['comments']);
         MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#comments"]);
         $('#solution').html(params['solution']);
         MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#solution"]);
+        $('#solution').animateCSS('flipInX');
         $("fieldset").attr("disabled", "disabled");
         $("#submit").html("Continuar");
         $("#submit").off();
 {% autoescape %}
+{% if comments %}
 <div class="alert alert-success">
-    <i class="fas fa-thumbs-up fa-3x"></i> Certo!
-    {% if comments %}
-    <hr>
-        {{ md(comments) }}
-    {% end %}
+    {{ md(comments) }}
 </div>
+{% end %}
 {% autoescape %}
 {% if comments %}
-<div class="alert alert-danger">
-    {{ md(comments) }}
+<div class="alert alert-warning">
+  {{ md(comments) }}
 </div>
 {% end %}
@@ -16,6 +16,9 @@
   <script defer src="/static/fontawesome/js/all.js"></script>
   <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
+<!-- Material Design for Bootstrap -->
+  <link href="/static/MDB/css/mdb.min.css" rel="stylesheet">
+
 </head>
 <!-- =================================================================== -->
 <body>
@@ -24,23 +27,31 @@
       <div class="card-body">
         <div class="row">
-          <div class="col-sm-4">
+          <div class="col-sm-8">
             <img src="/static/logo_horizontal_login.png" class="img-responsive" width="80%">
           </div>
-          <div class="col-sm-8">
-            <h4>Identificação:</h4>
-
+          <div class="col-sm-4">
             <form method="post" action="/login" class="form-signin">
               {% module xsrf_form_html() %}
-              <div class="form-group">
-                <input type="text" name="uid" class="form-control" placeholder="Número" required autofocus>
-                <input type="password" name="pw" class="form-control" placeholder="Password" required>
-                <p class="text-danger"> {{ error }} </p>
+
+              <div class="form-row">
+                <div class="col-md-6 mt-5">
+                  <label for="uid">Número de aluno</label>
+                  <input type="text" id="uid" name="uid" class="form-control" placeholder="e.g., 99999" required autofocus>
+                </div>
+
+                <div class="col-md-6 mt-5">
+                  <label for="uid">Senha secreta</label>
+                  <input type="password" name="pw" class="form-control" placeholder="" required>
+                </div>
               </div>
+
+              <p class="text-danger"> {{ error }} </p>
               <button class="btn btn-primary" type="submit">
                 Entrar
               </button>
+
             </form>
           </div>
         </div>
@@ -21,6 +21,9 @@
   <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
   <script defer src="/static/js/maintopics.js"></script>
+<!-- Material Design for Bootstrap -->
+  <link href="/static/MDB/css/mdb.min.css" rel="stylesheet">
+
 </head>
 <!-- ===================================================================== -->
 <body>
@@ -60,8 +63,7 @@
     <thead>
       <tr>
         <th>Tópico</th>
-        <!-- <th class="text-center">Lição</th> -->
-        <th class="text-center">Exercícios</th>
+        <th class="text-center">Nível</th>
       </tr>
     </thead>
     <tbody>
@@ -79,11 +81,6 @@
                 </div>
               {% end %}
             </td>
-
-            <!-- <td class="text-center text-muted">
-              <i class="fas fa-graduation-cap"></i>
-            </td> -->
-
             <td class="text-center">
               <i class="fas fa-lock text-muted"></i>
             </td>
@@ -100,22 +97,13 @@
                 {{ t['name'] }}
               {% end %}
             </td>
-
-            <!-- <td class="text-center text-success">
-              <i class="fas fa-graduation-cap"></i>
-            </td> -->
-
             <td class="text-center">
               <a href="/topic/{{t['ref']}}">
               {% if t['level'] < 0.01 %}
-                <!-- <div class="ml-auto p-2"> -->
-                  <i class="fas fa-lock-open text-success"></i>
-                <!-- </div> -->
+                <i class="fas fa-lock-open text-success"></i>
               {% elif t['type']=='chapter' %}
                 <div class="text-xs-right">
-                <!-- <div class="ml-auto p-2"> -->
                   <i class="fas fa-trophy fa-lg text-warning"></i>
-                <!-- </div> -->
                 </div>
               {% else %}
                 <div class="text-xs-right">
@@ -3,20 +3,17 @@
 {% block answer %}
 <fieldset data-role="controlgroup">
-    <div class="list-group">
-    {% for n,opt in enumerate(question['options']) %}
-        <a class="list-group-item">
-            <div class="d-flex flex-row align-items-stretch">
-                <div class="p-1">
-                    <input type="checkbox" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
-                </div>
-                <div class="p-1">
-                    <label for="{{ n }}">{{ md(opt) }}</label>
-                </div>
-            </div>
-        </a>
-    {% end %}
-    </div>
+	<div class="list-group">
+	{% for n,opt in enumerate(question['options']) %}
+		<a class="list-group-item list-group-item-action">
+			<div class="custom-control custom-checkbox">
+				<input type="checkbox" class="custom-control-input" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
+				<label for="{{ n }}" class="custom-control-label">{{ md(opt)[3:-5] }}</label>
+			</div>
+		</a>
+	{% end %}
+	</div>
 </fieldset>
 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
+
 {% end %}
 \ No newline at end of file
@@ -3,20 +3,17 @@
 {% block answer %}
 <fieldset data-role="controlgroup">
-    <div class="list-group">
-    {% for n,opt in enumerate(question['options']) %}
-        <a class="list-group-item">
-            <div class="d-flex flex-row">
-                <div class="p-1">
-                    <input type="radio" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
-                </div>
-                <div class="p-1">
-                    <label for="{{ n }}">{{ md(opt) }}</label>
-                </div>
-            </div>
-        </a>
-    {% end %}
-    </div>
+	<div class="list-group">
+	{% for n,opt in enumerate(question['options']) %}
+		<a class="list-group-item list-group-item-action">
+			<div class="custom-control custom-radio">
+				<input type="radio" class="custom-control-input" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
+				<label for="{{ n }}" class="custom-control-label">{{ md(opt)[3:-5] }}</label>
+			</div>
+		</a>
+	{% end %}
+	</div>
 </fieldset>
 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
+
 {% end %}
 \ No newline at end of file
@@ -2,11 +2,11 @@
 {% block answer %}
 <fieldset data-role="controlgroup">
-    {% if question['answer'] %}
-        <input type="text" class="form-control" id="answer" name="answer" value="{{ question['answer'] }}" autofocus>
-    {% else %}
-        <input type="text" class="form-control" id="answer" name="answer" value="" autofocus>
-    {% end %}
+	{% if question['answer'] %}
+		<input type="text" class="form-control" id="answer" name="answer" value="{{ question['answer'] }}" autofocus>
+	{% else %}
+		<input type="text" class="form-control" id="answer" name="answer" value="" autofocus>
+	{% end %}
 </fieldset><br />
 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
 {% end %}
 <!DOCTYPE html>
 <html>
 <head>
-    <title>iLearn</title>
-    <link rel="icon" href="/static/favicon.ico">
+	<title>iLearn</title>
+	<link rel="icon" href="/static/favicon.ico">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="author" content="Miguel Barão">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="author" content="Miguel Barão">
 <!-- MathJax -->
-    <script type="text/x-mathjax-config">
-        MathJax.Hub.Config({
-            tex2jax: {
-                inlineMath: [["$$$","$$$"], ["$","$"], ["\\(","\\)"]]
-            }
-        });
-    </script>
-    <script type="text/javascript" src="/static/mathjax/MathJax.js?delayStartupUntil=onload&config=TeX-AMS_CHTML-full"></script>
+	<script type="text/x-mathjax-config">
+		MathJax.Hub.Config({
+			tex2jax: {
+				inlineMath: [["$$$","$$$"], ["$","$"], ["\\(","\\)"]]
+			}
+		});
+	</script>
+	<script type="text/javascript" src="/static/mathjax/MathJax.js?delayStartupUntil=onload&config=TeX-AMS_CHTML-full"></script>
 <!-- Styles -->
-    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/static/css/animate.min.css">
-    <link rel="stylesheet" href="/static/css/github.css">
-    <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
-    <link rel="stylesheet" href="/static/css/topic.css">
+	<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
+	<link rel="stylesheet" href="/static/css/animate.min.css">
+	<link rel="stylesheet" href="/static/css/github.css">
+	<link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
+	<link rel="stylesheet" href="/static/css/topic.css">
 <!-- Scripts -->
-    <script defer src="/static/libs/jquery-3.3.1.min.js"></script>
-    <script defer src="/static/popper/popper.min.js"></script>
-    <script defer src="/static/fontawesome/js/all.js"></script>
-    <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
-    <script defer src="/static/codemirror/lib/codemirror.js"></script>
+	<script defer src="/static/libs/jquery-3.3.1.min.js"></script>
+	<script defer src="/static/popper/popper.min.js"></script>
+	<script defer src="/static/fontawesome/js/all.js"></script>
+	<script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
+	<script defer src="/static/codemirror/lib/codemirror.js"></script>
+
+	<script defer src="/static/js/topic.js"></script>
+
+<!-- Material Design for Bootstrap -->
+	<link href="/static/MDB/css/mdb.min.css" rel="stylesheet">
-    <script defer src="/static/js/topic.js"></script>
 </head>
 <!-- ===================================================================== -->
 <body>
-
 <!-- Navbar -->
 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
-    <img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="navbarText">
-        <ul class="navbar-nav mr-auto"></ul>
-
-        <ul class="navbar-nav">
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-user" aria-hidden="true"></i>
-                    <span id="name">{{ escape(name) }}</span>
-                    <span class="caret"></span>
-                </a>
-                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                    <a class="dropdown-item" href="/">Voltar aos tópicos</a>
-                </div>
-            </li>
-        </ul>
-    </div>
+	<img src="/static/logo_horizontal.png" height="48" width="120" class="navbar-brand" alt="UEvora">
+	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+	<span class="navbar-toggler-icon"></span>
+	</button>
+
+	<div class="collapse navbar-collapse" id="navbarText">
+		<ul class="navbar-nav mr-auto"></ul>
+
+		<ul class="navbar-nav">
+			<li class="nav-item dropdown">
+				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<i class="fas fa-user" aria-hidden="true"></i>
+					<span id="name">{{ escape(name) }}</span>
+					<span class="caret"></span>
+				</a>
+				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+					<a class="dropdown-item" href="/">Voltar aos tópicos</a>
+				</div>
+			</li>
+		</ul>
+	</div>
 </nav>
 <!-- ===================================================================== -->
 <div class="progress">
-    <div class="progress-bar bg-primary" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
+	<div class="progress-bar bg-primary" id="topic_progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 1em;width: 0%"></div>
 </div>
+
 <!-- ===================================================================== -->
 <!-- main panel with questions -->
 <div class="container" id="container">
-    <div id="notifications"></div>
+	<div id="notifications"></div>
-    <div class="my-5" id="content">
-        <form action="/question" method="post" id="question_form" autocomplete="off">
-            {% module xsrf_form_html() %}
-            <div id="question_div"></div>
-        </form>
+	<!-- <div class="container"> -->
+	<div class="row">
+	<div class="col col-9">
+			<div class="my-5" id="content">
+				<form action="/question" method="post" id="question_form" autocomplete="off">
+					{% module xsrf_form_html() %}
+					<div id="question_div"></div>
+				</form>
-        <div id="comments"></div>
-        <div id="solution"></div>
+				<div id="comments"></div>
+				<div id="solution"></div>
-    </div>
-</div>
+			</div>
-<footer class="footer">
-    <div class="container">
-        <button class="btn btn-primary btn-lg btn-block my-3" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Responder</button>
-    </div>
-</footer>
+	</div> <!-- col -->
+	<div class="col col-3">
+		<button class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Responder</button>
+
+		<div id="right" style="display: none">
+			<div class="alert alert-success">
+				<i class="fas fa-thumbs-up fa-3x"></i>
+				<br><br>
+				Excelente resposta!
+			</div>
+		</div>
+		<div id="wrong" style="display: none">
+			<div class="alert alert-danger">
+				<i class="fas fa-thumbs-down fa-3x"></i>
+				<br><br>
+				Desta vez não acertou,
+        <br>
+        mas também se aprende com os erros...
+			</div>
+		</div>
+	</div> <!-- col -->
+	</div> <!-- row -->
+	<!-- </div> --> <!-- container -->
+</div>
 </body>
 </html>
1		1
2	# BUGS	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	- falha intermitent no file handler quando o browser envia 2 GET requests ao mesmo tempo (porquê?)	6	- falha intermitent no file handler quando o browser envia 2 GET requests ao mesmo tempo (porquê?)
5	- nos topicos learn.yaml, qd falha acrescenta no fim. nao faz sentido.	7	- nos topicos learn.yaml, qd falha acrescenta no fim. nao faz sentido.
6	- 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...	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...
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+libs/MDB-Free_4/
0	\ No newline at end of file	2	\ No newline at end of file
1	{% autoescape %}	1	{% autoescape %}
2		2
3	{% if comments %}	3	{% if comments %}
4	-<div class="alert alert-danger">
5	- {{ md(comments) }}	4	+<div class="alert alert-warning">
		5	+ {{ md(comments) }}
6	</div>	6	</div>
7	{% end %}	7	{% end %}