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.

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