JSFiddle - React, Tailwind, and code Playground

by Sova

HTML

<div>
  Списки ответов
  
  <ul>
    <li>
      Неправильный ответ
    </li>
    <li class="right-answer">
      Правильный ответ
    </li>
    <li>
      Неправильный ответ
    </li>
    <li>
      Неправильный ответ
    </li>
  </ul>
  
  <ul>
    <li>
      Неправильный ответ
    </li>
    <li class="right-answer">
      Правильный ответ
    </li>
    <li>
      Неправильный ответ
    </li>
    <li>
      Неправильный ответ
    </li>
    <li class="right-answer">
      Правильный ответ
    </li>
    <li>
      Неправильный ответ
    </li>
  </ul>
</div>

<button id="btn" type="button">
  Toggle
</button>

<div id="result">

</div>

CSS

li.selected {
  background: yellow;
}

ul.answered > li.selected {
  background: red;
}

ul.answered > li.right-answer {
  background: green;
}

JavaScript

const SELECTED_CLASS = 'selected';
const RIGHT_ANSWER_CLASS = 'right-answer';
const UL_ANSWERED_CLASS = 'answered';

const btn = document.querySelector('#btn');
const uls = [...document.querySelectorAll('ul')];
const resultElem = document.querySelector('#result');
const ulList = [...document.querySelectorAll('ul > li')];

const handlers = ulList.map((li) => {
	const handler = () => {
    li.classList.toggle(SELECTED_CLASS);
  };
	
  li.addEventListener('click', handler);
  
  return { li, handler };
});

btn.addEventListener('click', () => {
  const questionAnswers = uls.map((ul) => {
  	ul.classList.add(UL_ANSWERED_CLASS);
  	const lis = [...ul.querySelectorAll('li')];
    
    return lis.reduce((acc, li) => {
    	const { classList } = li;
      
      return acc && 
      	(classList.contains(SELECTED_CLASS) === classList.contains(RIGHT_ANSWER_CLASS));
    }, true)
  });
  
  console.log(questionAnswers);
  
  const countOfRightAnswers = questionAnswers
  	.filter(v => v)
    .length;
    
  result.textContent = `Правильных ответов ${countOfRightAnswers} из ${questionAnswers.length}`;
  
  handlers.forEach(({ li, handler }) => li.removeEventListener('click', handler));
  btn.disabled = true;
});