В данном видео я научу вас создавать тесты на JavaScript. Подобная задача зачастую вызывает сложности у моих учеников, поэтому я специально заснял это видео, чтобы показать возможные подходы к реализации задачи.
Исходники кода
#test div {
margin-bottom: 30px;
}
.correct {
border: 1px solid green;
}
.incorrect {
border: 1px solid red;
}
1
<div id="test">
<div>
<p>Question 1?</p>
<input>
</div>
<div>
<p>Question 2?</p>
<input>
</div>
<div>
<p>Question 3?</p>
<input>
</div>
<button id="button">check</button>
</div>
let button = document.querySelector('#button');
let rightAnswers = [1, 2, 3];
button.addEventListener('click', function() {
let inputs = document.querySelectorAll('#test input');
let i = 0;
for (let input of inputs) {
if (input.value == rightAnswers[i]) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
i++;
}
});
2
<div id="test">
<div>
<p>Question 1?</p>
<input data-right="1">
</div>
<div>
<p>Question 2?</p>
<input data-right="2">
</div>
<div>
<p>Question 3?</p>
<input data-right="3">
</div>
<button id="button">check</button>
</div>
let button = document.querySelector('#button');
button.addEventListener('click', function() {
let inputs = document.querySelectorAll('#test input');
for (let input of inputs) {
if (input.value == input.dataset.right) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
}
});
3
<div id="test">
<div>
<p>Question 1?</p>
<input data-right="1">
</div>
<div>
<p>Question 2?</p>
<input data-right="2">
</div>
<div>
<p>Question 3?</p>
<input data-right="3">
</div>
</div>
let inputs = document.querySelectorAll('#test input');
for (let input of inputs) {
input.addEventListener('blur', function() {
this.classList.remove('correct');
this.classList.remove('incorrect');
if (this.value == this.dataset.right) {
this.classList.add('correct');
} else {
this.classList.add('incorrect');
}
});
}
4
<div id="test"></div>
<button id="button">check</button>
let test = document.querySelector('#test');
let questions = ['Question 1?', 'Question 2?', 'Question 3?'];
let answers = ['1', '2', '3'];
for (let question of questions) {
let div = document.createElement('div');
test.appendChild(div);
let p = document.createElement('p');
p.innerHTML = question;
div.appendChild(p);
let input = document.createElement('input');
div.appendChild(input);
}
let button = document.querySelector('#button');
button.addEventListener('click', function() {
let inputs = document.querySelectorAll('#test input');
let i = 0;
for (let input of inputs) {
input.classList.remove('correct');
input.classList.remove('incorrect');
if (input.value == answers[i]) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
i++;
}
});
5
<div id="test"></div>
<button id="button">check</button>
let test = document.querySelector('#test');
let questions = {
'Question 1?': 1,
'Question 2?': 2,
'Question 3?': 3,
'Question 4?': 4,
}
for (let question in questions) {
let div = document.createElement('div');
test.appendChild(div);
let p = document.createElement('p');
p.innerHTML = question;
div.appendChild(p);
let input = document.createElement('input');
input.dataset.right = questions[question];
div.appendChild(input);
}
let button = document.querySelector('#button');
button.addEventListener('click', function() {
let inputs = document.querySelectorAll('#test input');
for (let input of inputs) {
input.classList.remove('correct');
input.classList.remove('incorrect');
if (input.value == input.dataset.right) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
}
});
6
<div id="test"></div>
<button id="button">check</button>
let test = document.querySelector('#test');
let questions = [
{
text: 'Question 1?',
right: 1,
},
{
text: 'Question 2?',
right: 2,
},
{
text: 'Question 3?',
right: 3,
},
];
for (let question of questions) {
let div = document.createElement('div');
test.appendChild(div);
let p = document.createElement('p');
p.innerHTML = question.text;
div.appendChild(p);
let input = document.createElement('input');
input.dataset.right = question.right;
div.appendChild(input);
}
let button = document.querySelector('#button');
button.addEventListener('click', function() {
let inputs = document.querySelectorAll('#test input');
for (let input of inputs) {
input.classList.remove('correct');
input.classList.remove('incorrect');
if (input.value == input.dataset.right) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
}
});
7
<div id="test"></div>
<button id="button">check</button>
let test = document.querySelector('#test');
let questions = [
{
text: 'Question 1?',
right: 0,
answers: ['answer1', 'answer2', 'answer3',]
},
{
text: 'Question 2?',
right: 1,
answers: ['answer1', 'answer2', 'answer3',]
},
{
text: 'Question 3?',
right: 2,
answers: ['answer1', 'answer2', 'answer3',]
},
];
let i = 1;
for (let question of questions) {
let div = document.createElement('div');
test.appendChild(div);
let p = document.createElement('p');
p.innerHTML = question.text;
div.appendChild(p);
let form = document.createElement('form');
test.appendChild(form);
form.dataset.right = question.right;
let j = 0;
for (let answer of question.answers) {
let input = document.createElement('input');
input.type = 'radio';
input.name = i;
input.dataset.answerNum = j++;
form.appendChild(input);
}
i++;
}
let button = document.querySelector('#button');
button.addEventListener('click', function() {
let forms = document.querySelectorAll('#test form');
for (let form of forms) {
form.classList.remove('correct');
form.classList.remove('incorrect');
let inputs = form.querySelectorAll('input');
for (let input of inputs) {
if (input.checked) {
if (input.dataset.answerNum == form.dataset.right) {
form.classList.add('correct');
} else {
form.classList.add('incorrect');
}
break;
}
}
}
});