Add estimate questions

2020-11-24 16:02:23 +01:00 · 2020-11-24 16:02:23 +01:00 · 5a128c827f
commit 5a128c827f
parent bba7fc1368
6 changed files with 207 additions and 12 deletions
--- 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;
--- 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"
--- 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
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,28 +9,46 @@
 </head>
 <body>
  <main id="app">
-    <section v-if="mode === STARTSCREEN" class="start-screen screen" v-on:keyup.enter="enterGame">
+    <section v-if="mode === STARTSCREEN" class="start-screen screen">
      <img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
      <h1 class="headline">Willkommen zum WIAI-Weihnachtsquiz!</h1>
      <button v-on:click="enterGame" class="btn-start" tabindex="0" v-on:keyup.enter="enterGame">Starten</button>
    </section>

-    <section v-if="mode === INGAME" class="ingame-screen screen" v-on:keyup.enter="showNextQuestion">
+    <section v-if="mode === INGAME" class="ingame-screen screen">
      <header class="header">
        <h1 class="headline">WIAI-Weihnachtsquiz</h1>
        <p class="score">Score: {{score}} Punkte</p>
      </header>
-      <article class="question" v-bind:class="{revealed: currentQuestionAnswered}">
+
+      <article v-if="isChoice" class="question choice" v-bind:class="{revealed: currentQuestionAnswered}">
        <h2 class="question-text">{{currentQuestion.text}}</h2>
        <div class="question-answers">
          <button 
            v-for="answer in currentQuestion.answers" 
-            @click="evaluate(answer.id)"
+            @click="evaluateChoice(answer.id)"
            v-bind:class="{ correct: isCorrectAnswer(answer.id), answer: true, chosen: isUserChoice(answer.id) }">
            {{answer.text}}
          </button>
        </div>
      </article>
+
+      <article v-if="isEstimate" class="question estimate" v-bind:class="{revealed: currentQuestionAnswered}">
+        <h2 class="question-text">{{currentQuestion.text}}</h2>
+        <div class="question-estimate">
+          <input v-bind:value="currentEstimate" id="input-estimate" type="number" 
+                min="0" class="input-estimate" @v-keyup.enter="evaluateEstimate" v-bind:disabled="currentQuestionAnswered"/>
+          <input type="submit" @click="evaluateEstimate" class="btn-submit-estimate" v-bind:disabled="currentQuestionAnswered" value="Auswerten"/>
+        </div>
+
+        <div v-bind:class="{'visible': currentQuestionAnswered, 'question-result-wrapper': true}">
+          <div v-bind:class="{'question-result': true}">
+            <div class="correct-result"></div>
+            <div class="estimate"></div>
+          </div>
+        </div>
+      </article>
+
      <footer class="footer">
        <button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
      </footer>
--- 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 + '<br/>(Korrekt)'
+          estimateDisplay.innerHTML = this.currentEstimate + '<br/>(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
--- 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
  }
-]
+]