Простой языковой тест


Этот код на простой язык викторина. Он выбирает два слова и связанных звуковых файлов с помощью формата JSON вызов, представляет пользователя с изображением, которое соответствует одному из слов, и бросает вызов пользователю, чтобы принять матч. Мой код работает, но это немного скучно и некрасиво. Я бы хотел увидеть, как эксперты хотел бы предложить рерайтинг это.

function getNewWords() {
        {
            var Category = "animals";
            var BaseURL = "http://localhost:61741/VocabGame/play?cat=";
            var URL = BaseURL + Category;


            $.getJSON(URL, {
                tagmode: "any",
                format: "json"
            }, function (data) {
                var choiceA = data.nouns[0].Pinyin;
                var choiceB = data.nouns[1].Pinyin;
                $('#ChoiceA').html(choiceA);
                $('#ChoiceB').html(choiceB);

                var root = "../../Content/Audio/";
                var mp31 = root + data.nouns[0].Audio1 + ".mp3";
                var ogg1 = root + data.nouns[0].Audio1 + ".ogg";
                var mp32 = root + data.nouns[1].Audio1 + ".mp3";
                var ogg2 = root + data.nouns[1].Audio1 + ".ogg";

                attachMouseEnter(mp31, ogg1, mp32, ogg2);

                var random = Math.random();
                if (random >= 0.5) {
                    correctAnswer = "ChoiceA";
                    Search(data.nouns[0].English);
                }
                else {
                    correctAnswer = "ChoiceB"
                    Search(data.nouns[1].English);
                }

            });
        }

    };

    function playAudio1(mp31, ogg1) {
        var mp3_src = mp31;
        var oga_src = ogg1;

        $('#jquery_jplayer_1').jPlayer('setMedia', {
            oga: oga_src,
            mp3: mp3_src
        });

        $('#jquery_jplayer_1').jPlayer("play");
    };

    function playAudio2(mp32, ogg2) {
        var mp3_src = mp32;
        var oga_src = ogg2;

        $('#jquery_jplayer_1').jPlayer('setMedia', {
            oga: oga_src,
            mp3: mp3_src
        });

        $('#jquery_jplayer_1').jPlayer("play");
    };
        function attachMouseEnter(mp31, ogg1, mp32, ogg2) {
            $('#ChoiceA').die('mouseenter.audio1event');
            $('#ChoiceA').live('mouseenter.audio1event', function () {
                playAudio1(mp31, ogg1);
            });

            $('#ChoiceB').die('mouseenter.audio2event');
            $('#ChoiceB').live('mouseenter.audio2event', function () {
                playAudio2(mp32, ogg2);
            });
    }


662
5
задан 11 октября 2011 в 02:10 Источник Поделиться
Комментарии
3 ответа

Я думаю, если обобщить проблему, чтобы иметь несколько вариантов, а не только 2, это сделает вещи намного проще. Это дает дополнительную гибкость при добавлении позже более широкий выбор, если будет нужно, но самое главное, что вы можете сократить прямые ссылки на элемент, или элемент B, или аудио, или аудио Б по всей базе кода.

Это означало бы, что вы подправить HTML-код немного, и вместо ссылки на DOM-элементов непосредственно по их ID, например, choiceA, или choiceB, вы полагаетесь на свою позицию, или индекс. HTML-код все варианты тогда могут выглядеть,

<ul>
<li class="choice">..</li>
<li class="choice">..</li>
</ul>

Имея это в виду, вот изменения, которые я предлагаю. Создать объект, который представляет собой аудио, чтобы избежать беспокоясь о прохождении МР3/Огг переменных на всем протяжении.

function AudioFile(fileName) {
var root = "../../Content/Audio/";
this.mp3 = root + fileName + '.mp3';
this.ogg = root + fileName + '.ogg';
}

Ваш playAudio1 и playAudio2 функции идентичны. Они могут принять аудиофайл объекта, и быть объединены в одну.

function playAudio(audio) {
var player = $('#jquery_jplayer');
player.jPlayer('setMedia', {
oga: audio.ogg,
mp3: audio.mp3
});
player.jPlayer('play');
}

Получая от двух вариантов, можно рассматривать несколько вариантов как массив, и прикрепите необходимый обработчик событий для каждого элемента в массиве. Также кажется, что вы перепривязки на видео событий после каждого AJAX-вызов. Это просто пустая трата ресурсов. Можно явно привязать после каждого AJAX-вызов, или прикрепите прямую обработчики на документ нагрузки или что-то. Вот обновленный getNewWords и attachMouseEnter методов.

function getNewWords() {
var Category = "animals";
var BaseURL = "http://localhost:61741/VocabGame/play?cat=";
var URL = BaseURL + Category;

$.getJSON(URL, didGetNewWords);

var containers = $('.choice');

function didGetNewWords(data) {
data.nouns.forEach(function(noun, index) {
var container = containers.get(index);
container.html(noun.Pinyin);
var audio = new AudioFile(noun.Audio1);
attachMouseEnter(container, audio);
});

// Pick a random answer by index
var answerIndex = Math.floor(Math.random() * data.nouns.length);
correctAnswer = containers.get(answerIndex).id;
Search(data.nouns[answerIndex].English);
}
}

// Play this audio when this element is hovered over
function attachMouseEnter(element, audio) {
$(element).bind('mouseenter', function() {
playAudio(audio);
});
}

5
ответ дан 11 октября 2011 в 03:10 Источник Поделиться

Ты просто не удалить playAudio2 и переименовать playAudio1 в playAudio, затем в attachMouseEnter, просто позвоните playAudio оба раза.

function attachMouseEnter(mp31, ogg1, mp32, ogg2) {
$('#ChoiceA').die('mouseenter.audio1event');
$('#ChoiceA').live('mouseenter.audio1event', function () {
playAudio(mp31, ogg1);
});

$('#ChoiceB').die('mouseenter.audio2event');
$('#ChoiceB').live('mouseenter.audio2event', function () {
playAudio(mp32, ogg2);
});

Также я хотел бы сделать функцию, которая взяла паспорт, чтобы присоединиться к, название события, а затем в mp3 params и затем attachMouseEnter бы просто назвал это дважды проходящий в диф mp31, 2 и т. д

2
ответ дан 11 октября 2011 в 03:10 Источник Поделиться

Как уже упоминалось функции playAudo сделать то же самое. Я не знаю jQuery и поэтому поправьте меня, если я ошибаюсь, но мне кажется, что-то вроде это немного более гибким :

    function getNewWords(categoryName, categoryValue) {

var baseURL = "http://localhost:61741/VocabGame/play", data = {};
data[categoryName] = categoryValue;

$.post(baseUrl, data,
function(data, textStatus, jqXHR){
//process json
},
"json");
}

getNewWords('animals', 'cat')

Пусть с jQuery обрабатывать всю логику параметр и подготовить для принятия всех видов данных (собаки, коровы .и т. д. :)

1
ответ дан 11 октября 2011 в 04:10 Источник Поделиться