diff --git a/.gitignore b/.gitignore
index c16f33d..0c6656a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-src/countries.js
+countries.js
*.swp
diff --git a/Makefile b/Makefile
index aded58f..3c45564 100644
--- a/Makefile
+++ b/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
+
diff --git a/game.js b/game.js
index 428e7de..8c23e88 100644
--- a/game.js
+++ b/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 ${state.question} the capital of?`
+ return `what is the capital of ${state.question}?`
+}
+
+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 = "
country | capital | your answer |
";
+ incorrectAnswersTable.innerHTML = " question | capital | your answer |
";
correctAnswersTable.innerHTML = " country | capital |
";
// 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 ${state.question}?`;
+ questionHTML.innerHTML = getQuestionHTML(state)
if (state.previousQuestion ) {
previousQuestionAnswer.innerHTML = state.previousQuestion.answer;
previousQuestionText.style.display = "";
diff --git a/game_styles.css b/game_styles.css
index c1323d0..ecb39fb 100644
--- a/game_styles.css
+++ b/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;;
+}
diff --git a/index.html b/index.html
index ee1ea36..31ed3c1 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,14 @@
+
+
guess capital
+
+
guess country
+
diff --git a/scripts/generate_countries_list.py b/scripts/generate_countries_list.py
index 854a598..247d0de 100755
--- a/scripts/generate_countries_list.py
+++ b/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
diff --git a/styles.css b/styles.css
index 34463ba..a671a34 100644
--- a/styles.css
+++ b/styles.css
@@ -33,4 +33,3 @@ body {
padding: 2em;
}
}
-