From 354c52314b2f4991bf56568c5e67fb3484e2c680 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Thu, 26 Nov 2020 09:34:46 +0100 Subject: [PATCH] Add better scoring interaction and estimate UI --- css/fonts.css | 6 ++ css/style.css | 37 ++++++++--- css/style.css.map | 2 +- css/style.sass | 40 +++++++++--- img/snowflake.png | Bin 0 -> 1387 bytes img/snowflake.svg | 157 ++++++++++++++++++++++++++++++++++++++++++++++ img/star.png | Bin 0 -> 848 bytes img/star.svg | 76 ++++++++++++++++++++++ index.html | 12 +++- js/app.js | 15 +++-- js/questions.js | 2 +- 11 files changed, 320 insertions(+), 27 deletions(-) create mode 100644 img/snowflake.png create mode 100644 img/snowflake.svg create mode 100644 img/star.png create mode 100644 img/star.svg diff --git a/css/fonts.css b/css/fonts.css index cf6d32e..f535691 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -3,6 +3,12 @@ src: url(../fonts/Roboto/Roboto-Regular.ttf); } +@font-face { + font-family: Roboto; + font-weight: bold; + src: url(../fonts/Roboto/Roboto-Black.ttf); +} + @font-face { font-family: 'Kaushan Script'; src: url(../fonts/Kaushan_Script/KaushanScript-Regular.ttf); diff --git a/css/style.css b/css/style.css index 5b753d4..1bf514a 100644 --- a/css/style.css +++ b/css/style.css @@ -15,7 +15,7 @@ body { font-family: "Kaushan Script"; font-size: 200%; } body h2 { - font-weight: regular; } + font-weight: normal; } body button:hover { background-color: #eee; } @@ -37,6 +37,8 @@ body { .ingame-screen { display: grid; grid-template-rows: 2fr 6fr 2fr; } + .ingame-screen .score.focus { + animation: 1s attention; } .ingame-screen header, .ingame-screen footer { padding: 1rem 2rem; } .ingame-screen .header { @@ -83,7 +85,9 @@ body { padding-top: 1px; margin-top: 2rem; display: none; - background-color: white; } + background-color: rgba(21, 45, 59, 0.7); + border-radius: 5px; + color: white; } .ingame-screen .question .question-result-wrapper.visible { display: block; } .ingame-screen .question .question-result { @@ -92,28 +96,31 @@ body { width: 80%; margin: 0 auto; margin-top: 7rem; - border-top: 2px solid black; } + border-top: 2px solid #ddd; } .ingame-screen .question .question-result .correct-result, .ingame-screen .question .question-result .estimate { position: absolute; transform: translateX(-50%) translateY(20px); text-align: center; } + .ingame-screen .question .question-result .correct-result strong, .ingame-screen .question .question-result .estimate strong { + font-size: 150%; } .ingame-screen .question .question-result .correct-result::before, .ingame-screen .question .question-result .estimate::before { content: ""; display: block; position: absolute; width: 30px; height: 30px; - border-radius: 50%; left: 50%; - transform: translateX(-50%) translateY(-40px); } + transform: translateX(-50%) translateY(-37px); } .ingame-screen .question .question-result .correct-result { z-index: 5; - transform: translateX(-50%) translateY(-70px); } + transform: translateX(-50%) translateY(-75px); } .ingame-screen .question .question-result .correct-result::before { - background-color: green; - transform: translateX(-50%) translateY(50px); } + background-image: url(../img/star.png); + background-size: contain; + transform: translateX(-50%) translateY(55px); } .ingame-screen .question .question-result .estimate::before { - background-color: black; } + background-image: url(../img/snowflake.png); + background-size: contain; } .ingame-screen .btn-continue { display: block; margin-top: 1rem; @@ -122,4 +129,16 @@ body { border: 1px solid lightgray; padding: 0.5rem; } +@keyframes attention { + 0% { + transform: scale(1); } + 25% { + transform: scale(1.2); } + 50% { + transform: scale(0.9); } + 75% { + transform: scale(1.2); } + 100% { + transform: scale(1); } } + /*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map index 9346ff4..e8357f3 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["style.sass"], "names": [], "file": "style.css" diff --git a/css/style.sass b/css/style.sass index 8870d75..3bbbfb3 100644 --- a/css/style.sass +++ b/css/style.sass @@ -18,7 +18,7 @@ body font-size: 200% h2 - font-weight: regular + font-weight: normal button:hover background-color: #eee @@ -45,6 +45,9 @@ body display: grid grid-template-rows: 2fr 6fr 2fr + .score.focus + animation: 1s attention + header, footer padding: 1rem 2rem @@ -106,7 +109,10 @@ body padding-top: 1px margin-top: 2rem display: none - background-color: white + background-color: rgba(21, 45, 59, .7) + // box-shadow: 0 0 5px 10px rgba(0,0,0,.1) inset + border-radius: 5px + color: white &.visible display: block @@ -117,12 +123,15 @@ body width: 80% margin: 0 auto margin-top: 7rem - border-top: 2px solid black + border-top: 2px solid #ddd .correct-result, .estimate position: absolute transform: translateX(-50%) translateY(20px) text-align: center + + strong + font-size: 150% &::before content: '' @@ -130,20 +139,21 @@ body position: absolute width: 30px height: 30px - border-radius: 50% left: 50% - transform: translateX(-50%) translateY(-40px) + transform: translateX(-50%) translateY(-37px) .correct-result z-index: 5 - transform: translateX(-50%) translateY(-70px) + transform: translateX(-50%) translateY(-75px) .correct-result::before - background-color: green - transform: translateX(-50%) translateY(50px) + background-image: url(../img/star.png) + background-size: contain + transform: translateX(-50%) translateY(55px) .estimate::before - background-color: black + background-image: url(../img/snowflake.png) + background-size: contain .btn-continue display: block @@ -152,3 +162,15 @@ body border-radius: 0 border: 1px solid lightgray padding: .5rem + +@keyframes attention + 0% + transform: scale(1) + 25% + transform: scale(1.2) + 50% + transform: scale(.9) + 75% + transform: scale(1.2) + 100% + transform: scale(1) \ No newline at end of file diff --git a/img/snowflake.png b/img/snowflake.png new file mode 100644 index 0000000000000000000000000000000000000000..cdb27289dc0c32314dd48c6af7804cceff835523 GIT binary patch literal 1387 zcmV-x1(f=UP)pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11o%lr zK~!jg?U`MORaF$n|7ZLfl_oPZEW;j5B`8SKimX&JKM2x{5C+nM92h8i5Tfj1EPId? zk&wcNQb8&;&@_TDBPsKx7${*fYBExDi14HFW5$_Z4`(0mI(zm#=gf6xG`N4b+;i4m z>%Z4JXP>>-UR$c7iYlro2Verw1k4GvMZibEabUiY-wPZB)|TO%<2Wbur|*8J&BVA2 zO!wLzrGyWSe5;Y)@7YXuTma3L_*7F_D7w-850bPIh)i3(xjtyFn?pLzcBA96-2D%r zfi&u!d?@g@lXU`Pjmx#8C;74`lmDa0p|5pAa@dv>7zLvCV>sh;2KV8_R2#$up1bj=VO$o5O8F)q#2T? zyZ;%I#(HWEQ50=1W8Wa@Jx|;z>1RntB>iaqTcarI?yZkK944Nbau-eD4xq(6$u?kA zK(7usY4nZ~e;Y%t%GnIZ1_Q0Gv+V_gnMOPrBv=>FS#R3A@lusCyb-V(_!gMi+dxK8 znkE4@6tuJXR0lBGv`wTmJp*hh$hpSY?CDh?j^J6+3*O2CHn#w0jLkmN_L-5N18yzA z_abR5>vbTG=oN1$1$dT{9;!_h1z`v`7_ts>=5$~f@Qbl&Aznli z{07wKaLge+4EG&f7y&6gL zC5?CY7bWeHbS8s)q0vupLejo~Zh|^VPfAJ_z!Q=_m(&%|Js3sN_T=VDAnqxDpV7(n zh-pz2{UBAoL%i-#bZAAA9+#992KsAgjgquT(olEbqV#szA~m!M0oY_dzVpC?Ir>j$ zeC$hdZ0C_qDjR#{YzFb`hP11|tW)cz*aZIcdyK%Q%i~yS^e+Pot~Q9Jq*wQs3fS1d zAzlz4^JJ?E@N72v{{WLJ4PrKM$&mF(0s}U;kzND#nznsL-VWTJ!!-o>%6qdnRT9Wy zL$ZTn8Spk^bBXMvaccp-F_f}!sAPqwl$snMC#7)u50D;)ZwGYNnf7i9q~*Zf#MuNu zaI;nKWx&Xa0x3f})II%|fscVd=!q9H z>{kTzPZNI+>xnCmcTpg}s>Jzmz*^uN;?hkPI>^|%y0=oK`0%gmZ*gA+vMZy*u7E6* z9VA@K1Ns*OvIK2Kd@NdLJ#MbsBpsIYouuC-eIUu744zT>)Z)1^^0|_3mNeD;Moapl zppW?=E=D{IO!VZRm?w9E(vUexV2l&j$GVMlsQ@}!_|Fw}{(}SK? z)A1q9f(CqP+GZQMt->!i^2l){XdTEvvJOM-+gf4dr=098-U>}09EMf|vX7^0fp>xT tF$Y7ytH24$Y?Qbb$J13*QN{lc{{d7Zv*YF-+zbE!002ovPDHLkV1jYtiHZOK literal 0 HcmV?d00001 diff --git a/img/snowflake.svg b/img/snowflake.svg new file mode 100644 index 0000000..b97353f --- /dev/null +++ b/img/snowflake.svg @@ -0,0 +1,157 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/img/star.png b/img/star.png new file mode 100644 index 0000000000000000000000000000000000000000..48250384714eadcbbd6332204029d55ec25bcf3a GIT binary patch literal 848 zcmV-W1F!svP)pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10^LbO zK~!jg?U`RoR6!Vref=CMb02xAb6+~1}et{_Hs)9a%5Mf>h z5!g*uA3(Y@g1U+P6EVoQCxIA`0XJ-eRwoN>=aK5%Y!XXgDqJ7-{KR$Ajf0~iDb zv(AwU;2s6;W}PPyz)?y$l65XKz{?1c@vL*10Qw>%@*K=MUu=NK6+|9ooi7%^E?}vG z$P%z8>zpeBJg6X%=YG~XD*|)?KVyjGfOem?>wFF->6)a5812@DZEFvp1z3nN8+jIh zW?%Jv&d4Q6jfVD(k}i6zpB`WX@YygMd8UE&J~H^4ku#E76ZC77G~gpZeUeUqQxJTs zq|HjVaEE|dNwbnZN&4cP!#ap76SQ7ZyQJ=-XPcxBNuA+$US5d^a+0RP=Yyp8e?1?a zbBlj>`Xd4iNIENNZx}YwY*m3p1%i{3MxAqoEe|l9V4>Cu!%|_fw^aRi^~Xl3Ao4K7 zAZZzqLJ{ZO6G^u+jgyR<&bhIYPk|d*zwidGS5yRsfaR=HR$v*p8f(6QbHJ~R14pq4 zoHxCEzyQIyp;pKNr%e(?GX2=L=Bveb;8Y@sBALU$w+tm_fxc7{MKZgAsSG5hfgUds zMKayMn<`4Y2D-dT6v;FL@2Vj27UMD4da#<8)MV_FgeK?QoTYjyT zi@o42BKz%GQWLvoHAHgZlZ1V78?LsX6J(8X$=iyH);bP64Qovh>?qdw a=lBh%_#3RU( + + + + + + + image/svg+xml + + + + + + + + + diff --git a/index.html b/index.html index d36dce5..d436283 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,14 @@

WIAI-Weihnachtsquiz

-

Score: {{score}} Punkte

+

+ Score: {{score}} Punkte + + ( + + {{currentScore}} + ) + +

@@ -57,7 +64,8 @@

WIAI-Weihnachtsquiz

-

Herzlichen Glückwunsch!
Du hast insgesamt {{score}} Punkte erzielt.

+

Herzlichen Glückwunsch!
Du hast insgesamt {{score}} von {{questions.length * 3}} möglichen Punkten erzielt.

+

Jammerschade!
Beim nächsten Mal klappt es sicher besser.

diff --git a/js/app.js b/js/app.js index 15e0a95..1cab498 100644 --- a/js/app.js +++ b/js/app.js @@ -10,6 +10,7 @@ const app = new Vue({ currentQuestionAnswerID: null, currentQuestionAnswered: false, currentEstimate: 0, + currentScore: 0, questions: null }, computed: { @@ -42,7 +43,9 @@ const app = new Vue({ }, evaluateChoice: function (answerID) { if (!this.currentQuestionAnswered) { + this.currentScore = 0 if (this.isCorrectAnswer(answerID)) { + this.currentScore = 3 this.addToScore(3) } this.currentQuestionAnswered = true @@ -60,8 +63,8 @@ const app = new Vue({ const correctResultDisplay = document.querySelector('.question-result .correct-result') const estimateDisplay = document.querySelector('.question-result .estimate') - correctResultDisplay.innerHTML = this.currentQuestion.correctAnswer + '
(Korrekt)' - estimateDisplay.innerHTML = this.currentEstimate + '
(Geschätzt)' + correctResultDisplay.innerHTML = `${this.currentQuestion.correctAnswer}
(Korrekt)` + estimateDisplay.innerHTML = `${this.currentEstimate}
(Geschätzt)` if (this.currentEstimate < this.currentQuestion.correctAnswer) { correctResultDisplay.style.left = 100 + '%' @@ -80,13 +83,15 @@ const app = new Vue({ const x50 = this.currentQuestion.correctAnswer * 0.5 const x150 = this.currentQuestion.correctAnswer * 1.5 + this.currentScore = 0 if (this.currentEstimate >= x90 && this.currentEstimate <= x110) { - this.addToScore(3) + this.currentScore = 3 } else if (this.currentEstimate >= x75 && this.currentEstimate <= x125) { - this.addToScore(2) + this.currentScore = 2 } else if (this.currentEstimate >= x50 && this.currentEstimate <= x150) { - this.addToScore(1) + this.currentScore = 1 } + this.addToScore(this.currentScore) } } }, diff --git a/js/questions.js b/js/questions.js index cb4b451..f30dda1 100644 --- a/js/questions.js +++ b/js/questions.js @@ -44,4 +44,4 @@ const questionCatalog = [ text: 'Wie viele wissenschaftliche Mitarbeiter:innen und Postdocs treiben die Forschung und die Lehre an unserer Fakultät voran? (externe Doktorand:innen ausgeschlossen)', correctAnswer: 74 } -] \ No newline at end of file +]