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": "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;IAEpB,2CAAkB;MAChB,OAAO,EAAE,IAAI;MACb,qBAAqB,EAAE,OAAO;MAE9B,2DAAe;QACb,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,UAAU;MAExB,gEAAoB;QAClB,OAAO,EAAE,YAAW;QACpB,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,UAAU;IAE1B,iDAAwB;MACtB,WAAW,EAAE,GAAG;MAChB,UAAU,EAAE,IAAI;MAChB,OAAO,EAAE,IAAI;MACb,gBAAgB,EAAE,KAAK;MAEvB,yDAAS;QACP,OAAO,EAAE,KAAK;IAElB,yCAAgB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,MAAM;MACd,UAAU,EAAE,IAAI;MAChB,UAAU,EAAE,eAAe;MAE3B,8GAA0B;QACxB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,iCAAiC;QAC5C,UAAU,EAAE,MAAM;QAElB,8HAAS;UACP,OAAO,EAAE,EAAE;UACX,OAAO,EAAE,KAAK;UACd,QAAQ,EAAE,QAAQ;UAClB,KAAK,EAAE,IAAI;UACX,MAAM,EAAE,IAAI;UACZ,aAAa,EAAE,GAAG;UAClB,IAAI,EAAE,GAAG;UACT,SAAS,EAAE,kCAAkC;MAEjD,yDAAe;QACb,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,kCAAkC;MAE/C,iEAAuB;QACrB,gBAAgB,EAAE,KAAK;QACvB,SAAS,EAAE,iCAAiC;MAE9C,2DAAiB;QACf,gBAAgB,EAAE,KAAK;EAE7B,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",
"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!
-
+
-
+
+
{{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