From 0d6230dcda424e6ac59bc622f07b82aaa6997dc1 Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Sat, 10 Apr 2021 15:02:36 +0100 Subject: [PATCH] initial commit --- src/.game.js.swp | Bin 0 -> 12288 bytes src/.game_styles.css.swp | Bin 0 -> 12288 bytes src/.styles.css.swp | Bin 0 -> 12288 bytes src/game.js | 95 +++++++++++++++++++++++++++++++++++++++ src/game_styles.css | 72 +++++++++++++++++++++++++++++ src/index.html | 38 ++++++++++++++++ src/styles.css | 65 +++++++++++++++++++++++++++ 7 files changed, 270 insertions(+) create mode 100644 src/.game.js.swp create mode 100644 src/.game_styles.css.swp create mode 100644 src/.styles.css.swp create mode 100644 src/game.js create mode 100644 src/game_styles.css create mode 100644 src/index.html create mode 100644 src/styles.css diff --git a/src/.game.js.swp b/src/.game.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..713aeafe52a7097d503fd7325845a7d47a1f2fef GIT binary patch literal 12288 zcmeHN-)|H}93N28LkdKViHQ%>C82jv_O91r2<1TfLnXF=;fKc3)a~wEZ|QdT*qOar zu;Blo;mzoyi4PcwCO#N_HQ~tziBBdbz8MoS>YMTNo!!0OwG@t!m}sWule?Yye!nyG zna}sT(=hXu^CzbHA-l@(vzxJ7H!i*P{WEW{Pi_>M6SRCm?f3bS{!$d)$A-GE>VV~m z$W4|+sARcWcAciLoIuW9O8m=Z8N1~LXGz!>We?$uiDAGn&?^IpsvkJi$A+sz6>`~Q z_4B8nI@hbWu`>)91`Gp+0mFb{z%XDKFbo(5{s#=G<`#Ah>)4vDWiI>NvhFi`G#`cm z!+>GHFkl!k3>XFs1BL;^fMLKeU>GnA{0A9uJjO!&@xSd+OdkLLpa1=TXBT6?0Y3uY z0-podfonhmr~?9c6?h(a1h~1AvCn{afJtB{aJ!GOkAM((0XPWk0e;@W*oVMXzyVGH zhk<8-ZNMK-GWI)g2lxT_8u$Qs7ia+zh=DhOD!_rQz?a(@TLpYT0Q0~U&tl?43dFz&@He>r4)_?j3Y-P@0owuEhuwhrF%0~B46K$$S;4RKqOje_6TDXA z)|sZ`3aiBZ&{xH~^iTK;z8Zl+Gmcy#<#^z`i^bv1EQi-yRyVV(uD2Z8%yMYGWd)XA zcD=}UJa4jvdqz{fR3a2{abQubc+qk=FvzjQqx=fHlnAN(D17DY^weGKU0M>XizPBo ziNFX>D3?V%(Ua3Ua@yYG5AIzpwY|q4+KvO?1I93{@Uu@IqFMb@Cu zs-N8`lu;n;AX+F|3z6cQ#KYX;`*}(nMJh;gu%#Qtg72^KA%2XfO;M9JM9!qPvn0i| zBW>V^c?DW6m$};z?jnb1vknzOiK694iRAgda=z?HjzMDKDppTImx6aIHk%aGKy{d2v6W2{r30wbLBL7LqM8QOrnyKW5-;Ju&Advi zkSE`?qZ)QSh@!Ztzs64JMN7rfzL63#a?|PDJt%D#A&+i16WJ)bC<6seq09S`H6DmOyc#<;2|Wn9W>(LO-+V)bjzfnH`95K{ZN5;&Q_e1TW^p zq&@ryAJIEWqhwteYi5?|aXZ*VYff_-x*0WfB}9#qLh+Bwrp2eeHUuq*l zFSnq=oH^>cjybklIx_^p>bUbu3rrO*b*5}cV9K$s)x+`B{6&;<8*g&xAiF$VvSk#j zV)~Zu((8eWeUNkpmXNpD3_U%`NhyO|CnC-Q*$PIfH&&e18}m9+p9t+p)bs#A6p|?N znPu;X_OWBFyp64#@QMSu-2f&+e(lmgoaSeh^-kI-_vm;>+{-65oAbKe^xL2ZH@DkO z*Zm&c=DXc=h3~=5>2}isxWAhuuarcRGaRm1nkfsXf*dCQ7o^ zQASluX?Y_crRqd>mPtEumFeV$MW(=(6QB^UX)xW~e6w@oFbM)o85wVlIpIR!pnf$l zv^CLi799)CCqmD6sO2P$EE<7t4WgM&8RyO%r;gVh+3-=VaB!Kh$8FvH5-KuI=jc7{ l#J<#RlN3MnsBtPny$;c;Yh;!tL>FhwN~D0&W8bBh*grdRO9=n~ literal 0 HcmV?d00001 diff --git a/src/.game_styles.css.swp b/src/.game_styles.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..97155a1b36cfccfeaedd2bbcb0cdce5a781ed64d GIT binary patch literal 12288 zcmeI2&uBidg+OCd+CuQqE!!k$GdA|OO82kp?Z!!vGV54+nLY2 zi4?{4>bY;e^_I#D46j+nHh0_Ki=!9V&h8xJ@meHZe8S5_O_fZ@al_Yp1uI{wAZ^OT zno6q@@K$7bY%aCa=xW92pc3+?yku-QmZlsS^9p4tg$$5^Nd{8e@Rw%TXA8%xF17UW zG4K8N&Q6*|<79vgkO4A42FL&zAOmE84E&D_*wz%=#D4bWd-^(mpBj13f221uKnBPF z86X2>fDDiUGC&5%02v?yWZ(@nzy)I;zRlRV16Vx%|6lz5|NLFX{sg~)9q<#l0xp9P zoCjZlPr)oW2xh=v2O0YVJOVpl8*G6);0JIM+yHHG5u5~N@Bugs4uQA8vl+&ofM3BD zxDW1u+u#M-8Ha3|1ny&L;HPk9igdeC_ z>6*93^_=gwQ)z6Z5=7I)>TWhVzsyXFC#7QaR5s{cW4&5R3#o_e`}Kqx$Yokq;7qWx_oloLCQ#7K3rFG5v8W)Rm%&D zvgyS3yt_aZf&2i4Z16O;em$J`jEW4jszjjND>eM!axAUI zL1d@fiG;me^A@Y0EVGe3E7xtF#p5V+O_NxBbh_pR_%1aboy8+7n^<{2dL>1ZHC%J$ z`RJ}d`f^PsaTl{hWLh!r*1Se6*GC_lEo-Q2L#2dkHQ%puQM9s_c}%UkQdxg@WgM$c zmg{B}@lZ>dAe`;6WCEpSzO`|>`nMs^!>yWj>-9yXW#BFmcC6yGnfMwz(?(*2d3~!| zT6Hk-L{o~0dkXvZOyCyb@kDrYO}_5u=0C4iTkG>fo?p>tUD^&RjuTqyufpBpad*Ek sWF?O?ZzI1l>TxQwf&AtbGYY5fSh8zSjJ$jbdHWYb*{RjEQm(aL0Q-i_F#rGn literal 0 HcmV?d00001 diff --git a/src/.styles.css.swp b/src/.styles.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..44f1d8899cfa8e991baddcd1524b22d2b88e2e12 GIT binary patch literal 12288 zcmeI2!HXP46o)IG95pHi4~j^+bJ;+8r)PF%GSfpuB^M!4FG@hfRCia;lv~r)+f}{0 zvmq+p6oXe!;!#kDcvS>1q6g97A7C!=7V#)}@mIamyAu_%SLIdDN6);fe(%-SJ%?o{ z4qtixA|Gw^7{vbQtP^(5o1~h{+}Tdi zNkpNX(DwE1O6_-SnRKjMXlXYRYmbqUmXHB5a4Z9r%YxBKw%O~3etmoGDSqmamydNR zEg}PCfDDiUGC&5%02v?yWZ?f{z!fLhTiD7y%k4b7JfHa6dHIn}WPl8i0Wv@a$N(82 z17v^I-}xD9>+2V3A0cn&-P9tV$s+b0>j1#Wb5TxJ9>m7EJ3pCu#Jh4nVOsGkjA616X{z#R9p<5* z(T9z_hd(C$)q8(+GlW4)`uD3nzcQ*&U3BSt3 zN;Etxe8@M7*U>h5-gfJ#;%f8h0yUnQ%Tx(&a=qX-DW%N0$Wy*P7kk03O5H5t!!RuN zPWyh4`k%gcM7bUWsmw&BT@X)Cqo9*}E)ZHx^N7DuS*NlEqFUuLm`OFAIoRLmB6R3` zP&c|#b>ypJMI#G4X}o79cY#&=Fy0;3i9QTJP9Rx*H78+&zXvbm{i>!{vx>`mNKbwdw>D6&3g2ruKX@{l^t>(N{;+>gx3Qn$ nn{@Or2Z5DZCU|~uTcY;n$RBn7W 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 " + state.question + "?"; +} + +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(); +}); diff --git a/src/game_styles.css b/src/game_styles.css new file mode 100644 index 0000000..8e68664 --- /dev/null +++ b/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); +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..380c953 --- /dev/null +++ b/src/index.html @@ -0,0 +1,38 @@ + + + + + + + + +capitals_quiz + + + +
+
+

tap here or press space to start

+

score

+
+ +
+ + diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..b6f175e --- /dev/null +++ b/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; +}