add option to match country to capital

.gitignore

@@ -1,2 +1,2 @@
-src/countries.js
+countries.js
 *.swp

Makefile

@@ -1,12 +1,15 @@
 all: countries.js
 
-countries:
-	git submodule init
-	git submodule update
+countries/countries.json: .SUBMODULES
 
-countries.js: countries
+countries.js: countries/countries.json
 	python3 scripts/generate_countries_list.py countries/countries.json > countries.js
 
 clean:
 	rm -rf countries.js
 	rm -rf countries
+
+.SUBMODULES:
+	git submodule init
+	git submodule update
+

game.js

@@ -10,6 +10,7 @@ const answerDHTML = document.getElementById("answer_d");
 const bodyHTML = document.getElementsByTagName("body")[0]
 const incorrectAnswersTable = document.getElementById('incorrectAnswersTable');
 const correctAnswersTable = document.getElementById('correctAnswersTable');
+const guessCheckboxHTML = document.getElementById('guessCheckbox');
 const previousQuestionAnswer = document.getElementById('previousQuestionAnswer');
 const previousQuestionText = document.getElementById('previousQuestionText');
 const resultsHTML = document.getElementById("results");
@@ -22,6 +23,7 @@ const timeHTML = document.getElementById("time");
 
 var gameTimeStartTime = 0;
 var gameTimeIntervalId = 0;
+const guessCountry = () => guessCheckboxHTML.checked;
 
 function updateTime() {
     const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000)
@@ -29,9 +31,22 @@ function updateTime() {
     timeHTML.innerHTML = secondsPassed;
 }
 
-const capitals_list = Object.values(countries).map(country => country.capital);
-const regionList = [...new Set(Object.values(countries).map(country => country.region))]
-    .concat([...new Set(Object.values(countries).map(country => country.subregion))])
+const getMasterQuestionList = () => {
+  if(guessCountry()) return capitals
+  return countries;
+}
+
+const getQuestionHTML = (state) => {
+  if(guessCountry())
+    return `what country is <span id="questionCapital">${state.question}</span> the capital of?`
+  return `what is the capital of <span id="questionCountry">${state.question}</span>?`
+}
+
+const answer_list = Object.values(getMasterQuestionList()).map(item => item.answer);
+
+
+const regionList = [...new Set(Object.values(getMasterQuestionList()).map(item => item.region))]
+    .concat([...new Set(Object.values(getMasterQuestionList()).map(item => item.subregion))])
     .concat([ALL_REGIONS])
     .sort();
 const date = new Date();
@@ -68,8 +83,8 @@ function init() {
     if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*");
     else regex = new RegExp(selectorHTML.value, "gi");
 
-    questionList = Object.keys(countries)
-        .filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex))
+    questionList = Object.keys(getMasterQuestionList())
+        .filter(c => getMasterQuestionList()[c].region.match(regex) || getMasterQuestionList()[c].subregion.match(regex))
         .sort(() => Math.random()-0.5);
 
     // set up state variable
@@ -87,7 +102,7 @@ function init() {
     answersHTML.style.display = "";
     settingsHTML.style.display = "none";
     questionHTML.onclick = deinit;
-    incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th> <th> your answer </th> </tr>";
+    incorrectAnswersTable.innerHTML = "<tr> <th> question </th> <th> capital </th> <th> your answer </th> </tr>";
     correctAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th>  </tr>";
 
     // start game
@@ -131,12 +146,12 @@ function updateState() {
     var newQuestion = questionList.pop();
     var options = []
     while (options.length < 4) {
-        var c = capitals_list[Math.floor(Math.random()*capitals_list.length)];
-        if (c !== countries[newQuestion].capital && !options.includes(c)){
+        var c = answer_list[Math.floor(Math.random()*answer_list.length)];
+        if (c !== getMasterQuestionList()[newQuestion].answer && !options.includes(c)){
             options.push(c);
         }
     }
-    options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
+    options[Math.floor(Math.random()*4)] = getMasterQuestionList()[newQuestion].answer;
 
     if (state.question) state.previousQuestion = {
         "question": state.question,
@@ -145,7 +160,7 @@ function updateState() {
     };
     state.question = newQuestion;
     state.options = options;
-    state.answer = countries[newQuestion].capital;
+    state.answer = getMasterQuestionList()[newQuestion].answer;
 }
 
 
@@ -160,7 +175,7 @@ function updateScreen(){
     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>?`;
+    questionHTML.innerHTML = getQuestionHTML(state)
     if (state.previousQuestion ) {
         previousQuestionAnswer.innerHTML = state.previousQuestion.answer;
         previousQuestionText.style.display = "";

game_styles.css

@@ -4,6 +4,11 @@
 	--c-color: var(--green);
 	--d-color: var(--blue);
 	--question-country-color: var(--teal);
+	--question-capital-color: var(--blue);
+}
+
+input {
+	font-family: inherit
 }
 
 .correct {
@@ -105,6 +110,10 @@ span#questionCountry {
 	background-color: var(--question-country-color);
 }
 
+span#questionCapital {
+	background-color: var(--question-capital-color);
+}
+
 #region_selector {
 	width: 100%;
 	background: var(--dark-bg);
@@ -128,3 +137,74 @@ span#questionCountry {
 #settings .selector_result {
 	margin: 1em;
 }
+
+/* toggle switches */
+/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--question-country-color);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: var(--question-capital-color);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--blue);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#questionTypeSelector {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: space-around;
+	margin-top: 3em;;
+	margin-bottom: 3em;;
+}

index.html

@@ -21,6 +21,14 @@
 	<div style="display: none" id="settings">
 		<input placeholder="select a region (tap or type to filter)" id="region_selector" type="text">
 		<div id="selector_results"></div>
+		<div id="questionTypeSelector" >
+		  <p>guess capital</p>
+		  <label class="switch">
+		  <input id="guessCheckbox" type="checkbox">
+		  <span class="slider round"></span>
+		  </label>
+		  <p>guess country</p>
+		</div>
 	</div>
 	<div style="display: none" id="answers">
 		<div class="answer" id="answer_a">

scripts/generate_countries_list.py

@@ -18,20 +18,30 @@ def main(args):
     with open(args.file) as fp:
         countries = json.load(fp)
 
-    r = {}
+    country_list = {}
+    capital_list = {}
 
     for country in countries:
         if len(country['capital']) < 1 or country['capital'][0] == "" or not country['independent']:
             continue
-        r[country['name']['common']] = {
-                'capital': country['capital'][0],
+        country_list[country['name']['common']] = {
+                'answer': country['capital'][0],
+                'region': country['region'],
+                'subregion': country['subregion'],
+                'languages': country['languages']
+        }
+
+        capital_list[country['capital'][0]] = {
+                'answer': country['name']['common'],
                 'region': country['region'],
                 'subregion': country['subregion'],
                 'languages': country['languages']
         }
 
     print('countries = ', end='')
-    print(json.dumps(r))
+    print(json.dumps(country_list), end=';')
+    print('capitals = ', end='')
+    print(json.dumps(capital_list))
 
     return 0
 

styles.css

@@ -33,4 +33,3 @@ body {
 		padding: 2em;
 	}
 }
-