MAD Study Hub

Home / Past papers / MAD2 Quiz 1 / this paper

2024 Oct27: - 27 Oct 2024

MAD2 Quiz 116 questions50 marks11 MCQ · 5 MSQ
Elapsed 00:00
Q1MCQ2 marks
question figure
Text of the picture (copyable)
Consider the following HTML, with the correct Vue 2 CDN links included.

```html
<body>
    <div id="app" :class="['box', { active: isActive }]">
        Vue Component
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    isActive: false,
                };
            },
        });
    </script>
</body>
```

What will be the final rendered class attribute of the `<div>` ?
  1. box
  2. active
  3. box active
  4. box inactive
Q2MCQ2 marks
Which of the following is an example of ephemeral state in a web application?
  1. A user's authentication token stored in local storage
  2. A form input value that changes as the user types
  3. The list of favorite items saved in a user's profile
  4. A shopping cart saved between sessions
Q3MCQ3 marks
question figure
Text of the picture (copyable)
Consider the following JavaScript code

```javascript
const juices = [
  { id: 1, name: "grape", rating: 8.1 },
  { id: 2, name: "apple", rating: 5.0 },
  { id: 3, name: "orange", rating: 6.9 },
  { id: 4, name: "banana", rating: 10 },
]

mapping = { "4": 1, "3": 2, "2": 3, "1": 4 }

juices.map((juice) => { return { ...juice, rank: mapping[juice.id] } })
  .sort(((a, b) => a.rank - b.rank)
  .map((juice) => { console.log(juice.name) }))
```

What will be the output of the code?
  1. question figure
    text
    apple
orange
grape
banana
  2. question figure
    text
    banana
grape
orange
apple
  3. question figure
    text
    banana
orange
apple
grape
  4. question figure
    text
    undefined
Q4MCQ3 marks
question figure
Text of the picture (copyable)
Consider the following JavaScript code snippet

```javascript
var name = 'Taylor'

const person = {
    name: 'Jeremy',
    talk() {
        return () => `${this.name} says Hello!`
    }
}

talkReturn = person.talk()
console.log(talkReturn())
```

What will be the output of the code?
  1. undefined says Hello!
  2. Jeremy says Hello!
  3. Taylor says Hello!
  4. ReferenceError
Q5MCQ3 marks
question figure
Text of the picture (copyable)
Consider the following code snippet

```javascript
function createCounter() {
  let count = 0;

  return function() {
    count++;
    setTimeout(() => {
      console.log(count);
    }, 1000);
  };
}

const counter = createCounter();
counter();
counter();
counter();
```

What will be the output after 1 second?
  1. question figure
    text
    1
  2. question figure
    text
    1
1
1
  3. question figure
    text
    1
2
3
  4. question figure
    text
    3
3
3
Q6MCQ3 marks
question figure
Text of the picture (copyable)
Consider the below javascript program.

```javascript
const obj = {
  a: 10,
  b() {
    return this.a;
  }
};

const c = obj.b;
const d = obj.b.bind(obj);

console.log(c(), d());
```

What will be the output of the above program?
  1. 10 10
  2. undefined 10
  3. 10 undefined
  4. undefined undefined
  5. Error
Q7MCQ3 marks
question figure
Text of the picture (copyable)
Consider the below Vue component.

```html
<template>
  <div>
    <p>{{ computedMessage }}</p>
    <button @click="update">Update</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Initial'
      };
    },
    computed: {
      computedMessage() {
        return this.message + ' - Computed';
      }
    },
    methods: {
      update() {
        this.message = 'Updated';
      }
    }
  };
</script>
```

What will be displayed in the `<p>` element, after the button with text "Update" is clicked?
  1. "Initial - Computed"
  2. "Updated - Computed"
  3. "Initial - Computed Updated"
  4. "Updated"
Q8MCQ4.5 marks
question figure
Text of the picture (copyable)
Consider the following HTML, with the correct Vue 2 CDN links included.

```html
<body>
    <div id="app">
        <p>pineapple 🍍</p>
        <button @click="addPineapple">Buy</button>
        <p>Amount : {{amount}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    amount: '',
                    price: 40,
                }
            },
            methods: {
                addPineapple() {
                    this.amount += this.price;
                }
            }
        })
    </script>
</body>
```

What will be shown in the amount placeholder when the Buy button is clicked two times?
  1. 40
  2. 80
  3. 4040
  4. undefined
Q9MCQ4.5 marks
question figure
Text of the picture (copyable)
Consider the following HTML, with the correct Vue 2 CDN links included.

```html
<div id="app">
    <p>Original Order: {{ customerOrder }}</p>
    <p>Updated Order: {{ updatedOrder }}</p>
    <server-component :order="customerOrder"
    @order-updated="updateOrder"></server-component>
</div>

<script>
    Vue.component('server-component', {
        props: ['order'],
        template: `
            <div>
                <button @click="modifyOrder">Send Updated Order</button>
            </div>
        `,
        methods: {
            modifyOrder() {
                this.$emit('order-updated', this.order + ' - Extra mayo');
            }
        }
    });

    new Vue({
        el: '#app',
        data() {
            return {
                customerOrder: 'Burger',
                updatedOrder: ''
            }
        },
        methods: {
            updateOrder(newOrder) {
                this.updatedOrder = newOrder;
            }
        }
    });
</script>
```

What will be displayed in the `<p>` tags after the button on the `server-component` is clicked?
  1. question figure
    text
    Original Order: Burger
Updated Order:
  2. question figure
    text
    Original Order:
Updated Order:
  3. question figure
    text
    Original Order: Burger
Updated Order: - Extra mayo
  4. question figure
    text
    Original Order: Burger
Updated Order: Burger - Extra mayo
Q10MCQ4.5 marks
question figure
Text of the picture (copyable)
Consider the below javascript program.

```javascript
const numbers = [10, 20, 30];
const modifiedNumbers = numbers.reduce((acc, num) => {
    if (num % 2 === 0) {
        acc.push(num * 2);
    } else {
        acc.push(num / 2);
    }
    return acc;
}, []);

const finalOutput = modifiedNumbers.filter(num => num > 20);
console.log(finalOutput);
```

What will be the output of the above program?
  1. []
  2. [10, 20, 30]
  3. [20, 40, 60]
  4. [40, 60]
  5. [40]
Q11MCQ4.5 marks
question figure
Text of the picture (copyable)
Consider the below Vue component.

```html
<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
      filterActive: true,
    };
  },
  computed: {
    filteredItems() {
      return this.filterActive
        ? this.items.filter((item) => item.id !== 2)
        : this.items;
    },
  },
};
</script>
```

What will be displayed in the `<ul>` when filterActive is true?
  1. Item 1, Item 3
  2. Item 2
  3. Item 1, Item 2, Item 3
  4. The list will be empty.
Q12MSQ3 marksselect all that apply
Which of the following statements is/are true about JavaScript’s “this” keyword behavior in different contexts?
  1. In a regular function call, “this” refers to the global object in non-strict modeand “undefined” in strict mode.
  2. In an arrow function, “this” is lexically inherited from the enclosing executioncontext.
  3. Inside a method of an object, “this” always refers to the object itself,regardless of how the method is called.
  4. The value of “this” can be explicitly set using “call()”, apply(), or “bind()”methods, inside a method of an object.
Q13MSQ3 marksselect all that apply
Considering the differences between “var”, “let”, and “const” in terms of scope, hoisting, and reassignment, which of the following statements is/are true?
  1. “var” is function-scoped, hoisted, and allows reassignments.
  2. “let” is block-scoped, hoisted, and allows reassignments.
  3. “const” is block-scoped, hoisted, does not allow reassignments, and its valuemust be assigned at the time of declaration.
  4. “let” and “const” behave identically except that const variables cannot beredeclared, while let variables can be redeclared in the same block.
Q14MSQ3 marksselect all that apply
Which of the following statements is/are true?
  1. call() and apply() immediately invoke the function, while bind() returns a newfunction that can be called later.
  2. call() accepts arguments as a comma-separated list, whereas apply() accepts asingle array of arguments.
  3. bind() permanently sets the “this” context for a function, but the resultingfunction must still be explicitly called to execute.
  4. All three methods are used to permanently change the “this” context offunctions.
Q15MSQ2 marksselect all that apply
Which of the following scenario(s) represent ephemeral state(s) in a web application?
  1. The user's current scroll position on a webpage.
  2. The user's authentication token, saved in localStorage.
  3. The temporary state of a dropdown menu.
  4. All of these
Q16MSQ2 marksselect all that apply
What are the differences between Vue's computed properties and methods?
  1. Computed properties are cached based on their reactive dependencies,whereas methods are recalculated every time they are called.
  2. Methods can be used to perform operations that do not need to be cached.
  3. Computed properties can be used as methods if they require parameters.
  4. Methods are always reactive and update automatically when theirdependencies change.

Answer key

  1. Q1 (MCQ, 2 marks): A
  2. Q2 (MCQ, 2 marks): B
  3. Q3 (MCQ, 3 marks): C
  4. Q4 (MCQ, 3 marks): B
  5. Q5 (MCQ, 3 marks): D
  6. Q6 (MCQ, 3 marks): B
  7. Q7 (MCQ, 3 marks): B
  8. Q8 (MCQ, 4.5 marks): C
  9. Q9 (MCQ, 4.5 marks): D
  10. Q10 (MCQ, 4.5 marks): D
  11. Q11 (MCQ, 4.5 marks): A
  12. Q12 (MSQ, 3 marks): A, B, D
  13. Q13 (MSQ, 3 marks): A, B, C
  14. Q14 (MSQ, 3 marks): A, B, C
  15. Q15 (MSQ, 2 marks): A, C
  16. Q16 (MSQ, 2 marks): A, B

Concepts this paper tests

Auto-generated summary from the source site. Handy as a checklist; the lessons above explain each idea from scratch.

Summary of Core Topics, Concepts, Principles, and Equations

JavaScript

  1. this Keyword Behavior

    • Regular Function Call: this refers to the global object in non-strict mode and undefined in strict mode.
    • Arrow Function: this is lexically inherited from the enclosing execution context.
    • Object Method: this refers to the object itself, but this can be overridden by how the method is called.
    • Explicit Setting: The value of this can be explicitly set using call(), apply(), or bind() methods.

  1. Variable Declarations

    • var: Function-scoped, hoisted, allows reassignments.
    • let: Block-scoped, hoisted, allows reassignments.
    • const: Block-scoped, hoisted, does not allow reassignments, must be assigned at the time of declaration.

  1. Function Methods

    • call() and apply(): Immediately invoke the function. call() accepts arguments as a comma-separated list, whereas apply() accepts a single array of arguments.
    • bind(): Returns a new function that can be called later, permanently setting the this context.

  1. Asynchronous Operations

    • setTimeout: Executes a function after a specified delay.
    • Closures: Functions that have access to their own scope, the outer function’s scope, and the global scope.

  1. Array Methods

    • map(): Creates a new array with the results of calling a provided function on every element in the array.
    • filter(): Creates a new array with all elements that pass the test implemented by the provided function.
    • reduce(): Executes a reducer function on each element of the array, resulting in a single output value.
    • sort(): Sorts the elements of an array in place and returns the array.

Vue.js

  1. Dynamic Class Binding

    • Syntax: :class="['box', { active: isActive }]"
    • The box class is always applied, while the active class is conditionally applied based on the value of isActive.

  1. Computed Properties vs Methods

    • Computed Properties: Cached based on their reactive dependencies, only recalculated when dependencies change.
    • Methods: Recalculated every time they are called, used for operations that do not need to be cached.

  1. Event Handling

    • Syntax: @click="methodName"
    • Used to handle user interactions like clicks.

  1. Component Communication

    • Props: Used to pass data from parent to child components.
    • Events: Used to emit events from child to parent components.

  1. Lifecycle Hooks

    • created: Called synchronously after the instance is created.
    • mounted: Called after the instance has been mounted.

Web Development Concepts

  1. Ephemeral State

    • Examples: User's current scroll position, temporary state of a dropdown menu.
    • Non-examples: User's authentication token, saved shopping cart.

  1. State Management

    • Managing state within components and across the application.