50 lines
2.0 KiB
HTML
50 lines
2.0 KiB
HTML
<!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/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" v-on:keyup.enter="enterGame">
|
|
<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" 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="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>
|
|
</article>
|
|
<footer class="footer">
|
|
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
|
|
</footer>
|
|
</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 class="score">Herzlichen Glückwunsch!<br/>Du hast insgesamt {{score}} Punkte erzielt.</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> |