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 0000000..cdb2728 Binary files /dev/null and b/img/snowflake.png differ 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 0000000..4825038 Binary files /dev/null and b/img/star.png differ diff --git a/img/star.svg b/img/star.svg new file mode 100644 index 0000000..fe4e34c --- /dev/null +++ b/img/star.svg @@ -0,0 +1,76 @@ + + + + + + + + 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 +]