From 6ab170ff9a530c2d59d4ce4a826c0fcaf9ec246f Mon Sep 17 00:00:00 2001
From: Hardik Ghaghada
Date: Tue, 11 Jun 2013 17:40:29 +0530
Subject: Implemented tabs for indentation for snippets

---
 testapp/static/exam/js/add_question.js    |  86 ++++++++++++++++++++++--
 testapp/static/exam/js/edit_question.js   | 104 ++++++++++++++++++++++++------
 testapp/static/exam/js/question.js        |  33 ----------
 testapp/templates/exam/add_question.html  |   2 +-
 testapp/templates/exam/edit_question.html |   2 +-
 5 files changed, 170 insertions(+), 57 deletions(-)

diff --git a/testapp/static/exam/js/add_question.js b/testapp/static/exam/js/add_question.js
index 24af127..ab27dc0 100644
--- a/testapp/static/exam/js/add_question.js
+++ b/testapp/static/exam/js/add_question.js
@@ -22,14 +22,82 @@ function decrease(frm)
 	
 }
 
-function textareaformat()
+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();
+	    }
+	}
+    }
+}
 
+function textareaformat()
+{
 	document.getElementById('id_type').setAttribute('class','select-type');
-	
 	document.getElementById('id_points').setAttribute('class','mini-text');
     document.getElementById('id_tags').setAttribute('class','tag-text');
-
+    
+    jQuery().ready(function() 
+        { 
+            $("#id_snippet").val("#To avoid indentation errors use tabs for indentation for Python questions");
+        });
+	
+	$('#id_snippet').bind('keydown', function( event ){
+         if(navigator.userAgent.match("Gecko"))
+		{
+			c=event.which;
+		}
+		else
+		{
+			c=event.keyCode;
+		}
+		if(c==9)
+		{
+			replaceSelection(document.getElementById('id_snippet'),String.fromCharCode(9));
+			setTimeout(document.getElementById('id_snippet'),0);	
+			return false;
+		}
+      });	
 	$('#id_description').bind('focus', function( event ){
          document.getElementById("id_description").rows=5;
          document.getElementById("id_description").cols=40;
@@ -62,6 +130,17 @@ function textareaformat()
          document.getElementById("id_options").rows=1;
          document.getElementById("id_options").cols=40;
       });
+      $('#id_snippet').bind('focus', function( event ){
+         document.getElementById("id_snippet").rows=5;
+         document.getElementById("id_snippet").cols=40;
+         $('#id_snippet').val("");
+      });
+
+	$('#id_snippet').bind('blur', function( event ){
+         document.getElementById("id_snippet").rows=1;
+         document.getElementById("id_snippet").cols=40;
+         $('#id_snippet').val("#To avoid indentation errors use tabs for indentation for Python questions");
+      });
 	
 	$('#id_type').bind('change',function(event){
 		var value = document.getElementById('id_type').value;
@@ -77,7 +156,6 @@ function textareaformat()
 			document.getElementById('label_option').innerHTML = "";
 		}
 	});
-
 		document.getElementById('my').innerHTML = document.getElementById('id_description').value ;
 		var value = document.getElementById('id_type').value;
 		if(value == 'mcq')
diff --git a/testapp/static/exam/js/edit_question.js b/testapp/static/exam/js/edit_question.js
index acba384..023b654 100644
--- a/testapp/static/exam/js/edit_question.js
+++ b/testapp/static/exam/js/edit_question.js
@@ -46,6 +46,54 @@ function grade_data(showHideDiv)
        }
 }
 
+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();
+	    }
+	}
+    }
+}
 
 function data(showContent,showHideDiv,a,summary)
 {
@@ -71,61 +119,84 @@ function textareaformat()
 	var test =  document.getElementsByName('test');
 	var option =  document.getElementsByName('options');
 	var descriptions = document.getElementsByName('description');
+	var snippets = document.getElementsByName('snippet');
 	var type = document.getElementsByName('type');
     var tags = document.getElementsByName('tags');
-	
 	for (var i=0;i<point.length;i++)
 	{
 		point[i].id = point[i].id + i;
 		descriptions[i+1].id=descriptions[i+1].id + i;
 		test[i].id=test[i].id + i;
+		snippets[i].id=snippets[i].id + i; 
 		option[i].id=option[i].id + i;
 		type[i].id = type[i].id + i;
         tags[i].id = tags[i].id + i;
 	}
-
 	for(var i=0;i<point.length;i++)
 	{
 		var point_id = document.getElementById('id_points'+i);
 		point_id.setAttribute('class','mini-text');
-    
         var tags_id = document.getElementById('id_tags'+i);
 		tags_id.setAttribute('class','ac_input');
         tags_id.setAttribute('autocomplete','off');
-       
-        jQuery().ready(function() 
-        { 
-            jQuery("#id_tags" + i).autocomplete("/taggit_autocomplete_modified/json", { multiple: true }); 
-        });
-    		
         var type_id = document.getElementById('id_type'+i);
 		type_id.setAttribute('class','select-type');
 		type_id.onchange = showOptions;
 		var value = type_id.value;
-	
 		var desc_id = document.getElementById('id_description'+i);
 		desc_id.onfocus = gainfocus;
 		desc_id.onblur = lostfocus;
-
 		var test_id = document.getElementById('id_test' + i);
 		test_id.onfocus = gainfocus;
 		test_id.onblur = lostfocus;
-
+		var snippet_id = document.getElementById('id_snippet'+i);
+		$(snippet_id).bind('focus',function(event){
+			this.rows = 5;
+			$(snippet_id).val("");
+		});
+		$(snippet_id).bind('blur',function(event){
+			this.rows = 1;
+			$(snippet_id).val("#To avoid indentation errors use tab for indentation for Python questions");
+		});
+		$(snippet_id).bind('keydown', function (event){
+			catchTab(snippet_id,event);
+		});
 		var option_id = document.getElementById('id_options' + i);
 		option_id.onfocus = gainfocus;
-		option_id.onblur = lostfocus;
-		
+		option_id.onblur = lostfocus;		
 		if(value != 'mcq')
 		{
 			document.getElementById('id_options'+i).style.visibility='hidden';
 			document.getElementById('label_option'+(i+1)).innerHTML = "";
 
 		}
-
 		document.getElementById('my'+ (i+1)).innerHTML = desc_id.value;
+		jQuery().ready(function() 
+        { 
+            jQuery("#id_tags" + i).autocomplete("/taggit_autocomplete_modified/json", { multiple: true });
+            $(snippet_id).val("#To avoid indentation errors use tab for indentation for Python questions");
+        });
 	}
 }
 
+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;
+    }
+}
+
 function showOptions(e)
 {
 		var value = this.value;
@@ -141,9 +212,6 @@ function showOptions(e)
 			document.getElementById('id_options'+no).style.visibility = 'hidden';
 			document.getElementById('label_option'+ (no+1)).innerHTML = "";
 		}
-		
-
-
 }
 
 function gainfocus(e)
diff --git a/testapp/static/exam/js/question.js b/testapp/static/exam/js/question.js
index eaba0d4..dc37ea4 100644
--- a/testapp/static/exam/js/question.js
+++ b/testapp/static/exam/js/question.js
@@ -127,39 +127,6 @@ function addLineNumbers(id)
     lineObj.innerHTML = string;
 }
        
-/*function snippetTextArea(id)
-{
-    var el = document.createElement('DIV');
-    var ta = document.getElementById(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';
-    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 = '';
-    split_content = content.split('\n');
-    for(var no=1;no<=split_content.length;no++)
-    {
-	if(string.length>0)string = string + '<br>';
-	string = string + no;
-    }
-    lineObj.innerHTML = string;
-}*/
-       
 function positionLineObj(obj,ta)
 {
     obj.style.top = (ta.scrollTop * -1 + lineObjOffsetTop) + 'px';  
diff --git a/testapp/templates/exam/add_question.html b/testapp/templates/exam/add_question.html
index e3ba17a..b49d7de 100644
--- a/testapp/templates/exam/add_question.html
+++ b/testapp/templates/exam/add_question.html
@@ -22,7 +22,7 @@
   {% csrf_token %}
   <center><table class=span1>
   <tr><td>Summary: <td>{{ form.summary }}{{ form.summary.errors }}
-  <tr><td>Points:<td><button class="btn-mini" type="button" onClick="increase(frm);">+</button>{{ form.points }}<button class="btn-mini" type="button" onClick="decrease(frm);"">-</button>{{ form.points.errors }} &nbsp; Active: &nbsp; {{ form.active }}{{form.active.errors}} &nbsp; Type: &nbsp;{{ form.type }}{{form.type.errors}}
+  <tr><td>Points:<td><button class="btn-mini" type="button" onClick="increase(frm);">+</button>{{ form.points }}<button class="btn-mini" type="button" onClick="decrease(frm);">-</button>{{ form.points.errors }} &nbsp; Active: &nbsp; {{ form.active }}{{form.active.errors}} &nbsp; Type: &nbsp;{{ form.type }}{{form.type.errors}}
   <tr><td><strong>Rendered: </strong><td><p id='my'></p>
   <tr><td>Description: <td>{{ form.description}}  {{form.description.errors}}
   <tr><td>Test: <td>{{ form.test }}{{form.test.errors}}
diff --git a/testapp/templates/exam/edit_question.html b/testapp/templates/exam/edit_question.html
index 96502f1..73e61d7 100644
--- a/testapp/templates/exam/edit_question.html
+++ b/testapp/templates/exam/edit_question.html
@@ -31,7 +31,7 @@
 	      <center><table class=span1>
                  <tr><td><b>Summary:</b> <td>{{ form.summary }}{{ form.summary.errors }}
  
-                 <tr><td><b>Points:<td><button class="btn-mini" name={{forloop.counter}} type="button" onClick="increase(frm,{{forloop.counter}});">+</button>{{ form.points }}<button class="btn-mini" type="button" onClick="decrease(frm,{{forloop.counter}});"">-</button>{{ form.points.errors }} &nbsp; Active: &nbsp; {{ form.active }}{{form.active.errors}} &nbsp; Type: &nbsp;{{ form.type }}{{form.type.errors}}
+                 <tr><td><b>Points:<td><button class="btn-mini" name={{forloop.counter}} type="button" onClick="increase(frm,{{forloop.counter}});">+</button>{{ form.points }}<button class="btn-mini" type="button" onClick="decrease(frm,{{forloop.counter}});">-</button>{{ form.points.errors }} &nbsp; Active: &nbsp; {{ form.active }}{{form.active.errors}} &nbsp; Type: &nbsp;{{ form.type }}{{form.type.errors}}
 
                  <tr><td><strong>Rendered: </strong><td><p id='my{{forloop.counter}}'></p>
                  <tr><td><b>Description: <td>{{ form.description }}  {{form.description.errors}}
-- 
cgit