This software package is a framework for building web applications having the following buzzwords
The original aim of this package is to build a non-Flash interactive animations management framework so thataccessible textbooks can be made for children with cognitive disabilities (mainly dyspraxia). But it could be used to produce any set of interactive animations such as books, websites, interactive animations or I don't know what. You imagine. You experiment. You tell me what it may be useful for !
The following JavaScript libraries are used
Disclaimer with regards to JavaScript as a programming language : Ahemm... Javascript was selected because we wanted to have one and only one language to be used both for the making of bliotux-powered templates and pages and for their execution. And their execution should not require any prior installation of software : the web browser should be the only required stuff. And Javascript seems to be the only open-standards-oriented way to offer rich interactivity to SVG in web browsers. Too bad.
At the moment wecena.bliotux is nothing but a proof-of-concept. More will come in case the project I'm working on selects this technology as a viable alternative to the Flash-based proprietary product we are currently using in order to make accessible textbooks for children with cognitive disabilities.
It's in a subversion repository. There is some subversion documentation available in case you don't know how to download software from a subversion repository. Bliotux is stored in the wecena repository but it will get its own repository some day.
Bliotux pages are based on templates. Let's create a first template.
Choose a name for your template. In this example,
the name is
simpleOperation
because it is a template page for textbooks
for children learning additions and other simple mathematical operations.
Name a template folder accordingly.
For instance, I have
wecena.bliotux/templates/simpleOperation/
This part is the job of a graphics designer.
The layout of a template is defined by a SVG file. (Download, install and) use any SVG editor to create such a file. I personnally use Inkscape, which is free software.
Your SVG template should be named
layout.svg
and
should be stored under the template folder.
Here it goes:
wecena.bliotux/templates/simpleOperation/layout.svg
The next version of Inkscape should allow you to use its new timeline-based animation editor capabilities to add animation to your template. At the moment, you will have to have an XML developer edit the source code of your SVG template and add animation (animated SVG) instructions "by hand" if needed.
Here is a clue about how to possibly accelerate the development of such SVG animations without waiting for the next version of Inkscape :
layout.svg
file.
(The animation instructions can easily be located : they use the
anim:
namespace).
This part is the job of a Javascript developer.
This is the hardest part if you are not a developer. It should be easy if you have any experience in web development.
In the case of a children textbook for teaching additions and other simple mathematical operations, we'd like our "simpleOperation" template to display a simplified virtual keyboard with numbers. When the child clicks on a number, this number is added to a "result" text element in the template layout. So we need to know how to use an SVG element (the number we want to click on) as an interactive button which will display some text result as the content of an other SVG element.
The interactivity of your template is first prepared in your
layout.svg
file.
Using Inkscape XML Editor (Ctrl + Shift + X), you add event attributes
to the SVG elements you want to add some interactivity to. This involves accessing
the XML source code of the SVG file, which you should not be afraid of thanks to
Inkscape XML Editor.
For instance, let's say you have a SVG group of elements which you want to
act as a button. You select this group using Inkscape. You press Ctrl+Shift+X. The
XML Editor opens. There you see the group of elements as a <g ... > element.
You then want to add interactivity to this group. You have to add a
onclick
attribute.
The value of this attribute should be "clickButton(evt)". This means that whenever the
user mouse clicks on this button, a MouseEvent event called "evt" will be fired and
some Javascript function called "clickButton" will have to handle this event so that
something special happens.
Now you have injected some interactivity attributes into the XML source code of
the SVG file of your template. This source code now includes things like this :
<g onclick="clickButton(evt)" ...
Let's develop this clickButton Javascript function so that you define what should
happen whenever the button is clicked. This definition is written in a Javascript file
you have to name "interaction.js" and which sits under the template folder:
wecena.bliotux/templates/simpleOperation/interaction.js
For instance, this file could contain the code below (see included examples, too, if needed) :
function clickButton(evt){
alert('You clicked the button !');
$('.whereResultShouldBeDisplayed', svg.root()).html('Clicked !');
$('.someSVGElementsWhichShouldBeEmptiedWhenButtonGetsClicked', svg.root()).html('');
storageSave('.whereResultShouldBeDisplayed', 'Clicked !');
storageSave('.someSVGElementsWhichShouldBeEmptiedWhenButtonGetsClicked, '');
}
If you are as unfamiliar with Javascript as I am, you need some more explanations here. What does this function says ?
It says that it takes an input parameter called "evt". But it won't use it in this case.
It first displays a popup alert window with a message ('You clicked...')
Then it changes the content of the SVG displayed in the web browser. It writes the text 'Clicked !' in every SVG (or HTML BTW) element which has an attribute called "class" (the same attribute which can be used for CSS files) including the value "whereResultShouldBeDisplayed".
For instance, let's say you have this text element in your layout.svg file :
<text
id="text4790"
y="386.98224"
x="454.43787">
<tspan
y="386.98224"
x="454.43787"
id="tspan4786"
class="whereResultShoudlBeDisplayed someOtherClass">Not clicked yet.</tspan>
</text>
Then, once the user clicks the button, your interaction.js file will have this text element changed into this :
<text
id="text4790"
y="386.98224"
x="454.43787">
<tspan
y="386.98224"
x="454.43787"
id="tspan4786"
class="whereResultShoudlBeDisplayed someOtherClass">Clicked !</tspan>
</text>
Can you see the difference ?
For more information about how Javascript can have the web browser manipulate
the content of the page at runtime, please see jQuery API documentation. Just remember to
apply jQuery selectors to the root of the SVG document (
svg.root()
) and you should be fine.
There is also this call to storageSave in your interactivity function. What does it mean ?
storageSave
is a function defined by bliotux.
It takes 2 input parameters : a key and its value.
It will have this pair of (key, value) made persistent in the local web browser.
Even if the browser (and possibly computer) is closed (shutdown), this (key, value) pair is still available
and can be later retrieved using another bliotux function :
storageLoad(key)
.
Next time the same page is displayed, any SVG element which corresponds to key (as a jQuery selector) will have
its content filled with value.
In this example, storing the text
"Clicked !"
as
the value of the key
.whereResultShouldBeDisplayed
means 2 things:
"Clicked !"
can be further retrieved with any Javascript call to
storageLoad('.whereResultShouldBeDisplayed')
"Clicked !"
text will be added to all SVG elements which have the
whereResultShouldBeDisplayed
class attribute in their source code.
Now you have your
interaction.js
file which defines the full interactivity of your template document.
Creating a page is much easier than creating the template a page is based on. But it requires writing some (extremely simple) code using any text editor (Windows notepad...). Any brave user should be enabled to do so.
You have a full bliotux template, including an SVG layout (possibly including animation) and Javascript interactivity. Now let's create a page based on this template.
In this example, let's name a first page
Sesamath_CP_page-094_exercice-001
along the name of a French free (as in free speech) textbook vendor.
In order to do so, we create this folder:
wecena.bliotux/pages/Sesamath_CP_page-094_exercice-001/
When we want to access this page, we'll have to direct our web browser to such an URL as
file:///home/jean/wecena.bliotux/index.xhtml?page=Sesamath_CP_page-094_exercice-001
Which template will this page use ?
The answer comes as a Javascript file we have to create:
wecena.bliotux/pages/Sesamath_CP_page-094_exercice-001/data.js
This file contains the declaration of variables describing this page. The variable called template defines the template to be used for this page:
var template = 'simpleOperation';
The next variable in this
data.js
file define data which will get injected into the template so that
the page is built :
var data = {
'.pageCentaine':'',
'.pageDizaine':'9',
'.pageUnite':'4',
'.exerciceCentaine':'',
'.exerciceDizaine':'',
'.exerciceUnite':'2',
'.operande1Centaine':'',
'.operande1Dizaine':'',
'.operande1Unite':'7',
'.operateur':'-',
'.operande2Centaine':'',
'.operande2Dizaine':'',
'.operande2Unite':'5',
'.resultatCentaine':'',
'.resultatDizaine':'',
'.resultatUnite':'',
};
This data associative array lists (key, value) pairs which define which content should be injected where.
The key (for instance
.pageCentaine
) is a jQuery selector to be applied to the root of the SVG template.
The value is some SVG code which is to be inserted as the content of any SVG element matching the key.
Rather than using
id
attributes as selectors (
#pageCentaine
), it seems preferable to use
class
attributes (
.pageCentaine
) which carry the meaning (semantics) of the corresponding SVG element and can be reused
several times in the same template (whereas IDs should be unique, I suppose).
Anyway, the SVG template should be edited so that the corresponding
class
attribute are present where needed.
Using the mechanism of templates and the data.js file, you may have your SVG template include some areas where
pages could have specific bitmap (JPEG, PNG) files displayed.
This is just the matter of including such a JPEG file in the
layout.svg
file,
giving the corresponding SVG element an appropriate class attribute (using Inkscape XML editor for instance)
and then defining in
data.js
the name of the picture file to insert in this area of your layout for this specific page.
But you can also have given pages include full SVG files.
For instance, the left part of
simpleOperation/layout.svg
is meant to display a funny but didactic illustration
where characters (such as Tux the penguin) invite the child to perform the mathematical operation at hand.
Such an illustration could contain page-specific animations.
Adding an animated GIF file would not be enough.
The full power of SVG for animations may be required.
In such cases, you can define an svgParts variable in the data.js file of the page :
var svgParts = {
'#illustration': 'illustration.svg'
}
This variable says : "Hey, bliotux, please look at my template
and find the SVG element with
illustration
as the value of its
id
attribute.
Then replace this full SVG element with the first
g
element (SVG group) you will find
in the
illustration.svg
file sitting under this page folder. Thanks."
You can access and test your page at a URL which should look a bit like that (the exact path depends on the folder hierarchy
on your hard drive):
file:///home/jean/wecena.bliotux/index.xhtml?page=Sesamath_CP_page-094_exercice-001
Side note : Now I realize I can't use doctestjs for this document so it's pretty useless to me. It would have been much useful if only I had figured out a way to have some Javascript code generate a template document in the filesystem during the doctest so that I can further test bliotux on it using doctestjs. Maybe later...