Khan Academy Multiple Choice Activity

by

Here is a starter page for multiple choice answers. It uses the same wordlist as the free response activity.

<!DOCTYPE html>
<html data-require="math">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RetVortoj</title>
        <script src="../khan-exercise.js"></script>
    </head>
    <body>
        <div class="exercise">

            <div class="vars">
                <var>wordlist=[ 
                    [ "aktualaĵo", "current events" ],
                    [ "ligiloj", "links" ],
                    [ "presable", "printable" ],
                    [ "ensaluti", "login" ],
                    [ "elsaluti", "logout" ],
                    [ "dosiero", "file" ],
                    [ "alŝulti", "upload" ],
                    [ "uzantaro", "users" ],
                    [ "retpoŝtadreso", "email address" ],
                    [ "pasvorto", "password" ],
                    [ "registriĝi", "register" ],
                    [ "salutnomo", "login name" ],
                    [ "ĉefpaĝo", "homepage" ]
                    ]</var>
                <var id="eo,en">randFromArray(wordlist)</var>

            </div>

            <div class="problems">
                <div id="EnglishToEoMultChoice">

                     <div class="question">
                        <p>Translate to Esperanto: <strong><var>en</var></strong></p>
                    </div>

                    <div class="solution" data-type="radio">                     
                        <var>eo</var>
                    </div>
                    
                    <ul class="choices" data-show="5" data-none="true">
                        <li data-each="wordlist as value">
                        <var>value[0]</var>
                        </li>
                    </ul>

                    <div class="hints">
                        <div>
                            <span data-each="wordlist as value">
                                <var>value[0]</var>-
                            </span>
                        </div>
                        
                        <div>
                            <span data-each="wordlist as value">
                                <var>value[0]</var>:<var>value[1]</var>-
                            </span>
                        </div>
                        
                    </div>                       
                </div>                
            </div>                
        </div>
    </body>
</html>

Khan Academy exercise page for vocabulary

by

Below is a Khan Academy page for making a vocabulary checking exercise. Note that this is an update to our previous code as it extracts

<!DOCTYPE html>
<html data-require="math">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RetVortoj</title>
        <script src="../khan-exercise.js"></script>
    </head>
    <body>
        <div class="exercise">

            <div class="vars">
                <var>wordlist=[ 
                    [ "saluton", "hello" ],
                    [ "ĉefpaĝo", "homepage" ]
                    ]</var>
                <var id="eo,en">randFromArray(wordlist)</var>
            </div>

            <div class="problems">
                <div id="EnglishToEoMultChoice"">

                     <div class="question">
                        <p>Translate to Esperanto: <strong><var>en</var></strong></p>
                    </div>

                    <div class="solution" data-type="text">                     
                        <var>eo</var>          
                    </div>

                    <div class="hints">
                        <div>
                            <span data-each="wordlist as value">
                                <var>value[0]</var>-
                            </span>
                        </div>
                        <div>
                            <span data-each="wordlist as value">
                                <var>value[0]</var>:<var>value[1]</var>-
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Writing questions to go with story

by

This sample code will be used with student in the class to write a short story with accompanying questions.

<!DOCTYPE html>
<html>
    <head>
        <title>Demandaro 37</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() {
                $("form").submit(function(event){
                    event.preventDefault();
                    var $form = $ (this),
                    url = $form.attr('action');
                    var values = $form.serialize();
                    $("#thereply").html(values);
                    $.post(url,values,
                    function(data) {
                        $('#thereply').html(data);
                    });
                }); 
            });

        </script>
        <style>
            img{float:left;}
            .clear{clear:both;}
            #container{	max-width: 800px; margin: auto; padding: 0;}

        </style>
    </head>
    <body>
        <div id="container">
            <h1>Adventuroj de Johanino Kaj Karlo</h1>
            <img src="bildoj/tago38.png" width="577" height="307" alt="tago38"/>

            <p class="clear">En Sud-Ameriko.  -- Post longa vojaĝo sur la plej granda maro, la geknoboj alvenis en Argentino.
                La Ŝipestro plej afable parolis al ili en Esperanto.  Hodiaŭ ili rajdas sur belaj ĉevaloj, ili ŝajnas fieraj.
                Ankaŭ la sudamerikaj amikoj rajdas;  iliaj ĉevaloj estas pli rapiaj ol tiuj de la geknaboj.  
                Unu sudamerikano ĵetis kaptoŝnuron por kapti sovaĝan ĉevalidon.  La hundo renkontis supenton.  
                La serpento levas la kapon super la herbo;  la hundo tremas;  ŝajne, ĝi estas maltrankvila.  
                Post unu momento, ĝi forkuros tra la kamparo, tiel rapide kiel sovaĝa ĉevalido.</p>
            <h2>Respondu al la jenaj demandoj.</h2>
            <div id="thereply">
                waiting for reply...
            </div>
            1.  Kie estas la geknaboj??
            <form action="http://bazaesperanto.com/respondo.php">
                <input type="hidden" value="PUT CHAPTER NUMBER HERE" name="chapter">
                <input type="hidden" value="1" name="qnum">
                <input name="myresponse" size="60" type="text"/>
            </form> 


            2.  Sur kia maro ili vojaĝas?
            <form action="http://bazaesperanto.com/respondo.php">
                <input type="hidden" value="PUT CHAPTER NUMBER HERE" name="chapter">
                <input type="hidden" value="2" name="qnum">
                <input name="myresponse" size="60" type="text"/>
            </form> 

        </div>
    </body>
</html>

Ajax form for receiving and posting student responses

by

This starter code shows how we can collect student responses to questions and then show the students other recent responses for them to compare with their answers. Unlike regular forms, there is not a need to leave the page. Data is collected in a database.

<!DOCTYPE html>
<html>
    <head>
        <title>Demandaro 18</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() {
                $("form").submit(function(event){
                    event.preventDefault();
                    var $form = $ (this),
                    url = $form.attr('action');
                    var values = $form.serialize();
                    $("#thereply").html(values);
                    $.post(url,values,
                    function(data) {
                        $('#thereply').html(data);
                    });
                }); 
            });

        </script>
    </head>
    <body>
        <h2>Faru demandojn por la jenaj respondoj.</h2>
        <div id="thereply">
            waiting for reply...
        </div>
        <form action="http://bazaesperanto.com/respondo.php">
            <input type="hidden" value="1001" name="chapter">
            <input type="hidden" value="1" name="qnum">
            1.  <input name="myresponse" size="120" type="text"/>
        </form> 
        <div>Jes, ĉiusomere.</div> 

        <form action="http://bazaesperanto.com/respondo.php">
            <input type="hidden" value="1001" name="chapter">
            <input type="hidden" value="2" name="qnum">
            2.  <input name="myresponse" size="120" type="text"/>
        </form> 
        <div>Kun siaj gepatroj kaj Heleno.</div> 

    </body>
</html>

Mixed question type demandaro

by

This starter code allows for mixed question types of both fill-in-the-blank as well as open ended answers. The open ended answer are added to a database that let’s one compare responses with others.

<!DOCTYPE html>
<html>
    <head>
        <title>Demandaro 16</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() {

            });

        </script>

        <style type="text/css">    

        </style>

    </head>
    <body>
        <div>1. Ĉu Janko povis <input size="10" data-correct="doni" type="text" /> 
            al sia <input size="10" data-correct="amiko" type="text" /> informojn? 
            Jes, <input size="10" data-correct="li" type="text" /> 
            povis, post kelkaj <input size="10" data-correct="tagoj" type="text" />.</div> 

        <div> 2. Kion faris la avo?</div>
        <!--La avo mortis.-->
        <form action="http://bazaesperanto.com/respondo.php">
            <input type="hidden" value="16" name="chapter">
            <input type="hidden" value="2" name="qnum">
            <input name="myresponse" size="120" type="text"/>
        </form>

    </body>
</html>

Creating question lists for student responses

by

Below is the starting code for creating question lists that allow open ended student responses. These will be collected and then compared with each other permitting users to find errors in their own answers and for identifying the best responses.

<!DOCTYPE html>
<html>
    <head>
        <title>Demandaro 15</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">    

        </style>

    </head>
    <body>
        <h2> Rakontu skribe la supran ĉapitron.</h2>

        <div> 1. Kion faris la familio Davis dimanĉe?</div>
        <!--Ili iris al la preĝejo.-->
        <form action="http://bazaesperanto.com/respondo.php">
            <input type="hidden" value="15" name="chapter">
            <input type="hidden" value="1" name="qnum">
            <input name="myresponse" size="120" type="text"/>
        </form>
        <div> 2. Ĉu la katedra preĝejo estis nova? </div>
        <form action="http://bazaesperanto.com/respondo.php">
            <input type="hidden" value="15" name="chapter">
            <input type="hidden" value="2" name="qnum">
            <input name="myresponse" size="120" type="text"/>
        </form>
        <div> 3. Kiun renkontis Karlo en la muzeo?</div>
        <div> 4. Kion diris la fraŭlino iun tagon?</div> 
        <div> 5. Kion faris Karlo?</div>
        <div> 6. Kie loĝis la fraŭlino?</div>
        <div> 7. Nomu kelkajn florojn kaj diru, kiun vi preferas? </div> 
        <div> 8. Kiuj birdoj estis en la ĝardeno? </div>

    </body>
</html>

Making question lists for readings

by

This week we are working on interactive question lists for our reading of Karlo. In some cases this requires little new beyond what we did in tago14.html. We simply make questions with only one right answer that is automatically checked. To add the ability to for students to enter in arbitrary answers that can be put into a database and then checked either by the author or another user will be one of our next steps.

For now, we create a simple question list with fill-in-the-blanks for use with chapter 14.

<!DOCTYPE html>
<html>
    <head>
        <title>Chapter 14 questions</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() {
         
            });
        </script>

        <style type="text/css">    

        </style>
    </head>
    <body>
        <h1>Ĉapitro 14 Demandaro</h1>

        <ol>           
            <li>Ĉu Karlo havis <input size="10" data-correct="lecionon" type="text" /> 
                de greka <input size="10" data-correct="lingvo" type="text" /> la morgaŭan tagon? Ne, ĉar 
                la <input size="10" data-correct="profesoro" type="text" /> estis malsana.</li>
            <li>Ĉu S-ro Jehman diris ion al la — ? Ne, li diris — .</li>
            <li>— da infanoj havis la profesoro? — havis —</li>
            <li>Kie — lia edzino? Ŝi mortis — Milano.</li>
            <li>— donis la — al Karlo? Du librojn.</li>
            <li>Ĉu la profesoro — Karlon? —, li — punis —.</li>              
        </ol>
        
    </body>
</html>

Side-by-side divs

by

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

by

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

by

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>