StackOverflow Q - 45115091

https://stackoverflow.com/questions/45115091/

by Amit Bhagat

HTML

<body>

<!-- Template is hidden -->
<div id="ansTemplate" style="display:none">
  <div class="tryAns">
    <input class="inputA" type="text" size="2" maxlength="1" required>
    <input class="inputB" type="text" size="2" maxlength="1" required>
    <input class="inputC" type="text" size="2" maxlength="1" required>
    <h3 class="ansResult"></h3>
  </div>
</div>

<div id="ansPane">

</div>
<button onClick="checkAns()">
Check
</button>
<script>
var elAnsTemplate = document.getElementById('ansTemplate');
var elAnsPane = document.getElementById('ansPane');

function nextAnswerInput(){
		elAnsPane.innerHTML += elAnsTemplate.innerHTML;
  
}

function findLastAnswerPane(){
	// all asnwer pane
  var allAnswerPane = document.querySelectorAll('.tryAns');
  
  // last answer pane
  latestAnswerPane = allAnswerPane[ allAnswerPane.length - 1 ];
  
  return latestAnswerPane;
}

function getAnsParts(){
	
  // Get last answer pane
  var latestAnswerPane = findLastAnswerPane();
  
	// Read parts from last answer
  var a = latestAnswerPane.querySelector('.inputA').value,
  	b = latestAnswerPane.querySelector('.inputB').value,
  	c = latestAnswerPane.querySelector('.inputC').value;

	return [a, b, c]
}

function setAnsResult( ansText ){
  // Get last answer pane
  var latestAnswerPane = findLastAnswerPane();

	latestAnswerPane.querySelector('.ansResult').innerText = ansText;
}

function nextTryInput(){
  var newTryElement = document.createElement('div');
  newTryElement.innerHTML = elAnsTemplate.innerHTML;
  elAnsPane.appendChild( newTryElement );
}

function handleRightAnswer(){
	setAnsResult( 'Right' );
}
function handleWrongAnswer(){
  setAnsResult('Wrong');
  nextTryInput();
}
function checkAns(){
	var ansParts = getAnsParts();
  	ansA = ansParts[0],
    ansB = ansParts[1],
    ansC = ansParts[2];
  
  if ( ansA === '1' && ansB === '0' && ansC === '0' ){
  	handleRightAnswer();
  }
  else{
  	handleWrongAnswer();
  }
}
</script>

<script>
	// Show first input
 ...