Vue.js Demo Quiz

by Olga Filipova

HTML

<script src="https://unpkg.com/vue@2.3.4"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div id="app" class="container">
  <h2 class="text-center">Quiz</h2>
    <form>
      <question v-for="question in questions" 
        :question="question.text" 
        :options="question.options">
      </question>
    </form>
  </div>

CSS

#app {
  width: 60%;
}

JavaScript

/**
 * Option to display in the quiz
 */
var questionOption = {
  template: `
    <div class="form-group checkbox" :class="{'has-success': isSuccess, 'has-danger': isDanger}">
      <label class="form-control-label" >
        <input v-model="checked" type="checkbox"> {{text}}
      </label>
    </div>
  `,
  data () {
    return {
      checked: false
    }
  },
  props: ['text', 'correct'],
  computed: {
    isSuccess () {
      return this.correct && this.checked
    },
    isDanger () {
      return !this.correct && this.checked
    }
  }
};
/**
 * Question to display in the quiz
 */
var question = {
  template: `
    <div>
      <h5>{{question}}</h5>
      <question-option v-for="option in options" :text="option.text" :correct="option.correct"></question-option>
      <hr/>
    </div>
  `,
  props: ['question', 'options'],
  components: {
    questionOption
  }
};
/**
 * Instantiate vue
 */
new Vue({
  el: '#app',
  data: {
    questions: [
      {
        text: 'Is Vue.js awesome?',
        options: [
          {
            text: 'Yes!',
            correct: true
          },{
            text: 'Yes sure!',
            correct: true
          },
          {
            text: 'Of course it is!',
            correct: true
          }
        ]
      },
      {
        text: 'Is it possible to use JSX within Vue.js single file components?',
        options: [
          {
            text: 'No, JSX is about React',
            correct: false
          },{
            text: 'Yes',
            correct: true
          }
        ]
      },
      {
        text: 'What should v-on directive used for?',
        options: [
          {
            text: 'It should be used to put something on something else',
            correct: false
          },{
            text: 'It should be used to bind events to methods',
            correct: true
          }
        ]
      },
      {
        text: 'What is the extension of Vue.js single file components?',
        options: [
   ...