Merge pull request #18 from prathamesh920/modified_snippet

Modified snippet

2 files changed, 37 insertions, 8 deletions

diff --git a/testapp/static/exam/js/question.js b/testapp/static/exam/js/question.js
index cb6807e..75baf76 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,9 @@ 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 +128,9 @@ 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 +142,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" %}