Why doesn't my javascript quiz load properly?

Question

I am trying to make a simple quiz. Somehow I always have an error

"Vue is not defined"

However, it actually is defined right there. I don't exactly undertand what is the reason. The website link is here . The script is right in a head of the page. I have tried to use javascript code as a separate file, but the error is the same. I am a novice in javascript, so any help would be really appreciated.

"use strict";

window.onload = function() {

  var quiz = {
    title: 'What superhero are you?',

    questions: [{
        text: "How would you describe your personality?",
        responses: [{
            text: 'Im serious and dark',
            value: 'Batman'
          },
          {
            text: 'Arrogant, but charming',
            value: 'Superman'
          },
          {
            text: 'Fun and easy going',
            value: 'The Flash'
          }
        ]
      },
      {
        text: "Why did you want to become a superhero?",
        responses: [{
            text: 'For the thrills',
            value: 'The Flash'
          },
          {
            text: 'For justice',
            value: 'Batman'
          },
          {
            text: 'For popularity',
            value: 'Superman'
          }
        ]
      },
      {
        text: "Who would you most hang around with?",
        responses: [{
            text: 'Wonder Woman',
            value: 'Superman'
          },
          {
            text: 'Green Arrow',
            value: 'The Flash'
          },
          {
            text: 'Robin',
            value: 'Batman'
          }
        ]
      },
      {
        text: "What's your favourite colour?",
        responses: [{
            text: 'Black',
            value: 'Batman'
          },
          {
            text: 'Red',
            value: 'The Flash'
          },
          {
            text: 'Blue',
            value: 'Superman'
          }
        ]
      },
      {
        text: "When do you help people?",
        responses: [{
            text: 'Every chance I can',
            value: 'The Flash'
          },
          {
            text: 'At night',
            value: 'Batman'
          },
          {
            text: 'When they need me to',
            value: 'Superman'
          }
        ]
      },
    ]
  };


  var app = new Vue({
    el: '#app',
    data: {
      quiz: quiz,
      questionIndex: 0,
      userResponses: Array()
    },
    methods: {
      // Go to next question
      next: function() {
        this.questionIndex++;
        console.log(this.userResponses);
      },
      // Go to previous question
      prev: function() {
        this.questionIndex--;
      },
      score: function() {
        //find the highest occurence in responses
        var modeMap = {};
        var maxEl = this.userResponses[0],
          maxCount = 1;
        for (var i = 0; i < this.userResponses.length; i++) {
          var el = this.userResponses[i];
          if (modeMap[el] == null)
            modeMap[el] = 1;
          else
            modeMap[el]++;
          if (modeMap[el] > maxCount) {
            maxEl = el;
            maxCount = modeMap[el];
          }
        }
        return maxEl;
      }
    }
  });
}

Answer 1

If you'll check the source code of your site You will see script for Vue is not loaded. So giving error Vue is not defined. Add below script in head of your page.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

You can read here , how to use Vue in your project.

Answer 2

You are actually not loading Vue. Make sure to load Vue before instantiating an instance of it.

You can either load the script using a CDN, as Ashish showed, or save the script to your local machine, and including it in your page.

<script src="/js/vue-2.5.22.min.js" type="text/javascript"/>

Where /js/vue-2.5.22.min.js is the relative path to the location of Vue.