JSFiddle - React, Tailwind, and code Playground

by Lestrae

HTML

<div id='test-desc'>
    <p class='q-desc'>Данный комплексный тест для судоводителей в сфере управления охватывает такие важные задачи как <i>"Судовождение"</i>, <i>"Обработка и размещение грузов"</i>, <i>"Управление операциями судна и забота о людях"</i>.</p>
    <p>В ходе прохождения теста вас ждут 30 вопросов, чем быстрее вы на них ответите - тем больше очков заработаете.</p>
    <p>Режимы <i>"тренировочный"</i> и <i>"аттестация"</i> отличаются друг от друга тем, что в аттестационном нельзя просить подсказки правильных ответов.</p>
</div>

<div id='regime'>
    <p>Выберите режим в котором вы будете проходить тест:</p>
    <div class='regime-buttons'>
        <div id='choose-wisely'>
            <div id='training'>
                <div class='regime-img'><img src='https://sea-man.org/icons/training.png' alt='Комплексный тест - тренировка'></div>
                <div class='regime-name'>Тренировочный</div>
            </div>
            <div id='exam'>
                <div class='regime-img'><img src='https://sea-man.org/icons/exam.png' alt='Комплексный тест - аттестация'></div>
                <div class='regime-name'>Аттестация</div>
            </div>
        </div>
    </div>
</div>

<div id='start-test' class='hidden-q'>Начать тест</div>

<div id='q1' class='questions hidden-q'>
    <div class='q-desc'>1. Документ "Информация о грузе" содержит: Полные сведения о транспортных характеристиках груза; особых и опасных его свойствах; меры предосторожности при работе с грузом; требования к размещению и креплению груза на судне.</div>
    <div class='q-var' id='Q1A1'><i class="far fa-circle"></i> Утверждение истинно. <span class='right-answer'><i
                class="fas fa-check-square"></i></div>
    <div class='q-var' id='Q1A2'><i class="far fa-circle"></i> Утверждение ложно.</div>
    <div class='next-q'>Принять ответ</div>
</div>

<div id='q2' class='questions hidden-q'>
    <div class='q-desc'>2. "Наставление по креплению груза" одобряется:</div>
    <div...

CSS

.read-time {
  display: none
}

h1 {
  font-size: 3em;
  text-align: center
}

.main-tests {
  max-width: 58em;
  margin: 0 auto
}

.chosen {
  background: #59b1ff
}

.answer-made {
  pointer-events: none
}

.questions {
  margin-bottom: 20px
}

.questions .q-desc {
  padding: 10px;
  font-size: 2em;
  font-weight: 600
}

.questions .q-var {
  margin-left: 20px;
  font-size: 1.1em;
  margin-bottom: 10px;
  cursor: pointer;
  padding: 10px
}

.questions .q-var:hover {
  background: #6495ed
}

.hidden-q {
  display: none
}

.your-result {
  font-size: 3em
}

.blue-screen {
  background: #3a96f7;
  color: #fff
}

#misc {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 20px 0
}

#q-number {
  font-size: 1.8em
}

#q-time {
  font-size: 1.8em;
  text-align: center
}

#close {
  text-align: right;
  cursor: pointer
}

.fas.fa-times {
  color: #fff;
  opacity: .5;
  line-height: 1.5
}

.fa-times:hover {
  opacity: 1
}

.checked-circle {
  background: #fff;
  border-radius: 50px
}

.next-q {
  background: #20b2aa;
  text-align: center;
  width: 300px;
  margin: 0 auto !important;
  padding: 8px;
  cursor: pointer
}

#start-test {
  background: #3a96f7;
  color: #fff;
  text-align: center;
  width: 300px;
  margin: 0 auto !important;
  padding: 10px;
  cursor: pointer
}

#check-results {
  background: #430da4;
  color: #fff;
  text-align: center;
  width: 300px;
  margin: 0 auto !important;
  cursor: pointer;
  padding: 8px
}

.next-q:hover {
  box-shadow: 0 0 3px 2px;
  background: #20b2aa !important
}

#check-results:hover {
  box-shadow: 0 0 3px 2px;
  background: #5817ce !important
}

#note {
  font-style: italic;
  font-size: .8em;
  margin-top: 40px
}

#points {
  font-size: 1.2em
}

a.restart {
  color: wheat
}

.trophy {
  max-width: 450px;
  margin: 0 auto
}

.results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center
}

.try-again {
  text-align: center;
  margin-top: 10px
}

.q-input {
  margin-bottom:...

JavaScript

const Q1A1 = document.getElementById('Q1A1');
const Q1A2 = document.getElementById('Q1A2');
const Q2A1 = document.getElementById('Q2A1');
const Q2A2 = document.getElementById('Q2A2');
const Q2A3 = document.getElementById('Q2A3');
const Q3A1 = document.getElementById('Q3A1');
const Q3A2 = document.getElementById('Q3A2');
const Q3A3 = document.getElementById('Q3A3');
const Q3A4 = document.getElementById('Q3A4');
const Q4A1 = document.getElementById('Q4A1');
const Q4A2 = document.getElementById('Q4A2');
const Q4A3 = document.getElementById('Q4A3');
const Q4A4 = document.getElementById('Q4A4');
const Q4A5 = document.getElementById('Q4A5');
const Q5A1 = document.getElementById('Q5A1');
const Q5A2 = document.getElementById('Q5A2');
const Q6A1 = document.getElementById('Q6A1');
const Q6A2 = document.getElementById('Q6A2');
const Q6A3 = document.getElementById('Q6A3');
const Q6A4 = document.getElementById('Q6A4');
const Q6A5 = document.getElementById('Q6A5');
const Q7A1 = document.getElementById('Q7A1');
const Q7A2 = document.getElementById('Q7A2');
const Q7A3 = document.getElementById('Q7A3');
const Q7A4 = document.getElementById('Q7A4');
const Q8A1 = document.getElementById('Q8A1');
const Q8A2 = document.getElementById('Q8A2');
const Q8A3 = document.getElementById('Q8A3');
const Q8A4 = document.getElementById('Q8A4');
const Q8A5 = document.getElementById('Q8A5');
const Q8A6 = document.getElementById('Q8A6');
const Q9A1 = document.getElementById('Q9A1');
const Q9A2 = document.getElementById('Q9A2');
const Q9A3 = document.getElementById('Q9A3');
const Q10A1 = document.getElementById('Q10A1');
const Q10A2 = document.getElementById('Q10A2');
const Q10A3 = document.getElementById('Q10A3');
const Q10A4 = document.getElementById('Q10A4');
const Q11A1 = document.getElementById('Q11A1');
const Q11A2 = document.getElementById('Q11A2');
const Q11A3 = document.getElementById('Q11A3');
const Q11A4 = document.getElementById('Q11A4');
const Q12A1 =...