This tutorial shows how using Leo greatly simplified the development of the language learning applications online at evisa.com, a multilingual information and learning site. (The .leo file containing the code for this application is not available for download, but the leo outline is illustrated via screenshots).
First, let's take a look at how the site application works, and then we'll examine the .leo file that contains all of the code for the language applications.
Here is the Language Learning Site at evisa.com. This site contains a number of vocabulary drills and activities for numerous languages.
Let's choose the French language option.
This brings us to the French Language Study page. There are two activities available from this page:
Let's take a look at the Word Study activities.
This presents us with a list of word groups. The word groups are marked with red, green or yellow icons to show which groups have been already been reviewed by the currently logged on user.
We'll choose the colors group.
This brings us to the activity page for the colors word group.
Let's take a look at View and Listen.
This brings us to a list of colors in French and English. Also, the Merlin character (Microsoft Agent) appears. We can click on any French word to hear Merlin speak the word.
To try another activity, we can go back to the activity menu, or click on the indicated mark to go to the next activity.
This brings us to the Flashcards page. This presents the colors as a series of cards. Clicking on a card shows the word in the target language. We can also choose to save cards to the My Flashcards page, for which we saw a link earlier.
Now we'll go to the next activity.
This brings us to the Concentration card game page. This allows one or two players to play a game of Concentration with the vocabulary items.
The final activity is the Match Test . This is pairing test. You click on a word first in one column, then in the next. If the words match, you get a point. If you get a score of 100%, and you are logged in, and your pass is automatically saved, so that you can see it later in the My Achievement page, to which we saw a link earlier.
Both the Match Test and the Concentration card game allow you to configure the sound effects for right and wrong answers.
Now, let's consider what will be involved in programming an application like the one we've just seen.
We'll need at least:
The application is going to be getting words from the database, and inserting them into each activity page. That means we need a template for each of these pages. But evisa.com doesn't just serve an English user base. It also has a complete subsite for Japanese users, with sites for other languages planned. So we'll need templates for other languages.
We'll need to plan the database, so we'll something explaining that. We need to make input pages for the database so that administrators can add words. Since we want the database to be as fast as possible for reads, we want to make some utilities to replace certain database functions that could slow down reads, such as data constraints.
Most of the activity pages have a lot of javascript, some of which could be put in a libary file, and all of which should be organized.
Hmmm... this is starting to look like a major project. Each task is simple, but keeping everything organized so that the job can be done as fast as possible even when the the project is being stopped and started over a period of time... that could be a challenge.
Here's a look at the .leo file that is actually behind the all of the code.
An explanation of some of the nodes:
In addition to the actual code for all programs, the outline contains just about every other useful piece of information for the site programmer, including how to log on to the MySQL database, and other documentation of third party programs used.
Let's take a look at the words.cgi program, because that does most of the work.
Here we see the node for the words.cgi program expanded. Already the basic structure of the program is apparent. We are going to get/initialize the cgi object, check to see what browser is being used, connect to the database and retrieve words, and then make the outgoing page.
In the text for the << make page >> section, we can see that one of the included sections is for << word groups >>. Looking down the outline, we can see that the word groups page consists of
If we were debugging the word groups page, we would have jumped right to this spot in the code immediately. No hunting around trying to remember how the program works and where things are.
In this screen we are viewing the text for the word groups: fill in the template node. All of the code for this node fits in one screen.
You might note that the code displayed in this node text does not stand on its own. So, to debug it, you might need to look at another node. This code and outline could have been written otherwise, but writing it in this way is not a great impediment, since finding the code that this node is dependent on is just as easy as it was to find this node itself. When you are using literate programming techniques, the whole program simply becomes much easier to navigate.
We've seen that the program is retrieving these words, and then filling in a template. Where are these templates? In Leo, of course. Underneath the words node, we find the templates node.
Since evisa.com has viewers in langages other than English, there must be a separate set of templates for each language.
Here we can see that all of the templates are embedded in the .leo file.
Let's take a look at the speak.htm template. This is the file that will display the page where the user can click to hear a word spoken. The words.cgi program simply fills words into this template. The template contains all of the code for making the page speak in the browser.
The way it does this, is to embed an ActiveX object for a Microsoft Agent, and then call that ActiveX object with Javascript. Here the code for embedding the ActiveX objects is shown. Since these same objects are embedded in the same page for each language, this is a clone node. All of the other templates that use this code simply share this node.
This has been a brief overview of the language applications at evisa.com. As you can see, all of the code, and virtually all of the supplemental information needed to work on this application is embedded in one Leo file. The programmer opens the file, works on the application in Leo, and then tangles the output code files.
This application was written in Perl, because of Perl's excellent text manipulation capability and speed of development. There is no scalability problem with this kind of Perl application, because it runs with Apache mod_perl. While programming this application in certain other languages would have given it some more inherent structure, this would sacrifice some of the advantages of development with Perl. In fact, one can think of Leo doing for the supposed "structure" problem of Perl what mod_perl has done for the scalability problem. The application as written in Leo simply could not be easier to understand.
Are there alternatives to this approach? There are more than fifty files embedded in this one Leo file. Every file is grouped and described not just with a name, but with whatever additional information is necessary. Some files are sharing components, i.e. nodes.
This application was developed on a very constrained budget and simply would not have been possible without Leo.