Modified snippet

Snippet textarea extends according to the length of the snippet
with numbering.
The textarea to write code is dynamic with numbering. The
textarea extends as per the length of the code.

2 files changed, 39 insertions, 8 deletions

diff --git a/testapp/static/exam/js/question.js b/testapp/static/exam/js/question.js
index cb6807e..2bf6f60 100644
--- a/testapp/static/exam/js/question.js
+++ b/testapp/static/exam/js/question.js
@@ -58,6 +58,17 @@ function replaceSelection (input, replaceString)
     }
 }
 
+function autoresize()
+{
+    var ta = document.getElementById('answer');
+    var divta = document.getElementById('AnswerWithLines');
+    ta.style.height="";
+    var height = ta.scrollHeight;
+    ta.style.height = 'auto';
+    ta.style.height = height+'px';
+    divta.style.height = height+'px';
+}
+
 function catchTab(item,e)
 {
     if(navigator.userAgent.match("Gecko"))
@@ -76,7 +87,7 @@ function catchTab(item,e)
     }
 }
 
-var lineObjOffsetTop = 2;
+var lineObjOffsetTop = 0;
 
 function addLineNumbers(id)
 {
@@ -85,19 +96,20 @@ function addLineNumbers(id)
     var content = document.getElementById('snippet').value;
     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';
+    ta.scrollHeight=""
+    el.style.border = 'none';
     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';
+    lineObj.style.fontSize= '18px';
+    lineObj.style.foregroundColor='black';
     el.insertBefore(lineObj,ta);
     lineObj.style.textAlign = 'right';
     lineObj.className='lineObj';
@@ -105,6 +117,10 @@ function addLineNumbers(id)
     split_content = content.split('\n');
     if(id == "answer")
     {
+                el.className='AnswerWithLines';
+                el.id='AnswerWithLines';
+                el.style.height = (ta.scrollHeight) + 'px';
+
 		for(var no=split_content.length+1;no<1000;no++)
 		{
 			if(string.length>0)string = string + '<br>';
@@ -113,6 +129,10 @@ function addLineNumbers(id)
 	}
 	else
 	{
+                el.className='SnippetWithLines';
+                el.id='SnippetWithLines';
+                el.style.height = (ta.scrollHeight) + 'px';
+
 		for(var no=1;no<=split_content.length;no++)
 		{
 			if(string.length>0)string = string + '<br>';
@@ -124,6 +144,7 @@ function addLineNumbers(id)
     ta.onblur = function() { positionLineObj(lineObj,ta); };
     ta.onfocus = function() { positionLineObj(lineObj,ta); };
     ta.onmouseover = function() { positionLineObj(lineObj,ta); };
+    ta.onkeyup = function(){autoresize();};
     lineObj.innerHTML = string;
 }
        
diff --git a/testapp/templates/exam/question.html b/testapp/templates/exam/question.html
index 529b620..c8454ff 100644
--- a/testapp/templates/exam/question.html
+++ b/testapp/templates/exam/question.html
@@ -39,12 +39,22 @@ function update_time()
 	document.forms["code"].submit();
     }	
 }
+
+function setSnippetHeight()
+{
+    var ta = document.getElementById('snippet');
+    var height = ta.scrollHeight+'px';
+    ta.style.height = 'auto';
+    ta.style.height = height;
+    autoresize();
+}
+
 </script>
 {% endblock script %}
 
 
 
-{% block onload %} onload="update_time()" {% endblock %}
+{% block onload %} onload="update_time();setSnippetHeight()" {% endblock %}
 
 {% block pagetitle %}
 
@@ -98,15 +108,15 @@ function update_time()
          {% endfor %}
          {% else %}
 
-         <textarea tabindex=1 rows="3" style="width:750px;margin-bottom:15px;height:auto;" readonly=yes name="snippet" id="snippet" wrap="off">{% if last_attempt %}{{ question.snippet }}{% else %}{% if question.type == "bash" %} #!/bin/bash&#13;&#10;{{ question.snippet }}{% else %}{{ question.snippet }}{% endif %}{% endif %}</textarea>
+         <textarea rows="1" style="padding:0;height:auto;width:750px;overflow:hidden;background-color:white;border: 0 none white;" readonly="yes"  name="snippet" id="snippet" wrap="off">{% if last_attempt %}{{ question.snippet }}{% else %}{% if question.type == "bash" %} #!/bin/bash&#13;&#10;{{ question.snippet }}{% else %}{{ question.snippet }}{% endif %}{% endif %}</textarea>
         
-         <textarea tabindex=1 rows="10" style="width:750px;margin-bottom:10px;" name="answer" id="answer" wrap="off" onkeydown="return catchTab(this,event)">{% if last_attempt %}{{last_attempt}}{% else %}{% if question.type == "bash" %}{% else %}{% endif %}{% endif %}</textarea>
+         <textarea tabindex=1 rows="10" style="padding:0;height:auto; box-shadow: none;width:750px;margin-bottom:10px;overflow:hidden;border:none;" name="answer" id="answer" wrap="off" onkeydown="return catchTab(this,event)">{% if last_attempt %}{{last_attempt}}{% else %}{% if question.type == "bash" %}{% else %}{% endif %}{% endif %}</textarea>
 <br>
 
  <script type="text/javascript">
        addLineNumbers('answer');
        </script>
-       <script>addLineNumbers('snippet');</Script>
+       <script>addLineNumbers('snippet');</script>
          {% endif %}
 
          {% if question.type == "mcq" %}