pafeltowicz / warsawjs-workshop-12-quiz

Quiz game prepared for #VueJS workshops in Warsaw

warsawjs-workshop-12-be-a-milionaire

A Vue.js workshop project. Goal of this workshops is to create clone of the Be a Milionaire game. It's a very popular TV show, where contestants can win up to 1 mln $.

Rules

User will face set of 10-15 questions with increasing difficulty levels. Each question has 4 answers, only one correct. First incorrect answer ends game.

Vue.js features used in workshops

Template syntax

• interpolation (plus v-once)
• raw html v-html
• one-way binding v-bind (:)
• conditionals v-if / v-else / v-show
• events v-on (@)
• two-way binding v-model
• iteration v-for
• special directive v-cloak
• class and styles
• where to put javascript?
• transitions and animations

Components

• data
• methods
• computed
• watch
• slots (default / named)
• lifecycle
• nested components
• props
• single file components
• pure functional components

Reusability

• mixins
• plugins
• extends
• filters
• custom events
• custom model

Advanced

• render function
• reactivity in depth
• State management with bus

Vuex

• store structure
• access from components
• mutations
• actions
• getters
• namespaces

Router

• templates router-link and router-view
• defining routes name, path, component, children
• programmatic navigation $router.push and $router.go
• advanced - guards
• advanced - meta and multiple components

Tooling

• vue-cli

<<<<<<< HEAD

Start

To start, go to branch starting-point (here) and follow instructions in README.md file.

Workshop roadmap

• Introduction to Vue
• Installation of Vue Dev Tools
• standalone installation example
• Single File Components, webpack, vue-cli
• routing theory
• setup router
• create Intro route and add link from the main page
• create PlayView and add link from Intro
• create functional Layout for PlayView using slots
• load questions using API and created hook, add currency filter
• Game and QuestionsBar components, props, move currency filter to global scope
• option to answer question
• Vuex theory
• setup store, change structure of app, no namespacing yet
• implement quiz store, use it in components
• Narrow Layout
• Won and Lost Views
• Loading and StartGameButton components - render function, mixins
• Add settings store app + namespacing
• New view for settings, link from RulesView
• Custom v-model component - DifficultySlider
• RootGetters in quiz for accessing difficulty kept in settings store
• Transitions on routes and questions

starting-point

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.