Deeper Interactivity

Effective use of technology in education invites the learner to explore, to ask what if, and to see the results of their curiosity. These tools make it not only possible, but comparatively easy to build this type of content. Try clicking and dragging to adjust the charge in the figure caption.

This slightly more sophisticated example requires a slightly more sophisticated approach.

• Include the VField and Lesson toolkits on your page.
• Configure the visualization.
• Give a place to draw the visualization.
• Define interactions.

Include VField and Lesson toolkits

<!-- Lesson.js uses these styles -->
<link rel="stylesheet" type="text/css" 
      href="http://vizit.github.io/lesson/css/Lesson.css">
<script defer src="http://vizit.github.io/lesson/js/Lesson.min.js">
</script>
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
        

In addition to VField we also include two other files, the Lesson JavaScript toolkit and its supporting Lesson.css. The lesson toolkit addresses the more general question of how to write interactive content and so is the home for functionality that we want, but is not specifically associated with vector fields.

This is where the defer attribute comes into play. It loads the scripts asynchronously, but keeps them in order. This is critical because the VField toolkit depends on the Lesson toolkit for interactivity.

Configure the visualization

<script>
  // This object is loaded by the VizBuilder on the DOMReady event.
  var VISUALIZATION_CONFIG
      = {
          // This is a simple vector field, so we draw
          // vectors representing the field along the field lines.
          type:      "simple vector field",
          // The id of the canvas we draw into
          canvas:    "chargeCanvas",
          scale:     5.0,
          arrowSize: 1.0,
          // f is a vector valued function.
          // In this case the electric field from a single charge.
          f:
            {
              type: "charge",  charge:  5.0,
              x: 0.0, y: 0.0, z: 0.0,
              nfieldLines: 25.0,
              // Set the charge to q1 when it changes.
              bind: {set: "charge", from: "q1"}
            }
        };
</script>
        

This is the same configuration as the first example, with one exception. Again we draw a simple vector field generated by a point charge at the origin onto the chargeCanvas. But this time we add a binding that sets the charge from the variable q1. This means that when a q1Changed event happens, the charge on f, is set to the new value for q1. This does not care how the q1Changed event is generated, or even if is generated at all. This means that the event can be generated by any of several Lesson components, or even by your own code.

Give a place to draw and define interactions

<figure class="center">
  <!--This is the canvas for our electric field visualization. -->
  <canvas id="chargeCanvas" width="300" height="300"></canvas>
  <!-- This lesson element controls q1 ranging from -5 to 5 in steps of .2 -->
  <figcaption>The electric field from a
              <span class="lessonElement"
                    data-type="rangedSource"
                    data-name="q1"
                    data-value="5.0"
                    data-min="-5.0"
                    data-max="5.0"
                    data-step="0.2"></span>
              statC<sup>1</sup> charge .</figcaption>
</figure>
        

This is where the Lesson toolkit comes into play. The Lesson toolkit helps build interactive instructions, that is lessons. Elements of a lesson have the HTML class lessonElement, and their functionality is described by HTML5 data attributes. The span class="lessonElement" with data-type="rangedSource" controls the q1 variable, which ranges from -5.0 to 5.0 in steps of 0.2 and an initial value of 5.0. A full description of the attributes:

attribute	meaning	example
class	Identifies a component of a lesson.	lessonElement
data-type	The type of component.	data-type="rangedSource"
data-name	The name of the variable that this component effects.	data-name="q1"
data-value	The initial value.	data-value="5.0"
data-min	The min value for the control.	data-min="-5.0"
data-max	The max value for the control.	data-max="5.0"
data-step	The variable changes by this amount as the control is moved.	data-step="0.2"

This example incorporates the control into the figure caption. You are free to place it anywhere in your content as it best meets your goals.

Let's take a look at what happens when we provide this same interactivity to the second example, the field lines for our point charge.