---
metadata:
    display_name: Custom Javascript Display and Grading
    markdown: !!null
    showanswer: never
data: |
      <problem>
      <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
      JavaScript and some basic Python, and the grading is integrated into the
      edX grading system.
      </p>
      <p>
      The JS Input problem that you create must use HTML, JavaScript, and cascading
      style sheets (CSS). You can use any application creation tool, such as the
      Google Web Toolkit (GWT), to create your JS Input problem.
      </p>
      <p>      
      For more information, see 
      <a href="http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/exercises_tools/custom_javascript.html" target="_blank">
      Custom JavaScript Problem</a> in <i>Building and Running an edX Course</i>.
      </p>
      <p>JavaScript developers should also see <a href="http://edx.readthedocs.org/projects/edx-developer-guide/en/latest/extending_platform/javascript.html" target="_blank">
      Custom JavaScript Applications</a> in the <i>EdX Developer's Guide</i>.</p>
      <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.</p>
      <p>You can use the following example problem as a model.</p>

      <script type="loncapa/python">
      <![CDATA[
      import json
      def vglcfn(e, ans):
        '''
        par 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 "Check" or "Save" registers the current state.

        '''
        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"]
        '''
        # 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"]
        '''
      ]]>
      </script>
      <p>In the following image, click the objects until the cone is yellow 
      and the cube is blue.</p>
      <customresponse cfn="vglcfn">
        <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"
          sop="false"/>
      </customresponse>
      </problem>