Merge pull request #143 from nzzdev/release-1.11.1

release-1.11.1
nzzdev · Sep 27, 2021 · 084f611 · 084f611
2 parents f5be400 + ec8ace5
commit 084f611
Show file tree

Hide file tree

Showing 15 changed files with 876 additions and 15,516 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nzz/q-quiz",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Q quiz",
   "keywords": [
     "storytelling",
@@ -38,13 +38,13 @@
     "@hapi/joi": "^15.1.1",
     "@turf/turf": "^5.1.6",
     "child-process": "^1.0.2",
-    "d3-array": "^2.11.0",
-    "d3-scale": "^3.2.3",
+    "d3-array": "^2.12.1",
+    "d3-scale": "^3.3.0",
     "d3-selection": "^1.4.1",
     "enjoi": "6.0.0",
     "hapi-pino": "^6.3.0",
     "jsdom": "^15.2.1",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.5",
     "pino-noir": "^2.2.1",
     "pouchdb": "7.1.1",
     "pouchdb-server": "^4.2.0",
@@ -67,12 +67,12 @@
     "@hapi/code": "^5.3.1",
     "@hapi/lab": "^19.1.0",
     "@hapi/wreck": "^15.1.0",
-    "autoprefixer": "^9.8.6",
-    "cssnano": "^4.1.10",
+    "autoprefixer": "^9.8.7",
+    "cssnano": "^4.1.11",
     "jspm": "0.17.0-beta.41",
-    "jspm-github": "^0.13.21",
-    "postcss": "^7.0.35",
+    "jspm-github": "^0.13.26",
+    "postcss": "^7.0.38",
     "postcss-import": "^12.0.1",
-    "sass": "^1.32.7"
+    "sass": "^1.42.1"
   }
 }
diff --git a/resources/fixtures/data/single-big-number-guess.json b/resources/fixtures/data/single-big-number-guess.json
@@ -0,0 +1,16 @@
+{
+  "title": "FIXTURE: Number guess - single big number question quiz",
+  "elements": [
+    {
+      "id": "quiz-3-1503673375520-572013569",
+      "type": "numberGuess",
+      "image": {},
+      "articleRecommendations": [],
+      "question": "Zurück in die Gegenwart: Wieviele Katzen leben in der Schweiz?",
+      "answer": 5000000,
+      "min": 1000000,
+      "max": 10000000,
+      "step": 500000
+    }
+  ]
+}
diff --git a/resources/fixtures/data/single-big-number-poll.json b/resources/fixtures/data/single-big-number-poll.json
@@ -0,0 +1,17 @@
+{
+  "title": "FIXTURE: Number poll - single question big number quiz",
+  "elements": [
+    {
+      "id": "quiz-9-1620205109920-228181337",
+      "type": "numberPoll",
+      "articleRecommendations": [],
+      "introduction": "This is the introduction",
+      "question": "Test Frage",
+      "questionSubTitle": "Test Subtitle",
+      "answer": 5000000,
+      "min": 1000000,
+      "max": 10000000,
+      "step": 1000000
+    }
+  ]
+}
diff --git a/resources/fixtures/data/single-big-number-small-step-guess.json b/resources/fixtures/data/single-big-number-small-step-guess.json
@@ -0,0 +1,16 @@
+{
+  "title": "FIXTURE: Number guess - single big number small step question quiz",
+  "elements": [
+    {
+      "id": "quiz-3-1503673375520-572013569",
+      "type": "numberGuess",
+      "image": {},
+      "articleRecommendations": [],
+      "question": "Zurück in die Gegenwart: Wieviele Katzen leben in der Schweiz?",
+      "answer": 5000000,
+      "min": 1000000,
+      "max": 10000000,
+      "step": 10000
+    }
+  ]
+}
diff --git a/resources/fixtures/data/single-float-number-guess.json b/resources/fixtures/data/single-float-number-guess.json
@@ -0,0 +1,16 @@
+{
+  "title": "FIXTURE: Number guess - single float number question quiz",
+  "elements": [
+    {
+      "id": "quiz-3-1503673375520-572013569",
+      "type": "numberGuess",
+      "image": {},
+      "articleRecommendations": [],
+      "question": "Zurück in die Gegenwart: Wieviele Mammuths leben in der Schweiz?",
+      "answer": 1.5,
+      "min": 0.1,
+      "max": 2.5,
+      "step": 0.1
+    }
+  ]
+}
diff --git a/resources/fixtures/data/single-float-number-poll.json b/resources/fixtures/data/single-float-number-poll.json
@@ -0,0 +1,17 @@
+{
+  "title": "FIXTURE: Number poll - single question float number quiz",
+  "elements": [
+    {
+      "id": "quiz-9-1620205109920-228181337",
+      "type": "numberPoll",
+      "articleRecommendations": [],
+      "introduction": "This is the introduction",
+      "question": "Test Frage",
+      "questionSubTitle": "Test Subtitle",
+      "answer": 0.5,
+      "min": 0.1,
+      "max": 2.5,
+      "step": 0.1
+    }
+  ]
+}
diff --git a/routes/fixtures/data.js b/routes/fixtures/data.js
@@ -7,11 +7,16 @@ const fixtureData = [
   require(`${fixtureDataDirectory}/cover-with-title-no-last-card.json`),
   require(`${fixtureDataDirectory}/single-multiple-choice.json`),
   require(`${fixtureDataDirectory}/single-number-guess.json`),
+  require(`${fixtureDataDirectory}/single-big-number-guess.json`),
+  require(`${fixtureDataDirectory}/single-big-number-small-step-guess.json`),
+  require(`${fixtureDataDirectory}/single-float-number-guess.json`),
   require(`${fixtureDataDirectory}/strip-plot-number-guess.json`),
   require(`${fixtureDataDirectory}/single-map-point-guess.json`),
   require(`${fixtureDataDirectory}/single-map-point-guess-low-zoomlevel.json`),
   require(`${fixtureDataDirectory}/single-map-point-guess-high-zoomlevel.json`),
-  require(`${fixtureDataDirectory}/single-number-poll.json`)
+  require(`${fixtureDataDirectory}/single-number-poll.json`),
+  require(`${fixtureDataDirectory}/single-big-number-poll.json`),
+  require(`${fixtureDataDirectory}/single-float-number-poll.json`)
 ];
 
 module.exports = {

diff --git a/script_src/NumberGuessHandler.js b/script_src/NumberGuessHandler.js
@@ -1,5 +1,6 @@
 import Scale from "./Scale.js";
 import { getAnswerTextElement } from "./answerHelpers.js";
+import { alignInputRangeLabelPosition, formatNumber } from "./helpers.js";
 
 function getUnit(value, data) {
   let unit = data.unit;
@@ -32,38 +33,43 @@ export default class NumberGuessHandler {
 
   renderInput() {
     const labelContainer = this.inputElement.parentNode.firstElementChild;
+    const positionInPercent =
+      ((this.inputElement.value - this.min) / (this.max - this.min)) * 100;
     let label = labelContainer.querySelector(
       ".q-quiz-input-range-position-label"
     );
     this.inputElement.setAttribute("value", this.defaultInputValue);
     this.defaultInputValue = this.inputElement.value;
 
     this.inputElement.addEventListener("input", () => {
-      label.textContent = this.inputElement.value;
-      label.setAttribute(
-        "style",
-        `left: calc(${((this.inputElement.value - this.min) /
-          (this.max - this.min)) *
-          100}% - 1px);`
+      const positionInPercent =
+        ((this.inputElement.value - this.min) / (this.max - this.min)) * 100;
+      label.textContent = formatNumber(this.inputElement.value);
+      label.setAttribute("style", `left: calc(${positionInPercent}% - 1px);`);
+
+      alignInputRangeLabelPosition(
+        this.inputElement.value,
+        positionInPercent,
+        label,
+        labelContainer
       );
     });
     this.inputElement.addEventListener("change", () => {
-      label.textContent = this.inputElement.value;
-      label.setAttribute(
-        "style",
-        `left: calc(${((this.inputElement.value - this.min) /
-          (this.max - this.min)) *
-          100}% - 1px);`
+      const positionInPercent =
+        ((this.inputElement.value - this.min) / (this.max - this.min)) * 100;
+      label.textContent = formatNumber(this.inputElement.value);
+      label.setAttribute("style", `left: calc(${positionInPercent}% - 1px);`);
+
+      alignInputRangeLabelPosition(
+        this.inputElement.value,
+        positionInPercent,
+        label,
+        labelContainer
       );
     });
 
-    label.innerHTML = this.defaultInputValue;
-    label.setAttribute(
-      "style",
-      `left: calc(${((this.inputElement.value - this.min) /
-        (this.max - this.min)) *
-        100}% - 1px);`
-    );
+    label.innerHTML = formatNumber(this.defaultInputValue);
+    label.setAttribute("style", `left: calc(${positionInPercent}% - 1px);`);
   }
 
   getValue(event) {
@@ -100,7 +106,7 @@ export default class NumberGuessHandler {
     );
     const unitData = {
       unit: this.resultElement.getAttribute("unit"),
-      unitSingular: this.resultElement.getAttribute("unit-singular")
+      unitSingular: this.resultElement.getAttribute("unit-singular"),
     };
 
     let steppedValues = [];
@@ -128,10 +134,9 @@ export default class NumberGuessHandler {
     let correctAnswerHtml = `
       <div class="q-quiz-result__number-guess-visual__text__label s-font-note s-color-gray-8">
         Korrekte Antwort
-        <div class="s-font-note--strong">${this.correctAnswer || ""} ${getUnit(
-      this.correctAnswer,
-      unitData
-    )}</div>
+        <div class="s-font-note--strong">
+        ${formatNumber(this.correctAnswer) || ""} ${getUnit(this.correctAnswer, unitData)}
+        </div>
       </div>
       <div class="q-quiz-result__number-guess-visual__text__marker ${additionalMarkerClass}" ${additionalMarkerAttributes}></div>
     `;
@@ -171,10 +176,7 @@ export default class NumberGuessHandler {
     let answerHtml = `
       <div class="q-quiz-result__number-guess-visual__text__label s-font-note s-color-primary-7">
         Ihre Schätzung
-        <div class="s-font-note--strong s-font-note--tabularnums">${answer} ${getUnit(
-      answer,
-      unitData
-    )}</div>
+        <div class="s-font-note--strong s-font-note--tabularnums">${formatNumber(answer)} ${getUnit(answer, unitData)}</div>
       </div>
       <div class="q-quiz-result__number-guess-visual__text__marker ${additionalMarkerClass}" ${additionalMarkerAttributes}></div>
     `;
@@ -241,10 +243,8 @@ export default class NumberGuessHandler {
 
   getStatsPlot(width) {
     return fetch(
-      `${this.toolBaseUrl}/number-guess/${this.quizId}/${
-        this.data.id
-      }/plot/${width}`
-    ).then(response => {
+      `${this.toolBaseUrl}/number-guess/${this.quizId}/${this.data.id}/plot/${width}`
+    ).then((response) => {
       if (response.ok) {
         return response.text();
       }
@@ -253,13 +253,15 @@ export default class NumberGuessHandler {
   }
 
   renderStatsVisual(element) {
-    this.getStatsPlot(element.getBoundingClientRect().width).then(svgString => {
-      let statsVisualContainerElement = document.createElement("div");
-      statsVisualContainerElement.classList.add(
-        "q-quiz-result__number-guess-visual__stats-graphic-container"
-      );
-      statsVisualContainerElement.innerHTML = svgString;
-      element.appendChild(statsVisualContainerElement);
-    });
+    this.getStatsPlot(element.getBoundingClientRect().width).then(
+      (svgString) => {
+        let statsVisualContainerElement = document.createElement("div");
+        statsVisualContainerElement.classList.add(
+          "q-quiz-result__number-guess-visual__stats-graphic-container"
+        );
+        statsVisualContainerElement.innerHTML = svgString;
+        element.appendChild(statsVisualContainerElement);
+      }
+    );
   }
 }