Add better scoring interaction and estimate UI

2020-11-26 09:34:46 +01:00 · 2020-11-26 09:34:46 +01:00 · 354c52314b
commit 354c52314b
parent 5a128c827f
11 changed files with 320 additions and 27 deletions
--- 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);
--- 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 */
--- 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"
--- 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,33 +123,37 @@ 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: ''
          display: block
          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)
--- a/img/snowflake.png
+++ b/img/snowflake.png
--- a/img/snowflake.svg
+++ b/img/snowflake.svg
@ -0,0 +1,157 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="50"
+   height="50"
+   viewBox="0 0 13.229166 13.229167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.1 (0767f8302a, 2020-10-17)"
+   sodipodi:docname="snowflake.svg"
+   inkscape:export-filename="/home/florian/Code/weihnachtsquiz-2020/img/snowflake.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="12.928468"
+     inkscape:cx="18.593917"
+     inkscape:cy="26.501409"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     sodipodi:insensitive="true"
+     style="display:none;opacity:0.5">
+    <path
+       sodipodi:type="star"
+       style="fill:#bfd1df;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="path835"
+       sodipodi:sides="6"
+       sodipodi:cx="6.614583"
+       sodipodi:cy="-6.614583"
+       sodipodi:r1="6.3466525"
+       sodipodi:r2="5.4963617"
+       sodipodi:arg1="-2.6179939"
+       sodipodi:arg2="-2.0943951"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 1.1182206,-9.7879091 5.4963623,-3.1733269 5.4963621,3.1733266 0,6.3466525 -5.4963618,3.17332639 -5.4963624,-3.17332609 z"
+       transform="matrix(0.8660254,0.5,0.5,-0.8660254,4.1934776,-2.4211054)" />
+    <path
+       sodipodi:type="star"
+       style="fill:#bfd1df;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="path844"
+       sodipodi:sides="6"
+       sodipodi:cx="6.614583"
+       sodipodi:cy="-6.614583"
+       sodipodi:r1="6.3466525"
+       sodipodi:r2="5.4963617"
+       sodipodi:arg1="-2.6179939"
+       sodipodi:arg2="-2.0943951"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 1.1182206,-9.7879091 5.4963623,-3.1733269 5.4963621,3.1733266 0,6.3466525 -5.4963618,3.17332639 -5.4963624,-3.17332609 z"
+       transform="matrix(0.5,0.8660254,0.8660254,-0.5,9.0356885,-2.4211054)" />
+  </g>
+  <g
+     inkscape:label="Ebene 1 Kopie 1"
+     inkscape:groupmode="layer"
+     id="g850"
+     sodipodi:insensitive="true"
+     style="display:none">
+    <path
+       sodipodi:type="star"
+       style="fill:#ffccaa;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="path848"
+       sodipodi:sides="6"
+       sodipodi:cx="6.614583"
+       sodipodi:cy="-6.614583"
+       sodipodi:r1="6.3466525"
+       sodipodi:r2="5.4963617"
+       sodipodi:arg1="-2.6179939"
+       sodipodi:arg2="-2.0943951"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 1.1182206,-9.7879091 5.4963623,-3.1733269 5.4963621,3.1733266 0,6.3466525 -5.4963618,3.17332639 -5.4963624,-3.17332609 z"
+       transform="matrix(0.49558115,0.28612392,0.28612392,-0.49558115,5.2291107,1.44393)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Ebene 2">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.862523;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 3.8775185,11.35513 9.3516475,1.8736611"
+       id="path838" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.862523;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 3.8775186,1.873661 9.3516472,11.35513"
+       id="path840" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.862523;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 1.1404543,6.6143957 10.9482567,-2e-7"
+       id="path842" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.752492;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 2.0028262,8.3977108 3.5653497,6.6142027 1.9372045,4.7978632"
+       id="path856" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.752492;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 2.8185043,3.4994414 5.087454,3.9778406 5.8947194,1.7084982"
+       id="path858" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.752492;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 7.3398401,1.7449853 8.1316627,3.9778407 10.557912,3.5592775"
+       id="path860" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.752492;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 11.197373,4.918107 9.6537671,6.6142029 11.196983,8.4698652"
+       id="path862" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.752492;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 10.465311,9.7066245 8.1316626,9.2505649 7.2671145,11.514354"
+       id="path864" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.752492;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 5.8301408,11.463716 5.0874538,9.2505648 2.8174179,9.7566136"
+       id="path866" />
+  </g>
+</svg>
--- a/img/star.png
+++ b/img/star.png
--- a/img/star.svg
+++ b/img/star.svg
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="50"
+   height="50"
+   viewBox="0 0 13.229166 13.229167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.1 (0767f8302a, 2020-10-17)"
+   sodipodi:docname="star.svg"
+   inkscape:export-filename="/home/florian/Code/weihnachtsquiz-2020/img/star.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="12.928468"
+     inkscape:cx="18.593917"
+     inkscape:cy="26.501409"
+     inkscape:document-units="px"
+     inkscape:current-layer="g850"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1 Kopie 1"
+     inkscape:groupmode="layer"
+     id="g850"
+     style="display:inline">
+    <path
+       sodipodi:type="star"
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="path921"
+       sodipodi:sides="5"
+       sodipodi:cx="6.614583"
+       sodipodi:cy="7.2670569"
+       sodipodi:r1="6.2679057"
+       sodipodi:r2="3.1339529"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.9424778"
+       inkscape:flatsided="false"
+       inkscape:rounded="0.04"
+       inkscape:randomized="0"
+       d="m 6.6145832,0.99915123 c 0.166492,0 1.7073962,3.63462307 1.8420911,3.73248457 0.1346948,0.097862 4.0675927,0.4401886 4.1190417,0.5985319 0.05145,0.1583433 -2.9291178,2.7469906 -2.9805667,2.9053339 -0.051449,0.1583433 0.8383107,4.0045364 0.7036157,4.1023974 -0.134694,0.09786 -3.51769,-1.936889 -3.684182,-1.936889 -0.166492,0 -3.5494878,2.034751 -3.6841827,1.936889 C 2.7957055,12.240038 3.6854656,8.3938449 3.6340167,8.2355016 3.5825679,8.0771583 0.60200164,5.4885107 0.6534505,5.3301674 0.70489935,5.1718241 4.6377969,4.8294974 4.7724917,4.7316358 4.9071866,4.6337743 6.4480912,0.99915123 6.6145832,0.99915123 Z"
+       inkscape:transform-center-y="-0.59853221" />
+  </g>
+</svg>
--- a/index.html
+++ b/index.html
@ -18,7 +18,14 @@
    <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>
+        <p v-bind:class="{score: true, focus: currentQuestionAnswered && currentScore > 0}">
+          <strong>Score</strong>: {{score}} Punkte 
+          <span class="question-score" v-if="currentQuestionAnswered">
+            (<strong>
+              + {{currentScore}}
+            </strong>)
+          </span>
+        </p>
      </header>

      <article v-if="isChoice" class="question choice" v-bind:class="{revealed: currentQuestionAnswered}">
@ -57,7 +64,8 @@
    <section v-if="mode === ENDSCREEN" class="end-screen screen">
      <img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
      <h1 class="headline">WIAI-Weihnachtsquiz</h1>
-      <p class="score">Herzlichen Glückwunsch!<br/>Du hast insgesamt {{score}} Punkte erzielt.</p>
+      <p v-if="score > 0" class="score">Herzlichen Glückwunsch!<br/>Du hast insgesamt <strong>{{score}} von {{questions.length * 3}}</strong> möglichen Punkten erzielt.</p>
+      <p v-else class="score">Jammerschade!<br/>Beim nächsten Mal klappt es sicher besser.</p>
    </section>
  </main>
  
--- 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 + '<br/>(Korrekt)'
-          estimateDisplay.innerHTML = this.currentEstimate + '<br/>(Geschätzt)'
+          correctResultDisplay.innerHTML = `<strong>${this.currentQuestion.correctAnswer}</strong><br/>(Korrekt)`
+          estimateDisplay.innerHTML = `<strong>${this.currentEstimate}</strong><br/>(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)
        }
      }
    },