LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#quizzer{
  position: relative
}
button{
    padding: 5px;
    margin: 5px;
    background-color: #0fabff;
    border: 0 none;
    color: #FFF;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;

}
h4 {
  font-size: 24px;
  text-align: center;
}
.center{
      width: 170px;
    height: 170px;
    display: inline-block;
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    margin-top: 60px;
}
ul{
  display: inline-block;
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    margin-top: 60px;
}
li{
      text-decoration: none;
    list-style: none;
    display: block;
    padding: 10px;
    margin: 10px;
    background-color: #0fabff;
    color: #FFF;
    border-radius: 5px;
}
li.active{
    background-color: green;
}
button.send{
    position: absolute;
    top: 10%;
    right: 10%;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
button.back{
    position: absolute;
    top: 10%;
    left: 10%;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}


.VideoBg {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  .VideoBg video {
    position: absolute;
    top: 50%;
    left: 50%;
    visibility: hidden;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }

  .VideoBg__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
JS
const SHOW_SOUND_DEBUGGER = false

const SOUNDS = {
  /* MORE SOUNDS: 
  http://www.thesoundarchive.com/star-wars.asp
  http://www.findsounds.com/ISAPI/search.dll?keywords=Star+Wars
  */
  'GAME_START': {
    icon: 'deathstar',
    src: 'http://www.thesoundarchive.com/starwars/imperial_march.wav'
  },
  'GAME_WON': {
    icon: 'sw-alt',
    src: 'http://www.moviewavs.com/0053148414/WAVS/Movies/Star_Wars/starwars.wav'
  },
   'GAME_LOST': {
     /* imperial march */
    icon: 'trooper-ep7',

    src: 'http://www.thesoundarchive.com/starwars/imperial_march.wav'
  },
  
  /** OTHER SOUNDS **/
 'R2D2_a': {
    icon: 'r2d2-o',
    src:  'http://soundbible.com/mp3/R2D2%20Again-SoundBible.com-1304677791.mp3'
 },
  'R2D2_b': {
    icon: 'r2d2-o',
    src: 'http://www.waveevents.com/MyFilez/wavs/starwars/sentnc10.wav'
  },
  'R2D2_c': {
    icon: 'r2d2-o',
    src: 'http://www.waveevents.com/MyFilez/wavs/starwars/sentnc16.wav'
  },
  'R2D2_d': {
    icon: 'r2d2-o',
    src: 'http://www.waveevents.com/MyFilez/wavs/starwars/sentnc20.wav'
  },
  'R2D2_e': {
    icon: 'r2d2-o',
    src: 'http://www.galaxyfaraway.com/Sounds/R2D2.wav'
  },
  'YODA_LAUGH': {
    icon: 'yoda-2',
    src: 'http://www.galaxyfaraway.com/Sounds/YODA3.WAV'
  },
  'EWOK_1': {
    icon: 'wookie-2',
    src: 'http://www.galaxyfaraway.com/Sounds/EWOK.WAV'
  },
  'EWOK_2': {
    icon: 'wookie-2',
    src: 'http://www.galaxyfaraway.com/Sounds/ewok1.wav'
  },
  'CHEWBACCA': {
    icon: 'chewbacca',
    src: 'http://www.mediacollege.com/downloads/sound-effects/star-wars/chewbacca/chewbacca_01.wav'
  },
  'VADER_BREATH': {
    icon: 'darthvader-3',
    src: 'http://www.thesoundarchive.com/starwars/swvader02.wav'
  }, 
  'VADER_YOUR_FATHER': {
    icon: 'darthvader-o',
    src: 'http://www.wavsource.com/snds_2017-12-04_8268401740269038/movies/star_wars/your_father.wav'
  }
}

const questions = [
  {
    id: "q1",
    text: "Question 1?",
    type: "choice",
    sound: 'R2D2_a',
    options: [
      { text: "Option 1", id: "q1o1", correct: true },
      { text: "Option 2", id: "q1o2", correct: false },
      { text: "Option 3", id: "q1o3", correct: false }
    ]
  },
  {
    id: "q2",
    text: "Question 2?",
    type: "choice",
    sound: 'CHEWBACCA',
    options: [
      { text: "Option A", id: "q2o1", correct: false },
      { text: "Option B", id: "q2o2", correct: true },
      { text: "Option C", id: "q2o3", correct: false }
    ]
  },
  /*
  {
    id: "q3",
    text: "Question 3?",
    type: "input",
    correct: "is 3"
  }
  */
]

/**** CODE STARTS HERE ***/ 

Vue.config.debug = false
Vue.config.devtool = true

const { mapState, mapActions, mapGetters } = Vuex
const { get, trim, every } = _

const state = {
  sound: null,
  sounds: SOUNDS,
  started: false,
  soundDebugger: SHOW_SOUND_DEBUGGER,
  questions,
  question: {},
  answers: {}
}

const getters = {
  hasAnswer: state => questionId => !!state.answers[questionId],
  hasCorrectAnswer: state => questionId =>
    !!state.answers[questionId] && state.answers[questionId].correct,
  gameOver: state => {
    return state.started && state.questions.length === Object.keys(state.answers).length
  },
  gameWon: (state, {gameOver}) => {
    return gameOver && every(state.answers, answer => answer.correct)
  }
}

const mutations = {
  START_GAME(state) {
    state.sound = null
    state.question = null
    state.started = true
    state.answers = {}
  },
  PLAY_SOUND(state, name) {
    state.sound = name
  },
  PICK_QUESTION(state, questionId) {
    state.question = state.questions.filter(q => q.id === questionId)[0];
  },
  REMOVE_QUESTION(state) {
    state.question = null
  },
  ANSWER_QUESTION(state, option) {
    state.answers = {
      ...state.answers,
      [state.question.id]: {
        id: option.id,
        correct: option.correct
      }
    }
    state.question = null
  },
  ANSWER_TEXT_QUESTION(state, text) {
    state.answers = {
      ...state.answers,
      [state.question.id]: {
        text,
        correct: !!state.question.correct.match(trim(text))
      }
    }
    state.question = null
  }
}

const actions = {
  startGame({commit}) {
    commit('START_GAME')
  },
  playSound({commit}, name) {
    commit('PLAY_SOUND', name)
  },
  pickQuestion({ commit }, questionId) {
    commit("PICK_QUESTION", questionId)
  },
  removeQuestion({commit}) {
    commit("PICK_QUESTION", null)
  },
  answerQuestion({ getters, commit }, option) {
    commit("ANSWER_QUESTION", option)
  },
  answerTextQuestion({ commit }, text) {
    commit("ANSWER_TEXT_QUESTION", text)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

const QuizGame = {
  template: '#quiz-game',
  computed: {
    ...mapGetters({
      showGameOver: 'gameOver'
    }),
    ...mapState({
      showMenu: state => !state.started,
      showQuestion: state => state.started && state.question,
      showQuizList: state => !state.question,
      showSoundDebugger: state => state.soundDebugger
    })
  }
}

const GameMenu = {
  name: 'v-game-menu',
  template: '#game-menu',
  methods: {
    ...mapActions([ 'startGame', 'playSound' ]), 
    start () {
      this.startGame()
      this.playSound('GAME_START')
    }
  }
}

const GameOver = {
  template: '#game-over',
  methods: {
    ...mapActions(['startGame', 'playSound']),
    start () {
      this.startGame()
      this.playSound('GAME_START')
    }
  },
  mounted () {
     if(!this.gameOver) return  
       
      if(this.gameWon) {
          this.playSound('GAME_WON')
        } else {
          this.playSound('GAME_LOST')
        }
  },
  computed: {
    ...mapGetters(['gameWon', 'gameOver'])   
  }
}

const QuizList = {
  template: "#quiz-list",
  data() {
    return {}
  },
  methods: {
    ...mapActions(["pickQuestion"])
  },
  computed: {
    ...mapGetters(['gameOver']),
    ...mapState(['answers', 'questions' ])
  }
}

const QuestionCheck = {
  template: "#question-check",
  props: ["question"],
  computed: {
    ...mapGetters(["hasAnswer", "hasCorrectAnswer"])
  }
}

const Question = {
  template: "#question",
  data() {
    return {
      selectedOption: null,
      answer: ""
    }
  },
  mounted() {
    if (this.question.sound) {
      this.playSound(this.question.sound)
    }
  },
  methods: {
    ...mapActions(["answerTextQuestion", "answerQuestion", "removeQuestion", "playSound"]),
    selectOption (option) {
      this.selectedOption = option
    },
    isSelected (option) {
      return this.selectedOption && this.selectedOption.id === option.id
    }
  },
  computed: {
    buttonLabel() {
      return question.buttonLabel || "Enviar"
    },
    isInput() {
      return this.question.type === "input"
    },
    hasOptions() {
      return get(this.question, "options.length", 0)
    },
    optionList() {
      return get(this.question, "options")
    },
    ...mapState([ 'question' ])
  }
}

const SoundPlayer = {
  template: '
', data () { return { active: null, playlist: {} } }, mounted() { this.playlist = Object.keys(this.sounds).reduce((playlist, key) => { playlist[key] = new Howl({ src: this.sounds[key].src, html5: true }) return playlist }, {}) }, watch: { sound(val) { this.playSound(val) this.active = val } }, methods: { playSound (name) { this.stopSound() if (name && this.playlist[name]) { console.log('PLAYING', name) this.playlist[name].play() } }, stopSound() { if (!this.active || !this.playlist[this.active]) return this.playlist[this.active].stop() } }, computed: { ...mapState(['sounds', 'sound']) } } const SoundList = { template: '#sound-list', methods: { ...mapActions(['playSound']) }, computed: { ...mapState(['sounds']) } } const SwgIcon = { template: '#swg-icon', props: ['size', 'name'], computed: { classSize() { return this.size ? `swg-${this.size}x` : 'swg-3x' }, className() { return `swg-${this.name}` } } } const VideoBg = { template: '#video-bg', props: { sources: { type: Array, required: true }, img: { type: String } }, data () { return { videoRatio: null } }, mounted () { this.setImageUrl() this.setContainerHeight() if (this.videoCanPlay()) { this.$refs.video.oncanplay = () => { if (!this.$refs.video) return this.videoRatio = this.$refs.video.videoWidth / this.$refs.video.videoHeight this.setVideoSize() this.$refs.video.style.visibility = 'visible' } } window.addEventListener('resize', this.resize) }, beforeDestroy () { window.removeEventListener('resize', this.resize) }, methods: { resize () { this.setContainerHeight() if (this.videoCanPlay()) { this.setVideoSize() } }, videoCanPlay () { return !!this.$refs.video.canPlayType }, setImageUrl () { if (this.img) { this.$el.style.backgroundImage = `url(${this.img})` } }, setContainerHeight () { this.$el.style.height = `${window.innerHeight}px` }, setVideoSize () { var width, height, containerRatio = this.$el.offsetWidth / this.$el.offsetHeight if (containerRatio > this.videoRatio) { width = this.$el.offsetWidth } else { height = this.$el.offsetHeight } this.$refs.video.style.width = width ? `${width}px` : 'auto' this.$refs.video.style.height = height ? `${height}px` : 'auto' }, getMediaType (src) { return 'video/' + src.split('.').pop() } } } Vue.component('video-bg', VideoBg) // https://cdn.glitch.com/f9881ee8-f102-4fcb-9c80-a252ac07bc02%2Fbackground.mp4?1513248483194 Vue.component('v-sound-player', SoundPlayer) Vue.component('v-sound-list', SoundList) Vue.component('v-game-menu', GameMenu) Vue.component('v-quiz-game', QuizGame) Vue.component('v-quiz-list', QuizList) Vue.component('v-question-check', QuestionCheck) Vue.component('v-question', Question) Vue.component('v-game-over', GameOver) Vue.component('swg-icon', SwgIcon) const app = new Vue({ el: "#quizzer", store })

Description

A simple Quizz game.
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv