initial commit

src/game.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var capitals = { 
+	"England": "London",
+	"France": "Paris",
+	"the USA": "Washington D.C.",
+	"India": "New Dehli",
+	"Bangladesh": "Dhaka"
+}
+
+var question_list = null;
+const capitals_list = Object.values(capitals);
+const date = new Date();
+var state = {"score": 0, "start_time": 0, "end_time": 0, "finishedGame": true};
+
+var answersHTML = document.getElementById('answers');
+var answerAHTML = document.getElementById('answer_a');
+var answerBHTML = document.getElementById('answer_b');
+var answerCHTML = document.getElementById('answer_c');
+var answerDHTML = document.getElementById('answer_d');
+var scoreHTML = document.getElementById('score');
+var questionHTML = document.getElementById('question');
+
+function init() {
+	// reset states list, score, end_time; start timer for game;
+	question_list = Object.keys(capitals).sort(() => Math.random()-0.5);
+	answersHTML.style.display = "";
+	state.finishedGame = false;
+	state.score = 0;
+	state.end_time = 0;
+	state.start_time = date.getTime();
+	updateState();
+	updateScreen();
+}
+
+function updateState() {
+	// check if game is over
+	if (question_list.length == 0) {
+		state.finishedGame = true;
+		return;
+	}
+
+	// set up new question
+	var newQuestion = question_list.pop();
+	var options = []
+	while (options.length < 4) {
+		var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
+		if (c !== capitals[newQuestion] && !options.includes(c)){
+			options.push(c);
+		}
+	}
+	console.log(options)
+	options[Math.floor(Math.random()*4)] = capitals[newQuestion];
+	console.log(options)
+
+	state.question = newQuestion;
+	state.options = options;
+	state.answer = capitals[newQuestion];
+}
+
+function updateScreen(){
+	scoreHTML.innerHTML = state.score;
+	if (state.finishedGame) {
+		questionHTML.innerHTML = "you finishedeededede!!! tap here or press space to restart";
+		answers.style.display = "none";
+		return;
+	}
+	answerAHTML.getElementsByClassName('text')[0].innerHTML = state.options[0];
+	answerBHTML.getElementsByClassName('text')[0].innerHTML = state.options[1];
+	answerCHTML.getElementsByClassName('text')[0].innerHTML = state.options[2];
+	answerDHTML.getElementsByClassName('text')[0].innerHTML = state.options[3];
+	questionHTML.innerHTML = "what is the capital of <span id=\"questionCountry\">" + state.question + "</span>?";
+}
+
+function processClick(answer) {
+	// check if answer to previous question  was correct
+	state.score += 1 ? state.options[answer] == state.answer : 0;
+
+	console.log("got click: " + answer);
+	updateState();
+	updateScreen();
+}
+
+answerAHTML.addEventListener('click', () => processClick(0));
+answerBHTML.addEventListener('click', () => processClick(1));
+answerCHTML.addEventListener('click', () => processClick(2));
+answerDHTML.addEventListener('click', () => processClick(3));
+questionHTML.addEventListener('click', () => init());
+document.addEventListener('keydown', e => {
+	if (e.code == "Digit1") processClick(0);
+	if (e.code == "Digit2") processClick(1);
+	if (e.code == "Digit3") processClick(2);
+	if (e.code == "Digit4") processClick(3);
+	if (e.code == "Space") init();
+});

src/game_styles.css

@@ -0,0 +1,72 @@
+:root {
+	--a-color: var(--red);
+	--b-color: var(--yellow);
+	--c-color: var(--green);
+	--d-color: var(--blue);
+	--question-country-color: var(--teal);
+}
+
+#game #toprow {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+@media only screen and (max-width: 600px) {
+	#game #toprow {
+		flex-direction: column-reverse;
+	}
+}
+
+#game #question {
+	font-size: 1.5em;
+}
+
+#game #score {
+	--good: var(--green);
+	--okay: var(--yellow);
+	--bad: var(--red);
+	color: var(--good);
+}
+
+#game .answer {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	align-content: center;
+}
+
+#game .answer .text {
+	width: 50%;
+}
+
+#game .answer .letter {
+	font-size: 1.5em;
+	padding: 1em;
+	border: 0.05em var(--default-bg) solid;
+	border-radius: 0.25em;
+}
+
+#game .answer #a {
+	background-color: var(--a-color);
+	border-color: var(--a-color);
+}
+
+#game .answer #b {
+	background-color: var(--b-color);
+	border-color: var(--b-color);
+}
+
+#game .answer #c {
+	background-color: var(--c-color);
+	border-color: var(--c-color);
+}
+
+#game .answer #d {
+	background-color: var(--d-color);
+	border-color: var(--d-color);
+}
+
+span#questionCountry {
+	background-color: var(--question-country-color);
+}

src/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en"> 
+
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="/styles.css" />
+<link rel="stylesheet" type="text/css" href="/game_styles.css" />
+<title>capitals_quiz</title>
+</head>
+
+<body>
+<div id=game>
+	<div id="toprow">
+		<p id="question">tap here or press space to start</p>
+		<p id="score">score</p>
+	</div>
+	<div style="display: none" id="answers">
+		<div class="answer" id="answer_a">
+			<p class="letter" id="a">a</p>
+			<p class="text">answer a text</p>
+		</div>
+		<div class="answer" id="answer_b">
+			<p class="letter" id="b">b</p>
+			<p class="text">answer b text</p>
+		</div>
+		<div class="answer" id="answer_c">
+			<p class="letter" id="c">c</p>
+			<p class="text">this sample text is longer than the rest</p>
+		</div>
+		<div class="answer" id="answer_d">
+			<p class="letter" id="d">d</p>
+			<p class="text">answer d text</p>
+		</div>
+	</div>
+</div>
+<script src="game.js"></script>
+</body>

src/styles.css

@@ -0,0 +1,65 @@
+:root {
+	--default-bg: #fefefe;
+	--selected-bg:#383838;
+	--default-fg: #454545;
+	--red:        #ab4642;
+	--orange:     #dc9656;
+	--yellow:     #f7ca88;
+	--green:      #a1b56c;
+	--teal:       #86c1b9;
+	--blue:       #7cafc2;
+	--purple:     #ba8baf;
+	--brown:      #a16946;
+}
+
+body {
+	font-family: monospace;
+	color: var(--default-fg);
+	font-size: 16px;
+	margin: 2em auto;
+	max-width: 800px;
+	padding: 5em;
+	line-height: 1.1;
+	text-align: justify;
+	background-color: var(--default-bg);
+}
+
+@media only screen and (max-width: 600px) {
+	body {
+		margin: 0em auto;
+		padding: 2em;
+	}
+}
+
+a { color: #07a; }
+a:visited { color: #941352; }
+
+img[class="centered"] {
+	margin: 0 auto;
+	display: block;
+}
+
+table {
+	border-collapse: collapse;
+	margin: 1em auto;
+}
+th, td {
+	padding: 1em;
+	border: 1px solid #454545;
+	margin: 0;
+}
+
+
+pre {
+	background-color: #d9d9d9 ;
+	color: #000;
+	padding: 1em;
+}
+
+details {
+	padding: 1em 0 1em 0;
+}
+
+li {
+	margin-bottom: 1em;
+}