EasyCode-JavaScriptReact-v1 · maxeasy18 · Jul 15, 2018 · Jul 15, 2018 · Jul 21, 2018 · Jul 23, 2018
diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Home work 14</title>
+	<style>
+		*{
+			margin:0;
+			padding: 0;
+			font-size: 16px;
+			font-family: Arial;	
+			box-sizing: border-box;	
+		}
+		div.test-block{
+			margin: 20px 50px;
+		}
+		div.test-block p{
+			text-align: center;
+			margin-bottom: 40px;
+		}
+		form > ol{
+			padding-left: 25px;
+			margin-bottom: 25px;
+		}
+		form > ol > li {
+			margin-bottom: 25px;
+		}
+		form > ol > li > span.status{
+			display: none;
+			font-weight: bold;
+		}
+		form > ol > li > span.status.correct,form > ol > li > span.status.wrong{
+			display: inline;
+		}
+		form > ol > li > span.status.correct{
+			color:green;
+		}
+		form > ol > li > span.status.correct:after{
+			content: 'correct';
+		}
+		form > ol > li > span.status.wrong{
+			color:red;
+		}
+		form > ol > li > span.status.wrong:after{
+			content: 'wrong';
+		}		
+		form > ol > li > ul {
+			margin-top: 15px;
+		}
+		form > ol > li > ul > li{
+			list-style: none;
+			padding: 5px 0;
+		}
+		form input{
+			background-color: lightblue;
+		}
+		form input[type='submit']{
+			padding: 7px;
+		}
+	</style>
+</head>
+<body>
+	<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-14/src/main.js b/js-core/homeworks/homework-14/src/main.js
@@ -0,0 +1,127 @@
+const app = {
+  questions : [
+      {
+        id : 1,
+        question : 'Сколько типов данных в JS',
+        answers: [
+          '5',
+          '6',
+          '7'
+        ],
+        correctAnswer : ['6']
+
+      },
+      {
+        id : 2,
+        question : 'Методом чего является функция slice',
+        answers: [
+          'массив',
+          'число',
+          'объект'
+        ],
+        correctAnswer : ['массив']   
+      },
+      {
+        id : 3,        
+        question : 'var y = 1, x = y = typeof x; x;',
+        answers: [
+          '1',
+          'number',
+          'undefined'
+        ],
+        correctAnswer : ['undefined']
+      }    
+    ],
+  _createButton(){
+    const buttonSubmit = this._makeNode('input');
+    buttonSubmit.type = 'submit';
+    buttonSubmit.name = 'submit';
+    buttonSubmit.value = 'Проверить мои рещультаты';
+    return buttonSubmit;  
+  },
+
+  _makeNode(node){
+    return document.createElement(node);
+  },
+  _createListOfQuestions(){
+    const questionList  = this._makeNode('ol');
+
+    this.questions.forEach((questionObj,questionIndex)=>{
+      const questionBlock = this._makeNode('li');
+      questionBlock.innerHTML = `${questionObj.question} <span class="status"></span>`;
+
+      const answersBlock = this._makeNode('ul');
+      questionObj.answers.forEach( (answerText,index) => {
+
+        const inputAnswer = this._makeNode('input');
+        inputAnswer.type = 'checkbox';
+        inputAnswer.name = `question_${questionObj.id}_answer_${index}`  ;
+
+        const labelForAnswer = this._makeNode('label');
+        labelForAnswer.appendChild(inputAnswer);
+
+        const spanForAnswer = this._makeNode('span');
+        spanForAnswer.textContent = answerText
+
+        labelForAnswer.appendChild(spanForAnswer);
+
+        const answerLi = this._makeNode('li');
+        answerLi.appendChild(labelForAnswer);
+
+        answersBlock.appendChild(answerLi);
+      });
+
+      questionBlock.appendChild(answersBlock);
+      questionList.appendChild(questionBlock);
+    });    
+    return questionList;
+  },
+  _initContainer(){
+    const div = this._makeNode('div');
+    div.setAttribute("class", "test-block"); 
+    return div;   
+  },
+  _createHead(){
+    const head = this._makeNode('p');
+    head.innerText = 'Тест по програмированию'
+    return head
+  },
+  checkAnswer(){
+    const questionsElements = document.body.querySelectorAll('ol ul');
+    questionsElements.forEach( (element, index) => {
+      let haveMistakes = true;
+      const questionNumber = element.querySelector('label > input').name.split('_')[1];
+      const answersCkeckboxes = element.querySelectorAll('li > label > input:checked');
+      const questionWeWork = this.questions.filter( question => {
+        return question.id == questionNumber;
+      })[0];
+      if(answersCkeckboxes.length){
+        haveMistakes = [...answersCkeckboxes].some( answersCkeckbox => {
+          const answerText = answersCkeckbox.nextElementSibling.innerText;
+          return questionWeWork.correctAnswer.indexOf(answerText) === -1;
+        });
+      }
+      const newStatus = 'status' + (haveMistakes ? ' wrong' : ' correct');
+      element.parentElement.querySelector('span.status').className = newStatus
+    });
+  },
+  render(){
+    const container = this._initContainer();
+    const formHeader = this._createHead();
+    const form = this._makeNode('form');
+    const questionList = this._createListOfQuestions();
+    const submitButton = this._createButton();
+    submitButton.onclick = () => {
+      this.checkAnswer();
+      return false;
+    }
+    const buttonBlock = this._makeNode('p');
+    buttonBlock.appendChild(submitButton);
+    form.appendChild(questionList).appendChild(buttonBlock);
+    container.appendChild(formHeader);  
+    container.appendChild(form);
+    document.body.appendChild(container);
+  }
+}
+
+app.render();