Как сравнить два массива в js по каждому элементу для реализации теста по английскому языку

Question

const vopros1 = ["i"];
const vopros2 = ["am"];
const vopros3 = ["programmer"];

const otvet1 = [];
const otvet2 = [];
const otvet3 = [];

const text1 = document.querySelector('.vopros__text1');
const text2 = document.querySelector('.vopros__text2');
const text3 = document.querySelector('.vopros__text3');
const text4 = document.querySelector('.otvet__text');
const text5 = document.querySelector('.otvet__text5');
const text6 = document.querySelector('.otvet__text6');
const buttonProverka = document.querySelector('.button__proverka');


const buttonText1 = document.querySelector('.text4');
const buttonText2 = document.querySelector('.text5');
const buttonText3 = document.querySelector('.text6');




//текст кнопок
const textVariant1 = buttonText1.textContent = "no";
const textVariant2 = buttonText2.textContent = "am";
const textVariant3 = buttonText3.textContent = "programmer";

const pushed1 = () => {
    let res = otvet1.concat(textVariant1);
    return res;
}
const content1 = () => {
    text4.textContent = textVariant1;
}

const pushed2 = () => {
    let res = otvet2.concat(textVariant2);
    return res;
}
const content2 = () => {
    text5.textContent = textVariant2;
}
const pushed3 = () => {
    let res = otvet3.concat(textVariant3);
    return res;
}
const content3 = () => {
    text6.textContent = textVariant3;
}

buttonText1.addEventListener("click", content1);
buttonText2.addEventListener("click", content2);
buttonText3.addEventListener("click", content3);

buttonText2.addEventListener("click", pushed2);
buttonText3.addEventListener("click", pushed3);


text1.textContent = vopros1;
text2.textContent = vopros2;
text3.textContent = vopros3;




function diff(a, b) {
    return a.filter(function(i) {
        return b.indexOf(i) < 0;
    });
};

const variant1 = diff(vopros1, otvet1);

const proverka = () => {
    const variant1 = diff(vopros1, pushed1());
    console.log(otvet1);
    if (variant1.length == 0) {

        console.log('нуль');

    } else {
        text4.classList.add('border');
        console.log('не нуль')
    };
}


buttonProverka.addEventListener("click", proverka);

.vopros{
    display:flex;
    }
    .otvet{
        display:flex;   
    }
    .border{
        border:solid 1px red;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" type="text/css"/>
</head>
<body>
    <div class="vopros">
    <p class="vopros__text1"></p>
    <p class="vopros__text2"></p>
    <p class="vopros__text3"></p>
</div>
<div class="otvet">
    <p class="otvet__text"></p>
    <p class="otvet__text5"></p>
    <p class="otvet__text6 "></p>
</div>

<div class="otvet">
    <button class="text4"></button>
    <button class="text5"></button>
    <button class="text6"></button>
</div>
<button class="button__proverka">Проверить</button>
<script src="./index.js"></script>
</body>
</html>

Доброе утро. Сегодня я начал разрабатывать тест для проверки английского языка.
Что у меня получилось
Получился у меня код представленный выше. В этом коде я сделал варианты слов - каждое слово в своем массиве. const vopros1 = ["i"] сравниваю с const otvet1 = [], если не верно, то слово подсвечивается красной рамкой. Все нормально, но это не то, что мне нужно.
Что я хочу сделать, но это у меня не получается
Я подумал, что можно это все реализовать с помощью двух массивов. const vopros = ["i","am","programmer"]; const otvet = []; С помощью push я пробовал добавить в массив otvet данные, а потом сравнить. Поэтому у меня возник вопрос как при этом сделать так, чтобы у меня сравнивались массивы по каждому элементу.

Answer 1

Можно создать функцию, которая будет получать 2 массива и вовращать массив в котором будут присутствовать результаты сравнение значений: true/false. Получается примерно так:

const questions = ["i","am","programmer"]; 
const answers = [];

const checkAnswers = (a, b) => {
    return a.map((item, idx) => item === b[idx]);
}

console.log(checkAnswers (questions, answers ));
console.log(checkAnswers (questions, questions ));
console.log(checkAnswers (['a', 'b', 'c'], ['a', 'b', 'c'] ));
console.log(checkAnswers (['a', 'b', 'c'], ['a', 'b', 'd'] ));

БЛОГ НА HUSL

Как сравнить два массива в js по каждому элементу для реализации теста по английскому языку

Ответы (1 шт):