JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<form novalidate>
  <div class="question">
    <p>How long are average daily trips?</p>
    <div class="answers">
      <label>
					<input type="radio" class="riskEval" name="q1" value=1 required>
					<span class="distractors">&lsaquo;1 hour</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q1" value=2 required>
					<span class="distractors">1 to 2 hours</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q1" value=3 required>
					<span class="distractors">2 to 4 hours</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q1" value=4 required>
					<span class="distractors">4+ Hours</span>
				</label>
    </div>
  </div>

  <div class="question">
    <p>How many days a year are you driving?</p>

    <div class="answers">
      <label>
					<input type="radio" class="riskEval" name="q2" value=1 required>
					<span class="distractors">&lsaquo;1 hour</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q2" value=2 required>
					<span class="distractors">1 to 2 hours</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q2" value=3 required>
					<span class="distractors">2 to 4 hours</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q2" value=4 required>
					<span class="distractors">4+ Hours</span>
				</label>
    </div>
  </div>

  <div class="question">
    <p>How many times a day are you driving?</p>

    <div class="answers">
      <label>
					<input type="radio" class="riskEval" name="q3" value=1 required>
					<span class="distractors">&lsaquo;1 hour</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q3" value=2 required>
					<span class="distractors">1 to 2 hours</span>
				</label>
      <label>
					<input type="radio" class="riskEval" name="q3" value=3 required>
					<span class="distractors">2 to 4 hours</span>
				</label>
     ...

CSS

.distractors {
  padding: 20px;
}

.answers {
  padding: 20px;
  border: 1px solid #ecf0f1;
  border-radius: 6px;
}

.answers:hover {
  background-color: #ecf0f1;
}

.blank-question {
  color: #e53935;
}

.blank-answer {
  border: 3px solid #e53935;
}

JavaScript

document.getElementsByTagName("form")[0].addEventListener("submit", function(e) {
	e.preventDefault()
  
  const questions = document.querySelectorAll(".question")
  
  questions.forEach(question => {
  		const radiosBtn = question.querySelectorAll('input:checked');
      question.classList.toggle("blank-question", !radiosBtn.length)
      question.querySelector('.answers').classList.toggle("blank-answer", !radiosBtn.length)
  })
})