<problem display_name="Custom Javascript Display and Grading" markdown="null">
  <script type="loncapa/python">
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" width="400" height="400" html_file="https://studio.edx.org/c4x/edX/DemoX/asset/webGLDemo.html" sop="false"/>
  </customresponse>
</problem>