Authoring in WSP

The features of WSP don't mean much unless it's relatively easy to create WSP documents and put them into web pages, so we'll investigate that process now. We'll begin by modifying one of the tools from the Introduction to Circular Functions lesson. (For this section I assume some familiarity with GSP, but even if you’ve never worked with GSP, you should be able to get a sense of how manageable the process is.)


Editing a Websketch

When we used this sketch earlier, we noted that the third tool, Graph Point, made it easy for students to match the givens of the tool to the measurements (h, the height of the car and d, the distance the car has traveled around the wheel). In fact, perhaps it made it too easy, because students didn't have to think about which variable is the independent variable and which is the dependent variable. So perhaps it would be better to label the given objects of the tool as x and y rather than h and d, so students will have to pause and think about the role that each of the variables play in order to decide which is which.

Fortunately we have a very powerful authoring tool for websketches: GSP, which we'll use as our websketch editor. Making our change will involve several steps. (You can do these steps yourself, when you go to this web page later.)

  1. Download the GSP sketch.
  2. Use GSP to make the changes.
  3. Upload our modified file to the WSP exporter, by tapping Choose File.
    The exporter turns our GSP sketch into a websketch.
  4. Check the result to make sure we like it.
  5. Tap the Export button to download the new websketch in one of a variety of formats.
  6. Upload the websketch to the appropriate website.

For the last step, since I’m only demonstrating, I’ll open the converted web page right there in my Downloads folder.

Before we go on to make a new websketch of our own, let’s review at a couple of features of the sketch we just edited. The first thing we notice is that there are some special pages whose names start with “WSP Tool:”. There’s one page like this for each tool, and the names of the pages determine the names of the tools.

Now when we look at the page for the Graph Point tool, we notice something else: the names of the two given coordinates start with the word "given:", as does the name for the given scale value. (I made the scale a given so that the scale of the graph would match the scale of the Ferris wheel itself: the length of a meter on the wheel is the same as the length of a graph unit.) So for both tool names and the names of given objects for a tool, we use these special names to indicate their role. (Remember this is beta software, and there may eventually be a different way to identify tool pages and given objects of a tool. For now, the current name-based mechanism has the advantage that it works well with GSP5, with which many users are already very familiar.)

There are several more things to notice here. You may have noticed the "assumed: ground" label. That label isn't a label for the x-axis; it actually refers to a line that already exists in the sketch, the ground line. In fact, if we hide the x-axis, you can see that line here on the tool page. The "assumed:" label means that this line should automatically be matched to the already-existing ground line in the sketch, with no need for the user to do anything. I put the origin on this assumed ground line to make sure that the height on the Ferris wheel is always the same as the height of the corresponding point on the coordinate system.

Finally, you may notice that there's a little picture here, and it's the same picture that appears in the toolbox. I made with a screen-capture utility, and when I pasted it into my sketch, the WSP Exporter used it as the tool icon. You don't have to do this—if there's no icon WSP just uses the tool name—but it surely is a nice touch that it's so easy to make your own tool icons. Seeing a picture can be a valuable hint to a student as to what the tool does.

Finally, the WSP beta-test site is packed with helpful explanatory material, particularly the tutorial videos and the examples. To get to the Exporter you press the Main Site button, at which time you are asked for a username and password. I will provide you with those credentials at the end of this presentation. When you get to the main site, you have access to technical documentation and other advanced materials as well as a link to the Exporter itself. (You can also go to to go directly to the Exporter.)

Creating a New Websketch

Now that we've seen a peek at how WSP turns a GSP sketch into a websketch, let's go ahead and make a new sketch of our own. I encourage you to try this on your own, after the conference, to see just how easy it really is. (And it will only get easier, once the development team is sufficiently satisfied with the stability and UI of websketches to change their focus to upgrading the authoring process.)

Here's the task I'm going to implement for students: What can you figure out about the perpendicular bisectors of the sides of a triangle? I'll provide students with a segment tool and a perpendicular bisector tool to do the construction, and then a few more tools to use for exploration. Here's what we'll do:

  1. Using GSP, start with a new sketch.
  2. Add a page for each tool we'll give students, and label the pages with the names of their tools.
  3. On each page, do the construction, labeling the given objects.
  4. Export the finished sketch to create a WSP file.
  5. Check the result to make sure we like it.
  6. Upload the finished WSP file for students to use.

Finally, this tool page is not just a way to specify a construction, but it also determines how the geometric elements of the construction are presented to the student.

The Segment tool is really easy: we make a segment and position it where we want it to appear for students. I prefer to avoid horizontals and verticals in order to encourage students to be flexible about the shapes and orientations of their figures, rather than always using triangles with a horizontal base.

Now we label each of the segment endpoints “given”. We don't want to use "given:A" and "given:B" because then every segment would be segment AB. Because we're using "given" and leaving it visible, WSP will make up its own label names. Alternatively, we could hide the label; the point would still be a given object, but it would appear without a label.

The Perpendicular Bisector is next. It requires a segment, a midpoint, and a perpendicular line. In order to be clear on exactly what the tool does, we'll show only the two endpoints and the perpendicular, so we hide the segment and the midpoint. Label the two points “given,” and we’re done.

Finally, we have a few more tools to make. I think I'd like to give students a Measure Distance tool, a Measure Angle tool, and a Compass tool. You may want to provide a few more or a few less, depending on the precise task you have in mind. However, in the interests of time, I'll just do the Compass tool now; I can always add the others later. Notice that I left the first page blank. I could have put an initial construction there, as I did with the Ferris wheel, but this task is one for students to do from scratch.

Now we can follow the same steps we did earlier: save the sketch, drag the file to the WSP Exporter, and test our construction to make sure we're happy with it. As I test, I'll try to remember to make a mistake so that I have to use the Undo tool. Another use for the Undo and Redo tools is to go back and forth through a student's construction in order to see what she did.

Finally, we'll turn it into a web page, or embed it in an existing web page.

WSP's JavaScript Interface

Though I'm not going to demonstrate it today, I should mention that WSP has an extensive JavaScript interface that gives a JavaScript programmer the ability to manipulate sketch objects, to listen to objects to find out when and where they move, to press buttons, and even to grab a copy of the sketch state that could be restored at a later time. I expect that the long-term implications for student learning will be both profound and exciting. I also expect that it will take time to figure out how to use such a capability effectively.

The Cartesian Connection

Finally I'd like to show you one more websketch, to emphasize the way in which carefully tailored tools can provide an environment in which students are encouraged to be productive in creating their own mathematical objects. To set the stage: this is the culminating activity in a series in which students begin by treating two-dimensional geometric transformations as functions, and go on to explore what would happen if these two-dimensional functions had to survive in a one-dimensional space—that is, if they had to live on a line.

By the time of this sketch, students have already discovered that the two most interesting functions, when their domain is restricted to a line, are dilation and translation, because they've discovered that dilation corresponds to multiplication on a number line and translation corresponds to addition. Students have also composed these two functions, but found the function behavior difficult to follow because the independent, intermediate, and dependent variables, are all on the same line, along with the cetner of dilation, the translation vector, and the markings on the line itself.

So the goal, in this final activity, is to make the behavior easier to understand, and in this activity they undertake to make it clearer by moving the second half of the composition to a different number line, so the variables aren't always running into each other. So here we go.