Using JSON as datasource for activities

For our tago16 code, we will use the data format JSON as a datasource for student vocabulary activities.  This will allow us in the future to get word lists from the server and will also let us understand the portion of the next activity where we are getting code that was outsourced wand will use the JSON format.

Students should create two files: json16.json will contain the data:

json16.json

{"vocab": [
{"word": "unu","def" : "one","pos": "baz"},
{"word": "ridi","def" : "to laugh","pos": "-i"},
{"word": "bela","def" : "pretty","pos": "-a"},
{"word": "domo","def" : "house","pos": "-o"}
]}

tago16.html

<!DOCTYPE html>
<html>
    <head>
        <title>tago16</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>
            function showword(qid){
                $.getJSON('json16.json', function(data) {
                    $('#mydef').html(data.vocab[qid].def);
                    $('#myword').data('correct',data.vocab[qid].word);
                    $('#myword').val('');
                    $('#myword').removeClass("incorrect");
                    $('#myword').removeClass("correct");
                }); 
            }
            
            $(document).ready(function() {
                showword(0);
                
                $("#next").click(function(e){
                    qid = $('#qid').text();
                    $('#qid').text(qid*1+1);
                    showword(qid);
                });
            });

        </script>

        <style type="text/css">    

        </style>

    </head>
    <body>
        <span id="qid">1</span>
        <div><span id="mydef">Monday</span>: 
        <input size="10" id="myword" data-correct="lundo" type="text" /></div>
        <button id="next">next</button>

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