From 5a128c827f58b919866957d31b7ddd8db544a04f Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Tue, 24 Nov 2020 16:02:23 +0100 Subject: [PATCH] Add estimate questions --- css/style.css | 45 ++++++++++++++++++++++++++++++++++++ css/style.css.map | 2 +- css/style.sass | 56 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 28 ++++++++++++++++++---- js/app.js | 59 +++++++++++++++++++++++++++++++++++++++++++---- js/questions.js | 29 ++++++++++++++++++++++- 6 files changed, 207 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 4b02a13..5b753d4 100644 --- a/css/style.css +++ b/css/style.css @@ -69,6 +69,51 @@ body { border: 1px solid lightgray; border-radius: 0; text-align: left; } + .ingame-screen .question .question-estimate { + display: grid; + grid-template-columns: 7fr 3fr; } + .ingame-screen .question .question-estimate .input-estimate { + margin: 0; + box-sizing: border-box; } + .ingame-screen .question .question-estimate .btn-submit-estimate { + padding: auto 0.25rem; + margin: 0; + box-sizing: border-box; } + .ingame-screen .question .question-result-wrapper { + padding-top: 1px; + margin-top: 2rem; + display: none; + background-color: white; } + .ingame-screen .question .question-result-wrapper.visible { + display: block; } + .ingame-screen .question .question-result { + position: relative; + height: 100px; + width: 80%; + margin: 0 auto; + margin-top: 7rem; + border-top: 2px solid black; } + .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::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); } + .ingame-screen .question .question-result .correct-result { + z-index: 5; + transform: translateX(-50%) translateY(-70px); } + .ingame-screen .question .question-result .correct-result::before { + background-color: green; + transform: translateX(-50%) translateY(50px); } + .ingame-screen .question .question-result .estimate::before { + background-color: black; } .ingame-screen .btn-continue { display: block; margin-top: 1rem; diff --git a/css/style.css.map b/css/style.css.map index 5922bee..9346ff4 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,IAAI;EACF,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE,0BAA0B;EAC5C,eAAe,EAAE,KAAK;EAEtB,YAAO;IACL,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,wBAAuB;EAE3C,OAAE;IACA,WAAW,EAAE,gBAAgB;IAC7B,SAAS,EAAE,IAAI;EAEjB,OAAE;IACA,WAAW,EAAE,OAAO;EAEtB,iBAAY;IACV,gBAAgB,EAAE,IAAI;;AAE1B,0BAA0B;EACxB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;EAEtB,sCAAK;IACH,SAAS,EAAE,KAAK;EAElB,gDAAU;IACR,OAAO,EAAE,MAAK;IACd,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE,CAAC;IAChB,KAAK,EAAE,GAAG;EAEZ,wCAAM;IACJ,UAAU,EAAE,MAAM;;AAEtB,cAAc;EACZ,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,WAAW;EAE/B,4CAAc;IACZ,OAAO,EAAE,SAAS;EAEpB,sBAAO;IACL,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IACnB,gBAAgB,EAAE,KAAK;IACvB,KAAK,EAAE,KAAK;IAEZ,yBAAE;MACA,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;EAEd,wBAAS;IACP,OAAO,EAAE,IAAI;IAIX,yCAAO;MACL,gBAAgB,EAAE,SAAS;MAE3B,gDAAQ;QACN,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,KAAK;MAEd,iDAAS;QACP,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,KAAK;QAEZ,wDAAQ;UACN,gBAAgB,EAAE,OAAO;UACzB,KAAK,EAAE,KAAK;IAGlB,kDAAO;MACL,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,MAAK;MACd,KAAK,EAAE,IAAI;MACX,aAAa,EAAE,GAAG;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,CAAC;MAChB,UAAU,EAAE,IAAI;EAEtB,4BAAa;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,MAAK", +"mappings": "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", "sources": ["style.sass"], "names": [], "file": "style.css" diff --git a/css/style.sass b/css/style.sass index cd472a9..8870d75 100644 --- a/css/style.sass +++ b/css/style.sass @@ -89,6 +89,62 @@ body border-radius: 0 text-align: left + .question-estimate + display: grid + grid-template-columns: 7fr 3fr + + .input-estimate + margin: 0 + box-sizing: border-box + + .btn-submit-estimate + padding: auto .25rem + margin: 0 + box-sizing: border-box + + .question-result-wrapper + padding-top: 1px + margin-top: 2rem + display: none + background-color: white + + &.visible + display: block + + .question-result + position: relative + height: 100px + width: 80% + margin: 0 auto + margin-top: 7rem + border-top: 2px solid black + + .correct-result, .estimate + position: absolute + transform: translateX(-50%) translateY(20px) + text-align: center + + &::before + content: '' + display: block + position: absolute + width: 30px + height: 30px + border-radius: 50% + left: 50% + transform: translateX(-50%) translateY(-40px) + + .correct-result + z-index: 5 + transform: translateX(-50%) translateY(-70px) + + .correct-result::before + background-color: green + transform: translateX(-50%) translateY(50px) + + .estimate::before + background-color: black + .btn-continue display: block margin-top: 1rem diff --git a/index.html b/index.html index 71b66bc..d36dce5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -9,28 +9,46 @@
-
+

Willkommen zum WIAI-Weihnachtsquiz!

-
+

WIAI-Weihnachtsquiz

Score: {{score}} Punkte

-
+ +

{{currentQuestion.text}}

+ +
+

{{currentQuestion.text}}

+
+ + +
+ +
+
+
+
+
+
+
+
diff --git a/js/app.js b/js/app.js index 073ec1e..15e0a95 100644 --- a/js/app.js +++ b/js/app.js @@ -8,14 +8,19 @@ const app = new Vue({ mode: 'STARTSCREEN', currentQuestionID: 0, currentQuestionAnswerID: null, + currentQuestionAnswered: false, + currentEstimate: 0, questions: null }, computed: { currentQuestion: function () { return this.questions[this.currentQuestionID] }, - currentQuestionAnswered: function () { - return this.currentQuestionAnswerID !== null + isEstimate: function () { + return this.currentQuestion.type === 'estimate' + }, + isChoice: function () { + return this.currentQuestion.type === 'choice' } }, beforeMount () { @@ -35,23 +40,67 @@ const app = new Vue({ addToScore: function (value) { this.score += value }, - evaluate: function (answerID) { + evaluateChoice: function (answerID) { if (!this.currentQuestionAnswered) { if (this.isCorrectAnswer(answerID)) { this.addToScore(3) } + this.currentQuestionAnswered = true this.currentQuestionAnswerID = answerID } }, - showNextQuestion: function () { + evaluateEstimate: function (value) { + if (!this.currentQuestionAnswered) { + const estimateInput = document.querySelector('#input-estimate') + + this.currentEstimate = parseInt(estimateInput.value) + if (this.currentEstimate > 0) { + this.currentQuestionAnswered = true + + 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)' + + if (this.currentEstimate < this.currentQuestion.correctAnswer) { + correctResultDisplay.style.left = 100 + '%' + estimateDisplay.style.left = (100 * this.currentEstimate / this.currentQuestion.correctAnswer) + '%' + } else { + estimateDisplay.style.left = 100 + '%' + correctResultDisplay.style.left = (100 * this.currentQuestion.correctAnswer / this.currentEstimate) + '%' + } + + const x90 = this.currentQuestion.correctAnswer * 0.9 + const x110 = this.currentQuestion.correctAnswer * 1.1 + + const x75 = this.currentQuestion.correctAnswer * 0.75 + const x125 = this.currentQuestion.correctAnswer * 1.25 + + const x50 = this.currentQuestion.correctAnswer * 0.5 + const x150 = this.currentQuestion.correctAnswer * 1.5 + + if (this.currentEstimate >= x90 && this.currentEstimate <= x110) { + this.addToScore(3) + } else if (this.currentEstimate >= x75 && this.currentEstimate <= x125) { + this.addToScore(2) + } else if (this.currentEstimate >= x50 && this.currentEstimate <= x150) { + this.addToScore(1) + } + } + } + }, + showNextQuestion: function (event) { if (this.currentQuestionAnswered) { + this.currentQuestionAnswered = false + this.currentQuestionAnswerID = null if (this.currentQuestionID + 1 < this.questions.length) { this.currentQuestionID++ - this.currentQuestionAnswerID = null } else { this.mode = this.ENDSCREEN } } + event.stopPropagation() }, isCorrectAnswer: function (answerID) { return this.currentQuestion.correctAnswerID === answerID diff --git a/js/questions.js b/js/questions.js index d627297..cb4b451 100644 --- a/js/questions.js +++ b/js/questions.js @@ -1,5 +1,6 @@ const questionCatalog = [ { + type: 'choice', text: 'Wann wurde die Otto-Friedrich-Universität Bamberg gegründet?', correctAnswerID: 2, answers: [ @@ -9,6 +10,7 @@ const questionCatalog = [ ] }, { + type: 'choice', text: 'Welcher Lehrstuhl bzw. welche Professur ist der:die jüngste an der Fakultät WIAI?', correctAnswerID: 0, answers: [ @@ -16,5 +18,30 @@ const questionCatalog = [ { id: 1, text: 'Privatsphäre und Sicherheit in Informationssystemen (Prof. Herrmann)' }, { id: 2, text: 'Smart Environments (Prof. Wolter)' } ] + }, + { + type: 'choice', + text: 'Wie hoch ist der Bamberger Kaiserdom?', + correctAnswerID: 1, + answers: [ + { id: 2, text: 'ca. 62 Meter' }, + { id: 1, text: 'ca. 75 Meter' }, + { id: 0, text: 'ca. 83 Meter' } + ] + }, + { + type: 'choice', + text: 'Sogar ein Papst kommt aus Bamberg. Welcher war das nochmal?', + correctAnswerID: 0, + answers: [ + { id: 0, text: 'Papst Clemens II. (1046–1047)' }, + { id: 1, text: 'Viktor II. (1055–1057)' }, + { id: 2, text: 'Honorius III. (1216–1227)' } + ] + }, + { + type: 'estimate', + 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