const answers = ['sfp', 'qsfp', 'xfp'];

const inputs = [
  document.getElementById('port1'),
  document.getElementById('port2'),
  document.getElementById('port3')
];

const submitBtn = document.getElementById('submitBtn');

const nextBtn = document.createElement('a');
nextBtn.className = 'menubox_header_white';
nextBtn.href = 'test.html';
nextBtn.target = 'content';
nextBtn.innerText = 'Итоговый тест';

const theoryBtn = document.createElement('a');
theoryBtn.className = 'menubox_header_white';
theoryBtn.href = 'razdel1.html';
theoryBtn.target = 'content';
theoryBtn.innerText = 'Повторить теорию';

submitBtn.addEventListener('click', e => {

  let correctTotal = 0;

  for (let i = 0; i < inputs.length; i++) {

    const input = inputs[i];

    const value = input.value.trim().toLowerCase();

    if (value == answers[i]) {

      correctTotal++;
      input.placeholder = '';
    }
    else {
      input.value = '';
      input.placeholder = 'Неверно!';
    }
  }

  submitBtn.style.display = 'none';

  if (correctTotal / answers.length < 0.75) {

    submitBtn.insertAdjacentElement('afterend', theoryBtn);
    alert(`Вы ответили верно на ${correctTotal} из ${answers.length}\r\nПовторите попытку`);
  }
  else {
    submitBtn.insertAdjacentElement('afterend', nextBtn);
    alert(`Вы ответили верно на ${correctTotal} из ${answers.length}\r\nЗадание пройдено`);
  }
});