Re-created styling for AI-XML authoring

openassessment/xblock/static/js/spec/studio/oa_edit.js

@@ -93,4 +93,32 @@ describe("OpenAssessment.StudioView", function() {
             }
         });
     });
+
+    it("installs checkbox listeners with callback", function () {
+        this.funct = function(){};
+
+        spyOn(this, 'funct');
+
+        var toggler = new OpenAssessment.ToggleControl(
+            view.element,
+            "#ai_assessment_description_closed",
+            "#ai_assessment_settings_editor"
+        );
+
+        toggler.show();
+        toggler.hide();
+        expect(this.funct.calls.length).toEqual(0);
+
+        toggler = new OpenAssessment.ToggleControl(
+            view.element,
+            "#ai_assessment_description_closed",
+            "#ai_assessment_settings_editor",
+            this.funct
+        );
+
+        toggler.show();
+        toggler.hide();
+        expect(this.funct.calls.length).toEqual(2);
+
+    });
 });

openassessment/xblock/static/js/src/studio/oa_edit.js

@@ -97,8 +97,9 @@ OpenAssessment.StudioView.prototype = {
         }
         // Initialize JQuery UI Tabs, and activates the appropriate tab.
         $(".openassessment_editor_content_and_tabs", this.element)
-            .tabs()
-            .tabs('option', 'active', OpenAssessment.lastOpenEditingTab);
+            .tabs({
+                active: OpenAssessment.lastOpenEditingTab
+            });
     },
 
     /**

openassessment/xblock/static/js/src/studio/oa_edit_assessment.js

@@ -372,10 +372,20 @@ OpenAssessment.EditExampleBasedAssessmentView = function(element) {
     this.element = element;
     this.name = "example-based-assessment";
 
+    this.codeBox = CodeMirror.fromTextArea(
+        $(element).find('#ai_training_examples').first().get(0),
+        {mode: "xml", lineNumbers: true, lineWrapping: true}
+    );
+
+    var view = this;
+
     new OpenAssessment.ToggleControl(
         this.element,
         "#ai_assessment_description_closed",
-        "#ai_assessment_settings_editor"
+        "#ai_assessment_settings_editor",
+        function () {
+            view.codeBox.refresh();
+        }
     ).install("#include_ai_assessment");
 };
 

openassessment/xblock/static/js/src/studio/oa_edit_fields.js

@@ -21,6 +21,7 @@ OpenAssessment.Fields = {
 
 /**
 Show and hide elements based on a checkbox.
+Optionally includes a function to call when the checkbox is changed.
 
 Args:
     element (DOM element): The parent element, used to scope the selectors.
@@ -28,11 +29,18 @@ Args:
         to show when the checkbox is in the "off" state.
     shownSelector (string): The CSS selector string for elements
         to show when the checkbox is in the "on" state.
+    updateFunction (function): OPTIONAL (defaults to function(){})
+        a parameter-less function to execute after control has been toggled
 **/
-OpenAssessment.ToggleControl = function(element, hiddenSelector, shownSelector) {
+OpenAssessment.ToggleControl = function(element, hiddenSelector, shownSelector, updateFunction) {
     this.element = element;
     this.hiddenSelector = hiddenSelector;
     this.shownSelector = shownSelector;
+    if (typeof updateFunction === "undefined"){
+        this.updateFunction = function () {};
+    } else {
+        this.updateFunction = updateFunction;
+    }
 };
 
 OpenAssessment.ToggleControl.prototype = {
@@ -60,11 +68,13 @@ OpenAssessment.ToggleControl.prototype = {
     show: function() {
         $(this.hiddenSelector, this.element).addClass('is--hidden');
         $(this.shownSelector, this.element).removeClass('is--hidden');
+        this.updateFunction();
     },
 
     hide: function() {
         $(this.hiddenSelector, this.element).removeClass('is--hidden');
         $(this.shownSelector, this.element).addClass('is--hidden');
+        this.updateFunction();
     }
 };