113 lines
3.8 KiB
JavaScript
113 lines
3.8 KiB
JavaScript
const app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
STARTSCREEN: 'STARTSCREEN',
|
|
INGAME: 'INGAME',
|
|
ENDSCREEN: 'ENDSCREEN',
|
|
score: 0,
|
|
mode: 'STARTSCREEN',
|
|
currentQuestionID: 0,
|
|
currentQuestionAnswerID: null,
|
|
currentQuestionAnswered: false,
|
|
currentEstimate: 0,
|
|
questions: null
|
|
},
|
|
computed: {
|
|
currentQuestion: function () {
|
|
return this.questions[this.currentQuestionID]
|
|
},
|
|
isEstimate: function () {
|
|
return this.currentQuestion.type === 'estimate'
|
|
},
|
|
isChoice: function () {
|
|
return this.currentQuestion.type === 'choice'
|
|
}
|
|
},
|
|
beforeMount () {
|
|
this.questions = []
|
|
const questionCandidates = questionCatalog.slice()
|
|
for (let i = 0; i < Math.min(20, questionCatalog.length); i++) {
|
|
const index = Math.floor(Math.random() * questionCandidates.length)
|
|
this.questions.push(questionCandidates[index])
|
|
questionCandidates.splice(index, 1)
|
|
}
|
|
},
|
|
methods: {
|
|
enterGame: function (event) {
|
|
this.mode = this.INGAME
|
|
this.currentQuestionID = 0
|
|
},
|
|
addToScore: function (value) {
|
|
this.score += value
|
|
},
|
|
evaluateChoice: function (answerID) {
|
|
if (!this.currentQuestionAnswered) {
|
|
if (this.isCorrectAnswer(answerID)) {
|
|
this.addToScore(3)
|
|
}
|
|
this.currentQuestionAnswered = true
|
|
this.currentQuestionAnswerID = answerID
|
|
}
|
|
},
|
|
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++
|
|
} else {
|
|
this.mode = this.ENDSCREEN
|
|
}
|
|
}
|
|
event.stopPropagation()
|
|
},
|
|
isCorrectAnswer: function (answerID) {
|
|
return this.currentQuestion.correctAnswerID === answerID
|
|
},
|
|
isUserChoice: function (answerID) {
|
|
return this.currentQuestionAnswered && (this.currentQuestionAnswerID === answerID)
|
|
}
|
|
}
|
|
})
|