Merge pull request #4292 from terman/jsinput

Supply initial_state attribute for jsinput tag

common/lib/capa/capa/inputtypes.py

@@ -580,6 +580,7 @@ class JSInput(InputTypeBase):
             Attribute('gradefn', "gradefn"),
             Attribute('get_statefn', None),  # Function to call in iframe
                                              #   to get current state.
+            Attribute('initial_state', None),  # JSON string to be used as initial state
             Attribute('set_statefn', None),  # Function to call iframe to
                                              #   set state
             Attribute('width', "400"),       # iframe width

common/lib/capa/capa/templates/jsinput.html

@@ -3,6 +3,9 @@
     % if saved_state:
     data-stored="${saved_state|x}"
     % endif
+    % if initial_state:
+    data-initial-state="${initial_state|x}"
+    % endif
     % if get_statefn:
     data-getstate="${get_statefn}"
     % endif

common/lib/xmodule/xmodule/templates/problem/jsinput_response.yaml

@@ -38,6 +38,7 @@ data: |
         <jsinput gradefn="WebGLDemo.getGrade"
           get_statefn="WebGLDemo.getState"
           set_statefn="WebGLDemo.setState"
+          initial_state='{"selectedObjects":{"cube":true,"cylinder":false}}'
           width="400"
           height="400"
           html_file="https://studio.edx.org/c4x/edX/DemoX/asset/webGLDemo.html"

common/static/js/capa/src/jsinput.js

@@ -54,6 +54,8 @@ var JSInput = (function ($, undefined) {
             stateSetter = sectionAttr("data-setstate"),
             // Get stored state
             storedState = sectionAttr("data-stored"),
+            // Get initial state
+            initialState = sectionAttr("data-initial-state"),
             // Bypass single-origin policy only if this attribute is "false"
             // In that case, use JSChannel to do so.
             sop = sectionAttr("data-sop"),
@@ -132,9 +134,10 @@ var JSInput = (function ($, undefined) {
         // state to give it. If stateSetter is specified but calling it
         // fails, wait and try again, since the iframe might still be
         // loading.
-        if (stateSetter && storedState) {
+        if (stateSetter && (storedState || initialState)) {
             var stateValue, jsonValue;
 
+            if (storedState) {
                 try {
                     jsonValue = JSON.parse(storedState);
                 } catch (err) {
@@ -146,6 +149,11 @@ var JSInput = (function ($, undefined) {
                 } else {
                     stateValue = jsonValue;
                 }
+            }
+            else {
+                // use initial_state string as the JSON string for stateValue.
+                stateValue = initialState;
+            }
 
             // Try calling setstate every 200ms while it throws an exception,
             // up to five times; give up after that.

docs/en_us/developers/source/extending_platform/javascript.rst

@@ -294,6 +294,9 @@ The following table describes the attributes of the ``jsinput`` element.
      - The function in your JavaScript application that saves the state of the
        objects.
      - ``JSObject.setState``
+   * - initial_state
+     - A JSON string representing the initial state, if any, of the objects.
+     - '{"selectedObjects":{"cube":true,"cylinder":false}}'
    * - width
      - The width of the IFrame in which your JavaScript application will be
        displayed, in pixels.