Читаем в оригинале

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], translation: "Заполните" },  // "Füllen Sie ... aus"
        { indices: [2], translation: "для этого" },        // "dazu"
        { indices: [3, 4, 5], translation: "прилагаемое ответное письмо" },  // "das beigefügte Antwortschreiben"
        { indices: [8], translation: "отправьте" },        // "senden"
        { indices: [9], translation: "его" },              // "es"
        { indices: [10, 11, 12], translation: "нам обратно" }  // "an uns zurück"
    ]
};

function constructPhrase(indices) {
    const words = sentenceData.original.split(" ");
    let constructedPhrase = "";
    indices.sort((a, b) => a - b);

    for (let i = 0; i < indices.length; i++) {
        if (i > 0 && indices[i] !== indices[i - 1] + 1) {
            constructedPhrase += "... ";
        }
        constructedPhrase += words[indices[i]] + " ";
    }
    return constructedPhrase.trim();
}

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;  // Уникальный ID для каждого слова
        wordElement.addEventListener('click', () => showTranslation(index));
        container.appendChild(wordElement);
    });
}

function showTranslation(index) {
    const resultContainer = document.getElementById('translation-container');
    resultContainer.innerHTML = ''; 
    unhighlightAllWords();  // Сброс подсветки всех слов

    sentenceData.links.forEach(link => {
        if (link.indices.includes(index)) {
            const phraseElement = document.createElement('div');
            const translationElement = document.createElement('div');

           ...