Skip to content

Commit 1d490da

Browse files
Balashov NikitaOlegLustenko
Balashov Nikita
authored and
OlegLustenko
committed
classwork-15
1 parent 7227ab3 commit 1d490da

File tree

2 files changed

+174
-0
lines changed

2 files changed

+174
-0
lines changed

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Class work 15</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+
<main>
27+
<h1 class="header">Тест по программированию</h1>
28+
<ol>
29+
<li>
30+
<h3 class="">Вопрос 1</h3>
31+
<ul>
32+
<li><input type="checkbox" id="check_1"><label for="check_1">Ответ номер 1</label></li>
33+
<li><input type="checkbox" id="check_2"><label for="check_2">Ответ номер 2</label></li>
34+
<li><input type="checkbox" id="check_3"><label for="check_3">Ответ номер 3</label></li>
35+
</ul>
36+
</li>
37+
<li>
38+
<h3 class="">Вопрос 2</h3>
39+
<ul>
40+
<li><input type="checkbox" id="check_1"><label for="check_1">Ответ номер 1</label></li>
41+
<li><input type="checkbox" id="check_2"><label for="check_2">Ответ номер 2</label></li>
42+
<li><input type="checkbox" id="check_3"><label for="check_3">Ответ номер 3</label></li>
43+
</ul>
44+
</li>
45+
<li>
46+
<h3 class="">Вопрос 3</h3>
47+
<ul>
48+
<li><input type="checkbox" id="check_1"><label for="check_1">Ответ номер 1</label></li>
49+
<li><input type="checkbox" id="check_2"><label for="check_2">Ответ номер 2</label></li>
50+
<li><input type="checkbox" id="check_3"><label for="check_3">Ответ номер 3</label></li>
51+
</ul>
52+
</li>
53+
</ol><button class="send-answers">Проверить</button>
54+
</main>
55+
56+
<script src="src/main.js"></script>
57+
58+
</body>
59+
60+
</html>

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
const questions = [
3+
{
4+
questionName: 'question 1',
5+
answers: ['answer 1', 'answer 2', 'answer 3'],
6+
correctAnswers: [1]
7+
},
8+
{
9+
questionName: 'question 2',
10+
answers: ['answer 1', 'answer 2', 'answer 3'],
11+
correctAnswers: [2]
12+
},
13+
{
14+
questionName: 'question 3',
15+
answers: ['answer 1', 'answer 2', 'answer 3'],
16+
correctAnswers: [3]
17+
},
18+
];
19+
20+
const app = {
21+
questions,
22+
testName: 'Тест по программированию',
23+
counter: 0,
24+
render() {
25+
const main = this.newEl('main');
26+
const testName = this.newEl('h1');
27+
testName.textContent = this.testName;
28+
const questionsList = this.newEl('ol');
29+
30+
/*
31+
*
32+
* this.renderQuestions()
33+
*
34+
* */
35+
this.questions.forEach(question => {
36+
const li = this.newEl('li');
37+
const questionHeader = this.newEl('h3');
38+
questionHeader.textContent = question.questionName;
39+
40+
questionHeader.setAttribute('class', 'title')
41+
const answers = this.newEl('ul');
42+
43+
question.answers.forEach((answer, answerIndex) => {
44+
answers.appendChild(this.renderAnswer(answer, answerIndex));
45+
});
46+
47+
li.appendChild(questionHeader);
48+
li.appendChild(answers);
49+
questionsList.appendChild(li);
50+
});
51+
const saveState = questions[1].questionName;
52+
const btn = this.newEl('button');
53+
btn.textContent = 'Submit';
54+
btn.setAttribute('type', 'submit');
55+
btn.onclick = () => {
56+
const child = main.children[1];
57+
const child2 = child.children;
58+
59+
const titles = document.querySelectorAll('h3');
60+
61+
[...titles].forEach(h3 => {
62+
if(h3.getAttribute('class') === 'active') {
63+
h3.setAttribute('class', '');
64+
} else {
65+
h3.setAttribute('class', 'active')
66+
}
67+
});
68+
69+
// const firstQuestion = child2[0].children[1].children[1].children[0];
70+
// const secondQuestion = child2[1].children[1].children[1].children[0];
71+
// const thirdQuestion = child2[2].children[1].children[1].children[0];
72+
//
73+
// firstQuestion.checked = !firstQuestion.checked;
74+
// secondQuestion.checked = !secondQuestion.checked;
75+
// thirdQuestion.checked = !thirdQuestion.checked;
76+
77+
// const answerFirst = child4.firstChild;
78+
// const answerLast = child4.lastChild;
79+
//
80+
// answerFirst.firstChild.checked = !answerFirst.firstChild.checked;
81+
// answerLast.firstChild.checked = !answerLast.firstChild.checked;
82+
//
83+
// this.counter++;
84+
// this.counter % 2 === 0 ? child3.textContent = saveState : child3.textContent = '999';
85+
86+
87+
}
88+
89+
main.appendChild(testName);
90+
main.appendChild(questionsList);
91+
main.appendChild(btn);
92+
document.body.appendChild(main);
93+
},
94+
renderAnswer(answer, answerIndex) {
95+
const li = this.newEl('li');
96+
const label = this.newEl('label');
97+
const uniqId = `uniq_${Math.random()}_${answerIndex}`;
98+
label.setAttribute('for', uniqId);
99+
label.textContent = answer;
100+
101+
const input = this.newEl('input');
102+
input.setAttribute('type', 'checkbox');
103+
input.setAttribute('id', uniqId);
104+
105+
li.appendChild(input);
106+
li.appendChild(label);
107+
return li;
108+
},
109+
newEl(elName) {
110+
return document.createElement(elName);
111+
}
112+
};
113+
114+
app.render();

0 commit comments

Comments
 (0)