---
metadata:
    display_name: Custom Javascript Display and Grading
    markdown: !!null
data: |
      <problem display_name="webGLDemo">
      <script type="loncapa/python">
      <![CDATA[
      import json
      def vglcfn(e, ans):
        '''
        par is a dictionary containing two keys, "answer" and "state"
        The value of answer is the JSON string returned by getGrade
        The value of state is the JSON string returned by getState
        '''
        par = json.loads(ans)
        # We can use either the value of the answer key to grade
        answer = json.loads(par["answer"])
        return answer["cylinder"] and not answer["cube"]
        '''
        # Or we could use the value of the state key
        state = json.loads(par["state"])
        selectedObjects = state["selectedObjects"]
        return selectedObjects["cylinder"] and not selectedObjects["cube"]
        '''
      ]]>
      </script>
      <p>
      The shapes below can be selected (yellow) or unselected (cyan).
      Clicking on them repeatedly will cycle through these two states.
      </p>
      <p>
      If the cone is selected (and not the cube), a correct answer will be
      generated after pressing "Check". Clicking on either "Check" or "Save"
      will register the current state.
      </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>