Читаем в оригинале (знакоме слова)

by yiiBoy

HTML

<div id="sentence-container"></div>
<div id="translation-container"></div>

CSS

#sentence-container span {
    margin-right: 5px;
    cursor: pointer;
}

#translation-container {
    margin-top: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

#translation-container div {
    margin-bottom: 5px;
}

JavaScript

const sentenceData = {
    original: "Füllen Sie dazu das beigefügte Antwortschreiben aus und senden es an uns zurück",
    links: [
        { indices: [0, 1, 6], words: "Füllen Sie ... aus" },
        { indices: [2], words: "dazu" },
        { indices: [3, 4, 5], words: "das beigefügte Antwortschreiben" },
        { indices: [8], words: "senden" },
        { indices: [9], words: "es" },
        { indices: [10, 11, 12], words: "an uns zurück" }
    ]
};

const familiarityList = {
    "Füllen Sie ... aus": 3,
    "dazu": 2,
    //"das beigefügte Antwortschreiben": 4,
    "senden": 1,
    "es": 5,
    //"an uns zurück": 3
};

function getFamiliarityColor(familiarity) {
    switch (familiarity) {
        case 1: return 'lightgreen';
        case 2: return 'green';
        case 3: return 'yellow';
        case 4: return 'orange';
        case 5: return 'red';
        default: return 'white';
    }
}

function applyFamiliarity() {
    sentenceData.links.forEach(link => {
        if (familiarityList[link.words]) {
            const familiarity = familiarityList[link.words];
            link.familiarity = familiarity;
        } else {
            link.familiarity = 0; // Неизвестные фразы или слова
        }
    });
}

function renderSentence() {
    const container = document.getElementById('sentence-container');
    const words = sentenceData.original.split(" ");
    words.forEach((word, index) => {
        const wordElement = document.createElement('span');
        wordElement.textContent = word;
        wordElement.id = 'word-' + index;
        wordElement.style.backgroundColor = getFamiliarityColorForWord(index);
        wordElement.addEventListener('click', () => showTranslation(index));
        container.appendChild(wordElement);
    });
}

function getFamiliarityColorForWord(index) {
    const link = sentenceData.links.find(link => link.indices.includes(index));
    return link ? getFamiliarityColor(link.familiarity) : 'white';
}

function showTranslation(index)...