Skip to content

Commit 40d2252

Browse files
Balashov NikitaOlegLustenko
Balashov Nikita
authored and
OlegLustenko
committed
classwork-16
1 parent e06ff1e commit 40d2252

File tree

2 files changed

+210
-0
lines changed

2 files changed

+210
-0
lines changed

‎js-core/classworks/classwork-16/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Class work 16</title>
7+
<style>
8+
ul {
9+
list-style: none;
10+
}
11+
main {
12+
width: 600px;
13+
margin: 0 auto;
14+
}
15+
.send-answers{
16+
cursor: pointer;
17+
}
18+
.active{
19+
font-size: 50px;
20+
}
21+
</style>
22+
23+
</head>
24+
25+
<body>
26+
<div class="main">Loading...</div>
27+
28+
<!--
29+
<main>
30+
<h1 class="header">Тест по программированию</h1>
31+
<ol>
32+
<li>
33+
<h3 class="">Вопрос 1</h3>
34+
<ul>
35+
<li><input type="checkbox" id="check_1"><label for="check_1">Ответ номер 1</label></li>
36+
<li><input type="checkbox" id="check_2"><label for="check_2">Ответ номер 2</label></li>
37+
<li><input type="checkbox" id="check_3"><label for="check_3">Ответ номер 3</label></li>
38+
</ul>
39+
</li>
40+
<li>
41+
<h3 class="">Вопрос 2</h3>
42+
<ul>
43+
<li><input type="checkbox" id="check_1"><label for="check_1">Ответ номер 1</label></li>
44+
<li><input type="checkbox" id="check_2"><label for="check_2">Ответ номер 2</label></li>
45+
<li><input type="checkbox" id="check_3"><label for="check_3">Ответ номер 3</label></li>
46+
</ul>
47+
</li>
48+
<li>
49+
<h3 class="">Вопрос 3</h3>
50+
<ul>
51+
<li><input type="checkbox" id="check_1"><label for="check_1">Ответ номер 1</label></li>
52+
<li><input type="checkbox" id="check_2"><label for="check_2">Ответ номер 2</label></li>
53+
<li><input type="checkbox" id="check_3"><label for="check_3">Ответ номер 3</label></li>
54+
</ul>
55+
</li>
56+
</ol><button class="send-answers">Проверить</button>
57+
</main>
58+
-->
59+
60+
<script src="src/main.js"></script>
61+
62+
</body>
63+
64+
</html>

‎js-core/classworks/classwork-16/src/main.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
const questions = [
3+
{
4+
questionName: 'question 1',
5+
answers: ['answer 1.1', 'answer 1.2', 'answer 1.3'],
6+
correctAnswersIndexes: [0],
7+
correctAnswers: ['answer 1.1']
8+
},
9+
{
10+
questionName: 'question 2',
11+
answers: ['answer 2.1', 'answer 2.2', 'answer 2.3'],
12+
correctAnswersIndexes: [1],
13+
correctAnswers: ['answer 2.2']
14+
},
15+
{
16+
questionName: 'question 3',
17+
answers: ['answer 3.1', 'answer 3.2', 'answer 3.3'],
18+
correctAnswersIndexes: [2],
19+
correctAnswers: ['answer 3.3']
20+
},
21+
];
22+
23+
const app = {
24+
questions,
25+
testName: 'Тест по программированию',
26+
counter: 0,
27+
render() {
28+
const main = this.newEl('main');
29+
main.setAttribute('id', 'ads')
30+
const testName = this.newEl('h1');
31+
testName.textContent = this.testName;
32+
const questionsList = this.newEl('ol');
33+
34+
/*
35+
*
36+
* this.renderQuestions()
37+
*
38+
* */
39+
this.questions.forEach(question => {
40+
const li = this.newEl('li');
41+
const questionHeader = this.newEl('h3');
42+
questionHeader.textContent = question.questionName;
43+
44+
questionHeader.setAttribute('class', 'title')
45+
const answers = this.newEl('ul');
46+
47+
question.answers.forEach((answer, answerIndex) => {
48+
answers.innerHTML += (this.renderAnswer(answer, answerIndex));
49+
});
50+
51+
li.appendChild(questionHeader);
52+
li.appendChild(answers);
53+
questionsList.appendChild(li);
54+
});
55+
56+
const btn = this.newEl('button');
57+
btn.textContent = 'Submit';
58+
btn.setAttribute('type', 'submit');
59+
60+
61+
main.appendChild(testName);
62+
main.appendChild(questionsList);
63+
main.appendChild(btn);
64+
document.body.appendChild(main);
65+
},
66+
renderAnswer(answer, answerIndex) {
67+
// const li = this.newEl('li');
68+
// li.setAttribute('class', 'dsa')
69+
// const label = this.newEl('label');
70+
const uniqId = `uniq_${Math.random()}_${answerIndex}`;
71+
// label.setAttribute('for', uniqId);
72+
// label.textContent = answer;
73+
//
74+
// const input = this.newEl('input');
75+
// input.setAttribute('type', 'checkbox');
76+
// input.setAttribute('id', uniqId);
77+
//
78+
// li.appendChild(input);
79+
// li.appendChild(label);
80+
// return li;
81+
82+
return `
83+
<li>
84+
<input type="checkbox" id="${uniqId}">
85+
86+
<label for="${uniqId}">
87+
${answer}
88+
</label>
89+
</li>
90+
`
91+
92+
},
93+
newEl(elName) {
94+
return document.createElement(elName);
95+
}
96+
};
97+
98+
app.render();
99+
//---------
100+
const loading = document.querySelector('.main');
101+
const testinsert = document.createElement('span');
102+
testinsert.textContent = 'SPAN';
103+
104+
loading.parentElement.insertBefore(testinsert, loading);
105+
106+
const testing = document.getElementById('ads');
107+
const buttonSMTH = document.createElement('button');
108+
buttonSMTH.setAttribute('type', 'submit');
109+
buttonSMTH.textContent = 'Add SMTH'
110+
111+
const answers = document.getElementsByClassName('dsa');
112+
113+
buttonSMTH.onclick = () => {
114+
115+
questions.forEach((elem, index, arr) => {
116+
const correct = document.createElement('span');
117+
const incorrect = document.createElement('span');
118+
correct.textContent = 'correct';
119+
incorrect.textContent = 'incorrect';
120+
121+
const answersFromDB = elem.answers;
122+
const rightAnswers = elem.correctAnswersIndexes;
123+
});
124+
125+
};
126+
127+
testing.appendChild(buttonSMTH);
128+
129+
testing.insertAdjacentHTML('beforeend', '<button type="submit">QWERTY</button>');
130+
131+
const javaScriptOneLove = [
132+
'Arrow',
133+
'Closure',
134+
'Class'
135+
];
136+
137+
let createList = (arr) => {
138+
139+
const renderItem = arr.map(item => `<li>${item}</li>`).join('');
140+
141+
return `<ul>
142+
${renderItem}
143+
</ul>`
144+
}
145+
146+
document.body.innerHTML += createList(javaScriptOneLove);

0 commit comments

Comments
 (0)