Dictation pages

For our eighth class day we combine features of our previous work to create pages for practicing dictation.  Students hear words or phrases and they type into the adjacent field what they hear.  The field turns green for a match, and red when there is not a match.

Note the inclusion of a function named cutdown.  This function takes a string and makes it lower case and removes all spaces and most punctuation.  This increases the likelihood of a match for small and unimportant difference in user input as well as reducing the need to give the learner exact formatting instructions.

Members of the course should use this code as a starting point, adding words and phrases to their sonoj directory and new list items to their tago8.html pages.  They may also want to customize the cutdown filter, add images for some items (instead of or in addition to sounds), customize the styling, etc.

Here is the sample code for the class to study and customize.

<!DOCTYPE html>
<html>
    <head>
        <title>Tago8</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){
                        numcorrect = $('#correct').text();
                        $('#correct').text(numcorrect*1+1);
                        $(this).removeClass("incorrect").addClass("correct");
                    }
                    else
                    {
                        numerrors = $('#errors').text();
                        $('#errors').text(numerrors*1+1);
                        $(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>
        <div id="score">
            Correct: <span id="correct">0</span>
            Errors:  <span id="errors">0</span>
        </div>
        <h1 title="Dictation">Diktado</h1>
        <ol>
            <li>
                <audio controls="controls">
                  <source src="http://bazaesperanto.com/sonoj/eo1.mp3" type="audio/mpeg" />
                  <source src="http://bazaesperanto.com/sonoj/eo1.ogg" type="audio/ogg" />
                  Your browser does not support the audio tag.
                </audio>
                <input data-correct="unu" type="text" />
            </li>

            <li>
                <audio controls="controls">
                  <source src="http://bazaesperanto.com/sonoj/eo2.mp3" type="audio/mpeg" />
                  <source src="http://bazaesperanto.com/sonoj/eo2.ogg" type="audio/ogg" />
                  Your browser does not support the audio tag.
                </audio>
                <input data-correct="du" type="text" />
            </li>
            <!--copy sounds into your sonoj directory and add more items below -->
            <li>
                <audio controls="controls">
                  <source src="sonoj/eoYourWord.mp3" type="audio/mpeg" />
                  <source src="sonoj/eoYourWord.ogg" type="audio/ogg" />
                  Your browser does not support the audio tag.
                </audio>
                <input size="40" data-correct="YourWord" 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