implemented tabs & line numbers in textarea

4 files changed, 269 insertions, 2 deletions

diff --git a/testapp/static/exam/css/question.css b/testapp/static/exam/css/question.css
index a57b6dd..4bf5913 100644
--- a/testapp/static/exam/css/question.css
+++ b/testapp/static/exam/css/question.css
@@ -23,3 +23,20 @@
   padding: 35px 20px 10px;
   margin: -20px -20px 20px;
 }
+#codeTextarea{
+         
+       }
+       .textAreaWithLines{
+          font-family:courier;      
+          border:1px solid #eee;
+          
+       }
+       .textAreaWithLines textarea,.textAreaWithLines div{
+          border:0px;
+          line-height:120%;
+          font-size:12px;
+       }
+       .lineObj{
+          color: grey;
+       }
+
diff --git a/testapp/static/exam/js/question.js b/testapp/static/exam/js/question.js
index 554a948..7a05a09 100644
--- a/testapp/static/exam/js/question.js
+++ b/testapp/static/exam/js/question.js
@@ -35,3 +35,110 @@
 		    document.forms["code"].submit();
     	    }	
       }
+
+function setSelectionRange(input, selectionStart, selectionEnd) {
+  if (input.setSelectionRange) {
+    input.focus();
+    input.setSelectionRange(selectionStart, selectionEnd);
+  }
+  else if (input.createTextRange) {
+    var range = input.createTextRange();
+    range.collapse(true);
+    range.moveEnd('character', selectionEnd);
+    range.moveStart('character', selectionStart);
+    range.select();
+  }
+}
+
+function replaceSelection (input, replaceString) {
+	if (input.setSelectionRange) {
+		var selectionStart = input.selectionStart;
+		var selectionEnd = input.selectionEnd;
+		input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
+    
+		if (selectionStart != selectionEnd){ 
+			setSelectionRange(input, selectionStart, selectionStart + 	replaceString.length);
+		}else{
+			setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
+		}
+
+	}else if (document.selection) {
+		var range = document.selection.createRange();
+
+		if (range.parentElement() == input) {
+			var isCollapsed = range.text == '';
+			range.text = replaceString;
+
+			 if (!isCollapsed)  {
+				range.moveStart('character', -replaceString.length);
+				range.select();
+			}
+		}
+	}
+}
+
+
+// We are going to catch the TAB key so that we can use it, Hooray!
+function catchTab(item,e){
+	if(navigator.userAgent.match("Gecko")){
+		c=e.which;
+	}else{
+		c=e.keyCode;
+	}
+	if(c==9){
+		replaceSelection(item,String.fromCharCode(9));
+		setTimeout("document.getElementById('"+item.id+"').focus();",0);	
+		return false;
+	}
+		    
+}
+
+var lineObjOffsetTop = 2;
+       
+       function createTextAreaWithLines(id)
+       {
+          var el = document.createElement('DIV');
+          var ta = document.getElementById(id);
+          ta.parentNode.insertBefore(el,ta);
+          el.appendChild(ta);
+         
+          el.className='textAreaWithLines';
+          el.style.width = (ta.offsetWidth + 30) + 'px';
+          ta.style.position = 'absolute';
+          ta.style.left = '30px';
+          el.style.height = (ta.offsetHeight + 2) + 'px';
+          el.style.overflow='hidden';
+          el.style.position = 'relative';
+          el.style.width = (ta.offsetWidth + 30) + 'px';
+          var lineObj = document.createElement('DIV');
+          lineObj.style.position = 'absolute';
+          lineObj.style.top = lineObjOffsetTop + 'px';
+          lineObj.style.left = '0px';
+          lineObj.style.width = '27px';
+          el.insertBefore(lineObj,ta);
+          lineObj.style.textAlign = 'right';
+          lineObj.className='lineObj';
+          var string = '';
+          for(var no=1;no<200;no++){
+             if(string.length>0)string = string + '<br>';
+             string = string + no;
+          }
+         
+          //ta.onkeydown = function() { positionLineObj(lineObj,ta); };
+          ta.onmousedown = function() { positionLineObj(lineObj,ta); };
+          ta.onscroll = function() { positionLineObj(lineObj,ta); };
+          ta.onblur = function() { positionLineObj(lineObj,ta); };
+          ta.onfocus = function() { positionLineObj(lineObj,ta); };
+          ta.onmouseover = function() { positionLineObj(lineObj,ta); };
+          lineObj.innerHTML = string;
+         
+       }
+       
+       function positionLineObj(obj,ta)
+       {
+          obj.style.top = (ta.scrollTop * -1 + lineObjOffsetTop) + 'px';  
+       
+         
+       }
+       
+
diff --git a/testapp/templates/exam/question.html b/testapp/templates/exam/question.html
index 584ab72..b2f5816 100644
--- a/testapp/templates/exam/question.html
+++ b/testapp/templates/exam/question.html
@@ -6,9 +6,123 @@
 
 {% block css %}
 <link rel="stylesheet" href="{{ URL_ROOT }}/static/exam/css/question.css" type="text/css" />
+
 {% endblock %}
 
 {% block script %}
+
+<script type="text/javascript">
+function setSelectionRange(input, selectionStart, selectionEnd) {
+  if (input.setSelectionRange) {
+    input.focus();
+    input.setSelectionRange(selectionStart, selectionEnd);
+  }
+  else if (input.createTextRange) {
+    var range = input.createTextRange();
+    range.collapse(true);
+    range.moveEnd('character', selectionEnd);
+    range.moveStart('character', selectionStart);
+    range.select();
+  }
+}
+
+function replaceSelection (input, replaceString) {
+	if (input.setSelectionRange) {
+		var selectionStart = input.selectionStart;
+		var selectionEnd = input.selectionEnd;
+		input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
+    
+		if (selectionStart != selectionEnd){ 
+			setSelectionRange(input, selectionStart, selectionStart + 	replaceString.length);
+		}else{
+			setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
+		}
+
+	}else if (document.selection) {
+		var range = document.selection.createRange();
+
+		if (range.parentElement() == input) {
+			var isCollapsed = range.text == '';
+			range.text = replaceString;
+
+			 if (!isCollapsed)  {
+				range.moveStart('character', -replaceString.length);
+				range.select();
+			}
+		}
+	}
+}
+
+
+// We are going to catch the TAB key so that we can use it, Hooray!
+function catchTab(item,e){
+
+	if(navigator.userAgent.match("Gecko")){
+		c=e.which;
+	}else{
+		c=e.keyCode;
+	}
+	if(c==9){
+		replaceSelection(item,String.fromCharCode(9));
+		setTimeout("document.getElementById('"+item.id+"').focus();",0);	
+		return false;
+	}
+		    
+}
+</script>
+
+<script type="text/javascript">
+       
+       var lineObjOffsetTop = 2;
+       
+       function createTextAreaWithLines(id)
+       {
+          var el = document.createElement('DIV');
+          var ta = document.getElementById(id);
+          ta.parentNode.insertBefore(el,ta);
+          el.appendChild(ta);
+         
+          el.className='textAreaWithLines';
+          el.style.width = (ta.offsetWidth + 30) + 'px';
+          ta.style.position = 'absolute';
+          ta.style.left = '30px';
+          el.style.height = (ta.offsetHeight + 2) + 'px';
+          el.style.overflow='hidden';
+          el.style.position = 'relative';
+          el.style.width = (ta.offsetWidth + 30) + 'px';
+          var lineObj = document.createElement('DIV');
+          lineObj.style.position = 'absolute';
+          lineObj.style.top = lineObjOffsetTop + 'px';
+          lineObj.style.left = '0px';
+          lineObj.style.width = '27px';
+          el.insertBefore(lineObj,ta);
+          lineObj.style.textAlign = 'right';
+          lineObj.className='lineObj';
+          var string = '';
+          for(var no=1;no<200;no++){
+             if(string.length>0)string = string + '<br>';
+             string = string + no;
+          }
+         
+          //ta.onkeydown = function() { positionLineObj(lineObj,ta); };
+          ta.onmousedown = function() { positionLineObj(lineObj,ta); };
+          ta.onscroll = function() { positionLineObj(lineObj,ta); };
+          ta.onblur = function() { positionLineObj(lineObj,ta); };
+          ta.onfocus = function() { positionLineObj(lineObj,ta); };
+          ta.onmouseover = function() { positionLineObj(lineObj,ta); };
+          lineObj.innerHTML = string;
+         
+       }
+       
+       function positionLineObj(obj,ta)
+       {
+          obj.style.top = (ta.scrollTop * -1 + lineObjOffsetTop) + 'px';  
+       
+         
+       }
+       
+       </script>
+
 <script>
       var time_left = {{ time_left }};
       function submitCode()
@@ -50,6 +164,7 @@
 </script>
 {% endblock script %}
 
+
 {% block onload %} onload="update_time()" {% endblock onload %}
 
 {% block pagetitle %}
@@ -92,7 +207,13 @@
          <input name="answer" type="radio" value="{{option}}" />{{option}} <br/>
          {% endfor %}
          {% else %}
-         <textarea rows="15" style="width:810px;margin-bottom:10px;" name="answer">{% if last_attempt %}{{last_attempt.strip}}{% else %}{% if question.type == "bash" %} #!/bin/bash{% else %}# Enter your answer here.{% endif %}{% endif %}</textarea>
+
+         <textarea tabindex=1 rows="15" style="width:750px;margin-bottom:10px;" name="answer" id="answer" wrap="off" onkeydown="return catchTab(this,event)">{% if last_attempt %}{{last_attempt.strip}}{% else %}{% if question.type == "bash" %} #!/bin/bash{% else %}# Enter your answer here.{% endif %}{% endif %}</textarea>
+<br>
+
+ <script type="text/javascript">
+       createTextAreaWithLines('answer');
+       </script>
          {% endif %}
 
          {% if question.type == "mcq" %}
diff --git a/testapp/test_server.py b/testapp/test_server.py
index be9f876..e81daf2 100644
--- a/testapp/test_server.py
+++ b/testapp/test_server.py
@@ -35,6 +35,28 @@ def test_python():
             language="python")
     check_result(result, 'nameerror')
 
+def test_c():
+    """Test if server runs Python code as expected."""
+    src = 'while True: pass'
+    result = code_server.run_code(src, '', '/tmp', language="c")
+    check_result(result, 'more than ')
+
+    src = 'x = 1'
+    result = code_server.run_code(src, 'assert x == 1', '/tmp', 
+                language="c")
+    check_result(result, 'correct answer')
+
+    result = code_server.run_code(src, 'assert x == 0', '/tmp', 
+                language="c")
+    check_result(result, 'assertionerror')
+
+    src = 'C lang. Code'
+    result = code_server.run_code(src, 'assert x == 0', '/tmp', 
+            language="c")
+    check_result(result, 'nameerror')
+
+
+
 def test_bash():
     """Test if server runs Bash code as expected."""
     src = """
@@ -80,4 +102,4 @@ def test_bash():
 if __name__ == '__main__':
     test_python()
     test_bash()
-
+    test_c()