Markhoeber/documentation/glossary

docs/course_authors/source/advanced_problems.rst

@@ -17,10 +17,10 @@ templates for these problems, but the problems open directly in the
    create. These problems can be any type.
 -  :ref:`Drag and Drop` Drag and drop problems require students to drag text
    or objects to a specific location on an image.
--  :ref:`JavaScript Input` JavaScript input problems allow you to incorporate
-   problem types that you've created in HTML into Studio via an IFrame.
 -  :ref:`Image Mapped Input` Image mapped input problems require students to
    click a specific location on an image.
+-  :ref:`JavaScript Input` JavaScript input problems allow you to incorporate
+   problem types that you've created in HTML into Studio via an IFrame.
 -  :ref:`Math Expression Input` Math expression input problems require
    students to enter a mathematical expression as text, such as
    e=m\*c^2.
@@ -136,6 +136,120 @@ To create a image mapped input problem:
 #. In the component editor, replace the example code with your own code.
 #. Click **Save**.
 
+.. _JavaScript Input:
+
+JavaScript Input
+----------------
+
+The JavaScript Input problem type allows you to create your own learning tool 
+using HTML and other standard Internet languages and then add the tool directly 
+into Studio. When you use this problem type, Studio embeds your tool 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.
+
+This problem type doesn't appear in the menu of advanced problems in Studio. To
+create a JavaScript input problem type, you'll create a blank advanced problem,
+and then enter your code into the component editor.
+
+.. image:: /Images/JavaScriptInputExample.gif
+
+Create a JavaScript Input Problem
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+#. Create your JavaScript application, and then upload all files associated with
+   that application to the **Files & Uploads** page.
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Blank Advanced Problem**.
+#. In the component that appears, click **Edit**.
+#. Click the **Settings** tab.
+#. Set **Maximum Attempts** to a number larger than zero.
+#. In the component editor, enter your code.
+#. Click **Save**.
+
+To re-create the example problem above, follow these steps.
+
+#. Go to :ref:`Appendix F` and use the code samples to create the following files:
+
+   - webGLDemo.html
+   - webGLDemo.js
+   - webGLDemo.css
+   - three.min.js
+
+#. On the **Files & Uploads** page, upload the four files you just created.
+#. Create a new blank advanced problem component.
+#. On the **Settings** tab, set **Maximum Attempts** to a number larger than 
+   zero.
+#. In the problem component editor, paste the code below.
+#. Click **Save.**
+
+
+
+JavaScript Input Problem Code
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+:: 
+
+    <problem display_name="webGLDemo">
+    In the image below, click the cone.  
+
+    <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 can use the value of the state key
+        '''
+        state = json.loads(par["state"])
+        selectedObjects = state["selectedObjects"]
+        return selectedObjects["cylinder"] and not selectedObjects["cube"]
+        '''
+    </script>
+    <customresponse cfn="vglcfn">
+        <jsinput
+            gradefn="WebGLDemo.getGrade"
+            get_statefn="WebGLDemo.getState"
+            set_statefn="WebGLDemo.setState"
+            width="400"
+            height="400"
+            html_file="/static/webGLDemo.html"
+        />
+    </customresponse>
+    </problem>
+
+
+.. notes::    When you create a JavaScript Input problem, keep the following in mind.
+
+              - The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**, 
+              **WebGLDemo.getState**, and **WebGLDemo.setState**).
+
+              - The JavaScript input problem code uses **WebGLDemo.getGrade**, **WebGLDemo.getState**, 
+              and **WebGLDemo.setState** to grade, save, or restore a problem. These functions must 
+              be global in scope. 
+
+              - **WebGLDemo.getState** and **WebGLDemo.setState** are optional. You only have to define
+              these functions if you want to conserve the state of the problem.
+
+              - **Width** and **height** represent the dimensions of the IFrame that holds the
+              application.
+
+              - When the problem opens, the cone and the cube are both blue, or "unselected." When
+              you click either shape once, the shape becomes yellow, or "selected." To unselect
+              the shape, click it again. Continue clicking the shape to select and unselect it.
+
+              - The response is graded as correct if the cone is selected (yellow) when the user 
+              clicks **Check**.
+
+              - Clicking **Check** or **Save** registers the problem's current state.
+
 .. _Math Expression Input:
 
 Math Expression Input

docs/course_authors/source/appendices/e.rst

@@ -529,6 +529,7 @@ We urge usage of <formulaequationinput />. See the opening paragraphs of the
 
   .. image:: ../Images/numericalresponse5.png
 
+.. _Math Expression Syntax:
 
 Math Expression Syntax
 ----------------------
@@ -788,6 +789,7 @@ XML Attribute Information
 
       \newpage %
 
+.. _Custom Response:
 
 Custom Response
 ===============
@@ -916,6 +918,8 @@ Sample Problem:
 
       \newpage %
 
+.. _Chemical Equation Response:
+
 Chemical Equation Response
 ==========================
 

docs/course_authors/source/common_problems.rst

@@ -1,8 +1,8 @@
 .. _Common Problems:
 
-#############################
+############################
 Common Problems
-#############################
+############################
 
 *Common problems* are typical problems such as multiple choice problems
 and other problems whose answers are simple for students to select or
@@ -376,9 +376,9 @@ To make the response case sensitive, change the value of the **type** attribute
       <textline size="20"/>
     </stringresponse>
 
-=========================================
+=============================================
 Response Field Length of Text Input Problems
-=========================================
+=============================================
 
 By default, the response field for text input problems is 20 characters long. 
 

docs/course_authors/source/create_html_component.rst

@@ -30,8 +30,8 @@ See the following topics:
 Create an HTML Component
 *****************************
 
-To create a new HTML component in an existing Unit, ensure the Unit is Private.  
-For more information on Public and Private Units, see :ref:`Public and Private Units`.
+To create a new HTML component in an existing unit, ensure the unit is private.  
+For more information on public and private units, see :ref:`Public and Private Units`.
 
 #. Under **Add New Component**, click the **html** icon.