Initial commit
This commit is contained in:
parent
4e9f2ffcc6
commit
dcd389b2f9
2
.gitignore
vendored
2
.gitignore
vendored
@ -76,3 +76,5 @@ typings/
|
|||||||
# FuseBox cache
|
# FuseBox cache
|
||||||
.fusebox/
|
.fusebox/
|
||||||
|
|
||||||
|
# Sass
|
||||||
|
css/.sass-cache
|
||||||
67
css/style.css
Normal file
67
css/style.css
Normal file
@ -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 */
|
||||||
7
css/style.css.map
Normal file
7
css/style.css.map
Normal file
@ -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"
|
||||||
|
}
|
||||||
80
css/style.sass
Normal file
80
css/style.sass
Normal file
@ -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
|
||||||
48
index.html
Normal file
48
index.html
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>WIAI-Weihnachtsquiz</title>
|
||||||
|
<link href="css/style.css" rel="stylesheet"/>
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap&family=Roboto" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main id="app">
|
||||||
|
<section v-if="mode === STARTSCREEN" class="start-screen screen" v-on:keyup.enter="enterGame">
|
||||||
|
<h1 class="headline">Willkommen zum WIAI-Weihnachtsquiz!</h1>
|
||||||
|
<button v-on:click="enterGame" class="btn-start" tabindex="0" v-on:keyup.enter="enterGame">Starten</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section v-if="mode === INGAME" class="ingame-screen screen" v-on:keyup.enter="showNextQuestion">
|
||||||
|
<header class="ingame-header">
|
||||||
|
<h1 class="headline">WIAI-Weihnachtsquiz</h1>
|
||||||
|
<p class="score">Score: {{score}} Punkte</p>
|
||||||
|
</header>
|
||||||
|
<article class="question" v-bind:class="{revealed: currentQuestionAnswered}">
|
||||||
|
<h2 class="question-text">{{currentQuestion.text}}</h2>
|
||||||
|
<div class="question-answers">
|
||||||
|
<button
|
||||||
|
v-for="answer in currentQuestion.answers"
|
||||||
|
@click="evaluate(answer.id)"
|
||||||
|
v-bind:class="{ correct: isCorrectAnswer(answer.id), answer: true, chosen: isUserChoice(answer.id) }">
|
||||||
|
{{answer.text}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section v-if="mode === ENDSCREEN" class="end-screen screen">
|
||||||
|
<h1 class="headline">WIAI-Weihnachtsquiz</h1>
|
||||||
|
<p>Wir sind fertig.</p>
|
||||||
|
<p class="score">Score: {{score}} Punkte</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||||||
|
<script src="js/questions.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
js/app.js
Normal file
63
js/app.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
20
js/questions.js
Normal file
20
js/questions.js
Normal file
@ -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)' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
x
Reference in New Issue
Block a user