- added codemirror to textarea questions.

Miguel Barão
1 parent 7d7be851
Showing 5 changed files with 18 additions and 21 deletions Show diff stats
BUGS.md
static/codemirror
static/js/topic.js
templates/question-textarea.html
templates/topic.html
 # BUGS
-- arranjar os links para static/libs como no perguntations.
-- quando erra uma textarea, o comment fica na nova pergunta que se gera.
 - nao esta a guardar as respostas erradas.
 - tabelas nas perguntas radio/checkbox não ocupam todo o espaço como em question.
@@ -18,13 +16,11 @@
 - session management. close after inactive time.
 - radio e checkboxes, aceitar numeros como seleccao das opcoes.
 - reload das perguntas enquanto online. ver signal em http://stackabuse.com/python-async-await-tutorial/
-- pertuntas tipo tristate: (sim, não, não sei
 - tabela de progresso de todos os alunos por topico.
 - tabela com perguntas / quantidade de respostas certas/erradas.
 - tabela com topicos / quantidade de estrelas.
 - pymips: activar/desactivar instruções
 - implementar servidor http com redirect para https.
-- usar codemirror no textarea
 - ao fim de 3 tentativas com password errada, envia email com nova password.
 - titulos das perguntas não suportam markdown.
 - pagina report que permita ver tabela alunos/topicos, estatisticas perguntas mais falhadas, tempo médio por pergunta.
@@ -32,6 +28,9 @@
 # FIXED
+- usar codemirror no textarea
+- quando erra uma textarea, o comment fica na nova pergunta que se gera.
+- arranjar os links para static/libs como no perguntations.
 - each topic only loads a sample of K questions (max) in random order.
 - change password modal nao aparece no ipad (safari e firefox)
 - detect questions in questions.yaml without ref -> error ou generate default.
@@ -0,0 +1 @@
+libs/codemirror-5.37.0/
 \ No newline at end of file
@@ -24,23 +24,7 @@ function updateQuestion(response){
                 if (e.shiftKey) postQuestion();
                 return false;
             }});
-        $("textarea").keydown(function (e) {
-            if (e.keyCode == 13 && e.shiftKey) { // shift enter
-                e.preventDefault();
-                postQuestion();
-            }
-            else if (e.keyCode == 9) { // tab
-                e.preventDefault();     // prevent loosing focus
-                // get caret position/selection
-                var start = this.selectionStart;
-                var end = this.selectionEnd;
-                var value = $(this).val();
-                // set textarea value to: text before caret + tab + text after caret
-                $(this).val(value.substring(0, start) + " " + " " + " " + " " + value.substring(end));
-                // put caret at right position again (add one for the tab)
-                this.selectionStart = this.selectionEnd = start + 4;
-            }});
         $('#question_div').animateCSS('bounceInDown');
         break;
@@ -75,6 +59,7 @@ function getQuestion() {
 // Send answer and receive a response.
 // The response can be a new_question or a shake if the answer is wrong.
 function postQuestion() {
+    editor.save();
     $.ajax({
         type: "POST",
         url: "/question",
@@ -2,7 +2,16 @@
 {% block answer %}
-<textarea class="form-control" rows="{{ question['lines'] }}" name="answer" autofocus>{{ question['answer'] or '' }}</textarea><br />
+<textarea class="form-control" rows="{{ question['lines'] }}" name="answer" id="code" autofocus>{{ question['answer'] or '' }}</textarea><br />
 <input type="hidden" name="question_ref" value="{{ question['ref'] }}">
+<script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        mode: "clike",
+        // matchBrackets: true,
+        // theme: "night",
+    });
+</script>
+
 {% end %}
@@ -23,6 +23,7 @@
     <link rel="stylesheet" href="/static/MDB/css/mdb.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/codemirror.css">
     <link rel="stylesheet" href="/static/css/topic.css">
 <!-- Scripts -->
@@ -31,6 +32,8 @@
     <script defer src="/static/fontawesome/fontawesome-all.min.js"></script>
     <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
     <script defer src="/static/MDB/js/mdb.min.js"></script>
+    <script defer src="/static/codemirror/codemirror.js"></script>
+    <script defer src="/static/codemirror/z80.js"></script>
     <script defer src="/static/js/topic.js"></script>
 </head>
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+libs/codemirror-5.37.0/
0	\ No newline at end of file	2	\ No newline at end of file
	@@ -24,23 +24,7 @@ function updateQuestion(response){		@@ -24,23 +24,7 @@ function updateQuestion(response){
24	if (e.shiftKey) postQuestion();	24	if (e.shiftKey) postQuestion();
25	return false;	25	return false;
26	}});	26	}});
27	- $("textarea").keydown(function (e) {
28	- if (e.keyCode == 13 && e.shiftKey) { // shift enter
29	- e.preventDefault();
30	- postQuestion();
31	- }
32	- else if (e.keyCode == 9) { // tab
33	- e.preventDefault(); // prevent loosing focus
34	- // get caret position/selection
35	- var start = this.selectionStart;
36	- var end = this.selectionEnd;
37	- var value = $(this).val();
38		27
39	- // set textarea value to: text before caret + tab + text after caret
40	- $(this).val(value.substring(0, start) + " " + " " + " " + " " + value.substring(end));
41	- // put caret at right position again (add one for the tab)
42	- this.selectionStart = this.selectionEnd = start + 4;
43	- }});
44	$('#question_div').animateCSS('bounceInDown');	28	$('#question_div').animateCSS('bounceInDown');
45	break;	29	break;
46		30
	@@ -75,6 +59,7 @@ function getQuestion() {		@@ -75,6 +59,7 @@ function getQuestion() {
75	// Send answer and receive a response.	59	// Send answer and receive a response.
76	// The response can be a new_question or a shake if the answer is wrong.	60	// The response can be a new_question or a shake if the answer is wrong.
77	function postQuestion() {	61	function postQuestion() {
		62	+ editor.save();
78	$.ajax({	63	$.ajax({
79	type: "POST",	64	type: "POST",
80	url: "/question",	65	url: "/question",
	@@ -2,7 +2,16 @@		@@ -2,7 +2,16 @@
2		2
3	{% block answer %}	3	{% block answer %}
4		4
5	-<textarea class="form-control" rows="{{ question['lines'] }}" name="answer" autofocus>{{ question['answer'] or '' }}</textarea><br />	5	+<textarea class="form-control" rows="{{ question['lines'] }}" name="answer" id="code" autofocus>{{ question['answer'] or '' }}</textarea><br />
6	<input type="hidden" name="question_ref" value="{{ question['ref'] }}">	6	<input type="hidden" name="question_ref" value="{{ question['ref'] }}">
7		7
		8	+<script>
		9	+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
		10	+ lineNumbers: true,
		11	+ mode: "clike",
		12	+ // matchBrackets: true,
		13	+ // theme: "night",
		14	+ });
		15	+</script>
		16	+
8	{% end %}	17	{% end %}