2 sprache Buch

by yiiBoy

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Текстовая страница</title>
    <style>
        .article { background-color: lightblue; }  /* артикль */
        .noun { background-color: lightblue; }  /* существительные */
        .verb { background-color: lightgreen; } /* глаголы */
        .adj { background-color: lightgoldenrodyellow; }  /* прилагательные */
        .adv { background-color: lightcoral; } /* наречия */
        .prep { background-color: lavender; }   /* предлоги */
        .conj { background-color: lightpink; }  /* союзы */
        .pron { background-color: lightgrey; }  /* местоимения */
        .no-translation { min-height: 18px; }  /* Минимальная высота для элементов без перевода */

        .sentence { margin-bottom: 15px; }
        .word { display: inline-block; padding-right: 2px; vertical-align: top; padding:1px}
        .original { display: block; }
        .translation { display: block; min-height: 18px; } /* Минимальная высота для всех переводов */
        .full-translation { margin-top: 10px; } /* Перевод целого предложения */
    </style>
</head>
<body>
<div id="controls">
    <label><input type="checkbox" class="toggle-translation" data-class="noun" checked> Существительные</label>
    <label><input type="checkbox" class="toggle-translation" data-class="verb" checked> Глаголы</label>
    <label><input type="checkbox" class="toggle-translation" data-class="adj" checked> Прилагательные</label>
    <label><input type="checkbox" class="toggle-translation" data-class="adv" checked> Наречия</label>
    <label><input type="checkbox" class="toggle-translation" data-class="prep" checked> Предлоги</label>
    <label><input type="checkbox" class="toggle-translation" data-class="conj" checked> Союзы</label>
    <label><input type="checkbox" class="toggle-translation" data-class="pron" checked> Местоимения</label>
    <label><input type="checkbox" class="toggle-translation" data-class="interjection" checked>...

JavaScript

const data = {
  "sentences": [
    {
      "originalWords": ["Der", "zweite", "Planet", "wurde", "von", "einem", "Eitlen", "bewohnt."],
      "translations": ["", "второй", "планета", "был", "от", "", "тщеславным", "заселен."],
      "classes": ["article", "adj", "noun", "verb", "prep", "prep", "noun", "verb"],
      "fullTranslation": "Вторая планета была заселена тщеславным."
    },
    {
      "originalWords": ["\"", "Ah,", "ah!", "Besuch", "eines", "Verehrers", "!\"", "freute", "sich", "der", "Eitle", "als", "er", "den", "kleinen", "Prinzen", "sah."],
      "translations": ["", "Ах,", "ах!", "визит", "", "поклонника", "", "радовался", "себя", "", "тщеславный", "когда", "он", "", "маленького", "принца", "увидел."],
      "classes": ["", "interjection", "interjection", "noun", "prep", "noun", "", "verb", "reflexive", "article", "adj", "conj", "pron", "article", "adj", "noun", "verb"],
      "fullTranslation": "\"Ах, ах! Визит поклонника!\" - радовался тщеславный, когда увидел маленького принца."
    },
    {
      "originalWords": ["Denn", "für", "eitle", "Menschen", "sind", "alle", "anderen", "Verehrer."],
      "translations": ["Поскольку", "для", "тщеславных", "людей", "являются", "все", "другие", "поклонники."],
      "classes": ["conj", "prep", "adj", "noun", "verb", "adj", "adj", "noun"],
      "fullTranslation": "Поскольку для тщеславных людей все другие являются поклонниками."
    }
  ]
}

function sentencesToHTML(data) {
    let html = '';
    data.sentences.forEach((sentence, index) => {
        html += '<div class="sentence">';
        html += `<label><input type="checkbox" class="toggle-sentence-translation"> Показать перевод предложения</label>`;
        html += `<label><input type="checkbox" class="toggle-words-translation"> Показать перевод слов</label>`;
        html += '<div class="original-sentence">';
        sentence.originalWords.forEach((word, wordIndex) => {
            const wordClass = sentence.classes[wordIndex];
            const...