Number Quiz — Dictation Example

This is our last class day before spring break. Here is an example of a quiz that should be made. It is based on the numbers being read at the end of lesson 9 in our textbook.

http://bazaesperanto.com/llzamenhof/tago10.html

When we get back from Spring Break, we will shorten this type of page to only a few lines by making a plugin and using external files. Then each quiz question will be a single line and we won’t need to put much if any style and scripting information in the header, making other future pages easy to construct.

For now, however, here is the sample source code for the tago10 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>
            
            function cutdown(str){
                str = str.toString(); // turn numbers, etc. to strings
                str = str.toLowerCase(); //make all lower case
                str = str.replace(' ',''); //strip out spaces
                str = str.replace('.',''); //strip out periods
                str = str.replace(',',''); //strip out commas
                str = str.replace('?',''); //strip out question marks
                str = str.replace('-',''); //strip out hyphens
                return str;
            }
            
            $(document).ready(function() {

                $('input').change(function() {
                    correct=cutdown($(this).data('correct'));
                    response=cutdown($(this).val());
                    if(correct==response){
                        $(this).removeClass("incorrect").addClass("correct");
                    }
                    else
                    {
                        $(this).removeClass("correct").addClass("incorrect");
                    }
                });
            });

        </script>

        <style type="text/css">    
            body {
                background-color: #EEE;
            }
            .correct { 
                background:green;
            }

            .incorrect { 
                background:red;
            }

            #score{
                border:2px dashed olive;
            }
        </style>

    </head>
    <body>
        <img src="bildoj/ciferoj.png" width="569" height="84" alt="ciferoj"/>
        <h3>cent = 100;mil = 1000</h3>
        <h4>dek unu = 11;tricent sesdek kvin = 365;trimil okdek kvin = 3085</h4>
        <h2>Numera testo</h2>
        <ol>
            <li>
                <audio controls="controls">
                    <source src="sonoj/114.mp3" type="audio/mpeg" />
                    <source src="sonoj/114.ogg" type="audio/ogg" />
                    Your browser does not support the audio tag.
                </audio>
                <input size="5" data-correct="114" type="text" />
            </li> 
            <li>
                <audio controls="controls">
                    <source src="sonoj/149.mp3" type="audio/mpeg" />
                    <source src="sonoj/149.ogg" type="audio/ogg" />
                    Your browser does not support the audio tag.
                </audio>
                <input size="5" data-correct="149" type="text" />
            </li> 
        </ol>
    </body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s