## Leo : Examples : The Evisa Site

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.

Author: Joe Orr

Here is the Language Learning Site at evisa.com. This site contains a number of vocabulary drills and activities for numerous languages.

Author: Joe Orr

1. In addition to being able to study words, students can take tests, and save their scores.
2. Saving a score however, requires registration (free).

Author: Joe Orr

Let's choose the French language option.

Author: Joe Orr

This brings us to the French Language Study page. There are two activities available from this page:

1. Word Study: a set of language study activities.
2. My Flashcards: a page that shows word flashcards saved by the registered user who is viewing the page.

Author: Joe Orr

Let's take a look at the Word Study activities.

Author: Joe Orr

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.

Author: Joe Orr

This brings us to the activity page for the colors word group.

Let's take a look at View and Listen.

Author: Joe Orr

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.

Author: Joe Orr

To try another activity, we can go back to the activity menu, or click on the indicated mark to go to the next activity.

Author: Joe Orr

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.

Author: Joe Orr

Now we'll go to the next activity.

Author: Joe Orr

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.

Author: Joe Orr

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.

Author: Joe Orr

Both the Match Test and the Concentration card game allow you to configure the sound effects for right and wrong answers.

Author: Joe Orr

Now, let's consider what will be involved in programming an application like the one we've just seen.

- The same words appear in many pages, so we'll want a database of words with the pages inserted into each page as required.
- This needs to work with a number of languages, so the database will need tables for each language paired with English.

We'll need at least:

- A program or module to do the basic word activities
- A program or module for registration. This involves sending the user an email and the user then clicks on a link to register.
- A program to display personal achievement.
- A program for the My Flashcards page.

Author: Joe Orr

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.

Author: Joe Orr

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.

Author: Joe Orr

An explanation of some of the nodes:

- phonics: This is a program that allows an administrator to build the phonetic library used for showing the pronunciation of English words.
- SQL: utilities for maintaining the word database.
- words: the application that takes care of the server side of all of the Language Learning Activities
- recorders: small programs that record user information such as passed tests and flashcards
- flashbox: the application for My Flashbox

Author: Joe Orr

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.

Author: Joe Orr

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.

Author: Joe Orr

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

- getting data from the database.
- filling in the template with the data.

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.

Author: Joe Orr

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.

Author: Joe Orr

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.

Author: Joe Orr

Since evisa.com has viewers in langages other than English, there must be a separate set of templates for each language.

Author: Joe Orr

Here we can see that all of the templates are embedded in the .leo file.

Author: Joe Orr

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.

Author: Joe Orr

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.

Author: Joe Orr

Created with ScreenBook Maker Last update: 8/3/2002 Additional Trademark and Copyright Information