<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model View Controller</title>
<style>
</style>
</head>
<body>
<div id="app"></div>
<script>
// Model
let questionIndex = 0;
let points = 0;
// view
updateView();
function updateView() {
let question;
if (questionIndex == 0) question = "Hva er 2 + 2 ?"
else if (questionIndex == 1) question = "Hva er hovedstaden i Sverige ?"
document.getElementById('app').innerHTML = /*HTML*/ `
<h1>${question}</h1>
Poeng: ${points}<br>
<input type="text">
<button onclick="next()">Next</button>
`;
};
// controller
function next() {
questionIndex++;
updateView();
}
</script>
</body>
</html>