A quiz with 4 questions, just one is correct. This repository is an optional module for the "lerntools". For installation and configuration, please see the documentation in https://codeberg.org/lerntools/base
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

117 lines
3.7 KiB

<template>
<div>
<center class="my-4 form-signin" v-if="state=='login'">
<img class="my-2 loginIcon" src="../img/abcd.svg">
<warning-list v-if="warnings" :warnings="warnings"/>
<div>
<input class="form-control" v-model="nickname" :placeholder="$t('enter-nickname')"
:class="{'is-invalid':!$v(nickname,true,$consts.REGEX_NICKNAME)}">
<input class="form-control" v-show="showInputKey" v-model="key" :placeholder="$t('enter-key')" required>
</div>
<button class="my-2 btn btn-lg btn-primary btn-block" v-on:click="start()">{{$t('next')}}</button>
<p class="my-4">{{$t('author-info')}}</p>
</center>
<div v-if="state=='vote'">
<page-title :title="$t('title')"/>
<div class="container mt-3">
<div clas="form-group">
<button v-for="i in 4" class="btn bg-var text-white form-control vote" v-on:click="vote(i-1)">{{['A','B','C','D'][i-1]}}</button>
</div>
</div>
<modal-info v-show="message" v-on:close="message=''">
<p>{{message}}</p>
</modal-info>
</div>
</div>
</template>
<script>
import PageTitle from 'Main/components/PageTitle.vue';
import ModalInfo from 'Main/components/ModalInfo.vue';
import WarningList from 'Main/components/WarningList.vue';
import color from 'Main/js/color.js';
export default {
components: {WarningList, PageTitle, ModalInfo},
data: function() {
return {
warnings:[],
key:'',
nickname:'',
showInputKey:false,
state:'login',
message:'',
token:''
}
},
mounted: function() {
var key=this.$route.params.key;
if (key) this.key=key;
else this.showInputKey=true;
},
updated: function() {
color.setBgVar();
},
methods: {
start: function() {
this.$axios.post('abcd/part/login',{key:this.key, nickname:this.nickname}).then(response=> {
if (response.data[0]) this.warnings=response.data;
else {
this.state='vote';
this.token=response.data.token;
}
})
},
vote: function(num) {
this.$axios.post('abcd/part/vote', { option: num, key:this.key, nickname:this.nickname, token:this.token }).then(response=> {
if (response.data[0]) this.message=this.$t(response.data[0].msg);
else {
this.message=this.$t(response.data.message);
setTimeout(() => { this.message=''; }, 3000);
}
})
}
}
}
</script>
<style>
button.vote {height:4rem;font-size:200%;margin-bottom:1em}
</style>
<style src="Main/css/signin.css"/>
<i18n>
{
"de": {
"enter-nickname": "Wählen Sie einen beliebigen Spitznamen",
"enter-key": "Geben Sie den Schlüssel für das ABCD-Quiz ein",
"next": "Weiter",
"author-info": "Um als Autor Ihre ABCD-Quiz zu verwalten, melden Sie sich bitte zunächst an.",
"title": "ABCD-Quiz",
"invalid-option": "Ungültige Option",
"you-are-banned": "Sie wurden aus dem Spiel verbannt!",
"wait-for-question": "Bitte warten Sie, bis eine Frage erscheint!",
"already-answered": "Sie haben diese Frage bereits beantwortet!",
"save-error": "Fehler beim Speichern der Stimme - bitte versuchen Sie es gleich nocheinmal!",
"confirm-vote": "Stimme erfolgreich abgegeben!",
"already-running": "Dieses Quiz läuft leider bereits"
},
"en": {
"enter-nickname": "Please enter a nickname to take part in the quiz.",
"enter-key": "Please enter the key for the ABCD quiz:",
"next": "Next",
"author-info": "To authorize your ABCD quiz as an author, please log in.",
"title": "ABCD-Quiz",
"invalid-option": "Invalid option",
"you-are-banned": "They were banished from the game!",
"wait-for-question": "Please wait until a question appears!",
"already-answered": "You have already answered this question!",
"save-error": "Error saving vote - please try again!",
"confirm-vote": "Vote successfully!",
"already-running": "This quiz is already running"
}
}
</i18n>