diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html new file mode 100644 index 0000000..152b2ce --- /dev/null +++ b/js-core/homeworks/homework-14/index.html @@ -0,0 +1,65 @@ + + + + + Home work 14 + + + + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-14/src/main.js b/js-core/homeworks/homework-14/src/main.js new file mode 100644 index 0000000..b493615 --- /dev/null +++ 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} `; + + 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(); \ No newline at end of file