Plugin um ein konfigurierbares Buzzer-Game zu entwickeln
To install the buzzergame please include in your `main.js following code:
`javascript`
import VueBuzzer from 'vue-buzzer.plugin'
Vue.use(VueBuzzer);
First of all, these routines have to insert in your App.vue:
`javascript
// Add a language
this.$vueBuzzer.setLanguage("de")
// Add a Player (with Avatar)
this.$vueBuzzer.addPlayer({ de: "Spieler 1" }, "img/image.jpg")
// Multilingual
this.$vueBuzzer.addPlayer({ de: "Spieler 1", fr: "Joueur 1"}, "img/image.jpg")
// Add a Buzzer for the Player (has to be done for each Player) (in standard-language)
this.$vueBuzzer.addBuzzer("Player1", "buzzer1", "[key]", "#ff6900")
// Add a question catalogue
this.$vueBuzzer.addCatalog("cata1")
// Add a question to a catalogue
this.$vueBuzzer.addQuestion("cata1", "Question Text?", ["txt", "img", "video"], [
{"content": "./img/img.jpg", "is": true },
{"content": "./img/img.jpg", "is": false },
{"content": "./img/img.jpg", "is": false }
])
`
Finally when everything is set up, you can create the game:
`javascript`
// run the game
this.$vueBuzzer.createGame()
The buzzergame works a lot with events.
General registred is the "keypress" event, which is for the buzzers
A bunch of custom events ar registred to track of the state and to manage the UI. The following list ar all events which are available.
To control the Route use:
event-name | Emit Event | this.$vueBuzzer.next([...])
--- | --- | ---view-start-game | yes | required: next('view-sel-lang')view-sel-lang | yes | required: next('view-sel-cata')view-sel-cata | yes | required: next('view-player-ready')view-player-ready | yes | required: next('view-question')view-question | yes | event / optional: next() (eg. if time is expired)view-right | yes | required: next() (if there are unused Questions, redirects to view-question, if not to `view-result)view-wrong | yes | required: next() (if its the first time, the other user(s) have a chance to answer)view-nobody-was-right | yes | required: next() (if there are unused Questions, redirects to view-question, if not to view-result)view-question-end | no | required: none (automatically forwards, when questions are available)view-result | yes | required: next('view-thankyou')view-thankyou | yes | required: next('[view-start-game / view-sel-lang / view-sel-cata / view-player-ready]')
To process specific events use:
event-name | Parameter | Description
--- | --- | ---player-registered | Nummber: Index of registred player |all-player-registered | - |buzzer-right | Object: {player: [0], buzzer: [1], question: true} |buzzer-wrong | Object: {player: [0], buzzer: [1], question: false} |
To interrupt the state switch of the program, you can use hooks.
These hooks are functions, you have to overwrite:
`javascript
this.$vueBuzzer.hookQuestionBeforeSwitchToAnswer = function (next) {
// your code
// alert("hello")
next() // important: call the callback function
}
`
hook | Description | Use case
--- | --- | ---
hookQuestionBeforeSwitchToAnswer | Before the event `view-right or view-wrong` is called. | Animation, Data manipulation
To get Data, there are following functions: