Merge pull request #14134 from edx/christina/jsinput-newtemplate

New jsinput example problem

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -389,64 +389,31 @@ div.problem {
       }
     }
 
-    .unanswered {
-      p.status.drag-and-drop--status {
-        @include margin(8px, 0, 0, ($baseline/2));
-        text-indent: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-    }
-
     &.correct, &.ui-icon-check {
-      p.status {
-        @include status-icon($correct, $checkmark-icon);
-      }
-
       input {
         border-color: $correct;
       }
     }
 
     &.partially-correct, &.ui-icon-check {
-      p.status {
-        @include status-icon($partially-correct, $asterisk-icon);
-      }
-
       input {
         border-color: $partially-correct;
       }
     }
 
     &.processing {
-      p.status {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        background: url('#{$static-path}/images/spinner.gif') center center no-repeat;
-      }
-
       input {
         border-color: #aaa;
       }
     }
 
     &.ui-icon-close {
-      p.status {
-        @include status-icon($incorrect, $cross-icon);
-      }
-
       input {
         border-color: $incorrect;
       }
     }
 
     &.incorrect, &.incomplete {
-
-      p.status {
-        @include status-icon($incorrect, $cross-icon);
-      }
-
       input {
         border-color: $incorrect;
       }

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

@@ -1,6 +1,6 @@
 ---
 metadata:
-    display_name: Custom Javascript Display and Grading
+    display_name: Custom JavaScript Display and Grading
     markdown: !!null
     showanswer: never
 data: |
@@ -8,8 +8,8 @@ data: |
           <p>
               In these problems (also called custom JavaScript problems or JS Input
               problems), you add a problem or tool that uses JavaScript in Studio.
-              Studio embeds the problem in an IFrame so that your students can
-              interact with it in the LMS. You can grade your students' work using
+              Studio embeds the problem in an IFrame so that your learners can
+              interact with it in the LMS. You can grade your learners' work using
               JavaScript and some basic Python, and the grading is integrated into the
               edX grading system.
           </p>
@@ -31,42 +31,47 @@ data: |
           <p>
               When you add the problem, be sure to select <strong>Settings</strong>
               to specify a <strong>Display Name</strong> and other values that apply.
+              Also, be sure to specify a <strong>title</strong> attribute on the <strong>jsinput</strong> tag;
+              this title is used for the title attribute on the generated IFrame. Generally,
+              the title attribute on the IFrame should match the title tag of the HTML hosted
+              within the IFrame, which is specified by the <strong>html_file</strong> attribute.
           </p>
           <p>You can use the following example problem as a model.</p>
 
-          <customresponse cfn="vglcfn">
+          <customresponse cfn="check_function">
       <script type="loncapa/python">
       <![CDATA[
       import json
-      def vglcfn(e, ans):
-        '''
-        par is a dictionary that contains two keys, "answer" and "state".
+      def check_function(e, ans):
+        """
+        "response" is a dictionary that contains two keys, "answer" and "state".
         The value of "answer" is the JSON string that "getGrade" returns.
         The value of "state" is the JSON string that "getState" returns.
         Clicking either "Submit" or "Save" registers the current state.
+        """
+        response = json.loads(ans)
 
-        '''
-        par = json.loads(ans)
         # You can use the value of the answer key to grade:
-        answer = json.loads(par["answer"])
-        return answer["cylinder"] and not answer["cube"]
-        '''
+        answer = json.loads(response["answer"])
+        return answer == "correct"
+
         # Or you can use the value of the state key to grade:
-        state = json.loads(par["state"])
-        selectedObjects = state["selectedObjects"]
-        return selectedObjects["cylinder"] and not selectedObjects["cube"]
-        '''
+        """
+        state = json.loads(response["state"])
+        return state["selectedChoice"] == "correct"
+        """
       ]]>
       </script>
-            <p>In the following image, click the objects until the cone is yellow and the cube is blue.</p>
-            <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"
-              title="Spinning Cone and Cube"
+            <p>This is paragraph text displayed before the IFrame.</p>
+            <jsinput
+              gradefn="JSInputDemo.getGrade"
+              get_statefn="JSInputDemo.getState"
+              set_statefn="JSInputDemo.setState"
+              initial_state='{"selectedChoice": "incorrect1", "availableChoices": ["incorrect1", "correct", "incorrect2"]}'
+              width="600"
+              height="100"
+              html_file="https://files.edx.org/custom-js-example/jsinput_example.html"
+              title="Dropdown with Dynamic Text"
               sop="false"/>
           </customresponse>
       </problem>