add initial_state attribute to 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

@@ -36,6 +36,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,19 +134,25 @@ 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;
 
-            try {
-              jsonValue = JSON.parse(storedState);
-            } catch (err) {
-              jsonValue = storedState;
-            }
+            if (storedState) {
+                try {
+                    jsonValue = JSON.parse(storedState);
+                } catch (err) {
+                    jsonValue = storedState;
+                }
 
-            if (typeof(jsonValue) === "object") {
-                stateValue = jsonValue["state"];
-            } else {
-                stateValue = jsonValue;
+                if (typeof(jsonValue) === "object") {
+                    stateValue = jsonValue["state"];
+                } 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,

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.
@@ -309,4 +312,4 @@ The following table describes the attributes of the ``jsinput`` element.
    * - sop
      - The same-origin policy (SOP), meaning that all elements have the same
        protocol, host, and port. To bypass the SOP, set to ``true``.
-     - false
+     - false