# Создание тестов с вопросами и ответами на JavaScript

В данном видео я научу вас создавать тесты на 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; } } } });`
←→
↑