diff --git a/.gitignore b/.gitignore index 144585f..5806b44 100644 --- a/.gitignore +++ b/.gitignore @@ -76,3 +76,5 @@ typings/ # FuseBox cache .fusebox/ +# Sass +css/.sass-cache \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..cacc192 --- /dev/null +++ b/css/style.css @@ -0,0 +1,67 @@ +body { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + font-family: Roboto; } + body .screen { + width: 800px; + min-height: 60vh; + background-color: #efefef; } + body .start-screen { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } + body .start-screen .btn-start { + padding: 0.25em; + border: 1px solid lightgray; + border-radius: 0; + width: 25%; } + body .start-screen h1 { + margin-top: 0; } + body h1 { + font-family: "Kaushan Script"; + font-size: 200%; } + body h2 { + font-weight: regular; } + +.ingame-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background-color: black; + color: white; } + .ingame-header h1 { + margin: 0; + padding: 0; } + +.question { + padding: 2rem; } + .question.revealed .answer { + background-color: lightgray; } + .question.revealed .answer.chosen { + background-color: red; } + .question.revealed .answer.correct { + background-color: limegreen; } + .question.revealed .answer.correct.chosen { + background-color: green; + color: white; } + .question .question-answers .answer { + display: block; + padding: 0.5rem; + width: 100%; + margin-bottom: 2px; + border: 1px solid lightgray; + border-radius: 0; + text-align: left; } + .question .btn-continue { + display: block; + margin-top: 1rem; + width: 100%; + border-radius: 0; + border: 1px solid lightgray; + padding: 0.5rem; } + +/*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..c9718da --- /dev/null +++ b/css/style.css.map @@ -0,0 +1,7 @@ +{ +"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;EAEnB,YAAO;IACL,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,OAAO;EAE3B,kBAAa;IACX,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,MAAM;IACvB,cAAc,EAAE,MAAM;IAEtB,6BAAU;MACR,OAAO,EAAE,MAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,CAAC;MAChB,KAAK,EAAE,GAAG;IAEZ,qBAAE;MACA,UAAU,EAAE,CAAC;EAEjB,OAAE;IACA,WAAW,EAAE,gBAAgB;IAC7B,SAAS,EAAE,IAAI;EAEjB,OAAE;IACA,WAAW,EAAE,OAAO;;AAExB,cAAc;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EAEZ,iBAAE;IACA,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;;AAEd,SAAS;EACP,OAAO,EAAE,IAAI;EAIX,0BAAO;IACL,gBAAgB,EAAE,SAAS;IAE3B,iCAAQ;MACN,gBAAgB,EAAE,GAAG;IAEvB,kCAAS;MACP,gBAAgB,EAAE,SAAS;MAC3B,yCAAQ;QACN,gBAAgB,EAAE,KAAK;QACvB,KAAK,EAAE,KAAK;EAGlB,mCAAO;IACL,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,MAAK;IACd,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,IAAI;EAEpB,uBAAa;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,MAAK", +"sources": ["style.sass"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/css/style.sass b/css/style.sass new file mode 100644 index 0000000..8101a98 --- /dev/null +++ b/css/style.sass @@ -0,0 +1,80 @@ +body + min-height: 100vh + display: flex + align-items: center + justify-content: center + font-family: Roboto + + .screen + width: 800px + min-height: 60vh + background-color: #efefef + + .start-screen + display: flex + align-items: center + justify-content: center + flex-direction: column + + .btn-start + padding: .25em + border: 1px solid lightgray + border-radius: 0 + width: 25% + + h1 + margin-top: 0 + + h1 + font-family: 'Kaushan Script' + font-size: 200% + + h2 + font-weight: regular + +.ingame-header + display: flex + justify-content: space-between + align-items: center + padding: 1rem 2rem + background-color: black + color: white + + h1 + margin: 0 + padding: 0 + +.question + padding: 2rem + + &.revealed + + .answer + background-color: lightgray + + &.chosen + background-color: red + + &.correct + background-color: limegreen + &.chosen + background-color: green + color: white + + .question-answers + .answer + display: block + padding: .5rem + width: 100% + margin-bottom: 2px + border: 1px solid lightgray + border-radius: 0 + text-align: left + + .btn-continue + display: block + margin-top: 1rem + width: 100% + border-radius: 0 + border: 1px solid lightgray + padding: .5rem diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a47563 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + WIAI-Weihnachtsquiz + + + + + +
+
+

Willkommen zum WIAI-Weihnachtsquiz!

+ +
+ +
+
+

WIAI-Weihnachtsquiz

+

Score: {{score}} Punkte

+
+
+

{{currentQuestion.text}}

+
+ +
+ +
+
+ +
+

WIAI-Weihnachtsquiz

+

Wir sind fertig.

+

Score: {{score}} Punkte

+
+
+ + + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..073ec1e --- /dev/null +++ b/js/app.js @@ -0,0 +1,63 @@ +const app = new Vue({ + el: '#app', + data: { + STARTSCREEN: 'STARTSCREEN', + INGAME: 'INGAME', + ENDSCREEN: 'ENDSCREEN', + score: 0, + mode: 'STARTSCREEN', + currentQuestionID: 0, + currentQuestionAnswerID: null, + questions: null + }, + computed: { + currentQuestion: function () { + return this.questions[this.currentQuestionID] + }, + currentQuestionAnswered: function () { + return this.currentQuestionAnswerID !== null + } + }, + 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 + }, + evaluate: function (answerID) { + if (!this.currentQuestionAnswered) { + if (this.isCorrectAnswer(answerID)) { + this.addToScore(3) + } + this.currentQuestionAnswerID = answerID + } + }, + showNextQuestion: function () { + if (this.currentQuestionAnswered) { + if (this.currentQuestionID + 1 < this.questions.length) { + this.currentQuestionID++ + this.currentQuestionAnswerID = null + } else { + this.mode = this.ENDSCREEN + } + } + }, + isCorrectAnswer: function (answerID) { + return this.currentQuestion.correctAnswerID === answerID + }, + isUserChoice: function (answerID) { + return this.currentQuestionAnswered && (this.currentQuestionAnswerID === answerID) + } + } +}) diff --git a/js/questions.js b/js/questions.js new file mode 100644 index 0000000..d627297 --- /dev/null +++ b/js/questions.js @@ -0,0 +1,20 @@ +const questionCatalog = [ + { + text: 'Wann wurde die Otto-Friedrich-Universität Bamberg gegründet?', + correctAnswerID: 2, + answers: [ + { id: 0, text: '1702' }, + { id: 1, text: '1628' }, + { id: 2, text: '1647' } + ] + }, + { + text: 'Welcher Lehrstuhl bzw. welche Professur ist der:die jüngste an der Fakultät WIAI?', + correctAnswerID: 0, + answers: [ + { id: 0, text: 'Informationssystemmanagement (Prof. Beimborn)' }, + { id: 1, text: 'Privatsphäre und Sicherheit in Informationssystemen (Prof. Herrmann)' }, + { id: 2, text: 'Smart Environments (Prof. Wolter)' } + ] + } +]