implemented tabs & line numbers in textarea

1 files changed, 122 insertions, 1 deletions

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" %}