JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<form action="">
  
  <label for="first-answer">1 answer</label>
  <input id="first-answer" name="radio-1" type="radio" value="1">

  <br>

  <label for="second-answer">2 answer</label>
  <input id="second-answer" name="radio-1" type="radio" value="2">

  <br>

  <label for="third-answer">3 answer</label>
  <input id="third-answer" name="radio-1" type="radio" value="3">
  
</form>

JavaScript

// Лимит по времени на ответ, в милисекунах
// даем юзеры 5 секунд на ответ
let answerLimitTimeMs = 5000

// Правильный ответ
let rightAnswer = "1"

// Статус игры.
// Будет изменен на true. если пользователь выиграл
// и наоборот на false, если проиграл
let gameStatus = false

// Создаем событие по нажатию на варианты ответов.
$("input[type='radio']").click(function(){
	// Передаем в функцию проверки ответа
  // значение нажатого radio button-a
  
  if(isWin($(this).val())){
  	// Если ответ был правильным, тогда игры закончена победой
    gameStatus = true
  }
  // иначе таймер автоматически выведет проигрыш
})

// Прверяем правильность ответа
// В зависимости от ответа меняет статус игры.
function isWin(answer){
	if(answer == rightAnswer) {
  	return true
  } else {
  	return false
  }
}

// Автоматический запуск таймера
setTimeout(function(){
	// По истечению таймера, воводи сообщение
  // об проигрыше.
  if(gameStatus){
  	alert("You win!")
  } else {
  	alert("You lose.")
  }
}, answerLimitTimeMs)