Add codemirror

3 files changed, 57 insertions, 19 deletions

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index efa1d58..17df0d9 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -31,8 +31,8 @@
 
   {% block css %}
   {% endblock %}
-  <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap.min.js"></script>
   <script language="JavaScript" type="text/javascript" src="{{ URL_ROOT }}/static/yaksh/js/jquery-1.4.2.min.js"></script>
+  <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap.min.js"></script>
   {% block script %}
   {% endblock %}
 </head>
diff --git a/yaksh/templates/yaksh/add_question.html b/yaksh/templates/yaksh/add_question.html
index d38aa1c..255deaa 100644
--- a/yaksh/templates/yaksh/add_question.html
+++ b/yaksh/templates/yaksh/add_question.html
@@ -25,6 +25,7 @@
     <tr><td><strong>Rendered: </strong><td><p id='my'></p>
   <tr><td>Description: <td>{{ form.description}}  {{form.description.errors}}
   <tr><td>Tags: <td>{{ form.tags }}
+  <tr><td>Snippet: <td>{{ form.snippet }}
   <tr><td> Test Case Type: <td> {{ form.test_case_type }}{{ form.test_case_type.errors }}
 
   <div class="form-group">
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index 8a67818..110c422 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -6,13 +6,16 @@
 
 {% block css %}
 <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/question.css" type="text/css" />
-
+<link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/codemirror/lib/codemirror.css" type="text/css" />
 {% endblock %}
 
 {% block script %}
-<script src="{{ URL_ROOT }}/static/yaksh/js/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="{{ URL_ROOT }}/static/yaksh/js/question.js"></script>
 <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap-modal.js"></script>
+<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/lib/codemirror.js"></script>
+<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/mode/python/python.js"></script>
+<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/mode/clike/clike.js"></script>
+<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/mode/shell/shell.js"></script>
 
 <script>
 var time_left = {{ paper.time_left }}
@@ -63,14 +66,14 @@ updateClock();
 var timeinterval = setInterval(updateClock,1000);
 }
 
-function setSnippetHeight()
-{
-    var ta = document.getElementById('snippet');
-    var height = ta.scrollHeight+'px';
-    ta.style.height = 'auto';
-    ta.style.height = height;
-    autoresize();
-}
+// function setSnippetHeight()
+// {
+//     var ta = document.getElementById('snippet');
+//     var height = ta.scrollHeight+'px';
+//     ta.style.height = 'auto';
+//     ta.style.height = height;
+//     autoresize();
+// }
 
 function validate(){
     uploaded_file = document.getElementById("assignment").value;
@@ -109,7 +112,7 @@ function call_skip(url)
 
 {% endblock script %}
 
-{% block onload %} onload="updateTime();setSnippetHeight()" {% endblock %}
+{% block onload %} onload="updateTime();" {% endblock %}
 
 {% block content %}
 <div class="topbar">
@@ -149,7 +152,7 @@ function call_skip(url)
   <br><font size=3 face=arial> Language: {{ question.language }} </font><br>
 
   {% if question.type == "code" %}
-  <br><h3>Output:</h3></br>
+  <br><h4>Output:</h4></br>
     {% if error_message %}
     <div class="alert alert-error">
       <textarea class="error" readonly="yes">{{ error_message }}</textarea>
@@ -181,15 +184,17 @@ function call_skip(url)
          <hr>
          {% endif %}
          {% if question.type == "code" %}
-        <h3>Program:</h3>
-        <textarea rows="1" class="bash" 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="10" class="bash" 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>
+
+         <h4>Program:</h4>
+<!--         <textarea rows="1" class="bash" 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="10" class="bash" 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 name="answer" id="answer"></textarea> 
 <br>
 
- <script type="text/javascript">
+<!--  <script type="text/javascript">
        addLineNumbers('answer');
    </script>
-       <script>addLineNumbers('snippet');</script>
+       <script>addLineNumbers('snippet');</script> -->
          {% endif %}
  
          {% if question.type == "mcq" or question.type == "mcc "%}
@@ -200,8 +205,9 @@ function call_skip(url)
          <button class="btn" type="submit" name="check" id="check" onClick="submitCode();">Check Answer</button>&nbsp;&nbsp;
          {% endif %}
          {% if paper.unanswered.all|length != 1 %}
-             <button class="btn"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/')" name="skip" id="skip">Attempt Later</button>
+             <button class="btn"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/')" name="skip" id="skip">Attempt Later</button>&nbsp;&nbsp;
          {% endif %}
+         <button class="btn" type="button" onclick="reset_editor()" name="reset" id="reset">Reset Answer</button>
          </form>
 </div>     
 
@@ -225,4 +231,35 @@ function call_skip(url)
         {% csrf_token %}
         <button class="btn" type="submit" name="quit">Quit Exam</button>
 	</form>
+
+<script>
+  // Codemirror object, language modes and initial content
+
+  // Get the textarea node
+  var textarea_node = document.querySelector('#answer');
+
+  // Code mirror Options
+  var options = {
+      mode: "{{ question.language }}",
+      gutter: true,
+      lineNumbers: true,
+   
+      onChange: function (instance, changes) {
+          render();
+      }
+  };
+
+  // Initialize the codemirror editor
+  var editor = CodeMirror.fromTextArea(textarea_node, options);
+
+  // Setting code editors initial content
+  editor.setValue('{{last_attempt|safe}}') //.replace(/\"|\'/g, "\'") // .replace(/^\"|\"$/g, "")
+
+  function reset_editor() {
+      // editor.setValue('{{ last_attempt|safe }}');
+      editor.clearHistory();
+  }
+
+</script>
+
 {% endblock content %}