Dynamic text in our online worksheets

Today we extend our work with online worksheets by dynamically adding and changing text on the page based on user input. We create div and span elements on the page which jQuery will target when the user makes change in their answers.

We began by adding a div with id=’score’ which we placed a box around. Then we added spans for the correct and incorrect scores which were set to zero. Then we added the jQuery code to increment the score. We needed to multiply the score by 1 to turn it into a number so that adding worked correctly.

Next we added spans to receive text when a correct answer or incorrect answer was typed in. For now it just says sukceso or malsukceso. In the next step of our project we will begin adding graphics, as well as sounds, movies, and other media elements.

Here is the starter code.

<!DOCTYPE html>
<html>
    <head>

        <title>tago5</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");
                        numcorrect = $('#correct').text();
                        //We multiply by 1 change from type text to number
                        $('#correct').text(numcorrect*1+1);
                        $(this).nextAll('span:first').html('sukceso!');


                    }
                    else
                    {
                        $(this).removeClass("correct").addClass("incorrect");
                        numerrors = $('#errors').text();
                        $('#errors').text(numerrors*1+1);
                        $(this).nextAll('span:first').html('malsukceso!');
                    }

                });
            });
        </script>
        
        <style type="text/css">
            .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>
        <h2>Provide the Esperanto translation for each word</h2>
        <p>house:<input data-correct ="domo" type="text"/><span></span></p>
        <p>skirt:<input data-correct ="jupo" type="text"/><span></span></p>
        <p>horse:<input data-correct ="ĉevalo" type="text"/><span></span></p>
    </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