Форум

Репетитор · #1 (**permalink**) 02.12.2017, 23:03

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

рони · #2 (**permalink**) 02.12.2017, 23:33

Сообщение от Репетитор

как их сравнивать в цикле if.

цикл не нужен

var text = "неверно";
if(str == translation[word]) text = "верно"

Репетитор · #3 (**permalink**) 03.12.2017, 00:23

Сообщение от рони

цикл не нужен

var text = "неверно";
if(str == translation[word]) text = "верно"

можно уточню?

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

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

рони · #4 (**permalink**) 03.12.2017, 00:37

Сообщение от Репетитор

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

нет translation это один обьект для всех слов и перевода.

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

рони · #5 (**permalink**) 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 · #6 (**permalink**) 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>

Репетитор · #7 (**permalink**) 03.12.2017, 15:05

Сообщение от рони

Репетитор,

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

Сообщение от Lion777

недавно предыдущему тс похожее выкладывал

<!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.

Форум

Справочник

Discord чат

Курсы javascript