*Davidson College, **in partnership** with the College Board and edX, has created **a suite of free, instructional modules addressing the most challenging concepts in Advanced Placement (AP) subjects; the initiative – which launched July 22nd on edX.org – is called **Davidson Next**. T**his third post on the Davidson Next project is dedicated to interactive content designed for our AP content. Read our first post about Scaling AP Instruction and our second post about empowering teachers and students around the world**.*

Interactive simulations and visualizations have been shown to effectively support student mastery of conceptual and even physical topics in mathematics and science-based courses.* Generally with these applications, students are more engaged, have more opportunities to learn through inquiry, and receive either visual feedback through their interaction or coded feedback from an automated grader.

For the past year, Davidson Next has been dedicated to developing interactive learning components meant to strengthen student mastery of challenging concepts in AP Calculus, Macroeconomics, and Physics. Davidson Next has recently released fourteen modules in each AP topic on edX, and each module contains interactive content.

Along with research-based motivations, the goals behind all Davidson Next interactive content are:

- Improving student learning and mastery of challenging concepts.
- Providing access to free technology-enhanced content for both students and teachers.
- Allowing traditionally paper-based (offline) activities to be completed by students online with feedback from the edX grader.
- Contributing to the open source community growing around the edX platform.

The open nature of the edX platform provides an exciting opportunity to create technology enhanced content that supports these ideals. As an example, in service of AP Calculus students, Davidson Next has created a graphing application mimicking the four functionalities required of graphing calculators during the AP exam: plotting a function and its derivative, finding the zeroes of a function, calculating a numerical derivative, and calculating a numerical integral. The application is built on open source technology (JSXgraph), and source code is available on github. In addition, students can use this to aid the course work, while teachers can use it during class to visually explore mathematical functions.

The remainder of this article is dedicated to Davidson Next tools developed to enhance learning experiences in AP Calculus, AP Macroeconomics, and AP Physics. These tools fall into three broad categories: Drawing, Graphing, and Data Entry. Below we highlight examples from each category and provide links to live versions and source code. We end on important aspects of our development approach.

## Davidson Next Enhanced Content: Drawing, Graphing, and Data Entry

#### Drawing

In high school and college courses, drawing and sketching activities are almost always paper-based and rely entirely on the time-consuming – and often delayed – process of instructor feedback and grading. Compounding this issue, many drawing activities are fundamental to the problem solving process and contain steps where instructor feedback would be incredibly beneficial to students. For example in physics courses, vector diagrams often serve as a first step to completing a problem and often reveal to instructors where students are having conceptual difficulties.

Largely inspired by physics, we have created a drawing application that allows students to draw directly within the edX platform with graded feedback. The example below shows a vector-drawing problem where students are asked to draw a partial force diagram for a cart on an incline**. **The position, angle, and length of each vector are all accessible to the edX grader, and custom feedback can be given for each of those parameters in a student’s drawn response.

Note, the drawing tool currently only allows for linear objects – vectors, segments, and lines (lines pass through two points, segments pass between two points). In macroeconomics, we use “segments” to represent economic curves, such as Supply and Demand curves. In calculus, we use “lines” to draw tangent lines relative to mathematical functions. In physics, we have data collection problems where students use segments to measure physical properties on background images (measuring properties of diffraction spectra), or draw best-fit lines over real data. Interactive samples of these problems can be found on our website** **along with links to source code.

#### Graphing

Graphing applications were largely driven by content in Calculus and Macroeconomics. In calculus, we transformed a number of existing visualizations – originally created by Professor Stephen Davis – into formats that could be directly embedded within the edX platform.

Another major portion of the project included creating macroeconomics activities that allowed students to directly interact with economic curves. Overall, we have created roughly 80 unique visualizations using open source technology (link to github, browseable link). These graphing applications were an imperative aspect of the Davidson Next AP Macroeconomics modules. The most challenging aspects in the AP Macroeconomics curriculum requires students to draw and interpret multiple economic curves in changing economic conditions.

In the Macroeconomics example below, students can use the sliders in the left graph to adjust the position of the “short-run aggregate supply” and “aggregate demand” curves. The right-most graph is alternate economic space in which students are typically asked to interpret changes based on the left-most graph. Our example allows students to actively explore how all curves are interconnected.

#### Data Entry

Data entry and analysis was largely pushed by Davidson Next physics content, where AP teachers wanted students to be exposed to data entry, analysis, and plotting – note, there are new AP exam questions aimed at these skills. In addition, we found across all three Davidson Next subjects that teachers wanted “worksheet” style problems that allows students to carry out a series of calculations with a single “check” button.

#### Data Entry and Plotting

In physics, Davidson Next developed a data entry and plotting tool that provides students a spreadsheet like interface and a plotting area. The spreadsheet can be seeded with data, or students can actively fill out the spreadsheet with their own data. With complete data columns, they can use the basic plotting features to see two-dimensional graphs of data from their spreadsheet. Students can also apply a linear fit to their data – higher order fits are easy to add, but the AP exam does not require interpretation of fitting beyond linear.

#### Active Table

The final tool discussed in this article is a new problem type aimed at offering worksheet style grading. Called “Active Table”, students can fill out multiple cells of an html table. In Davidson Next content, the problem type has been used to facilitate yearly market rates in Macreconomics, and used to store calculations of experimental data in physics. Code for this problem type can be found on GitHub, and we plan to convert this problem type to an XBlock in the future.

#### How did we do it? The importance of JSinput

One of the most exciting aspects of edX is that individuals have the opportunity to directly contribute to the open source platform. But contributing to the platform can be a daunting task, particularly if your primary interest is merely a new problem type or a simulation with a simple grading routine. To serve these needs, edX provides the “Custom Javascript and Grading” problem type in the advanced menu in Studio. Often referred to as JSinput, this problem type provides communication between “iframed” visualizations and the edX grader. To prevent malicious use of Javascript, communication is limited to the following functions:

- getGrade

- getState

- setState

More details on these functions and their use can be found here.

#### Amazon S3

We hosted the majority of Davidson Next interactive course content on Amazon S3. This choice was aimed at preserving a natural development environment, e.g., with relative links to files. One can use the native “/static/“ folder to host all content related to JSinput problems, but then development is constrained to a single directory. From S3, one simply references the “https” URL within an iFrame or a JSinput problem.

For grading with JSinput, one additional requirement is needed involving communication between the edX grader and the JavaScript referred in the HTML file, as we run into “Same-origin policy” issues. JSInput uses JSChannel to circumvent this restriction.

It will let the edX grader communicate with the JS of the JSInput iFrame even if it’s hosted on a different domain. To enable this in an application:

- First add the following to the head tag in your application’s HTML:

<script type=”text/javascript” src=”pathto/jschannel.js”></script>

- Establish a channel to communicate with edX by adding this function to your JS:

//Establish a channel to communicate with edX when the application is used

//inside a JSInput and hosted completely on a different domain.

function createChannel(getGrade, getState, setState) {

var channel,

msg = ‘The application is not embedded in an iframe. ‘ +

‘A channel could not be established’;

//Establish a channel only if this application is embedded in an iframe.

//This will let the parent window communicate with the child window using

// RPC and bypass SOP restrictions.

if (window.parent !== window) {

channel = Channel.build({

window: window.parent,

origin: ‘*’,

scope: ‘JSInput’

});

channel.bind(‘getGrade’, getGrade);

channel.bind(‘getState’, getState);

channel.bind(‘setState’, setState);

}

else {

console.log(msg);

}

}

Once createChannel has been called with your getGrade, getState, and setState functions as arguments, the edX platform will be able to use them without raising

SOP errors.

- Make sure the “sop” parameter of JSInput in the XML is set to false. For example:

<customresponse cfn=”vglcfn”>

<jsinput gradefn=”getInput”

get_statefn=”getState”

set_statefn=”setState”

width=”750″

height=”480″

html_file=”https://pathto/yourApplication.html”

sop=”false”/>

</customresponse>

** **

**When Learning About the Real World is Better Done Virtually: A study of substituting computer simulations for laboratory equipment. *Finkelstein, et al. PRST-PER 2005.

## Recommended Posts

### If You Love Learning So Much….

14 Feb 2018

### 9 Top Music Courses to Get you Groovin’

09 Feb 2018