zmWmQs

A Platform that Integrates Quizzes into Videos
Robin Woll, Sven Buschbeck, Tino Steffens, Pascal Berrang, Jörn Loviscach
by Google for more than six years; hence it is one of the
most mature web development frameworks available.
Third, Java is adopted widely in the academic community;
hence it was easy to find well-experienced developers.
Fourth, we are using - like the Khan Academy does - the
Google AppEngine (GAE) to host our services. The GAE
is easy to use, serves 100,000 users per month for about
US-$ 20 and offers almost infinite scalability as it is build
on Google’s infra-structure.
Figure 3. Thanks to MathJax, quizzes can comprise almost any
mathematical expression.
The centerpiece of the platform is an efficient and intuitive
“what you see is what you get”-style editor used to
build the quizzes in a web browser, see Figure 4. Placing
a quiz every 30 seconds in a course of ten hours of video
playtime would mean having to create 1200 quizzes. As
one major step to reach the efficiency required to achieve
this target, we implemented a template mechanism. The
templates are created simply by saving any existing quiz,
as a template and can be reused from the template gallery.
In the optimum case, the author just needs to alter
the captions of the elements.
Figure 4. To build a quiz, basic elements are arranged in a layer over
the video. These can then be edited in terms of HTML, CSS, LaTeX
and the proprietary DSL for checking mathematical expressions.
Implementation
Our platform is built with the Google Web Toolkit (GWT),
which allows writing highly structured web applica-tions
in Java as common programming language for both the
server and the client. GWT includes a Java-to-JavaScript
compiler that generates the appropriate JavaScript for
the browser on the client side. This compiler produces
highly efficient JavaScript and also caters for the different
versions of JavaScript code required to support all major
browsers. We have chosen GWT over other frameworks
for four main reasons: First, large-scale development in
JavaScript is troublesome as it is a scripting language.
Since Java is (in opposite to JavaS-cript) strongly typed,
development helpers such as code completion, refactoring,
unit testing, code synchroniza-tion in a team can work
much better. Second, GWT has been strongly supported
All personal progress is saved locally in the user’s
browser using the HTML5 Storage API. Since we are using
YouTube to host the videos and the GAE to host our
application, we cannot ensure that there is no personal
data saved by third parties. We can assure, however, that
the personal learning progress cannot be easily related to
any personal data by third parties because the access to
HTML5 storage is protected by a same-origin policy.
The main remaining technical problem is the compatibility
with the wide range of browsers. In a first approach we
used the regular Flash-based version of the YouTube API.
We had to learn, however, that some implementa-tions of
Flash for Linux cannot display HTML as a layer above the
video. Hence, we switched to the HTML5 version of the
YouTube player. This and our use of modern features of
HTML5 and CSS3 such as full screen mode or transformations
to scale the quizzes with the size of the video means
that we only support up-to-date browsers, in particular
current versions of Google Chrome and Mozilla Firefox.
A different compatibility problem occurs on mobile devices.
They do implement HTML5 and CSS3, but many of
them do not implement video playback in the same manner
as desktop browsers do. For instance, Apple’s Safari
for iOS opens videos in the QuickTime player, which is
separate from the browser. With our current ap-proach
there is no way to overcome this problem in the browser;
the only way to get our platform to work on iPhones
would be to write a native app. On Apple iPads we have
to work with Webkit CSS extensions, other-wise the native
browser displays the video within the browser, but
the video player captures all touch events so they are not
propagated to our HTML displayed above. This problem
does not occur with Google Chrome on the iPad; however,
most users do not have installed this browser. On the
iPhone, even Google Chrome opens videos in the Quick-
Time player. It is hard, anyway, to support our platform on
smartphones due to the small screen size: There is hardly
enough space to show both an embedded quiz and an onscreen
keyboard in a usable manner.
GWT is great at dealing with JavaScript differences
between browsers. One cannot, however, hope for any
framework to automatically deal with quirks in a browser’s
interpretation of HTML in a layer above a video or in
a browser’s implementation of the HTML5 video player.
Research Track |157