Integrating some of Ike's courseware changes

djangoapps/courseware/content_parser.py

+'''
+courseware/content_parser.py
+
+This file interfaces between all courseware modules and the top-level course.xml file for a course.
+
+Does some caching (to be explained).
+
+'''
+
 import hashlib
 import logging
 import os

djangoapps/courseware/test_files/imageresponse.xml

+<problem>
+<text><p>
+Two skiers are on frictionless black diamond ski slopes.
+Hello</p></text>
+
+<imageresponse max="1" loncapaid="11">
+<imageinput src="/static/Physics801/Figures/Skier-conservation of energy.jpg" width="560" height="388" rectangle="(490,11)-(556,98)"/>
+<text>Click on the image where the top skier will stop momentarily if the top skier starts from rest.</text>
+<imageinput src="/static/Physics801/Figures/Skier-conservation of energy.jpg" width="560" height="388" rectangle="(242,202)-(296,276)"/>
+<text>Click on the image where the lower skier will stop momentarily if the lower skier starts from rest.</text>
+<hintgroup showoncorrect="no">
+<text><p>Use conservation of energy.</p></text>
+</hintgroup>
+</imageresponse>
+</problem>
\ No newline at end of file

static/css/codemirror.css

+.CodeMirror {
+  line-height: 1em;
+  font-family: monospace;
+}
+
+.CodeMirror-scroll {
+  overflow: auto;
+  height: 300px;
+  /* This is needed to prevent an IE[67] bug where the scrolled content
+     is visible outside of the scrolling box. */
+  position: relative;
+  outline: none;
+}
+
+.CodeMirror-gutter {
+  position: absolute; left: 0; top: 0;
+  z-index: 10;
+  background-color: #f7f7f7;
+  border-right: 1px solid #eee;
+  min-width: 2em;
+  height: 100%;
+}
+.CodeMirror-gutter-text {
+  color: #aaa;
+  text-align: right;
+  padding: .4em .2em .4em .4em;
+  white-space: pre !important;
+}
+.CodeMirror-lines {
+  padding: .4em;
+  white-space: pre;
+}
+
+.CodeMirror pre {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  border-width: 0; margin: 0; padding: 0; background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0; margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+}
+
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror textarea {
+  outline: none !important;
+}
+
+.CodeMirror pre.CodeMirror-cursor {
+  z-index: 10;
+  position: absolute;
+  visibility: hidden;
+  border-left: 1px solid black;
+  border-right:none;
+  width:0;
+}
+.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-focused pre.CodeMirror-cursor {
+  visibility: visible;
+}
+
+div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+
+.CodeMirror-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: #a0a;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

static/js/imageinput.js

+/////////////////////////////////////////////////////////////////////////////
+//
+//  Simple image input 
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// click on image, return coordinates
+// put a dot at location of click, on imag
+
+// window.image_input_click = function(id,event){
+
+function image_input_click(id,event){
+    iidiv = document.getElementById("imageinput_"+id);
+    pos_x = event.offsetX?(event.offsetX):event.pageX-document.iidiv.offsetLeft;
+    pos_y = event.offsetY?(event.offsetY):event.pageY-document.iidiv.offsetTop;
+    result = "[" + pos_x + "," + pos_y + "]";
+    cx = (pos_x-15) +"px";
+    cy = (pos_y-15)  +"px" ;
+    // alert(result);
+    document.getElementById("cross_"+id).style.left = cx;
+    document.getElementById("cross_"+id).style.top = cy;
+    document.getElementById("cross_"+id).style.visibility = "visible" ;
+    document.getElementById("input_"+id).value =result;
+}

templates/solutionspan.html

+<section class="solution-span">
+ <span id="solution_${id}"></span>
+</section>

templates/textbox.html

+<section class="text-input">
+  <textarea rows="30" cols="80" name="input_${id}" id="input_${id}">${value|h}</textarea>
+
+  <span id="answer_${id}"></span>
+
+  % if state == 'unsubmitted':
+  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+  % elif state == 'correct': 
+  <span class="correct" id="status_${id}"></span>
+  % elif state == 'incorrect':
+  <span class="incorrect" id="status_${id}"></span>
+  % elif state == 'incomplete':
+  <span class="incorrect" id="status_${id}"></span>
+  % endif
+  <br/>
+  <span class="debug">(${state})</span>
+  <br/>
+  <span class="debug">${msg|n}</span>
+  <br/>
+
+<br/>
+<script>
+// Note: We need to make the area follow the CodeMirror for this to 
+// work. 
+$(function(){
+  var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), 
+                                   {'mode':"python"});
+});
+</script>
+<style type="text/css">
+  .CodeMirror {border-style: solid;
+              border-width: 1px;}
+</style>
+</section>