EasyCode-JavaScriptReact-v1 · olgakuzminagithub · Jul 23, 2018 · OlegLustenko · Jul 24, 2018 · OlegLustenko
diff --git a/js-core/homeworks/homework-16/index.html b/js-core/homeworks/homework-16/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Homework-16 Приложение</title>
+    <style>
+        li {
+            list-style: none;
+        }
+    </style>
+</head>
+<body>
+
+
+<!--<script src="src/appTest.js"></script>-->
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-16/src/appTest.js b/js-core/homeworks/homework-16/src/appTest.js
@@ -0,0 +1,109 @@
+/* ТЕСТ */
+
+/*
+* Добавьте реальных вопросов про JavaScript с вариантами
+* ответов
+* */
+
+// 3. При нажатии на кнопку если были выбраны правильные ответы,
+// отображайте "ПРАВИЛЬНО" или не правильно
+// или отображайте значек X или галочку, возле вопроса
+
+
+const questions = [
+    {
+        questionName: 'question 1',
+        answers: ['answer 1_1', 'answer 1_2', 'answer 1_3'],
+        correctAnswersIndexes: [1]
+    },
+    {
+        questionName: 'question 2',
+        answers: ['answer 2_1', 'answer 2_2', 'answer 2_3'],
+        correctAnswersIndexes: [2]
+    },
+    {
+        questionName: 'question 3',
+        answers: ['answer 3_1', 'answer 3_2', 'answer 3_3'],
+        correctAnswersIndexes: [1, 2]
+    }
+];
+
+
+const findCorrectAnswer = answerToValidate => {
+    let correctAnswers = questions.map(question =>
+        question.correctAnswersIndexes.map(answerIndex => {
+            return question.answers[answerIndex];
+        })
+    );
+
+    return correctAnswers.some(answer => {
+        return answer.includes(answerToValidate);
+    });
+};
+
+const app = {
+    questions,
+    testName: 'Тест по программированию',
+    buttonName: 'Проверить',
+    render() {
+        const main = this.newEl('main');
+        const testName = this.newEl('h1');
+        testName.textContent = this.testName;
+        const questionsList = this.newEl('ol');
+        this.questions.forEach(question => {
+            const li = this.newEl('li');
+            const questionHeader = this.newEl('h3');
+            questionHeader.textContent = question.questionName;
+            const answers = this.newEl('ul');
+            question.answers.forEach((answer, answerIndex) => {
+                answers.innerHTML += this.renderAnswer(answer, answerIndex);
+            });
+
+            li.appendChild(questionHeader);
+            li.appendChild(answers);
+            questionsList.appendChild(li);
+        });
+
+        main.appendChild(testName);
+        main.appendChild(questionsList);
+        document.body.appendChild(main);
+        const button = this.newEl('button');
+        button.textContent = this.buttonName;
+        main.appendChild(button);
+    },
+    renderAnswer(answer, answerIndex) {
+        const uniqId = `uniq_${Math.random()}_${answerIndex}`;
+        return `
+        <li>
+            <input type="checkbox" id="${uniqId}">
+            <label for="${uniqId}">${answer}</label>
+        </li>
+        `
+    },
+    newEl(elName) {
+        return document.createElement(elName);
+    }
+};
+
+app.render();
+
+
+
+const newButton = document.createElement('button');
+newButton.textContent = 'Узнать ответы';
+document.body.appendChild(newButton);
+newButton.onclick = function () {
+    const allAnswer = document.body.querySelectorAll('label');
+    [...allAnswer].forEach( answer => {
+        const span = document.createElement('span');
+        let yourAnswer = answer.textContent;
+        let labelStatus = findCorrectAnswer(yourAnswer) ? 'CORRECT' : 'INCORRECT';
+        span.textContent = labelStatus;
+        answer.parentElement.insertBefore(span, answer);
+
+    });
+    console.log(allAnswer);
+
+};
+
+
diff --git a/js-core/homeworks/homework-16/src/main.js b/js-core/homeworks/homework-16/src/main.js
@@ -0,0 +1,100 @@
+/*
+ 0 Алгоритмы
+ Реализуйте функцию которая будет превращать трехмерный массив
+ в двухмерный, а если массив двухмерный, тогда в трехмерный массив
+ // solution([ [1, 'a'], [2, 'b'], [3, 'c'] ]) => [ [1, 2, 3], [a, b, c] ]
+ // solution([ [1, 3, 5], [2, 4, 6] ]) => [ [1, 2], [3, 4], [5, 6] ]
+ // solution([[]]) => []
+ [ [ [ ] ] ] = [ [] ]
+ ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ !
+ */
+//
+
+/*yt получилось */
+
+const solution = arr => {
+    let newArr = [];
+
+    for ( let i = 0; i < arr.length; i++) {
+        let elem = arr[i];
+        for (let j = 0; j < elem.length-1; j++) {
+            newArr[i] = elem[j];
+        }
+    }
+};
+
+solution([ [1, 'a'], [2, 'b'], [3, 'c'] ]);
+solution([ [1, 3, 5], [2, 4, 6] ]);
+solution([[]]);
+
+
+const navigation = [
+    {name: 'Главная'},
+    {
+        name: 'Каталог',
+        children: [
+            {
+                name: 'Компьютеры',
+                children: [
+                        {
+                            name: 'Ноутбуки',
+                            children: [{name: 'Apple'}, {name: 'HP'}]
+                        },
+                        {name: 'Планшеты'}
+                    ]
+            },
+            {
+                name: 'Телевизоры',
+                children: [{name: '4k'}, {name: 'samrt-tv'}]
+            },
+        ]
+    },
+    {name: 'Профиль'}
+];
+
+/*
+ Визуализируйте массив, если в коллекции есть свойство
+ children,
+ тогда создайте вложенный лист
+ name - свойство h1
+ children ul -> li
+ Используйте innerHTML
+ */
+
+/*
+<h1>Main</h1>
+<ul>
+  <h1>Catalog</h1>
+  <li>
+    <ul>
+      <h1>Comp</h1>
+      <ul>
+        <li>
+          <h1>Notebook</h1>
+          <h1>...</h1>
+        </li>
+      </ul>
+  </li>
+*/
+
+const visualArray = arr => {
+    return `
+    ${arr.map(elem => {
+        if (elem.children) {
+            let arr = elem.children;
+            return `
+                    <h1>${elem.name}</h1>
+                    <li>
+                    <ul>
+                    ${visualArray(arr)}
+                    </ul>
+                    </li>
+                    `
+        } else {
+            return`<h1>${elem.name}</h1>`
+        }
+    }).join('')}`
+
+};
+
+document.body.innerHTML +=  visualArray(navigation);