@alexeyklem

Буду благодарен, если сделаете более корректно и правильно: сократить код, изменить, сделать лучше?

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;
}
  • Вопрос задан
  • 262 просмотра
Пригласить эксперта
Ответы на вопрос 1
@12rbah
Можно просто создать функцию addQuestion и дорбавлять в нее данные из внешнего хранилища или функцию createTest, которая также будет считывать вопросы из внешнего хранилища и создавать тест(тут вариант выбирать в зависимости от ситуации).
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)


Так делать не стоит, т.к. при 20 вопросах вам нужно будет написать 20 таких конструкций ну и дальше по возрастающей. вам нужно создать массив и проверять его при нажатии на кнопку, и например подсвечивать вопросы на которые не ответили.
var answer2 = prompt("Введите текст 2 варианта ответа");
if (!answer2) {
alert("Вы не ввели текст 2 варианта ответа. Попробуйте добавить вопрос заново");
return;
}

var answer3 = prompt("Введите текст 3 варианта ответа");
if (!answer3) {
alert("Вы не ввели текст 3 варианта ответа. Попробуйте добавить вопрос заново");
return;
}


В общем читать ваш код очень трудно (пишите хотя бы с отступами). Вы в целом неправильно подошли к написанию кода. Когда будете переписывать продумайте такие моменты как:
1) Количество вопросов может быть любым (пока ограничьтесь одним тестом)
2) При изменении числа вопросов ваш код не должен меняться
3) У вас нет структуры у кода, стоит отделить функции от основой логики создания теста(тут для любой программы общее правило, что UI нужно пытаться как можно меньше перемешивать с логикой работы программы, хорошо когда отдельная функция/класс возвращает, то что нужно отобразить, а у вас все перемешано).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы