- using codemirror in textarea questions.

Miguel Barão
1 parent 23f1db87
Showing 6 changed files with 34 additions and 26 deletions Show diff stats
BUGS.md
static/codemirror
static/css/test.css
static/js/tabkey_in_textarea.js
templates/question-textarea.html
templates/test.html
@@ -59,6 +59,7 @@ ou usar push (websockets?)
 # FIXED
+- textarea com codemirror
 - decorador para user 0, evita o "if uid==0" em muitas funcoes.
 - numeric interval deve converter respostas que usam virgulas para pontos decimais
 - self.testapp.get_json_filename_of_test(test_id) retorna None quando test_id nao existe.
@@ -0,0 +1 @@
+libs/codemirror-5.40.2/
 \ No newline at end of file
@@ -24,4 +24,9 @@ textarea {
 }
 .noleftmargin {
     margin-left: 0px;
-}
 \ No newline at end of file
+}
+
+.CodeMirror {
+    border: 1px solid #eee;
+    height: auto;
+}
@@ -1,18 +0,0 @@
-$(document).ready(function() {
-
-    $("textarea").keydown(function(e) {
-        if(e.keyCode === 9) { // tab was pressed
-            // 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;
-            e.preventDefault();     // prevent the focus lose
-        }
-    });
-});
 {% extends "question.html" %}
 {% block answer %}
+
 <textarea class="form-control" rows="{{q['lines']}}" name="{{i}}">{{q['answer'] or ''}}</textarea><br />
+
 {% end %}
@@ -16,22 +16,26 @@
   </script>
   <script type="text/javascript" src="/static/MathJax/MathJax.js?config=TeX-AMS_CHTML-full"></script>
-<!-- Styles -->
-  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
-  <link rel="stylesheet" href="/static/css/github.css">  <!-- syntax highlight -->
-  <link rel="stylesheet" href="/static/css/test.css">
-
 <!-- Scripts -->
-  <script defer src="/static/jquery.min.js"></script>
+  <script src="/static/jquery.min.js"></script>
   <script defer src="/static/popper.min.js"></script>
   <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
   <script defer src="/static/fontawesome.min.js"></script>
+  <script src="/static/codemirror/lib/codemirror.js"></script>
+  <script src="/static/codemirror/addon/selection/active-line.js"></script>
+  <script src="/static/codemirror/addon/edit/matchbrackets.js"></script>
+
+<!-- Styles -->
+  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/static/css/github.css">  <!-- syntax highlight -->
+  <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
+  <link rel="stylesheet" href="/static/codemirror/theme/darcula.css">
+  <link rel="stylesheet" href="/static/css/test.css">
 <!-- My scripts -->
   <!-- <script src="/static/js/detect_unfocus.js"></script> -->
   <script defer src="/static/js/question_disabler.js"></script>
   <script defer src="/static/js/prevent_enter_submit.js"></script>
-  <script defer src="/static/js/tabkey_in_textarea.js"></script>
   <script defer src="/static/js/clock.js"></script>
 </head>
 <!-- ===================================================================== -->
@@ -126,5 +130,18 @@
     </div>
   </div>
 </div>
+
+<script>
+  $("textarea").each(function(i, ta) {
+    CodeMirror.fromTextArea(ta, {
+      lineNumbers: true,
+      theme: "darcula",
+      viewportMargin: Infinity,
+      matchBrackets: true,
+      styleActiveLine: true,
+    }); 
+  });
+</script>
+
 </body>
 </html>
	@@ -59,6 +59,7 @@ ou usar push (websockets?)		@@ -59,6 +59,7 @@ ou usar push (websockets?)
59		59
60	# FIXED	60	# FIXED
61		61
		62	+- textarea com codemirror
62	- decorador para user 0, evita o "if uid==0" em muitas funcoes.	63	- decorador para user 0, evita o "if uid==0" em muitas funcoes.
63	- numeric interval deve converter respostas que usam virgulas para pontos decimais	64	- numeric interval deve converter respostas que usam virgulas para pontos decimais
64	- self.testapp.get_json_filename_of_test(test_id) retorna None quando test_id nao existe.	65	- self.testapp.get_json_filename_of_test(test_id) retorna None quando test_id nao existe.
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+libs/codemirror-5.40.2/
0	\ No newline at end of file	2	\ No newline at end of file
	@@ -24,4 +24,9 @@ textarea {		@@ -24,4 +24,9 @@ textarea {
24	}	24	}
25	.noleftmargin {	25	.noleftmargin {
26	margin-left: 0px;	26	margin-left: 0px;
27	-}
28	\ No newline at end of file	27	\ No newline at end of file
		28	+}
		29	+
		30	+.CodeMirror {
		31	+ border: 1px solid #eee;
		32	+ height: auto;
		33	+}
	@@ -1,18 +0,0 @@	@@ -1,18 +0,0 @@
1	-$(document).ready(function() {
2	-
3	- $("textarea").keydown(function(e) {
4	- if(e.keyCode === 9) { // tab was pressed
5	- // get caret position/selection
6	- var start = this.selectionStart;
7	- var end = this.selectionEnd;
8	- var value = $(this).val();
9	-
10	- // set textarea value to: text before caret + tab + text after caret
11	- $(this).val(value.substring(0, start) + " " + value.substring(end));
12	-
13	- // put caret at right position again (add one for the tab)
14	- this.selectionStart = this.selectionEnd = start + 4;
15	- e.preventDefault(); // prevent the focus lose
16	- }
17	- });
18	-});
1	{% extends "question.html" %}	1	{% extends "question.html" %}
2		2
3	{% block answer %}	3	{% block answer %}
		4	+
4	<textarea class="form-control" rows="{{q['lines']}}" name="{{i}}">{{q['answer'] or ''}}</textarea><br />	5	<textarea class="form-control" rows="{{q['lines']}}" name="{{i}}">{{q['answer'] or ''}}</textarea><br />
		6	+
5	{% end %}	7	{% end %}