=Paper=
{{Paper
|id=None
|storemode=property
|title=Interactive mathematical videos
|pdfUrl=https://ceur-ws.org/Vol-1010/paper-16.pdf
|volume=Vol-1010
|dblpUrl=https://dblp.org/rec/conf/mkm/Cuypers13
}}
==Interactive mathematical videos==
https://ceur-ws.org/Vol-1010/paper-16.pdf
Interactive Mathematical Videos
Hans Cuypers & Jan Willem Knopper
Department of Mathematics
Eindhoven University of Technology
June 21, 2013
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 offered by this approach, both on technological and educational
issues.
1 Introduction
Over the last ten to fifteen years video has become an important means of communications through
the world wide web. The video tools incorporated in mobile phones and other devices make it
easy to create videos. These videos are then easily distribute via YouTube [43], Vimeo [37] or
other channels. Also, in education of mathematics videos and screencasts are playing a more and
more prominent role, witnessed by the popularity of the Kahn Academy [20]. On the other hand,
mathematical software for online and blended education has become mature. Nowadays there
exist various software packages, both commercial and open source, that provide the user various
ways of interactive mathematics, ranging from interactive and dynamic geometry packages like
Geogebra [12], Cinderella [5] and The Geometer’s SketchPad [13], to automatically generated and
graded exercises in Webworks [38], STACK [35] or MapleTA [21] and systems combining these
functionalities like ActiveMath [1] and MathDox [22].
In this note we report on some experiments in which we have tried to combine the use of video
with the interactive mathematical software package MathDox to obtain interactive mathematical
videos. The tools we use to obtain the integration of video with interactive MathDox pages
is the Popcorn.js JavaScript framework developed by Mozilla, see [30]. In the sequel we first
describe MathDox and Popcorn.js and then report on our experiments to combine the two to
obtain interactive mathematical videos.
2 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
offer 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 files.
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, offer 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 fly 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
offers 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 offer stored documents from the server to the outside world. The main difference between
a normal web server and the MathDox Player is that a web server offers ready-made HTML files,
whereas the MathDox Player dynamically creates these HTML files. 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 offers 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 offered 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], offering:
• 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;
2
• 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 fifteen 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 different 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 offering 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 offers a way to use the time line of a video or audio
element to interact with other elements in an HTML-page at specific times within the time line
or trigger a jump to a specific 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.
3
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-file containing a Popcorn.js enriched video
and an iframe of the HTML-file in which we run a MathDox exercise. We use Popcorn.js to
trigger actions within the MathDox-iframe and provide the HTML-file 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 first part, we explain the theory.
The MathDox-exercise contains four interactions, each corresponding to a part of the video:
1. The first 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 g 0 (x). This interaction is adressed
in comment.
4
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 en-
hanced with MathDox exercises inside SCORM packages [34] and integrate them in learning man-
agement 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 offers new possiblities for
the use of MathDox in eduction. The rich feedback possibilities combined with video interaction
5
are particularly useful in the “flipped class room” setting, a form of blended learning in which
students first 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.
References
[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.
[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
[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/
[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
[21] Maple T.A. http://www.maplesoft.com/products/mapleta/
[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
[27] Mozilla Popcorn Webmaker, http://popcorn.webmaker.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/
[33] C. Sangwin, STACK: making many fine judgements rapidly, (2007).
6
[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
7