Updating ImageInput JS code base.

common/lib/capa/capa/templates/imageinput.html

 <span>
-  <input type="hidden" class="imageinput" src="${src}" name="input_${id}" id="input_${id}" value="${value}" />
-  <div id="imageinput_${id}" onclick="image_input_click('${id}',event);" style = "background-image:url('${src}');width:${width}px;height:${height}px;position: relative; left: 0; top: 0;">
-      <img src="${STATIC_URL}green-pointer.png" id="cross_${id}" style="position: absolute;top: ${gy}px;left: ${gx}px;" />
-  </div>
+    <input
+        type="hidden"
+        class="imageinput"
+        src="${src}"
+        name="input_${id}"
+        id="input_${id}"
+        value="${value}"
+    />
 
-  % if status == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
-    <span class="sr">Status: unanswered</span>
-  </span>
-  % elif status == 'correct':
-  <span class="correct" id="status_${id}" aria-describedby="input_${id}">
-    <span class="sr">Status: correct</span>
-  </span>
-  % elif status == 'incorrect':
-  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
-    <span class="sr">Status: incorrect</span>
-  </span>
-  % elif status == 'incomplete':
-  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
-    <span class="sr">Status: incorrect</span>
-  </span>
-  % endif
+    <div
+        id="imageinput_${id}"
+        style="background-image: url('${src}'); width: ${width}px; height: ${height}px; position: relative; left: 0; top: 0;"
+    >
+        <img
+            src="${STATIC_URL}green-pointer.png"
+            id="cross_${id}"
+            style="position: absolute; top: ${gy}px; left: ${gx}px;"
+        />
+    </div>
+
+    <script type="text/javascript" charset="utf-8">
+        (new ImageInput('${id}'));
+    </script>
+
+    % if status == 'unsubmitted':
+        <span
+            class="unanswered"
+            style="display: inline-block;"
+            id="status_${id}"
+            aria-describedby="input_${id}"
+        >
+            <span class="sr">Status: unanswered</span>
+        </span>
+    % elif status == 'correct':
+        <span
+            class="correct"
+            id="status_${id}"
+            aria-describedby="input_${id}"
+        >
+            <span class="sr">Status: correct</span>
+        </span>
+    % elif status == 'incorrect':
+        <span
+            class="incorrect"
+            id="status_${id}"
+            aria-describedby="input_${id}"
+        >
+            <span class="sr">Status: incorrect</span>
+        </span>
+    % elif status == 'incomplete':
+        <span
+            class="incorrect"
+            id="status_${id}"
+            aria-describedby="input_${id}"
+        >
+            <span class="sr">Status: incorrect</span>
+        </span>
+    % endif
 </span>

common/lib/xmodule/xmodule/js/src/capa/imageinput.js

@@ -13,24 +13,50 @@
  * ~ Chinese Proverb
  */
 
-window.image_input_click = function (id, event) {
-    var iiDiv = document.getElementById('imageinput_' + id),
+window.ImageInput = (function ($, undefined) {
+    var ImageInput = ImageInputConstructor;
 
-        posX = event.offsetX ? event.offsetX : event.pageX - iiDiv.offsetLeft,
-        posY = event.offsetY ? event.offsetY : event.pageY - iiDiv.offsetTop,
+    ImageInput.prototype = {
+        constructor: ImageInputConstructor,
+        clickHandler: clickHandler
+    };
 
-        cross = document.getElementById('cross_' + id),
+    return ImageInput;
 
-        // To reduce differences between values returned by different kinds of
-        // browsers, we round `posX` and `posY`.
-        //
-        // IE10: `posX` and `posY` - float.
-        // Chrome, FF: `posX` and `posY` - integers.
-        result = '[' + Math.round(posX) + ',' + Math.round(posY) + ']';
+    function ImageInputConstructor(elementId) {
+        var _this = this;
 
-    cross.style.left = (posX - 15) + 'px';
-    cross.style.top = (posY - 15) + 'px';
-    cross.style.visibility = 'visible';
+        this.elementId = elementId;
+        this.el = $('#imageinput_' + elementId);
 
-    document.getElementById('input_' + id).value = result;
-};
+        this.el.on('click', function (event) {
+            _this.clickHandler(event);
+        });
+    }
+
+    function clickHandler(event) {
+        var iiDiv = document.getElementById('imageinput_' + this.elementId),
+
+            posX = event.offsetX ?
+                event.offsetX : event.pageX - iiDiv.offsetLeft,
+            posY = event.offsetY ?
+                event.offsetY : event.pageY - iiDiv.offsetTop,
+
+            cross = document.getElementById('cross_' + this.elementId),
+
+            // To reduce differences between values returned by different kinds
+            // of browsers, we round `posX` and `posY`.
+            //
+            // IE10: `posX` and `posY` - float.
+            // Chrome, FF: `posX` and `posY` - integers.
+            result = '[' + Math.round(posX) + ',' + Math.round(posY) + ']';
+
+        console.log('[image_input_click]: event = ', event);
+
+        cross.style.left = (posX - 15) + 'px';
+        cross.style.top = (posY - 15) + 'px';
+        cross.style.visibility = 'visible';
+
+        document.getElementById('input_' + this.elementId).value = result;
+    }
+}).call(this, window.jQuery);