vue-buzzer-game - BUZZ the game!

Install

To install the buzzergame please include in your main.js following code:

import VueBuzzer from 'vue-buzzer.plugin'
Vue.use(VueBuzzer);

Game Setup

First of all, these routines have to insert in your App.vue:

// 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:

// run the game
this.$vueBuzzer.createGame()

Eventlisteners

The buzzergame works a lot with events.

Key events

General registred is the "keypress" event, which is for the buzzers

Custom events

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 toview-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} |

Hooks

To interrupt the state switch of the program, you can use hooks.

Usage

These hooks are functions, you have to overwrite:

this.$vueBuzzer.hookQuestionBeforeSwitchToAnswer = function (next) {
    
    // your code
    // alert("hello")
    
    next() // important: call the callback function
}

Available Hooks

hook | Description | Use case --- | --- | --- hookQuestionBeforeSwitchToAnswer | Before the event ```view-rightorview-wrong`` is called. | Animation, Data manipulation

Get data

To get Data, there are following functions:

Customize configuration

See Configuration Reference.