Module 3 - Sample Quiz

Question 1

Assume link is defined according to the following Vue app definition fragment:

  data () {
      return { 
          link: { 
              name: "Duke", url: "https://duke.edu/"
          }
      };
  }

Why does this fragment not render a bullet with a hyperlink as expected?

  <a href="link.url">{{ link.name }}</a>

Check Answer

The v-bind:, or just :, is missing from in front of href attribute.

Question 2

Fill in the blank below to implement the addToCounter() method so that it adds the given amount to the app's counter field with data.

Fragment of the web page:

  <button @click="addToCounter(1)">Add 1</button>

Fragment of the Vue app definition:

  data () {
      return {
          counter: 19
      };
  },
  methods:{
      __________
  }

Check Answer

  addToCounter (amount) { 
      this.counter += amount;
  }

Question 3

Fill in the blanks below so that if a user types 10 into the field labeled A and 20 into the field labeled B , the area labeled A+B displays the arithmetic sum 30. You do not need to worry about cases where the fields A and B do not have numerical values. Only write code for the blank areas provided, and do not write mustache expressions more than 10 characters long (e.g., {{ thisIsTooLong }} ).

Fragment of the web page:

  <div id="app">
      <p>A: <input type="text" __________></p>
      <p>B: <input type="text" __________></p>
      <p>A+B: <span>__________ </span></p>
  </div>
  

Fragment of the Vue app definition:

  data () {
      return { a: "", b: "" };
  },
  computed: {
      aPlusB () { __________ }
  }

Check Answer

Blank 1: v-model="a"

Blank 2: v-model="b"

Blank 3: {{ aPlusB }}

Blank 4: return Number(this.a) + Number(this.b);

Question 4

This question has the same functionality as Question 3, but with different blanks to fill in. Only write code for the blank areas provided, and do not write mustache expressions more than 10 characters long (e.g., {{ thisIsTooLong }} ).

Fragment of the web page:

  <div id="app">
      <p>A: <input type="text" __________></p>
      <p>B: <input type="text" __________></p>
      <p>A+B: <span>__________ </span></p>
  </div>

Fragment of the Vue app definition:

  data () {
      return { a: "", b: "", ___________ };
  },
  watch: {
      _________
      _________
  }

Check Answer

Blank 1: v-model="a"

Blank 2: v-model="b"

Blank 3: {{ aPlusB }}

Blank 4: aPlusB: "";

Blank 5: a () { this.aPlusB = Number(this.a) + Number(this.b); }

Blank 6: b () { this.aPlusB = Number(this.a) + Number(this.b); }

Question 5

Fill in the blank so that the user’s input is properly shown in/captured into the answer fields of objects in the capitals array in the data object.

Fragment of the web page:

  <div v-for="(state, i) in capitals" :key="i">
      <div>
          Capital of {{ state.abbreviation }} is?
          <input type="text" _________>
      </div>
  </div>

Fragment of the Vue app definition:

  data () {
      return { 
          capitals: [
              { abbreviation: "NC",  answer: "Raleigh" },
              { abbreviation: "VA",  answer: "" }
          ]
      };
  }

Check Answer

v-model="state.answer"

Question 6

Write a v-for loop that renders each element of fibonacci() out in its own <div> tag and makes the even numbers bold.

Fragment of the web page:

  <div id="app">
      __________
  </div>

Fragment of the Vue app definition:

  methods: {
      fibonacci () {
          return [ 1, 1, 2, 3, 5, 8 ];
      }
  }

Check Answer

  <div v-for="(n, i) in fibonacci()" :key="i">
      <b v-if="n % 2 === 0">{{ n }}</b>
      <span v-else>{{ n }}</span>
  </div>

Question 7

Rewrite the following to be easier to read using v-if / v-else-if / v-else (assume that there are no errors in the original code and that angle represents a valid number). You can use as many <span> tags as needed.

  <span>{{ angle == 90 ? 'right' : (angle < 90 ? 'acute' : 'obtuse') }}</span>

Check Answer

  <span v-if="angle == 90">
      right
  </span>
  <span v-else-if="angle < 90">
      acute
  </span>
  <span v-else>
      obtuse
  </span>

Question 8

Rewrite the following to be easier to read using v-for ’s (assume that there are no errors in the original code). You can use as many <span> tags as needed, and do not worry about spacing.

  <span>{{ [1, 2, 3, 4].map(a => [1, 2, 3, 4].map(b => `${a}*${b}=${a * b}`).join('')).join('') }}</span>

Check Answer

  <span v-for="a in [1, 2, 3, 4]" :key="a">
      <span v-for="b in [1, 2, 3, 4]" :key="b">
          {{ a }}*{{ b }}={{ a * b }}
      </span>
  </span>

Question 9

Explain why the mustache expression {{ square() }} will not render to 100 .

Fragment of the Vue app definition:

  data () {
      return { a: 10 };
  },
  methods: {
      square () { return a * a; }
  },

Check Answer

Missing this. in front of references to a in square() method.

Question 10

Complete the code inside the given li tag such that the service's name is displayed and it is always styled with the class "service" and also with the class "active" only when the boolean isActive is true.

Fragment of the web page:

  <li
    @click="toggleActive(service)"
    v-for="(service, i) in services"
    key="i"
   >
     ______________
  </li>

Fragment of the Vue app definition:

  data () {
      return {
          services: [
              { name: 'Grooming', isActive: true },
              { name: 'Washing', isActive: false }
          ]
      };
  },
  methods: {
      toggleActive (service) {
          service.isActive = !service.isActive;
      }
  }

Check Answer

  <span
      class="service"
      :class="{ active: service.isActive}"
  >
      {{ service.name }}
  </span>

Question 11

Describe one benefit programmers get from using a framework that supports reactivity.

Check Answer

Program logic can be written more clearly based on a centralized data model rather than by trying to carefully extract data, such as user input, from the web page DOM.

Question 12

Which of the following are recommended “best practice” ways to declare variables in JavaScript?

1. let
2. const
3. var
4. (no keyword in front)

Check Answer

1 and 2 (const is the same as let except you cannot assign new values to the variable again)