Interactive Mathematical Videos

Abstract

We have added interaction from and to videos in our MathDox exercise system, by using the Popcorn.js library from the Mozilla foundation. Inthis weay we have realized interactive mathematical videos. Our approach is still in an experimental phase, but in the near future we will investigate the possiblities o ered by this approach, both on technological and educational issues.

Introduction

MathDox and its Exercise system

MathDox [22, 6, 7] is a system to provide its users with dynamic and interactive mathematical documents over the world wide web in the sense that these documents adapt to the user and o er the user some control over the contents of the page. MathDox consists of a format and a specialized web server, to which we refer as the MathDox player.

The MathDox format is an XML based language for interactive mathematical documents. The

XML formats used in MathDox are:

DocBook [9], used for the global structure of documents.

OpenMath [28], for semantic encoding of mathematics.

XForms [41], for user driven interactivity. 1

Jelly [16], a programming and scripting format.

XInclude [42], for separating functionality in to several les.

MathDox documents can be transformed into web pages by the MathDox Player, a specialized

web server. These web pages are dynamic and interactive, they support high quality rendering of mathematics, o er easy access to various mathematical services including computer algebra systems, and are equipped with a convenient mathematical input system. MathDox shows its potential when demonstrating algorithms, testing skills with exercises, or explaining new concepts with dynamic on-screen calculations.

Interaction with the mathematical content of an interactive document can vary from performing

computations, checking answers to exercises or creating and manipulating graphs of functions.

MathDox combines existing interactivity of standard web pages with the power of mathematical

computations, resulting in interactive mathematics. This is achieved by making use of a scripting language and interfaces with external software, notably computer algebra systems. At the moment

MathDox supports interaction with various computer algebra systems, including Mathematica [23],

GAP [11], and Maxima [25], and the dynamic geometry systems GeoGebra [12] and JSXgraph [18]. After user actions, pages are updated with new parameters and web services will be triggered to provide output needed for preparation of the new page. This results in adaptable pages and on the y computations.

In order to interface the MathDox pages with various mathematical services, the mathematics in

an interactive document has to be represented in a unambiguous way. For this reason, MathDox o ers the possibility to represent the mathematical formulas and expressions not only in the more presentation oriented languages TeX and MathML, but also OpenMath [28] or content MathML [24], semantically rich XML-encodings of mathematics.

The MathDox Player is responsible for making MathDox documents accessible over the web. Its

task is similar to that of a web server in the sense that both a web server and the MathDox

Player o er stored documents from the server to the outside world. The main di erence between

a normal web server and the MathDox Player is that a web server o ers ready-made HTML les, whereas the MathDox Player dynamically creates these HTML les. On request of the user the

MathDox server collects data from the source document, the user and from mathematical back

engines providing services and creates, by applying a number of XSL transformations on this input, a new view on the document. The MathDox Player is implemented in Orbeon Forms [29], a Java

Servlet application [15] that runs in a Java Servlet container like Apache's Tomcat and JBoss.

To enable the users of MathDox documents to interact with the system, HTML o ers various

options, like buttons, text areas and links. However, there is no standard way to communicate mathematics in a meaningful way. Especially since we want to enable the interaction with various mathematical services o ered by the system, we require the user to provide semantically rich mathematical expressions. To this end we have developed a formula editor featuring:

A two-dimensional WYSIWYM interface.

Semantic representation of the formulas in OpenMath.

No plugins need to be installed in the browser to use the editor.

It can be easily integrated into existing HTML pages.

The editor is written in JavaScript and uses the HTML5 canvas element in combination with jsMath sprite fonts [17] to render mathematics. On top of MathDox we have a build an exercise system, see [8], o ering: interactive and parameterized exercises, both open and closed;

easy way to input mathematical expressions and formulas; automatic grading with the help of computer algebra systems or other mathematical services; customized feedback and hints depending on student-answers, with which one can address, for example, common misconceptions or mistakes; integration with Learning Management Systems, like BlackBoard [2] or Moodle [26] through the SCORM standard, see [34]. 3

Interactive video with Popcorn.js

The creation and distribution of videos and screencasts has become very easy and popular over

the last ten to fteen years, mainly by the introduction of video capacities to all kinds of mobile devices and the introduction of online distribution channels like YouTube [43] and Vimeo [37].

Until recently, interaction with videos was only realized inside Flash applications, see [10]. Indeed,

various popular tools to create interactive videos and screencasts, like Camtasia [3], Captivate [4],

Storyline [36] or Wink [40] have been Flash based. Standard interactions and interactive elements realized are create popups/display a webpage links, anchors and hot spots

jumps to di erent parts user input

Interactions like these can realized in Flash applications using Flash ActionScript, see [10]. The

introduction of the video element in HTML 5 [14] and its new possibilities for interaction, have made it possible to enrich videos with various kind of interactive elements like pop ups, links and anchors. The various Flash based tools to create interactive video, are now all shifting towards

HTML 5, which is supported of all modern browsers and platforms. Also YouTube [43] and

Mozilla's Popcorn webmaker [27] are o ering new ways to enrich videos with interactive elements.

The Popcorn webmaker project [27] is build around the open-source JavaScript library Popcorn.js [30]. With the help of Popcorn.js one can let a video, audio or other media-element control various other elements of a web page. Popcorn.js makes use of the native HTMLMediaElement properties, methods and events, it normalizes them into an API, and provides a plugin system for interactions with other frameworks. In short Popcorn.js o ers a way to use the time line of a video or audio element to interact with other elements in an HTML-page at speci c times within the time line or trigger a jump to a speci c time on the time line of the video or audio element. 4

Popcorn and MathDox

Within mathematics education videos are often used to explain theory to students and to provide

students with instruction on how to solve exercises. May such videos are available on the world wide web, see for example the Khan Academy [20] or Just Math Tutorials [19]. The interactivity in these videos is usually very restricted and certainly does not match the mathematical interactivity that can be found in systems like Webworks [38], STACK [35], MapleTA [21], ActiveMath [1] or

MathDox [22].

In this project we want to enrich such videos with the various interactive mathematical features

that we already have realized in MathDox. In particular, we want to enhance the video-explanation of theory with examples, where students themselves provide input parameters, we want to enhance them with randomized and automatically graded exercises on the theory and give customized feedback through the video on student answers to these exercises.

In this project we have done some experiments of integrating interactive MathDox exercise with

video elements. We have developed a Popcorn-plugin, that enables us to start a MathDox-page from inside an HTML-page containing a Popcorn-enriched video or audio element. Moreover, this plugin allows also to transfer information from the MathDox-page to the HTML-page.

A MathDox exercise can be considered to be an automaton. The various states of the automaton,

called interactions, are presented by the MathDox player as separate web pages to the user.

These interactions may contain the question of an exercise, the feedback on a correct or wrong

answer, or some hints. The transitions from one state into another, called answer map are ruled by the actions of the user, (most commonly, his or her answer to a question) and the results of various queries (involving the answer) to mathematical services available within the exercise.

To enrich MathDox with video and video with features of MathDox, we have set up a communi

cation channel (using postMessage) between an HTML- le containing a Popcorn.js enriched video and an iframe of the HTML- le in which we run a MathDox exercise. We use Popcorn.js to trigger actions within the MathDox-iframe and provide the HTML- le with information on the interaction that the MathDox-page is visiting. The information on the interaction being visited is then used via Popcorn.js to select the part of the video that is shown to the user.

HTML

HTML 5 Video

Popcorn.js

IFrame with MathDox

5

An example

We present an example of a video in which the Chain rule is explained and the student in an

interactive video which is enriched with a MathDox exercise on the chain rule.

The video timeline is as follows.

Theory explanation

Exercise

Comment

Good

Wrong

In the rst part, we explain the theory.

The MathDox-exercise contains four interactions, each corresponding to a part of the video:

1. The rst interaction with the question:

Determine the derivative of some function f (g(x)), where f and g are generated in some random way.

The student is expected to input his/her answer. The part exercise of the video corresponds to this interaction. 2. An interaction to which the stduent is guided when he/she makes the common mistake of providing as an answer f 0(g(x)) and forgets to multiply by g0(x). This interaction is adressed in comment.

3. An interaction corresponding to a correct answer. This interaction corresponds to the part good of the video.

4. An interaction corresponding to the answer being wrong and not of the form f 0(g(x)).

The interactions (Exercise and Comment) and their video fragments.

6

Future work

In future work we want to extend the interaction between a video element and a MathDox docu

ment to the full exercises system of MathDox. This implies that we will be able to use videos enhanced with MathDox exercises inside SCORM packages [34] and integrate them in learning management systems like Moodle [26], Blackboard [2], SAKAI [32], or any other SCORM-compatible LMS.

In this way we can enrich MathDox with video interaction. This certainly o ers new possiblities for the use of MathDox in eduction. The rich feedback possibilities combined with video interaction are particularly useful in the \ ipped class room" setting, a form of blended learning in which students rst prepare by watching online videos and then go to class to work on problems. The videos and the embedded interactions can help guiding students through an individual learning process, see also [31].

The possibilities and restrictions of our new approach, both on technological aspects and use in education, will be investigated in the near future.

[1] ActiveMath http://www.activemath.org [2] Blackboard, http://www.blackboard.com [3] Camtasia, http://www.techsmith.com/camtasia.html [4] Captivate, http://www.adobe.com/nl/products/captivate.html [5] Cinderella, http://www.cinderella.de [6] Cohen, A.M., Cuypers, H., Barreiro, E (2006) MathDox : mathematical documents on the web. In M. Kohlhase (Ed.), OMDoc : An Open Markup Format for Mathematical Documents (pp. 262-265) Berlin: Springer-Verlag. [9] DocBook, http://www.oasis-open.org/docbook/ [10] Flash ActionScript, http://www.adobe.com/devnet/actionscript.html [11] GAP, http://www.gap-system.org [12] Geogebra, http://www.geogebra.org [13] Geometer's SketchPad, http://www.keycurriculum.com/products/sketchpad/ [21] Maple T.A. http://www.maplesoft.com/products/mapleta/ [14] HTML 5, http://www.w3.org/TR/html51/ [15] Java, http://java.sun.com [16] Jelly, http://commons.apache.org/jelly/ [17] JsMath, http://www.math.union.edu/jsmath/ [18] JSXGraph, http://jsxgraph.uni-bayreuth.de [19] Just Math Tutorial, http://patrickjmt.com [20] Khan Academy, http:www.khanacademy.org [22] MathDox, http://www.mathdox.org [23] Mathematica, http://www.wolfram.com [24] MathML, http://www.w3.org/TR/MathML/ [25] Maxima, http://maxima.sourceforge.net [26] Moodle, https://moodle.org [28] OpenMath, http://www.openmath.org [29] Orbeon, http://www.orbeon.com/ [30] Popcorn.js: http://popcornjs.org [31] SAiL-m: http://sail-m.de [32] Sakai, http://www.sakaiproject.org/ [27] Mozilla Popcorn Webmaker, http://popcorn.webmaker.org [33] C. Sangwin, STACK: making many ne judgements rapidly, (2007). [34] SCORM, http://www.adlnet.gov/scorm [35] STACK http://www.stack.bham.ac.uk/ [36] Storyline, http://www.articulate.com/products/storyline-overview.php [37] Vimeo, http://www.vimeo.com [38] WebWorks http://www.webworks.com/ [39] WIMS http://wims.unice.fr/wims/ [40] Wink, http://www.debugmode.com/wink/ [41] XForms, http://www.w3.org/MarkUp/Forms/ [42] XInclude, http://www.w3.org/TR/xinclude/ [43] You Tube, http://www.youtube.com

References

[7] Cohen , A.M. , Cuypers , H. , Knopper , J.W. , Spanbroek , M. , Verrijzer , R. ( 2008 ), MathDox - A System for Interactive Mathematics , in Proceedings of Ed-media 2008 , 5177 - 5182 .

[8] Cuypers , H. , Knopper , J.W. , and Sterk , H. , Mess: Exercises in MathDox, Electronic proceedings of the JEM-meeting , Aachen 2009 . see http://www.win.tue.nl/ hansc/mess.pdf