HTML
<button id="addQuestion" onclick="addQuestion()">Добавить вопрос</button>
<button id="startTest" onclick="startTest()">Начать тест</button>
<div id="review">
<form id="questionsForm">
</form>
</div>
JS
var questions = [];
window.onload = function() {
addDefaultQuestions();
}
class Question {
constructor(title, answers = []) {
this.title = title;
this.answers = answers;
}
}
class Answer {
constructor(title, isCorrect, id) {
this.title = title;
this.isCorrect = isCorrect;
this.id = id;
}
}
function addDefaultQuestions() {
var questionOne = new Question("Что из перечисленного не является языком программирования?", [
new Answer("HTML", true),
new Answer("Java", false),
new Answer("Python", false),
new Answer("DevOps", true)
]);
questions.push(questionOne);
var questionTwo = new Question("Какие из перечисленных видов тестирования могут быть автоматизированы", [
new Answer("UI тестирование", true),
new Answer("Юзабилити тестирование", false),
new Answer("Тестирование совместимости", true),
new Answer("Unit тестирование", true)
]);
questions.push(questionTwo)
var questionThree = new Question("Выберите типы алгоритмов, которых не существует", [
new Answer("Алгоритм с ветвлением", false),
new Answer("Циклический безусловный", true),
new Answer("Циклический с параметром", false),
new Answer("Алгоритм с углублением", true)
]);
questions.push(questionThree)
var questionFour = new Question("Какая (какие) из следующих конструкций используется (используются) для ветвления?", [
new Answer("switch case", false),
new Answer("if else", true),
new Answer("do while", true),
new Answer("for", false)
]);
questions.push(questionFour)
var questionFive = new Question("Какого (каких) метода (методов) тестирования не существует?", [
new Answer("Метод белого ящика", false),
new Answer('Метод "игры в ящик"', true),
new Answer('Метод "кротовой норы"', true),
new Answer("Метод серого ящика", false)
]);
questions.push(questionFive)
}
function startTest() {
document.getElementById("addQuestion").disabled = true;
document.getElementById("startTest").disabled = true;
var form = document.getElementById("questionsForm");
var q = 1;
for (var i = 0; i < questions.length; i++) {
var question = questions[i];
var title = document.createElement("strong");
var text = document.createTextNode(`${i+1}. ${question.title}`);
title.appendChild(text);
form.appendChild(title);
var br = document.createElement("br");
form.appendChild(br);
var ul = document.createElement("ul");
ul.classList.add("no-bullets");
var a = 1;
question.answers.forEach(elem => {
var li = document.createElement("li");
var input = document.createElement("input");
input.type = "checkbox";
input.value = elem.isCorrect == true ? "1" : "0";
input.name = `question`;
var id = `q${q}a${a}`;
input.id = id;
elem.id = id;
li.appendChild(input);
var label = document.createElement("label");
label.htmlFor = `q${q}a${a}`;
var labelText = document.createTextNode(elem.title);
label.appendChild(labelText);
li.appendChild(label);
ul.appendChild(li);
a++;
});
form.appendChild(ul);
q++;
}
var button = document.createElement("button");
button.type = "button";
button.textContent = "Отправить";
button.id = "sendResults";
//button.onclick = sendAnswers;
button.setAttribute("onClick", "javascript: sendAnswers();");
form.appendChild(button);
}
function sendAnswers() {
var score = 0;
var wrongAnsweredQuestions = [];
var notAnsweredQuestions = [];
for (var i = 0; i < questions.length; i++) {
var isQuestionAnsweredCorrectly = true;
var tempNotAnsweredQuestions = 0;
for (var j = 0; j < questions[i].answers.length; j++) {
var answer = questions[i].answers[j];
var el = document.getElementById(answer.id);
if (!el.checked)
tempNotAnsweredQuestions++;
if (answer.isCorrect !== el.checked)
isQuestionAnsweredCorrectly = false;
}
if (isQuestionAnsweredCorrectly == true)
score++;
else
wrongAnsweredQuestions.push(i + 1);
if (tempNotAnsweredQuestions == questions[i].answers.length) {
notAnsweredQuestions.push(i + 1);
}
}
if (score == questions.length) {
alert(`Ваш результат ${score} из ${questions.length}. Вы молодец!
`);
} else if (notAnsweredQuestions.length > 0) {
alert("Все вопросы должны иметь хотя бы один выбранный вариант ответа. Проверьте правильность заполнения");
} else {
var msg = "Вы неправильно ответили на вопросы:\n";
for (var i = 0; i < wrongAnsweredQuestions.length; i++) {
var questionNumber = wrongAnsweredQuestions[i];
var questionTitle = questions[questionNumber-1].title;
msg += `${questionNumber}. ${questionTitle} \n`;
}
msg += `Ваш результат ${score} из ${questions.length}.`;
alert(msg);
}
}
function addQuestion() {
var title = prompt("Введите текст вопроса:");
if (!title) {
alert("Вы не ввели текст вопроса. Попробуйте добавить вопрос заново");
return;
}
var answer1 = prompt("Введите текст 1 варианта ответа");
if (!answer1) {
alert("Вы не ввели текст 1 варианта ответа. Попробуйте добавить вопрос заново");
return;
}
var answer2 = prompt("Введите текст 2 варианта ответа");
if (!answer2) {
alert("Вы не ввели текст 2 варианта ответа. Попробуйте добавить вопрос заново");
return;
}
var answer3 = prompt("Введите текст 3 варианта ответа");
if (!answer3) {
alert("Вы не ввели текст 3 варианта ответа. Попробуйте добавить вопрос заново");
return;
}
var answer4 = prompt("Введите текст 4 варианта ответа")
if (!answer4) {
alert("Вы не ввели текст 4 варианта ответа. Попробуйте добавить вопрос заново");
return;
}
var answersCombined = prompt("Введите номера правильных ответов через запятую. Нумерация начинается с 1");
var regex = new RegExp("([1-4],){1,4}[^,]$");
var answers = answersCombined.split(',');
if (!answersCombined || !answersCombined.match(regex) || !isUnique(answers)) {
alert("Поле может содержать только уникальные цифры 1,2,3,4, разделенные запятой. Попробуйте добавить вопрос заново ");
return;
}
var newQuestion = new Question(title, [
new Answer(answer1, null),
new Answer(answer2, null),
new Answer(answer3, null),
new Answer(answer4, null)
]);
for (var i = 0; i < newQuestion.answers.length; i++) {
if (answers.includes((i+1).toString()))
newQuestion.answers[i].isCorrect = true;
else
newQuestion.answers[i].isCorrect = false;
}
questions.push(newQuestion);
}
function isUnique(symbols) {
for (var i = 0; i < symbols.length; i++) {
for (var j = i + 1; j < symbols.length; j++) {
if (symbols[i] == symbols[j]) return false;
}
}
return true;
}
CSS
ul.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
Простой
