Mixed question type demandaro

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>
Advertisements

Page template with with sounds and field checks

Today we create a base template for our future projects. It contains links to both the site css and javascript that we will continue to add to. While one can copy and paste from the sample below, in class we walk though making this a standard NetBeans template.

<!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() {
         
            });
        </script>

        <style type="text/css">    

        </style>
    </head>
    <body>
        <h1>Testo</h1>
        <div data-sono="http://bazaesperanto.com/sonoj/en1.mp3">Saluton!</div>
        <ol>           
            <li>Tuesday: <input size="10" data-correct="mardo" type="text" /></li>           
        </ol>
    </body>
</html>

Using webdeveloper tools to study programming techniques

Today on our return from vacation we begin by studying techniques used on other sites for features we might want to incorporate on our own. So our first tool to evaluate is the popular “WebDeveloper” for Firefox which will let us look at html, css, and javascript source code from any sight including our own.

Also, to simplify our future work, we start the processing of linking more to external stylesheets and javascript libraries. For our sample code, I continue to leave space for custom scripts and styles on a given page, but often these will not be needed in the final production work if the elements in the master libraries include everything needed.

tago11.html starter page

<!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() {

            });
        </script>

        <style type="text/css">    
            body {
                background-color: #DDD;
            }
        </style>
    </head>
    <body>
        <h1>Traduki</h1>
        <ol>
            <li>Monday: <input size="10" data-correct="lundo" type="text" /> </li>
            <li>Tuesday: <input size="10" data-correct="mardo" type="text" /> </li>
        </ol>
    </body>
</html>

Animating elements with jQuery

In the session we look at using the jQuery library to animate elements on the page. This will allow us to write much more interactive software with game features that respond to user input.

Our examples should come from various jQuery tutorial found on the web. Perhaps the simplest are those found at http://w3school.com/jquery.

One thing that can be problematic is loading the jQuery library as many examples expect that this library is in the same folder as the page being executed. For more flexible development, it is probably better to get this script from a CDN (content delivery network) like from Google, Microsoft, etc. Our samples get the code from code.jquery.com, so making sure to have this line in the header will resolve the issue:

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

Selectors

An important concept to be learned with jQuery is that of selectors which is how one identifies the elements on the page to animate, etc. Essentially, if you are targeting all tags of a given type, like img, you simply use that tag as a selector. If you only want to apply affect to a single element, you should give an id attribute to that tag and then target it with # proceeding the given id. If you want to apply an effect to all elements of a particular class, proceed the class name with a period (.).

Sample starting code

We used the starter code in class for students begin experimenting. They then customized the code based on tutorials found at http://w3school.com/jQueary as well as other sites

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

            $("#toggle").click(function(e){
                e.preventDefault();
                $('#firstdiv').toggle();
            });

            $('#blink').click(function(){
                $('.bildo').fadeTo("slow", .2);
                $('.bildo').fadeTo("slow", 1);
            });

            $('#animate').click(function(){
                // alert('hi');
                $("#movi").animate({height:300},"slow");
                $("#movi").animate({width:300},"slow");
                $("#movi").animate({height:100},"slow");
                $("#movi").animate({width:100},"slow");
            });
        });

        </script>
        <style type="text/css">
            body {
                background-image:url("http://bazaesperanto.com/bildoj/fonoj/GinghamiPad.jpg");
            }
        </style>
    </head>
    <body>
        <div id="firstdiv" class="vorto">Saluton!</div>
        <button id="toggle">toggle</button>
        <div id="firstbildo" class="bildo"><img data-sono ="sono1" src="http://bazaesperanto.com/bildoj/1.png"/></div>
        <button id="blink">blink</button>
        <div id="movi" style="background:#98bf21;height:100px;width:200px;position:relative">movi</div>
        <button id="animate">movi</button>
    </body>
</html>

Using jQuery for self-checking online worksheets.

We begin the second week of our Software Development Course with an example of using jQuery for validating the responses that students enter into input fields. This will be extended over the coming week to include other types of inputs (like clicks on pictures), a scoring system, and the use of AJAX for exchanging data with the server.
Students at this point are expected to just add new paragraphs with input elements to the page and change the CSS to use different colors for right/wrong answers or make other changes to the appearance than color. Students wanting to go beyond the basics can later experiment with customize the jQueary code.

<!DOCTYPE html>
<html>
    <head>

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

        <script>
            $(document).ready(function() {
                $('input').change(function() {
                    
                    correct=$(this).data('correct');
                    response=$(this).val();
                    
                    if(correct==response){
                        $(this).removeClass("incorrect").addClass("correct");
                    }
                    else
                    {
                        $(this).removeClass("correct").addClass("incorrect");
                    }

                });
            });
        </script>
        
        <style type="text/css">
            .correct { 
                background:green;
            }

            .incorrect { 
                background:red;
            }
        </style>
        
    </head>

    <body>
        <h3>Note: During development, refresh the page after making changes.</h3>
        <h2>Provide the Esperanto translation for each word</h2>
        <p>house:<input data-correct ="domo" type="text"/></p>
        <p>skirt:<input data-correct ="jupo" type="text"/></p>
        <p>horse:<input data-correct ="ĉevalo" type="text"/></p>
    </body>

</html>

Here is an explanation of lines which need further explanation.
07: Loads the site style sheet
08: Loads the student’s custom sheet
09: Loads the jQuery library that helps with user-interaction feathers
11-28: The javascript code
12-27: This wrapper means that the code does no execute until the page is finished loading.
13-26: This is jQuery’s way of saying “When an input element changes, do this”.
15: Gets the correct answer stored in the data-correct attribute of the input tag.
16: Gets what the student typed in
18: Checks if the responses match. Note the == rather than =. This checks for equality rather than setting one variable to the other.
19: If equal, remove the incorrect style if it is set, and apply the correct style.
23: If not equal, remove the correct style if it is set, and apply the incorrect style.
30-37: While this is stored in the external style sheet, putting a page style definition allows the student to experiment with different coloring or changing of appearances.
43: Reminds students to refresh the page if styles are not showing up correctly.
45: The data-correct attribute is where we set the correct answer that is extracted by the jQuery script.

Styling Parts of Speech

A benefit of learning any particular language is the power that it gives one with languages in general. This can improve the use of ones native language as well as developing methods of learning and working with new ones. I suspect that this theme will come up several times over the development of our tools this term.

Our first project is having students apply styles to each individual word based on parts of speech. This will allow us, for example, to color every verb a certain color or having an singular adjective underlined only when it proceeds a plural now. The process of developing the tools for this will lead, I suspect, to a deeper understanding of idea construction in all languages.

Esperanto is an especially appropriate language for this purpose as part-of-speech is encoded by word endings. In addition, the lack of irregularities makes the parsing logic trivial.

An additional benefit of having this be part of our first project is that it encourages a core web-design principal of separating the semantic elements of the document into HTML5 and the appearance as described in the CSS3 style sheets. The project can also drive the need for the interactive elements of the project using jQuery for changing style and highlighted elements dynamically.

Overall the students were successful with this first phase of the project as each student was able to build pages based on the sample code. They also began the process of overriding the site-wide style-sheet with their own creations although more instruction and coding time needs to be spent on the whole idea of the CSS3 language to help students move beyond the provided code.

Below is the sample starting code based on the site’s evolving stylesheet found at http://bazaesperanto.com/style.css.

<!DOCTYPE html>
<html>
    <head>
        <title>tago3</title>
        <link rel="stylesheet" href="http://bazaesperanto.com/style.css" />
        <link rel="stylesheet" href="style.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="container">
        <h2><span title="the" class="pos-baz">La</span> <span title="new" class="pos-a">nova</span> <span title="list" class="pos-o">listo</span>!</h2>
        <ul>
            <li ><span title="am (is are)" class="pos-as">estas</span></li>
            <li ><span title="horse" class="pos-o">ĉevalo</span></li>
            <li><span title="and" class="pos-baz">kaj</span></li>
        </ul>
        </div>
    </body>
</html>

Saluton Mondo! (Hello World!)

My spring trimester software development classes began today.  Because I have  about 30 students registered,  I added a second section so that underclassmen could take part (our normal class size is 18 to 20 students).  Our class goal for the term is to develop the website bazaesperanto.com for structuring the activities for teaching Esperanto to a commutative level over a trimester to American high school students.  Hence the students in the class will both learn the language and learn how to build a real-world web site.

As with any software class, we began with the classic “Hello World!” program.  This required that we set everyone up with the latest version of Netbeans development environment, getting them set up with a server account, and walking students through the steps of uploading their work.

The one twist was that other than having Hello World being in Esperanto, we added a title element to the h1 tag so that when a user hovers over the phrase it would show the English translation.  Soon we will build an even more useful pop-up for displaying content like a link to sound files, definitions in Esperanto, etc.  But it was a good beginning.  While we had a normal amount of first-day frustrations with getting everyone connected, most students were successful.

Here is the html code for our first day upload.

<!DOCTYPE html>
<html>
    <head>
        <title>Saluton Mondo!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1 title="Hello World">Saluton Mondo!</h1>
    </body>
</html>