75 lines
3.4 KiB
HTML
75 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WIAI-Weihnachtsquiz</title>
|
|
<link href="css/fonts.css" rel="stylesheet"/>
|
|
<link href="css/style.css" rel="stylesheet"/>
|
|
</head>
|
|
<body>
|
|
<main id="app">
|
|
<section v-if="mode === STARTSCREEN" class="start-screen screen">
|
|
<img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
|
|
<h1 class="headline">Willkommen zum WIAI-Weihnachtsquiz!</h1>
|
|
<button v-on:click="enterGame" class="btn-start" v-focus v-on:keyup.enter="enterGame">Starten</button>
|
|
</section>
|
|
|
|
<section v-if="mode === INGAME" class="ingame-screen screen">
|
|
<header class="header">
|
|
<h1 class="headline">WIAI-Weihnachtsquiz</h1>
|
|
<p v-bind:class="{score: true, focus: currentQuestionAnswered && currentScore > 0}">
|
|
<strong>Score</strong>: {{score}} Punkte
|
|
<span class="question-score" v-if="currentQuestionAnswered">
|
|
(<strong>
|
|
+ {{currentScore}}
|
|
</strong>)
|
|
</span>
|
|
</p>
|
|
</header>
|
|
|
|
<article v-if="isChoice" class="question choice" v-bind:class="{revealed: currentQuestionAnswered}">
|
|
<h2 class="question-text">{{currentQuestion.text}}</h2>
|
|
<div class="question-answers">
|
|
<button
|
|
v-for="answer in currentQuestion.answers"
|
|
v-bind:disabled="currentQuestionAnswered"
|
|
@click="evaluateChoice(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>
|
|
|
|
<article v-if="isEstimate" class="question estimate" v-bind:class="{revealed: currentQuestionAnswered}">
|
|
<h2 class="question-text">{{currentQuestion.text}}</h2>
|
|
<div class="question-estimate">
|
|
<input value="" id="input-estimate" type="number"
|
|
min="0" class="input-estimate" @v-on:keyup.enter="evaluateEstimate" v-bind:disabled="currentQuestionAnswered" v-focus/>
|
|
<input type="submit" @click="evaluateEstimate" class="btn-submit-estimate" v-bind:disabled="currentQuestionAnswered" value="Auswerten"/>
|
|
</div>
|
|
|
|
<div v-bind:class="{'visible': currentQuestionAnswered, 'question-result-wrapper': true}">
|
|
<div v-bind:class="{'question-result': true}">
|
|
<div class="correct-result"></div>
|
|
<div class="estimate"></div>
|
|
</div>
|
|
</div>
|
|
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
|
|
</article>
|
|
</section>
|
|
|
|
<section v-if="mode === ENDSCREEN" class="end-screen screen">
|
|
<img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
|
|
<h1 class="headline">WIAI-Weihnachtsquiz</h1>
|
|
<p v-if="score > 0" class="score">Herzlichen Glückwunsch!<br/>Du hast insgesamt <strong>{{score}} von {{questions.length * 3}}</strong> möglichen Punkten erzielt.</p>
|
|
<p v-else class="score">Jammerschade!<br/>Beim nächsten Mal klappt es sicher besser.</p>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="js/vue.min.js"></script>
|
|
<script src="js/questions.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |