Outsourced code 1 for vocab activity

Today we are reviewing the project that we outsourced for learning vocabulary. It meets the basic specifications but needs a lot of work. Still it give some interesting ideas and approaches.

json20.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"}
]}

tago20.html

<!DOCTYPE html>
<html>
    <head>
        <title>Vocabulary</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="http://bazaesperanto.com/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
        <script src="http://bazaesperanto.com/js/jquery-1.7.2.min.js"></script>
        <script src="http://bazaesperanto.com/js/jquery-ui-1.8.19.custom.min.js"></script>
        <link href="http://bazaesperanto.com/css/sanjoy.css" rel="stylesheet" />        

        <script type="text/javascript">
            var correctAns;
            var elCount=1;
            var data,qi=0;
            var elmTimePoint,opTimePoint;
            var questionCount=0,correctCount=0;
            $(document).ready(function(){
                $.ajax({
                    url:"json20.json",
                    cache: false,
                    dataType:"json",
                    success:function(receivedData){
                        data=receivedData;
                        $("#btn").click(function(){                            
                            clearTimeout(opTimePoint);
                            clearTimeout(elmTimePoint);
                            questionCount++;
                            if($("#ans").val()==correctAns)
                            {
                                correctCount++;
                                qi++;
                                showQuestion();
                            }
                            else
                            {
                                qi++;
                                showQuestion();
                            }
                        });
                        showQuestion(0);
                    }
                });                
                $("#btn").button();
                $("#ans").focus();
                $("#ans").keypress(function(e){
                    if(e.which==13)
                        $("#btn").click();
                });
                
            });
            function showQuestion(){
                if(qi==data.vocab.length)
                {
                    $("#container").hide();
                    dialog=document.createElement("div");
                    dialog.setAttribute("title", "Vocabulary");
                    dialog.innerHTML="You have answered "+correctCount+" out of "+questionCount+" correctly";
                    $(dialog).dialog();
                    return;
                }
                $("#def").text("Defination : "+data.vocab[qi].def);
                $("#pos").text("Part of Speech : "+data.vocab[qi].pos);
                $("#ans").val("");
                $("#ans").focus();
                var opContainer=document.getElementById("options");
                opContainer.innerHTML="";
                $(opContainer).hide();                        
                var flg=new Array();
                var j;
                var words=new Array();
                for(i=0;i<8 && words.length< data.vocab.length;i++)
                    words.push(data.vocab[(qi+i)%data.vocab.length].word);
                for(var i=0;i<words.length;i++)
                    flg[i]=0;
                for(var i=0,opCount=0;i<data.vocab.length && opCount<8;i++,opCount++){
                    do{
                        j=Math.floor(Math.random()*words.length);                                
                    }while(flg[j]!=0);
                    flg[j]=1;                            
                    var op=document.createElement("input");
                    op.setAttribute("class", "option");
                    op.setAttribute("type", "button");
                    op.setAttribute("value", words[j]);
                    opContainer.appendChild(op);
                    $(op).button();
                    $(op).click(function(){$("#ans").val($(this).val())});
                }
                correctAns=data.vocab[qi].word;
                elCount=1;
                opTimePoint=setTimeout("$('#options').show('blind',500,function(){elmTimePoint=setTimeout('eliminateAns();',3000);});",8000);                        
                        
            }
            function eliminateAns(){                
                var opContainer=document.getElementById("options");
                var options=opContainer.getElementsByTagName("input");
                if(elCount==options.length)
                    return;
                elCount++;
                var j;
                do{
                    j=Math.floor(Math.random()*options.length);
                }while($(options[j]).val()==correctAns || $(options[j]).button("option","disabled")==true);
                $(options[j]).button("disable");
                elmTimePoint=setTimeout('eliminateAns();',3000);
            }
        </script>

    </head>

    <body>
        <div id="container">
            <div id="title" >Vocabulary</div>
            <div id="question">
                <div class="given" id="def">Definition:</div>
                <div class="given" id="pos">POS:</div>
            </div>
            <div id="answer">
                <input type="text" id="ans"/>
                <input type="button" id="btn" value="Next"/>
            </div>
            <div id="options"></div>
        </div>
    </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