Side-by-side divs

The code below can be a launching page for our chapters. It shows both the English and the Esperanto versions side by side which may help students better read the Esperanto version.

<!DOCTYPE html>
<html>
    <head>
        <title>Karlo 09</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://bazaesperanto.com/css/baza.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://bazaesperanto.com/js/baza.js"></script>

        <script>
            $(document).ready(function() {
                $('[title]').addClass('hilight');
                $("#togglehilight").click(function(e){
                    $('[title]').toggleClass('hilight');
                });
                
                $('#esperantoversion').show()
                $('#esperantoversion').load('karlo09eo.html');
                ;
                
                $("#showesperanto").click(function(e){
                    $('#esperantoversion').fadeToggle("slow", "linear");
                });
            
                $('#englishversion').show();
                $('#englishversion').load('karlo09en.html');
            
                $("#showenglish").click(function(e){    
                    $('#englishversion').fadeToggle("slow", "linear");
                });
            });
        </script>

        <style type="text/css">    
            .hilight{border-bottom: thin solid}
            #esperantoversion { width: 390px; border: 1px solid red; float: left;}
            #englishversion { width: 390px; border: 1px solid red; float: right;}
        </style>

    </head>
    <body>
        <div id="container">     
            <button id="togglehilight">Toggle Hilight</button>
            <button id="showesperanto">Toggle Esperanto Version</button>
            <button id="showenglish">Toggle English Version</button>
            <div></div>
            <span data-sono="sonoj/karlo09.mp3">Legu Esperante</span>
            <span data-sono="sonoj/karlo09en.mp3"> English</span>
            <div></div>
            <div id="englishversion"></div>       
            <div id="esperantoversion"></div>
        </div>  
    </body>
</html>

Show/hide vocabulary lists

With this starter code we make an interactive vocabulary list that will be used for each chapter of our text. Initially students are shown just the list, but by clicking the button, they can see either English definitions, Esperanto definitions, or both.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://bazaesperanto.com/css/baza.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://bazaesperanto.com/js/baza.js"></script>
        <script>
            $(document).ready(function() {
                $(".endef").hide();
                $(".eodef").hide();
                
                $("#entoggle").click(function(){
                    $(".endef").toggle();
                });
                
                $(".edef").hide();
                $("#eotoggle").click(function(){
                    $(".eodef").toggle();
                });
            });
        </script>

        <style type="text/css">    

        </style>
    </head>
    <body>
        <h1>Esperanto Vocabulary for Chapter xx</h1>
        <button id="entoggle">Toggle English Definitions</button>
        <button id="eotoggle">Toggle Esperanto Definitions</button>

        <dl>
            <dt title="Granda muzika blovinstrumento, kun tuboj, klavaroj k pedalaro, uzata precipe en preĝejoj">orgeno</dt>
            <dd class="endef">- organ</dd>
            <dd class="eodef">Granda muzika blovinstrumento, kun tuboj, klavaroj k pedalaro, uzata precipe en preĝejoj</dd>
            <dt>katedra</dt>
            <dd class="endef">- cathedral</dd>
            <dd class="eodef">chefpreĝajo</dd>
        </dl> 
    </body>
</html>

jQuery Effects for Controlling Pages

In today’s starter code, we use several of jQuery’s effects to add features to our pages. The toggleClass lets us turn on and off styling. This can be used, for example, to hilight new words. .show() and .hide() can be used to affect the visibility of elements. In our example, we hide the English version of the div when the page is loaded so it can be latter toggled. The .load() effect lets us get pages from our server. This will be especially important when we want up-to-date information without having to change every page. Finally, the .fadeToggle() effect lets us add nice animation to elements on our page.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
            $(document).ready(function() { 
                $("#togglehilight").click(function(e){
                    $('[title]').toggleClass('hilight');
                });
            
                $('#englishversion').hide();
            
                $("#showenglish").click(function(e){
                    $('#englishversion').load('tago24.html');
                    $('#englishversion').fadeToggle("slow", "linear");
                });
            });
        </script>

        <style type="text/css">    
            .hilight{background-color:yellow;}
        </style>

    </head>
    <body>
        <button id="togglehilight">toggle hilight</button>
        <p><span title="Hello">Saluton</span> Mondo!</p>
        <button id="showenglish">Toggle English Version</button>
        <div id="englishversion"></div>
    </body>
</html>

Invitation to Esperanto Sumo (Daily reading activity, May 6th to 20th)

An interesting Esperanto activity is sponsored by Japanese Esperantists and is called Esperanto Sumo. More than 100 individuals participate; I was the first US Esperantist to do so in the March period this year. About of my students will be joining me in the May Sumo contest and I would like to invite others to join us as well.

The idea is that each individual commits to reading a certain number of pages or chapters each day from a book of one’s choosing. Every two or three days you report on whether you have met your goal and this is compiled and published by the organizers.

At the end of the 15 days of reading, readers publish a summary of their book that is shared among the participants.

It is an interesting way keep one engaged and for some can provide the motivation to keep with a routine.

My class is currently starting the book Karlo (http://www.gutenberg.org/ebooks/24525) and students will read chapter a day from it, or a reading of their choosing, for the contest. On class days, we will read and discuss the chapter together; other days, students will read on their own. I invite others to consider joining us for this contest. More information is below:

—–
Invito al Esperanto-Sumoo
HORI Yasuo

Sumoo estas japana tradicia lukto. Ĉiun jaron okazas 6 konkursoj en neparaj monatoj: januaro, marto, majo, julio, septembro, kaj novembro. Unu konkurso daŭros 15 tagojn. Okaze de tiuj konkursoj mi proponas al vi partoprenon en Esperanto-Sumoo.

En la marta-sumoo 120 homoj el 26 landoj partoprenis, kaj ili legis entute 10000 paĝojn.
La maja sumoo okazos ekde la 6a de majo ĝis la 20a.
Vizitu nian TTT-ejon por pli detale scii, kio estas nia sumoo: http://www.esperanto-sumoo.strefa.pl/index.html

1. Celo:
Legi Esperanto-librojn kun ĝojo

2. Luktmaniero:
1) Elektu libron, kiun vi legos dum tiu konkurso.
2) Decidu kiom da paĝoj vi legos por unu tago laŭ via kapablo.
3) Laŭ la irado de vera Sumoo-konkurso, ni luktadas. Se vi legas pli ol promesitaj paĝoj ĝis la noktomezo de tiu tago, vi venkas, se ne, vi malvenkas. Tiamaniere vi luktas kun la libro dum 15 tagoj. Vi ne luktas kontraŭ aliaj luktistoj, sed kontraŭ vi mem.

3. Aliĝo:
Sendu jenajn informojn al HORI Jasuo: hori-zonto@water.sannet.ne.jp
1) Via nomo, sekso, lando, urbo, retadreso
2) Via luktista nomo
3) Titolo de la libro, kiun vi legos, kaj kiom da paĝoj vi legos
4. Raportu vian rezulton
Kiam komenciĝos la Sumoo, ĉiun duan aŭ trian tagon (ne nepre) raportu al la prizorgantoj pri via venko au^ malvenko. Ili notos ĝin kaj resendos al vi la raportaron kun rezultoj de aliaj luktistoj.

Mi atendas vian partoprenon. Ne nur vi sed ankau viaj libroj kuŝantaj en la breto havos tre feliĉajn tagojn en tiu sumoo.

HORI Jasuo (s-ro)

2-13-3 Ootone, Maebasi, Gunma 371-0825 Japanio

Beginning of Karlo Project

We are now beginning a new phase of the project. Each student will be responsible for for editing for the web a chapter of the Esperanto reader “Karlo”. They will style the page, make it interactive, give an English translation, make clarifications for new words, add an audio rendering, and in other ways make it part of an online book for post beginners of the language.

Here is the starter code for tago23. Students should place in their own chapter, enclose the title in an h1 tag; paragraphs in p tags, and begin adding spans to clarify new words or compounds that might present difficulty for readers who have just finished an introductory textbook in Esperanto.

<!DOCTYPE html>
<html>
    <head>
        <title>Tago23</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
            $(document).ready(function() {
            });
        </script>

        <style type="text/css">    
            span {background-color: yellow;}
            #container{	max-width: 800px; margin: auto; padding: 0;}
            </style>

        </head>
        <body>
            <div id="container">
            <h1><span title="preface">ANTAŬPAROLO</span> DE LA 
                <span title="author">VERKINTO</span></h1>
            <p>La "Librairie de l' Esperanto" en Parizo petis min,
                ke mi <span title="write">verku</span> facilan 
                <span title ="lego-libr-on Reading book">legolibron</span> 
                por la lernantoj de kursoj aŭ la 
                <span title="komenc-ant-oj beginners">komencantoj</span>, kiuj 
                ĵus finis sian lernadon en lernolibro. Mi intencis prezenti dudek
                tekstojn aranĝitajn
                <span title="tia-manier-e in such a manner">tiamaniere</span>, 
                ke en ĉiu estos multaj vortoj pri sama <span title ="theme">temo</span> 
                de la ĉiutaga vivo. Por pli bone konservi la intereson de la lernanto 
                en dudek ĉapitroj, mi verkis unu rakonton pri la vivo de junulo, 
                de lia infaneco, ĝis lia edziĝo.</p>
        </div>
    </body>
</html>

Outsourced code 2 for Vocab Activity

This code is the second outsourced code for the vocab activity. It is intended for us to study and to use the best features for building the classes vocabulary activity. Students wishing to play with the actual javascript code on their own sub-site should copy the liam.js into their own directory and change the path name in the tago21.html file.

data21.js

var wordTest = {
    "Words": {
        "Word": [
      {
          "Entry": "Saluton",
          "EnglishSentence": "Hello",
          "EsperantoSentence": "Saluton",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Ĝis revido",
            "Pacon!",
            "Bonan matenon",
            "Bone",
            "Dankon",
            "Bonvolu"
          ]
          }
      },
      {
          "Entry": "Jes",
          "EnglishSentence": "Yes",
          "EsperantoSentence": "Jes",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Bone",
            "Pacon",
            "Bonan matenon",
            "Ne",
            "Dankon",
            "Bonvolu"
          ]
          }
      },
      {
          "Entry": "Ne",
          "EnglishSentence": "No",
          "EsperantoSentence": "Ne",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Bone",
            "Nenio",
            "Bonan matenon",
            "Jes",
            "Dankon",
            "Nul"
          ]
          }
      },
      {
          "Entry": "Bonan matenon",
          "EnglishSentence": "Good morning",
          "EsperantoSentence": "Bonan matenon",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Ĝis revido",
            "Pacon!",
            "Saluton",
            "Bone",
            "Dankon",
            "Bonvolu"
          ]
          }
      },
      {
          "Entry": "Bonan vesperon",
          "EnglishSentence": "Good evening",
          "EsperantoSentence": "Bonan vesperon",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Saluton",
            "Ĝis revido",
            "Pacon!",
            "Bonan matenon",
            "Bone",
            "Dankon",
            "Bonvolu"
          ]
          }
      },

      {
          "Entry": "Bone",
          "EnglishSentence": "All right",
          "EsperantoSentence": "Bone",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Ĝis revido",
            "Pacon!",
            "Bonan matenon",
            "Saluton",
            "Dankon",
            "Bonvolu"
          ]
          }
      },

      {
          "Entry": "Dankon",
          "EnglishSentence": "Thank you",
          "EsperantoSentence": "Dankon",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Ĝis revido",
            "Pacon!",
            "Bonan matenon",
            "Bone",
            "Saluton",
            "Bonvolu"
          ]
          }
      },
      {
          "Entry": "Bonvolu",
          "EnglishSentence": "Please",
          "EsperantoSentence": "Bonvolu",
          "PossibleAnswers": {
              "PossibleAnswer": [
            "Bonan vesperon",
            "Ĝis revido",
            "Pacon!",
            "Bonan matenon",
            "Bone",
            "Dankon",
            "Sanon"
          ]
          }
      }
    ]
    }
};

tago21.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <title>Esperanto Word Test</title>
        <link rel="stylesheet" href="http://bazaesperanto.com/css/liam.css" />
        <script src="http://bazaesperanto.com/js/modernizr-2.5.3.min.js"></script>
        <script src="http://bazaesperanto.com/js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="data21.js"></script>
        <script type="text/javascript" src="http://bazaesperanto.com/js/liam.js"></script>
        <script>
            // Add an event handler for when the window loads.
            $(document).ready(eventWindowLoaded);
        </script>
    </head>
    <body>
        <div id="bannerPanel" class="bannerPanel">Esperanto Knowledge Test</div>
        <br />
        <div id="instructionsPanel" class="instructionsPanel">
            <h2>Instructions</h2>
            <p>Any instructions go here</p>
            <button id="startTestCommandButton">Start Test</button>
        </div>
        <div id="test" class="testPanel">
            <table>
                <tr>
                    <td>English:</td>
                    <td id="englishSentence"></td>
                </tr>
                <tr>
                    <td>Esperanto:</td>
                    <td><span id="phrasePrefix"></span><input id="inputTextBox" /><span id="phraseSuffix"></span></td>
                    <td><button id="nextWordCommandButton">Check Answer</button></td>
                </tr>
            </table>
            <br />
            <p id="result"></p>
            <br />
            <div id="wordListBlock">
                <ul id="wordsList" class="wordList">
                </ul>
            </div>
        </div>
    </body>
</html>

Outsourced code 1 for vocab activity

Today we are reviewing the project that we outsourced for learning vocabulary. It meets the basic specifications but needs a lot of work. Still it give some interesting ideas and approaches.

json20.json

{"vocab": [
{"word": "unu","def" : "one","pos": "baz"},
{"word": "ridi","def" : "to laugh","pos": "-i"},
{"word": "bela","def" : "pretty","pos": "-a"},
{"word": "domo","def" : "house","pos": "-o"}
]}

tago20.html

<!DOCTYPE html>
<html>
    <head>
        <title>Vocabulary</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="http://bazaesperanto.com/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
        <script src="http://bazaesperanto.com/js/jquery-1.7.2.min.js"></script>
        <script src="http://bazaesperanto.com/js/jquery-ui-1.8.19.custom.min.js"></script>
        <link href="http://bazaesperanto.com/css/sanjoy.css" rel="stylesheet" />        

        <script type="text/javascript">
            var correctAns;
            var elCount=1;
            var data,qi=0;
            var elmTimePoint,opTimePoint;
            var questionCount=0,correctCount=0;
            $(document).ready(function(){
                $.ajax({
                    url:"json20.json",
                    cache: false,
                    dataType:"json",
                    success:function(receivedData){
                        data=receivedData;
                        $("#btn").click(function(){                            
                            clearTimeout(opTimePoint);
                            clearTimeout(elmTimePoint);
                            questionCount++;
                            if($("#ans").val()==correctAns)
                            {
                                correctCount++;
                                qi++;
                                showQuestion();
                            }
                            else
                            {
                                qi++;
                                showQuestion();
                            }
                        });
                        showQuestion(0);
                    }
                });                
                $("#btn").button();
                $("#ans").focus();
                $("#ans").keypress(function(e){
                    if(e.which==13)
                        $("#btn").click();
                });
                
            });
            function showQuestion(){
                if(qi==data.vocab.length)
                {
                    $("#container").hide();
                    dialog=document.createElement("div");
                    dialog.setAttribute("title", "Vocabulary");
                    dialog.innerHTML="You have answered "+correctCount+" out of "+questionCount+" correctly";
                    $(dialog).dialog();
                    return;
                }
                $("#def").text("Defination : "+data.vocab[qi].def);
                $("#pos").text("Part of Speech : "+data.vocab[qi].pos);
                $("#ans").val("");
                $("#ans").focus();
                var opContainer=document.getElementById("options");
                opContainer.innerHTML="";
                $(opContainer).hide();                        
                var flg=new Array();
                var j;
                var words=new Array();
                for(i=0;i<8 && words.length< data.vocab.length;i++)
                    words.push(data.vocab[(qi+i)%data.vocab.length].word);
                for(var i=0;i<words.length;i++)
                    flg[i]=0;
                for(var i=0,opCount=0;i<data.vocab.length && opCount<8;i++,opCount++){
                    do{
                        j=Math.floor(Math.random()*words.length);                                
                    }while(flg[j]!=0);
                    flg[j]=1;                            
                    var op=document.createElement("input");
                    op.setAttribute("class", "option");
                    op.setAttribute("type", "button");
                    op.setAttribute("value", words[j]);
                    opContainer.appendChild(op);
                    $(op).button();
                    $(op).click(function(){$("#ans").val($(this).val())});
                }
                correctAns=data.vocab[qi].word;
                elCount=1;
                opTimePoint=setTimeout("$('#options').show('blind',500,function(){elmTimePoint=setTimeout('eliminateAns();',3000);});",8000);                        
                        
            }
            function eliminateAns(){                
                var opContainer=document.getElementById("options");
                var options=opContainer.getElementsByTagName("input");
                if(elCount==options.length)
                    return;
                elCount++;
                var j;
                do{
                    j=Math.floor(Math.random()*options.length);
                }while($(options[j]).val()==correctAns || $(options[j]).button("option","disabled")==true);
                $(options[j]).button("disable");
                elmTimePoint=setTimeout('eliminateAns();',3000);
            }
        </script>

    </head>

    <body>
        <div id="container">
            <div id="title" >Vocabulary</div>
            <div id="question">
                <div class="given" id="def">Definition:</div>
                <div class="given" id="pos">POS:</div>
            </div>
            <div id="answer">
                <input type="text" id="ans"/>
                <input type="button" id="btn" value="Next"/>
            </div>
            <div id="options"></div>
        </div>
    </body>
</html>