Last active
August 20, 2016 10:50
-
-
Save Baudin999/cac189953cd3a13d540bc39a126ed415 to your computer and use it in GitHub Desktop.
Non lineair Questions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment