Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Словарный тренажёр на JavaScript (https://javascript.ru/forum/misc/71645-slovarnyjj-trenazhjor-na-javascript.html)

Репетитор 02.12.2017 23:03

Словарный тренажёр на JavaScript
 
Всем привет! Никак не могу догнать как можно сделать простенький словарный тренажёр на JavaScript.
Задача в следующем: есть список слов на русском и их перевод на английском. нужно сделать так чтобы скрипт рандомно показывал по одному русскому слову из этого массива. пользователь в поле input должен ввести перевод этого слова.
Если он окажется верным/неверным, то выводятся соответствующие надписи.
Мои соображения: использовать так называемые ассоциативные массивы. Каждому элементу массива присвоить значение. только вот не могу понять как их сравнивать в цикле if.
Кто может помогите хотя бы в каком направлении двигаться.
Заранее благодарю.

рони 02.12.2017 23:33

Цитата:

Сообщение от Репетитор
как их сравнивать в цикле if.

цикл не нужен
var text = "неверно";
if(str == translation[word]) text = "верно"

Репетитор 03.12.2017 00:23

Цитата:

Сообщение от рони (Сообщение 471925)
цикл не нужен
var text = "неверно";
if(str == translation[word]) text = "верно"

можно уточню?
if(str == apple[яблоко], grapes[виноград], orange[апельсин], banana[банан]) text = "верно"

я правильно понимаю?

рони 03.12.2017 00:37

Цитата:

Сообщение от Репетитор
я правильно понимаю?

нет translation это один обьект для всех слов и перевода.
var translation = {"apple": "яблоко", "grapes" : "виноград"} ; // и т.д.

рони 03.12.2017 00:43

Репетитор,
var translation = {"apple": "яблоко", "grapes" : "виноград"} ;
var word = "apple"; //Math.random()
var text = "неверно";
var str = "яблоко"; //input.value
if(str == translation[word]) text = "верно" ;
alert(text);

Lion777 03.12.2017 01:58

недавно предыдущему тс похожее выкладывал
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="hello"></div>
    <br> переведи слово, что выше!
    <br>
    <input type="text">
    <br>
    <button>перевести</button>
    <script>

        var ruEn =
            [
                ["читать", "read"],
                ["смотреть", "see"],
                ["слушать", "listen"],
                ["бежать", "run"],
                ["спать", "sleep"]
            ];
        var i = Math.floor(Math.random() * (ruEn.length - 1));
        var hello = document.getElementById('hello');
        hello.innerHTML = '<b>' + ruEn[i][0] + '</b>';
        var word = document.querySelector('input');

        document.querySelector('button').onclick = function () {
            if (word.value == ruEn[i][1]) {
                hello.innerHTML = 'Да, <b>' + word.value + '</b> это <b>' + ruEn[i][0] + '</b>!';
            } else {
                hello.innerHTML = 'Нет, <b>' + word.value + '</b> это не <b>' + ruEn[i][0] + '</b>, пробуй еще!';
            }
        }


    </script>

</body>

</html>

Репетитор 03.12.2017 15:05

Цитата:

Сообщение от рони (Сообщение 471931)
Репетитор,
var translation = {"apple": "яблоко", "grapes" : "виноград"} ;
var word = "apple"; //Math.random()
var text = "неверно";
var str = "яблоко"; //input.value
if(str == translation[word]) text = "верно" ;
alert(text);

Цитата:

Сообщение от Lion777 (Сообщение 471932)
недавно предыдущему тс похожее выкладывал
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="hello"></div>
    <br> переведи слово, что выше!
    <br>
    <input type="text">
    <br>
    <button>перевести</button>
    <script>

        var ruEn =
            [
                ["читать", "read"],
                ["смотреть", "see"],
                ["слушать", "listen"],
                ["бежать", "run"],
                ["спать", "sleep"]
            ];
        var i = Math.floor(Math.random() * (ruEn.length - 1));
        var hello = document.getElementById('hello');
        hello.innerHTML = '<b>' + ruEn[i][0] + '</b>';
        var word = document.querySelector('input');

        document.querySelector('button').onclick = function () {
            if (word.value == ruEn[i][1]) {
                hello.innerHTML = 'Да, <b>' + word.value + '</b> это <b>' + ruEn[i][0] + '</b>!';
            } else {
                hello.innerHTML = 'Нет, <b>' + word.value + '</b> это не <b>' + ruEn[i][0] + '</b>, пробуй еще!';
            }
        }


    </script>

</body>

</html>

Спасибо пацаны. Теперь буду разбираться что такое " querySelector", а потом добавлять самопальную виртуальную клаву к input.


Часовой пояс GMT +3, время: 07:39.