From 81bc8157f0afc210ef22074182bcdbb80bd61aa3 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Fri, 25 Aug 2017 10:18:57 +0200 Subject: [PATCH 01/15] Add final score to quiz --- index.html | 3 ++- resources/locales/en/translation.json | 1 + resources/schema.json | 11 ++++++++- routes/rendering-info/html-js.js | 10 ++++++-- script_src/MapPointGuessHandler.js | 9 ++----- script_src/MultiQuizPositionHandler.js | 1 + script_src/QuestionHandler.js | 34 +++++++++++++++++++++++--- script_src/answerHelpers.js | 34 +++++++++++++++++++++++++- styles/default.scss | 21 ++++++++++++++++ views/HtmlJs.html | 29 ++++++++++++++++------ 10 files changed, 129 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index d5e428a..a3db3f0 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.some other stuff - + -
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.some other stuff
diff --git a/views/Header.html b/views/Header.html index 476d5e4..80289ce 100644 --- a/views/Header.html +++ b/views/Header.html @@ -1,4 +1,4 @@ -
+
{{#if isMultiQuiz}}
{{#if !hasCover}} diff --git a/views/HtmlJs.html b/views/HtmlJs.html index 383ad04..cd41302 100644 --- a/views/HtmlJs.html +++ b/views/HtmlJs.html @@ -1,6 +1,6 @@
-
+
{{#if hasCover}}

{{#if cover.title}}{{cover.title}}{{/if}}

From 00367ec72dd4884d33f1443f1f2d96e97e866c91 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Wed, 28 Jun 2017 12:36:19 +0200 Subject: [PATCH 07/15] New release version 1.1.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 68ce7b3..aef3698 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nzz/q-quiz", - "version": "1.1.4", + "version": "1.1.5", "description": "Q quiz", "keywords": [ "storytelling", From 9bddb0564bfd63f1f48b7c9b3a3a6c7c37416a3d Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Wed, 30 Aug 2017 14:44:46 +0200 Subject: [PATCH 08/15] Hot fix: Add sophie color to header and quiz question container --- index.html | 12 +++++++++++- views/Header.html | 2 +- views/HtmlJs.html | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9ceef84..5ad9980 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,16 @@ Q Quiz + + -
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.some other stuff
diff --git a/views/Header.html b/views/Header.html index 476d5e4..80289ce 100644 --- a/views/Header.html +++ b/views/Header.html @@ -1,4 +1,4 @@ -
+
{{#if isMultiQuiz}}
{{#if !hasCover}} diff --git a/views/HtmlJs.html b/views/HtmlJs.html index cd417c7..354bcf5 100644 --- a/views/HtmlJs.html +++ b/views/HtmlJs.html @@ -1,6 +1,6 @@
-
+
{{#if hasCover}}

{{#if cover.title}}{{cover.title}}{{/if}}

From d02730296e25d1e7c7c3a6b1f7c74c6a6b736fe4 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Wed, 30 Aug 2017 15:04:47 +0200 Subject: [PATCH 09/15] New release version 1.1.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aef3698..96fe37e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nzz/q-quiz", - "version": "1.1.5", + "version": "1.1.6", "description": "Q quiz", "keywords": [ "storytelling", From d11aa15870e4c979c5c7f915c176dd3b78e9819c Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Thu, 31 Aug 2017 17:21:21 +0200 Subject: [PATCH 10/15] Implement score system --- index.html | 2 +- script_src/MapPointGuessHandler.js | 16 ++++++ script_src/MultiQuizPositionHandler.js | 7 ++- script_src/NumberGuessHandler.js | 4 ++ script_src/QuestionHandler.js | 57 +++++++++++-------- script_src/answerHelpers.js | 26 +-------- script_src/scoreHelpers.js | 78 ++++++++++++++++++++++++++ views/HtmlJs.html | 2 +- 8 files changed, 141 insertions(+), 51 deletions(-) create mode 100644 script_src/scoreHelpers.js diff --git a/index.html b/index.html index 5ad9980..1ef4ddd 100644 --- a/index.html +++ b/index.html @@ -157,7 +157,7 @@ }, toolRuntimeConfig: { toolBaseUrl: `http://localhost:3000`, - isPure: false + isPure: true } }; diff --git a/script_src/MapPointGuessHandler.js b/script_src/MapPointGuessHandler.js index 3c6ca78..a22cec9 100644 --- a/script_src/MapPointGuessHandler.js +++ b/script_src/MapPointGuessHandler.js @@ -93,6 +93,22 @@ export default class MapPointGuessHandler { } } + getWorstAnswer() { +/* let mapContainer = this.inputElement.querySelector('.q-quiz-map-container'); + L.getBounds + let map = L.map(mapContainer, mapOptions); + mapFitBbox(map, correctAnswer.bbox); + console.log('bounds: ' + map.getBounds()); */ + + let correctLatLng = new L.latLng([this.data.correctAnswer.geometry.coordinates[1], this.data.correctAnswer.geometry.coordinates[0]]); + let bbox = this.data.correctAnswer.bbox; + let upperLeft = new L.latLng([bbox[3], bbox[0]]); + let upperRight = new L.latLng([bbox[3], bbox[2]]); + let lowerLeft = new L.latLng([bbox[1], bbox[0]]); + let lowerRight = new L.latLng([bbox[1], bbox[2]]); + return Math.floor(Math.max(upperLeft.distanceTo(correctLatLng), upperRight.distanceTo(correctLatLng), lowerLeft.distanceTo(correctLatLng), lowerRight.distanceTo(correctLatLng))); + } + renderResult(answer) { const correctAnswer = this.data.correctAnswer; this.resultElement = this.questionElement.querySelector('.q-quiz-result'); diff --git a/script_src/MultiQuizPositionHandler.js b/script_src/MultiQuizPositionHandler.js index 499b276..66add8f 100644 --- a/script_src/MultiQuizPositionHandler.js +++ b/script_src/MultiQuizPositionHandler.js @@ -1,4 +1,5 @@ import MapPointGuessHandler from './MapPointGuessHandler.js'; +import {getFinalScoreTitle} from './scoreHelpers.js'; export default class MultiQuizPositionHandler { @@ -19,8 +20,9 @@ export default class MultiQuizPositionHandler { return this.position; } - setPosition(position) { + setPosition(position, finalScore) { this.position = position; + this.finalScore = finalScore; this.setHeader(); this.setQuizElement(); } @@ -77,6 +79,9 @@ export default class MultiQuizPositionHandler { } else if (this.position === this.numberElements - 1) { if (this.isFinalScoreShown) { title = 'Auswertung'; + if (this.finalScore) { + title = getFinalScoreTitle(this.finalScore); + } } else { title = 'Fertig!'; } diff --git a/script_src/NumberGuessHandler.js b/script_src/NumberGuessHandler.js index 475844a..a27792b 100644 --- a/script_src/NumberGuessHandler.js +++ b/script_src/NumberGuessHandler.js @@ -46,6 +46,10 @@ export default class NumberGuessHandler { getValue(event) { return parseFloat(this.inputElement.value); } + + getWorstAnswer() { + return Math.max((this.correctAnswer - this.min), (this.max - this.correctAnswer)); + } isAnswerValid() { let element = this.inputElement.parentNode.nextElementSibling; diff --git a/script_src/QuestionHandler.js b/script_src/QuestionHandler.js index 652e9b0..9921704 100644 --- a/script_src/QuestionHandler.js +++ b/script_src/QuestionHandler.js @@ -2,6 +2,7 @@ import NumberGuess from './NumberGuessHandler.js'; import MultipleChoice from './MultipleChoiceHandler.js'; import MapPointGuess from './MapPointGuessHandler.js'; import * as answerHelpers from './answerHelpers.js'; +import {getScorePerQuestion, renderFinalScoreText} from './scoreHelpers.js'; import MultiQuizPositionHandler from './MultiQuizPositionHandler.js'; import AnswerStore from './AnswerStore.js'; @@ -23,18 +24,19 @@ export default class QuestionHandler { this.finalScore = { multipleChoice: { + multiplicator: 5, numberQuestions: 0, - sumCorrect: 0 + sumPoints: 0 }, numberGuess: { + multiplicator: 10, numberQuestions: 0, - numberAnswers: 0, - sumDiffPercentage: 0 + sumPoints: 0 }, mapPointGuess: { + multiplicator: 10, numberQuestions: 0, - numberAnswers: 0, - sumDistance: 0 + sumPoints: 0 } } } @@ -44,7 +46,7 @@ export default class QuestionHandler { this.questionPosition = 0; this.quizElement = this.quizRootElement.querySelector('.q-quiz-element-container--is-active'); } else { - this.multiQuizPositionHandler.setPosition(position); + this.multiQuizPositionHandler.setPosition(position, this.finalScore); this.questionPosition = this.multiQuizPositionHandler.getQuestionNumber() - 1; this.quizElement = this.multiQuizPositionHandler.getQuizElement(); } @@ -52,19 +54,25 @@ export default class QuestionHandler { if (this.questionPosition < this.data.questionElementData.length) { this.questionType = this.data.questionElementData[this.questionPosition].type; this.finalScore[this.questionType].numberQuestions++; + this.questionRenderer = new questionTypes[this.questionType](this.quizElement, this.data.questionElementData[this.questionPosition], this.data.itemId, this.data.toolBaseUrl); if (typeof this.questionRenderer.renderInput === 'function') { this.questionRenderer.renderInput(); } - } else if (this.data.hasLastCard && this.data.lastCardData && (this.data.lastCardData.articleRecommendations || this.data.isFinalScoreShown)) { - this.finalScore.isFinalScoreShown = this.data.isFinalScoreShown; - answerHelpers.renderAdditionalInformationForLastCard(this.quizElement, this.finalScore, this.data.lastCardData.articleRecommendations); - } + } else if (this.data.hasLastCard) { + if (this.data.lastCardData && this.data.lastCardData.articleRecommendations) { + answerHelpers.renderAdditionalInformationForLastCard(this.quizElement, this.data.lastCardData.articleRecommendations); + } + if (this.data.isFinalScoreShown) { + renderFinalScoreText(this.finalScore, this.quizElement); + } + } } async handleAnswer(event) { const answerValue = this.questionRenderer.getValue(event); const correctAnswer = this.data.questionElementData[this.questionPosition].correctAnswer; + let worstAnswer; if (typeof this.questionRenderer.isAnswerValid === 'function') { if (!this.questionRenderer.isAnswerValid()) { @@ -73,6 +81,10 @@ export default class QuestionHandler { } } + if (typeof this.questionRenderer.getWorstAnswer === 'function') { + worstAnswer = this.questionRenderer.getWorstAnswer(); + } + this.questionRenderer.renderResult(answerValue); const responseStoreAnswer = await this.storeAnswer(answerValue); let answerId; @@ -82,22 +94,21 @@ export default class QuestionHandler { let stats = await this.answerStore.getStats(this.data.itemId, this.data.questionElementData[this.questionPosition], answerId); if (typeof this.questionRenderer.renderResultStats === 'function') { if (this.questionType === 'multipleChoice' && answerValue === correctAnswer) { - this.finalScore.multipleChoice.sumCorrect++; - } else if (this.questionType === 'numberGuess') { - this.finalScore.numberGuess.numberAnswers++; - if (stats.diffPercentage) { - this.finalScore.numberGuess.sumDiffPercentage += stats.diffPercentage; - } else { - const diffPercentage = Math.abs(Math.round(Math.abs(correctAnswer - answerValue) / correctAnswer * 100)); - this.finalScore.numberGuess.sumDiffPercentage += diffPercentage; - } - } else if (this.questionType === 'mapPointGuess') { - this.finalScore.mapPointGuess.numberAnswers++; - this.finalScore.mapPointGuess.sumDistance += answerValue.distance; + this.finalScore.multipleChoice.sumPoints += 5; + } else if (this.questionType === 'numberGuess' && worstAnswer !== undefined) { + let guessQuality = 1 - (Math.abs(answerValue - correctAnswer) / worstAnswer); + this.finalScore.numberGuess.sumPoints += getScorePerQuestion(guessQuality, this.finalScore.numberGuess.multiplicator); + } else if (this.questionType === 'mapPointGuess' && worstAnswer !== undefined) { + console.log('worst answer: ' + worstAnswer); + console.log('distance: ' + answerValue.distance); + let guessQuality = 1 - (answerValue.distance / worstAnswer); + console.log('guessQuality: ', guessQuality); + console.log('points: ' + getScorePerQuestion(guessQuality, this.finalScore.mapPointGuess.multiplicator)); + this.finalScore.mapPointGuess.sumPoints += getScorePerQuestion(guessQuality, this.finalScore.mapPointGuess.multiplicator); } + console.log(this.finalScore[this.questionType].sumPoints); this.questionRenderer.renderResultStats(answerValue, stats); } - // dispatch a custom event for tracking system to track the answer // and others if they are interested diff --git a/script_src/answerHelpers.js b/script_src/answerHelpers.js index 8a47ba8..85c0aa0 100644 --- a/script_src/answerHelpers.js +++ b/script_src/answerHelpers.js @@ -95,24 +95,6 @@ function getRecommendationsElement(articleRecommendations) { return recommendationsElement } -function getFinalScoreElement(finalScore) { - let finalScoreElement = document.createElement('div'); - let finalScoreHTML = ''; - if (finalScore.multipleChoice.numberQuestions > 0) { - finalScoreHTML += `Sie haben ${finalScore.multipleChoice.sumCorrect} von ${finalScore.multipleChoice.numberQuestions} Fragen richtig beantwortet. `; - } - if (finalScore.numberGuess.numberAnswers > 0) { - finalScoreHTML += `Bei den Schätzfragen lagen Sie durchschnittlich um ${finalScore.numberGuess.sumDiffPercentage / finalScore.numberGuess.numberAnswers}% daneben. `; - } - if (finalScore.mapPointGuess.numberAnswers > 0) { - let avgDistance = finalScore.mapPointGuess.sumDistance / finalScore.mapPointGuess.numberAnswers; - let distanceText = getDistanceText(avgDistance); - finalScoreHTML += `Bei den Ortsschätzfragen lagen Sie durchschnittlich um ${distanceText} daneben.`; - } - finalScoreElement.innerHTML = finalScoreHTML; - return finalScoreElement; -} - export function getDistanceText(distance) { if (distance > 1000) { return `${(distance / 1000).toFixed(1)} km`; @@ -121,16 +103,10 @@ export function getDistanceText(distance) { } } -export function renderAdditionalInformationForLastCard(element, finalScore, articleRecommendations) { +export function renderAdditionalInformationForLastCard(element, articleRecommendations) { let articleRecommendationsContainer = element.querySelector('.q-quiz-article-recommendations'); let articleRecommendationsElement = getRecommendationsElement(articleRecommendations); articleRecommendationsContainer.appendChild(articleRecommendationsElement); - - if (finalScore.isFinalScoreShown) { - let finalScoreContainer = element.querySelector('.q-quiz-final-score'); - let finalScoreElement = getFinalScoreElement(finalScore); - finalScoreContainer.appendChild(finalScoreElement); - } } export function renderAdditionalInformationForQuestion(element, correctAnswer) { diff --git a/script_src/scoreHelpers.js b/script_src/scoreHelpers.js new file mode 100644 index 0000000..8d11304 --- /dev/null +++ b/script_src/scoreHelpers.js @@ -0,0 +1,78 @@ +const turningPoint = 0.6; // x=y + +// slope was pre-calculated with a defined point of worst estimation quality of (0.08, 0) +const lowerSlope = 0.6 / 0.52; +const lowerConstant = -(lowerSlope * turningPoint) + turningPoint; // y = ax + b, for a = lowerSlope and (x,y) = turningPoint + +// slope was pre-calculated with a defined point of best estimation quality of (0.9, 0.98) +const upperSlope = 0.38 / 0.3; +const upperConstant = -(upperSlope * turningPoint) + turningPoint; // y = ax + b, for a = upperSlope and (x,y) = turningPoint + +const lowerBoundX = (0 - lowerConstant) / lowerSlope; // 0 = ax + b, for a = lowerSlope, b = lowerConstant and y = 0 -> no negative values +const upperBoundX = (1 - upperConstant) / upperSlope; // 0 = ax + b, for a = upperSlope, b = upperConstant and y = 1 -> no values over 1 + +export function getScorePerQuestion(guessQuality, multiplicator) { + if (guessQuality < lowerBoundX) { + return 0; + } else if (lowerBoundX <= guessQuality && guessQuality <= turningPoint) { + return multiplicator * (lowerSlope * guessQuality - ((lowerSlope * turningPoint) - turningPoint)); + } else if (turningPoint < guessQuality && guessQuality <= upperBoundX) { + return multiplicator * (upperSlope * guessQuality - ((upperSlope * turningPoint) - turningPoint)); + } else if (guessQuality > upperBoundX) { + return 10; + } +} + +export function renderFinalScoreText(finalScore, element) { + let lastCardTitleElement = element.querySelector('.q-quiz-last-card-title'); + let multipleChoice = finalScore.multipleChoice; + let numberGuess = finalScore.numberGuess; + let mapPointGuess = finalScore.mapPointGuess; + let totalScore = (multipleChoice.numberQuestions * multipleChoice.multiplicator) + + (numberGuess.numberQuestions * numberGuess.multiplicator) + + (mapPointGuess.numberQuestions * mapPointGuess.multiplicator); + let achievedScore = Math.round(multipleChoice.sumPoints + numberGuess.sumPoints + mapPointGuess.sumPoints); + lastCardTitleElement.innerHTML = `Sie haben ${achievedScore} von ${totalScore} möglichen Punkten erzielt.` +} + +export function getFinalScoreTitle(finalScore) { + let multipleChoice = finalScore.multipleChoice; + let numberGuess = finalScore.numberGuess; + let mapPointGuess = finalScore.mapPointGuess; + let totalScore = (multipleChoice.numberQuestions * multipleChoice.multiplicator) + + (numberGuess.numberQuestions * numberGuess.multiplicator) + + (mapPointGuess.numberQuestions * mapPointGuess.multiplicator); + let achievedScore = Math.round(multipleChoice.sumPoints + numberGuess.sumPoints + mapPointGuess.sumPoints); + let percentageScore = achievedScore / totalScore; + console.log(percentageScore); + if (percentageScore < 0.2) { + return '😱'; + } else if (percentageScore < 0.5) { + return '😕'; + } else if (percentageScore < 0.8) { + return '🙂'; + } else if (percentageScore < 1.0) { + return '👏👏👏'; + } else { + return '👏👏👏👏👏'; + } +} + +function getFinalScoreElement(finalScore) { + let finalScoreElement = document.createElement('div'); + let finalScoreHTML = ''; + if (finalScore.multipleChoice.numberQuestions > 0) { + finalScoreHTML += `Sie haben ${finalScore.multipleChoice.sumCorrect} von ${finalScore.multipleChoice.numberQuestions} Fragen richtig beantwortet. `; + } + if (finalScore.numberGuess.numberAnswers > 0) { + finalScoreHTML += `Bei den Schätzfragen lagen Sie durchschnittlich um ${finalScore.numberGuess.sumDiffPercentage / finalScore.numberGuess.numberAnswers}% daneben. `; + } + if (finalScore.mapPointGuess.numberAnswers > 0) { + let avgDistance = finalScore.mapPointGuess.sumDistance / finalScore.mapPointGuess.numberAnswers; + let distanceText = getDistanceText(avgDistance); + finalScoreHTML += `Bei den Ortsschätzfragen lagen Sie durchschnittlich um ${distanceText} daneben.`; + } + finalScoreElement.innerHTML = finalScoreHTML; + return finalScoreElement; +} + diff --git a/views/HtmlJs.html b/views/HtmlJs.html index 354bcf5..8e6ea11 100644 --- a/views/HtmlJs.html +++ b/views/HtmlJs.html @@ -30,7 +30,7 @@

{{#if cover.title}}{{cover.title}}{ {{#if hasLastCard}}
{{#if lastCard.title}} -

{{lastCard.title}}

+

{{lastCard.title}}

{{/if}} {{#if item.isFinalScoreShown}}

From 8209a83c96a596ea3ae556f9aae137c55f2b6f17 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Thu, 31 Aug 2017 18:15:46 +0200 Subject: [PATCH 11/15] Use map boundings, change order in schema for last page --- script_src/MapPointGuessHandler.js | 33 ++++++++++++++++++++---------- script_src/QuestionHandler.js | 9 ++++---- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/script_src/MapPointGuessHandler.js b/script_src/MapPointGuessHandler.js index a22cec9..d8676ba 100644 --- a/script_src/MapPointGuessHandler.js +++ b/script_src/MapPointGuessHandler.js @@ -46,6 +46,7 @@ export default class MapPointGuessHandler { this.setMapSize(map); window.addEventListener('resize', () => { try { + this.mapBounds = map.getBounds(); this.setMapSize(map) } catch (e) { @@ -59,6 +60,8 @@ export default class MapPointGuessHandler { attribution: '© Mapbox & OpenStreetMap' }).addTo(map); + this.mapBounds = map.getBounds(); + let markerPinIcon = Leaflet.divIcon({ className: 'q-quiz-map-pin', html: iconPinSvg, @@ -94,18 +97,23 @@ export default class MapPointGuessHandler { } getWorstAnswer() { -/* let mapContainer = this.inputElement.querySelector('.q-quiz-map-container'); - L.getBounds - let map = L.map(mapContainer, mapOptions); - mapFitBbox(map, correctAnswer.bbox); - console.log('bounds: ' + map.getBounds()); */ + return this.worstAnswer; + } + + setWorstAnswer() { + let mapBoundings = [ + this.mapBounds['_southWest'].lng, + this.mapBounds['_southWest'].lat, + this.mapBounds['_northEast'].lng, + this.mapBounds['_northEast'].lat, + ]; let correctLatLng = new L.latLng([this.data.correctAnswer.geometry.coordinates[1], this.data.correctAnswer.geometry.coordinates[0]]); - let bbox = this.data.correctAnswer.bbox; - let upperLeft = new L.latLng([bbox[3], bbox[0]]); - let upperRight = new L.latLng([bbox[3], bbox[2]]); - let lowerLeft = new L.latLng([bbox[1], bbox[0]]); - let lowerRight = new L.latLng([bbox[1], bbox[2]]); + let upperLeft = new L.latLng([mapBoundings[3], mapBoundings[0]]); + let upperRight = new L.latLng([mapBoundings[3], mapBoundings[2]]); + let lowerLeft = new L.latLng([mapBoundings[1], mapBoundings[0]]); + let lowerRight = new L.latLng([mapBoundings[1], mapBoundings[2]]); + return Math.floor(Math.max(upperLeft.distanceTo(correctLatLng), upperRight.distanceTo(correctLatLng), lowerLeft.distanceTo(correctLatLng), lowerRight.distanceTo(correctLatLng))); } @@ -126,9 +134,12 @@ export default class MapPointGuessHandler { attribution: '© Mapbox & OpenStreetMap' }).addTo(map); + let bounds = map.getBounds(); + + this.worstAnswer = this.setWorstAnswer(); + if (answer && answer.latLng) { // add the correct point and the users input point - let bounds = map.getBounds(); let west = bounds.getWest(); let east = bounds.getEast(); diff --git a/script_src/QuestionHandler.js b/script_src/QuestionHandler.js index 9921704..995cba3 100644 --- a/script_src/QuestionHandler.js +++ b/script_src/QuestionHandler.js @@ -81,16 +81,17 @@ export default class QuestionHandler { } } - if (typeof this.questionRenderer.getWorstAnswer === 'function') { - worstAnswer = this.questionRenderer.getWorstAnswer(); - } - this.questionRenderer.renderResult(answerValue); const responseStoreAnswer = await this.storeAnswer(answerValue); let answerId; if (responseStoreAnswer && responseStoreAnswer.id) { answerId = responseStoreAnswer.id; } + + if (typeof this.questionRenderer.getWorstAnswer === 'function') { + worstAnswer = this.questionRenderer.getWorstAnswer(); + } + let stats = await this.answerStore.getStats(this.data.itemId, this.data.questionElementData[this.questionPosition], answerId); if (typeof this.questionRenderer.renderResultStats === 'function') { if (this.questionType === 'multipleChoice' && answerValue === correctAnswer) { From 3fdd1c4622ffe8bdfad2fc8e30254355ce9b7aa8 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Thu, 31 Aug 2017 18:27:00 +0200 Subject: [PATCH 12/15] Seriously changing order in last page --- resources/schema.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/schema.json b/resources/schema.json index 1fb7510..c9439f3 100644 --- a/resources/schema.json +++ b/resources/schema.json @@ -229,6 +229,7 @@ "type": "string", "title": "Abmoderation" }, + "articleRecommendations": {"$ref": "#/definitions/articleRecommendations"}, "quizLink": { "type": "string", "title": "Link zu Anschlussquiz" @@ -236,8 +237,7 @@ "quizTitle": { "type": "string", "title": "Titel Anschlussquiz" - }, - "articleRecommendations": {"$ref": "#/definitions/articleRecommendations"} + } } }, "elementId": { From 78513390b26be625fc0ab444df841b1a3d0d6fa6 Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Fri, 1 Sep 2017 10:09:29 +0200 Subject: [PATCH 13/15] Delete console output, set bounds again when rendering result --- script_src/MapPointGuessHandler.js | 6 +++--- script_src/QuestionHandler.js | 5 ----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/script_src/MapPointGuessHandler.js b/script_src/MapPointGuessHandler.js index d8676ba..e570319 100644 --- a/script_src/MapPointGuessHandler.js +++ b/script_src/MapPointGuessHandler.js @@ -134,14 +134,14 @@ export default class MapPointGuessHandler { attribution: '© Mapbox & OpenStreetMap' }).addTo(map); - let bounds = map.getBounds(); + this.bounds = map.getBounds(); this.worstAnswer = this.setWorstAnswer(); if (answer && answer.latLng) { // add the correct point and the users input point - let west = bounds.getWest(); - let east = bounds.getEast(); + let west = this.bounds.getWest(); + let east = this.bounds.getEast(); let correctAnswerLabelPosition; let answerLabelPosition; diff --git a/script_src/QuestionHandler.js b/script_src/QuestionHandler.js index 995cba3..59b9296 100644 --- a/script_src/QuestionHandler.js +++ b/script_src/QuestionHandler.js @@ -100,14 +100,9 @@ export default class QuestionHandler { let guessQuality = 1 - (Math.abs(answerValue - correctAnswer) / worstAnswer); this.finalScore.numberGuess.sumPoints += getScorePerQuestion(guessQuality, this.finalScore.numberGuess.multiplicator); } else if (this.questionType === 'mapPointGuess' && worstAnswer !== undefined) { - console.log('worst answer: ' + worstAnswer); - console.log('distance: ' + answerValue.distance); let guessQuality = 1 - (answerValue.distance / worstAnswer); - console.log('guessQuality: ', guessQuality); - console.log('points: ' + getScorePerQuestion(guessQuality, this.finalScore.mapPointGuess.multiplicator)); this.finalScore.mapPointGuess.sumPoints += getScorePerQuestion(guessQuality, this.finalScore.mapPointGuess.multiplicator); } - console.log(this.finalScore[this.questionType].sumPoints); this.questionRenderer.renderResultStats(answerValue, stats); } From b994d16ff538c008154184a1fb9649c966a6dc0f Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Fri, 1 Sep 2017 10:22:09 +0200 Subject: [PATCH 14/15] Delete console logs --- routes/rendering-info/html-js.js | 3 --- script_src/answerHelpers.js | 1 - 2 files changed, 4 deletions(-) diff --git a/routes/rendering-info/html-js.js b/routes/rendering-info/html-js.js index 784eca5..c56be6f 100644 --- a/routes/rendering-info/html-js.js +++ b/routes/rendering-info/html-js.js @@ -74,12 +74,9 @@ module.exports = { scriptData.lastCardData = { articleRecommendations: item.lastCard.articleRecommendations, } - console.log(item.lastCard.isFinalScoreShown); - console.log(JSON.stringify(item.lastCard)) scriptData.isFinalScoreShown = item.lastCard.isFinalScoreShown || false; item.isFinalScoreShown = scriptData.isFinalScoreShown; } - console.log(scriptData.isFinalScoreShown); // elements are already split into cover, last card and questions // so we don't need it here anymore delete item.elements; diff --git a/script_src/answerHelpers.js b/script_src/answerHelpers.js index 85c0aa0..342833c 100644 --- a/script_src/answerHelpers.js +++ b/script_src/answerHelpers.js @@ -47,7 +47,6 @@ export function getAnswerTextElement(stats, isCorrectAnswer, getDiffText) { ` } else if (stats.betterThanPercentage !== undefined && stats.betterThanPercentage !== null) { - console.log('better than percentage: ' + stats.betterThanPercentage); statsTextHtml += ` Nur ${stats.betterThanPercentage} Prozent aller anderen lagen noch weiter daneben als Sie. ` From 3fb1d8787714e11474dbc1ca45745d92cfc0816c Mon Sep 17 00:00:00 2001 From: Sharon Funke Date: Fri, 1 Sep 2017 10:36:30 +0200 Subject: [PATCH 15/15] New release version 1.2.0, update node --- .travis.yml | 2 +- Dockerfile | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.travis.yml b/.travis.yml index 919a45e..5e40c46 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,7 +4,7 @@ services: - docker language: node_js node_js: -- '7.6' +- '8.1' install: - npm install -g jspm - npm install diff --git a/Dockerfile b/Dockerfile index 56e5ee5..b0bb929 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,5 @@ # Use following version of Node as the base image -FROM node:7.3 +FROM node:8.1 # Set work directory for run/cmd WORKDIR /app diff --git a/package.json b/package.json index 96fe37e..a45af53 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nzz/q-quiz", - "version": "1.1.6", + "version": "1.2.0", "description": "Q quiz", "keywords": [ "storytelling",