- link to show solution both when right and wrong.

- solution in bootstrap card instead of alert

- link to show solution both when right and wrong.
- solution in bootstrap card instead of alert
Miguel Barão
1 parent 2006012e
Showing 5 changed files with 55 additions and 46 deletions Show diff stats
BUGS.md
serve.py
static/js/topic.js
templates/solution.html
templates/topic.html
 # BUGS
+- botao para mostrar a solução quando se acerta.
 - 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.
@@ -276,11 +276,14 @@ class QuestionHandler(BaseHandler):
         if action == 'right':   # get next question in the topic
             comments_html = self.render_string('comments-right.html',
                 comments=q['comments'], md=md_to_html)
+            solution_html = to_unicode(self.render_string('solution.html',
+                solution=q['solution'], md=md_to_html))
             response['params'] = {
                 'type': q['type'],
                 'progress': self.learn.get_student_progress(user),
                 'comments': to_unicode(comments_html),
+                'solution': solution_html,
                 'tries': q['tries'],
                 }
@@ -289,11 +292,11 @@ class QuestionHandler(BaseHandler):
                 comments=q['comments'], md=md_to_html)
             response['params'] = {
-                    'type': q['type'],
-                    'progress': self.learn.get_student_progress(user),
-                    'comments': to_unicode(comments_html),
-                    'tries': q['tries'],
-                    }
+                'type': q['type'],
+                'progress': self.learn.get_student_progress(user),
+                'comments': to_unicode(comments_html),
+                'tries': q['tries'],
+                }
         elif action == 'wrong':  # no more tries
             comments_html = to_unicode(self.render_string('comments.html',
@@ -24,8 +24,7 @@ function updateQuestion(response) {
     var method = response["method"];
     var params = response["params"];
-    $('#right').hide();
-    $('#wrong').hide();
+    $('#right, #wrong').hide();
     switch (method) {
     case "new_question":
@@ -44,8 +43,7 @@ function updateQuestion(response) {
 function new_question(type, question, tries, progress) {
     $("#question_div").html(question);
-    $("#comments").html("");
-    $("#solution").html("");
+    $("#comments, #solution").html("");
     if (type == "info") {
         $("#submit").html("Continuar");
     }
@@ -55,7 +53,6 @@ function new_question(type, question, tries, progress) {
     $("#submit").off();
     $("#submit").click(postAnswer);
     $("#tries").html(tries);
-
     $('#topic_progress').css('width', (100*progress)+'%').attr('aria-valuenow', 100*progress);
     MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
@@ -72,6 +69,7 @@ function new_question(type, question, tries, progress) {
     //     }});
 }
+
 // ===========================================================================
 // Send answer and receive a response with the result of the correction.
 // The response can be right, try_again or wrong.
@@ -108,6 +106,12 @@ function getFeedback(response) {
         $("#submit").html("Continuar");
         $("#submit").off();
         $("#submit").click(getQuestion);
+        $("#link_solution_on_right").click(function(){
+            $("#right").hide();
+            $('#solution').html(params['solution']);
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#solution"]);
+            $('#solution').animateCSS('flipInX');
+        });
         break;
     case "try_again":
@@ -121,14 +125,16 @@ function getFeedback(response) {
     case "wrong":
         $('#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');
+        $("#link_solution_on_wrong").click(function () {
+            $("#wrong").hide();
+            $('#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 solution %}
-<div class="alert alert-secondary">
+<div class="card">
+  <div class="card-body">
     <h4 class="alert-heading">Solução</h4>
     {{ md(solution) }}
+  </div>
 </div>
 {% end %}
@@ -76,46 +76,43 @@
 	<div id="notifications"></div>
-	<!-- <div class="container"> -->
-	<!-- <div class="row"> -->
-	<!-- <div class="col col-lg-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>
+	<div class="my-5" id="content">
+		<form action="/question" method="post" id="question_form" autocomplete="off">
+			{% module xsrf_form_html() %}
+			<div id="question_div"></div>
+		</form>
+
+		<div id="comments"></div>
+	</div>
-	<!-- </div> col -->
-	<!-- <div class="col col-lg-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="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 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, mas também se aprende com os erros...
+			<br>
+			<div id="show_solution_on_right">
+				<a href="#solution" id="link_solution_on_wrong">Ver solução</a>
 			</div>
 		</div>
+	</div>
-		<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 id="right" style="display: none">
+		<div class="alert alert-success">
+			<i class="fas fa-thumbs-up fa-3x"></i>
+			<br><br>
+			Excelente resposta!
+			<br>
+			<div id="show_solution_on_right">
+				<a href="#solution" id="link_solution_on_right">Ver solução</a>
 			</div>
 		</div>
+	</div>
-		<div id="solution"></div>
+	<div id="solution"></div>
+	<a class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter" href="#solution"></a>
-		<!-- </div> col -->
-	<!-- </div> row -->
-	<!-- </div> --> <!-- container -->
 </div>
 </body>
1		1
2	# BUGS	2	# BUGS
3		3
		4	+- botao para mostrar a solução quando se acerta.
4	- shift-enter não está a funcionar	5	- shift-enter não está a funcionar
5	- 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ê?)
6	- 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.