Word Learner

<!DOCTYPE html>
<html>
    <head>
        <title>Words Leraner</title>
        <meta http-equiv="Content-Language" content="ru">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <style type="text/css">
            #part1 > div {float: left; width: 300px; margin-left: 100px;}
            #part1 > form {float: left;}
            #part2 {display: none;}
            #TrueAnswer {display: none;}
        </style>

        <script type="text/javascript" src="./jquery.js?v=1.4.4"></script>
        <script type="text/javascript">
            (function ($) { $(document).ready(function() {

                //Submit off
                $("#form2").submit(function() {
                    return false;
                });

                //onEnter (part2)
                $('#answer').bind('keypress', function(e) {
                    if(e.keyCode==13) {
                        SetAnswer( $('#answer').val() );
                    }
                });

            }); })(jQuery);

            var ArrTasks = [];
            var QuestionInLeft = true;

            function SetTask(strTasks) {
                QuestionInLeft = ($('input[name=quest]:checked', '#form1').val() == 'left');
                var TempArrTasks = strTasks.split('\n');
                for(var i in TempArrTasks) {

                    var strTask = TempArrTasks[i];

                    while(strTask.indexOf("  ") != -1)
                        strTask = strTask.replace("  ", " ");

                    strTask = strTask.replace(" =", "=").replace("= ", "=");

                    //first space
                    if(strTask[0] == ' ')
                        strTask = strTask.substr(1);

                    //last space
                    if(strTask[strTask.length - 1] == ' ')
                        strTask = strTask.substr(0, strTask.length - 1);

                    var TempArrTask = strTask.split("=");//[0 => key, 1 => value]
                    ArrTasks[i] = new Task(TempArrTask[0], TempArrTask[1]);
                }

                $('#part1').css('display', 'none');
                $('#part2').css('display', 'block');

                NewQuestion();
            }

            var task;
            function NewQuestion() {
                task = ArrTasks[ randomNumber(ArrTasks.length) ];
                if(QuestionInLeft) $('#question').text(task.key);
                else $('#question').text(task.val);

                HideTrueAnswer();
            }
            function SetAnswer(UserAnswer) {
                var TrueAnswer;
                if(QuestionInLeft) TrueAnswer = task.val;
                else TrueAnswer = task.key;

                UserAnswer = UserAnswer.toLowerCase();

                if(TrueAnswer == UserAnswer) {
                    NewQuestion();
                }
                else {
                    ShowTrueAnswer();
                }
            }

            //Show/Hide answer
            function ShowTrueAnswer() {
                $('#TrueAnswer').css('display', 'block');
                $('#TrueAnswerText').text('');
            }
            function ShowTrueAnswerText() {
                if(QuestionInLeft) $('#TrueAnswerText').text(task.val);
                else $('#TrueAnswerText').text(task.key);
            }
            function HideTrueAnswer() {
                $('#TrueAnswer').css('display', 'none');
            }

            //
            function randomNumber(n) {
                return Math.floor(Math.random() * n);
            }

            //class Task
            function Task(key, val) {
                var that = this;
                this.key = key.toLowerCase();
                this.val = val.toLowerCase();
            }
        </script>
    </head>
    <body>
        <div id="part1">
            <div>
                <b>Example:</b> <br />
                собака=dog<br />
                кот = cat<br />
                стол=table<br />
            </div>
            <form id="form1">
                <input type="radio" id="leftQuestion" name="quest" value="left" checked="checked" />Вопросы слева - ответы справа<br />
                <input type="radio" id="rightQuestion" name="quest" value="right" />Вопросы справа - ответы слева<br />
                <br /><a href="#" onclick="SetTask( $('#task').val() );">Ok</a><br />
                <textarea id="task" cols="60" rows="30"></textarea>
                <br /><a href="#" onclick="SetTask( $('#task').val() );">Ok</a><br />
            </form>
        </div>

        <div id="part2">
            <div id="question"></div>
            <form id="form2">
                <input type="text" id="answer" value="" size="20" maxlength="128" />
                <br /><a href="#" onclick="SetAnswer( $('#answer').val() );">Ok</a>
            </form>
            <div id="TrueAnswer">
                Не правильно. <a href="#" id="TrueAnswerA" onclick="ShowTrueAnswerText();">Показать правильный ответ</a>
                <div id="TrueAnswerText"></div>
            </div>
        </div>
    </body>
</html>