67 lines
2.9 KiB
YAML
67 lines
2.9 KiB
YAML
---
|
|
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> |