- 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	2	# BUGS
3	3
	4	+- botao para mostrar a solução quando se acerta.
4	5	- shift-enter não está a funcionar
5	6	- falha intermitent no file handler quando o browser envia 2 GET requests ao mesmo tempo (porquê?)
6	7	- nos topicos learn.yaml, qd falha acrescenta no fim. nao faz sentido.
...	...
...	...	@@ -276,11 +276,14 @@ class QuestionHandler(BaseHandler):
276	276	if action == 'right': # get next question in the topic
277	277	comments_html = self.render_string('comments-right.html',
278	278	comments=q['comments'], md=md_to_html)
	279	+ solution_html = to_unicode(self.render_string('solution.html',
	280	+ solution=q['solution'], md=md_to_html))
279	281
280	282	response['params'] = {
281	283	'type': q['type'],
282	284	'progress': self.learn.get_student_progress(user),
283	285	'comments': to_unicode(comments_html),
	286	+ 'solution': solution_html,
284	287	'tries': q['tries'],
285	288	}
286	289
...	...	@@ -289,11 +292,11 @@ class QuestionHandler(BaseHandler):
289	292	comments=q['comments'], md=md_to_html)
290	293
291	294	response['params'] = {
292		- 'type': q['type'],
293		- 'progress': self.learn.get_student_progress(user),
294		- 'comments': to_unicode(comments_html),
295		- 'tries': q['tries'],
296		- }
	295	+ 'type': q['type'],
	296	+ 'progress': self.learn.get_student_progress(user),
	297	+ 'comments': to_unicode(comments_html),
	298	+ 'tries': q['tries'],
	299	+ }
297	300
298	301	elif action == 'wrong': # no more tries
299	302	comments_html = to_unicode(self.render_string('comments.html',
...	...
...	...	@@ -24,8 +24,7 @@ function updateQuestion(response) {
24	24	var method = response["method"];
25	25	var params = response["params"];
26	26
27		- $('#right').hide();
28		- $('#wrong').hide();
	27	+ $('#right, #wrong').hide();
29	28
30	29	switch (method) {
31	30	case "new_question":
...	...	@@ -44,8 +43,7 @@ function updateQuestion(response) {
44	43
45	44	function new_question(type, question, tries, progress) {
46	45	$("#question_div").html(question);
47		- $("#comments").html("");
48		- $("#solution").html("");
	46	+ $("#comments, #solution").html("");
49	47	if (type == "info") {
50	48	$("#submit").html("Continuar");
51	49	}
...	...	@@ -55,7 +53,6 @@ function new_question(type, question, tries, progress) {
55	53	$("#submit").off();
56	54	$("#submit").click(postAnswer);
57	55	$("#tries").html(tries);
58		-
59	56	$('#topic_progress').css('width', (100progress)+'%').attr('aria-valuenow', 100progress);
60	57	MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
61	58
...	...	@@ -72,6 +69,7 @@ function new_question(type, question, tries, progress) {
72	69	// }});
73	70	}
74	71
	72	+
75	73	// ===========================================================================
76	74	// Send answer and receive a response with the result of the correction.
77	75	// The response can be right, try_again or wrong.
...	...	@@ -108,6 +106,12 @@ function getFeedback(response) {
108	106	$("#submit").html("Continuar");
109	107	$("#submit").off();
110	108	$("#submit").click(getQuestion);
	109	+ $("#link_solution_on_right").click(function(){
	110	+ $("#right").hide();
	111	+ $('#solution').html(params['solution']);
	112	+ MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#solution"]);
	113	+ $('#solution').animateCSS('flipInX');
	114	+ });
111	115	break;
112	116
113	117	case "try_again":
...	...	@@ -121,14 +125,16 @@ function getFeedback(response) {
121	125	case "wrong":
122	126	$('#right').hide();
123	127	$('#wrong').show();
124		- // $('#question_div').animateCSS('shake');
125	128	$('#topic_progress').css('width', (100params["progress"])+'%').attr('aria-valuenow', 100params["progress"]);
126	129	$("#tries").html(params["tries"]);
127	130	$('#comments').html(params['comments']);
128	131	MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#comments"]);
129		- $('#solution').html(params['solution']);
130		- MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#solution"]);
131		- $('#solution').animateCSS('flipInX');
	132	+ $("#link_solution_on_wrong").click(function () {
	133	+ $("#wrong").hide();
	134	+ $('#solution').html(params['solution']);
	135	+ MathJax.Hub.Queue(["Typeset", MathJax.Hub, "#solution"]);
	136	+ $('#solution').animateCSS('flipInX');
	137	+ });
132	138	$("fieldset").attr("disabled", "disabled");
133	139	$("#submit").html("Continuar");
134	140	$("#submit").off();
...	...
1	1	{% autoescape %}
2	2
3	3	{% if solution %}
4		-<div class="alert alert-secondary">
	4	+<div class="card">
	5	+ <div class="card-body">
5	6	<h4 class="alert-heading">Solução</h4>
6	7	{{ md(solution) }}
	8	+ </div>
7	9	</div>
8	10	{% end %}
...	...
...	...	@@ -76,46 +76,43 @@
76	76
77	77	<div id="notifications"></div>
78	78
79		- <!-- <div class="container"> -->
80		- <!-- <div class="row"> -->
81		- <!-- <div class="col col-lg-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>
87		-
88		- <div id="comments"></div>
89		- </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	+
	85	+ <div id="comments"></div>
	86	+ </div>
90	87
91		- <!-- </div> col -->
92		- <!-- <div class="col col-lg-3"> -->
93		- <button class="btn btn-primary btn-lg btn-block my-5" id="submit" data-toggle="tooltip" data-placement="right" title="Shift-Enter">Responder</button>
94		-
95		- <div id="wrong" style="display: none">
96		- <div class="alert alert-danger">
97		- <i class="fas fa-thumbs-down fa-3x"></i>
98		- <br><br>
99		- Desta vez não acertou,
100		- <br>
101		- mas também se aprende com os erros...
	88	+ <div id="wrong" style="display: none">
	89	+ <div class="alert alert-danger">
	90	+ <i class="fas fa-thumbs-down fa-3x"></i>
	91	+ <br><br>
	92	+ Desta vez não acertou, mas também se aprende com os erros...
	93	+ <br>
	94	+ <div id="show_solution_on_right">
	95	+ <a href="#solution" id="link_solution_on_wrong">Ver solução</a>
102	96	</div>
103	97	</div>
	98	+ </div>
104	99
105		- <div id="right" style="display: none">
106		- <div class="alert alert-success">
107		- <i class="fas fa-thumbs-up fa-3x"></i>
108		- <br><br>
109		- Excelente resposta!
	100	+ <div id="right" style="display: none">
	101	+ <div class="alert alert-success">
	102	+ <i class="fas fa-thumbs-up fa-3x"></i>
	103	+ <br><br>
	104	+ Excelente resposta!
	105	+ <br>
	106	+ <div id="show_solution_on_right">
	107	+ <a href="#solution" id="link_solution_on_right">Ver solução</a>
110	108	</div>
111	109	</div>
	110	+ </div>
112	111
113		- <div id="solution"></div>
	112	+ <div id="solution"></div>
114	113
	114	+ <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>
115	115
116		- <!-- </div> col -->
117		- <!-- </div> row -->
118		- <!-- </div> --> <!-- container -->
119	116	</div>
120	117
121	118	</body>
...	...