11.8. Custom JavaScript Display and Grading Problem¶

11.8.1.1. Recreate the Example Problem¶

To recreate the example problem above, you need the following files.

• webGLDemo.html
• webGLDemo.js
• webGLDemo.css
• three.min.js

To download these files in a .zip archive, go to http://files.edx.org/JSInput.zip.

1. Download and unpackage the files in either the JSInput.zip file or the JSInput_BypassSOP.zip file.
2. On the Files & Uploads page, upload all the files from the .zip file.
3. Create a new custom JavaScript display and grading problem component.
4. Select Settings, and then set Maximum Attempts to a number larger than zero.
5. In the problem component editor, replace the example code with the code below.
6. Select Save.

11.8.1.2. JavaScript Input Problem Code¶

<problem>
<customresponse cfn="vglcfn">
<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.
   """
   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 image below, 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"
        width="400"
        height="400"
        html_file="/static/webGLDemo.html"
    />
</customresponse>
</problem>

11.8.2.1. Template¶

The following is the basic format of a JSInput problem.

<problem>
       <script type="loncapa/python">
def all_true(exp, ans): return ans == "hi"
       </script>
       <customresponse cfn="all_true">
           <jsinput gradefn="gradefn"
               height="500"
               get_statefn="getstate"
               set_statefn="setstate"
               html_file="/static/jsinput.html"/>
       </customresponse>
</problem>

The accepted attributes are:

11.8.2.2. Required Attributes¶

• html_file

  The html_file attribute specifies the HTML file that the iframe will point to. The HTML file must be located in the content directory.

  The iframe is created using the sandbox attribute. Although pop-ups, scripts, and pointer locks are allowed, the iframe cannot access its parent’s attributes.

  The HTML file must contain a gradefn function that the JSInput file can access. To determine whether the gradefn function is accessible, in the console, make sure that gradefn returns the right thing. When JSInput uses the gradefn function, gradefn is called with gradefn.call(obj), where obj is the object-part of gradefn. For example, if gradefn is myprog.myfn, JSInput calls myprog.myfun.call(myprog). (This is to ensure “this” continues to refer to what gradefn expects.)

  Aside from that, more or less anything goes. Note that currently there is no support for inheriting CSS or JavaScript from the parent (aside from the Chrome-only seamless attribute, which is set to True by default).

• gradefn

  The gradefn attribute specifies the name of the function that will be called when a user selects Submit, and that returns the learner’s answer. Unless both the get_statefn and set_statefn attributes are also used, this answer is passed as a string to the enclosing response type. In the customresponse example above, this means cfn will be passed this answer as ans.

  If the gradefn function throws an exception when a learner attempts to submit a problem, the submission is aborted, and the learner receives a generic alert. The alert can be customized by making the exception name Waitfor Exception; in that case, the alert message will be the exception message.

  Important

  To make sure the learner’s latest answer is passed correctly, make sure that the gradefn function is not asynchronous. Additionally, make sure that the function returns promptly. Currently the learner has no indication that her answer is being calculated or produced.

11.8.2.3. Optional Attributes¶

• set_statefn

  Sometimes a problem author will want information about a learner’s previous answers (“state”) to be saved and reloaded. If the attribute set_statefn is used, the function given as its value will be passed the state as a string argument whenever there is a state, and the learner returns to a problem. The function has the responsibility to then use this state appropriately.

  The state that is passed is:

  • The previous output of gradefn (i.e., the previous answer) if get_statefn is not defined.
  • The previous output of get_statefn (see below) otherwise.

  It is the responsibility of the iframe to do proper verification of the argument that it receives via set_statefn.

• get_statefn

  Sometimes the state and the answer are quite different. For instance, a problem that involves using a javascript program that allows the learner to alter a molecule may grade based on the molecule’s hydrophobicity, but from the hydrophobicity it might be incapable of restoring the state. In that case, a separate state may be stored and loaded by set_statefn. Note that if get_statefn is defined, the answer (i.e., what is passed to the enclosing response type) will be a json string with the following format:

  {
      answer: `[answer string]`
      state: `[state string]`
  }
  

  The enclosing response type must then parse this as json.

• height and width

  The height and width attributes are straightforward: they specify the height and width of the iframe. Both are limited by the enclosing DOM elements, so for instance there is an implicit max-width of around 900.

  In the future, JSInput may attempt to make these dimensions match the HTML file’s dimensions (up to the aforementioned limits), but currently it defaults to 500 and 400 for height and width, respectively.