Baudin999/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <ul class="answer-container">

  </ul>

  <form>
    <fieldset>

      <legend>Vragen voor Erwin</legend>

      <div class="input-group">
        <span class="question"></span> <br />
        <input class="answer" />
      </div>

   </fieldset>

   <button type="button" class="previous-button">Previous</button>
   <button type="button" class="next-button">Next</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

## script.js

var questions = [
  { question: "Hoe oud is Carlos", answer: "37" },
  { question: "Hoe oud is Femke", answer: "36" },
  { question: "Mag een 'if' statement?", answer: "Nee" }
]

var answerContainer = document.body.querySelector('.answer-container');
for (var i = 0; i < questions.length; ++i) {
  var answerItem = document.createElement('li');
  answerItem.classList.add("empty");
  answerContainer.appendChild(answerItem)

  questions[i].answerItem = answerItem;
}


var currentQuestionIndex = 0;
var nextButton = document.body.querySelector('.next-button');
var previousButton = document.body.querySelector('.previous-button');

nextButton.addEventListener('click', function(event) {
    if (currentQuestionIndex < questions.length - 1) {
      currentQuestionIndex = currentQuestionIndex + 1;
    }
    askQuestion(currentQuestionIndex);
});

previousButton.addEventListener('click', function(event) {
    if (currentQuestionIndex > 0) {
      currentQuestionIndex = currentQuestionIndex - 1;
    }
    askQuestion(currentQuestionIndex);
});


var questionElement = document.body.querySelector('.question');
var answerElement = document.body.querySelector('.answer');
function askQuestion(index) {
  var question = questions[index];
  questionElement.innerText = question.question;
  answerElement.value = question.givenAnswer || '';
}
answerElement.addEventListener('blur', function(event) {
  var li = document.body.querySelector('ul').children[currentQuestionIndex];
  var givenAnswer = answerElement.value || '';
  var question = questions[currentQuestionIndex];
  question.givenAnswer = givenAnswer;

  if (givenAnswer.toLowerCase() === question.answer.toLowerCase()) {
    li.className = "goed";
  }
  else {
    li.className = "fout";
  }

  if (!answerElement.value) {
    li.className = "geen";
  }

  question.givenAnswer = givenAnswer;
});

askQuestion(currentQuestionIndex);

## styles.css
/* todo: add styles */

.goed {
  background: green;
}
.fout {
  background: red;
}
.geen {
  background: orange;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 5px;
  margin-right: 10px;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>

	<ul class="answer-container">

	</ul>

	<form>
	<fieldset>

	<legend>Vragen voor Erwin</legend>

	<div class="input-group">
	<span class="question"></span> <br />
	<input class="answer" />
	</div>

	</fieldset>

	<button type="button" class="previous-button">Previous</button>
	<button type="button" class="next-button">Next</button>
	</form>

	<script src="script.js"></script>
	</body>
	</html>

	var questions = [
	{ question: "Hoe oud is Carlos", answer: "37" },
	{ question: "Hoe oud is Femke", answer: "36" },
	{ question: "Mag een 'if' statement?", answer: "Nee" }
	]

	var answerContainer = document.body.querySelector('.answer-container');
	for (var i = 0; i < questions.length; ++i) {
	var answerItem = document.createElement('li');
	answerItem.classList.add("empty");
	answerContainer.appendChild(answerItem)

	questions[i].answerItem = answerItem;
	}


	var currentQuestionIndex = 0;
	var nextButton = document.body.querySelector('.next-button');
	var previousButton = document.body.querySelector('.previous-button');

	nextButton.addEventListener('click', function(event) {
	if (currentQuestionIndex < questions.length - 1) {
	currentQuestionIndex = currentQuestionIndex + 1;
	}
	askQuestion(currentQuestionIndex);
	});

	previousButton.addEventListener('click', function(event) {
	if (currentQuestionIndex > 0) {
	currentQuestionIndex = currentQuestionIndex - 1;
	}
	askQuestion(currentQuestionIndex);
	});


	var questionElement = document.body.querySelector('.question');
	var answerElement = document.body.querySelector('.answer');
	function askQuestion(index) {
	var question = questions[index];
	questionElement.innerText = question.question;
	answerElement.value = question.givenAnswer \|\| '';
	}
	answerElement.addEventListener('blur', function(event) {
	var li = document.body.querySelector('ul').children[currentQuestionIndex];
	var givenAnswer = answerElement.value \|\| '';
	var question = questions[currentQuestionIndex];
	question.givenAnswer = givenAnswer;

	if (givenAnswer.toLowerCase() === question.answer.toLowerCase()) {
	li.className = "goed";
	}
	else {
	li.className = "fout";
	}

	if (!answerElement.value) {
	li.className = "geen";
	}

	question.givenAnswer = givenAnswer;
	});

	askQuestion(currentQuestionIndex);
	/* todo: add styles */

	.goed {
	background: green;
	}
	.fout {
	background: red;
	}
	.geen {
	background: orange;
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	li {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: orange;
	border-radius: 5px;
	margin-right: 10px;
	}