Khan Academy Multiple Choice Activity

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

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

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

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>

Creating question lists for student responses

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

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

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>