Consider the following Vue application with markup “index.html” and javascript file “app.js”. index.html: Header Content Footer Content app.js: const main = { template : Main Content } const comp = { 'main' : main } new Vue({ el : "#app" }) If the file “index.html” is opened with the help of a browser. What will be rendered on the browser?

(C) Header Content\ Footer Content

(A) Header Content\ Main Content\ Footer Content

(B) The app will show a warning, and nothing will be shown on the browser.

(D) The app will not show any warning, but nothing will be shown on the browser.

Consider the following Vue application with markup “index.html” and javascript file “app.js”. index.html: Number : {{total_num}} Click Me app.js: new Vue({ el : "#app", data : { num : 10 }, computed : { total_num : function () { return this.num % 3 == 0 ? this.num 3 + 5 : this.num / 4 + 6; } }, methods : { update_num : function () { this.num = this.num < 10 ? this.num 4 + 1 : this.num 3 - 5; } } }) If the file “index.html” is opened with the help of a browser. What will be rendered on the browser (excluding the button) for the first time and after clicking the button with the text “Click Me” twice?

(A) Before Click: Number : 8.5\ After Click: Number : 23.5

(B) Before Click: Number : 8.5\ After Click: Number : 70

(C) Before Click: Number : 35\ After Click: Number : 23.5

(D) Before Click: Number : 35\ After Click: Number : 70

What will be logged on to the console, if the program written below is executed? function outer(x) { let a = 2 function inner(y) { function innerMost(z) { return x + y + z + a } return innerMost } return inner } console.log(outer(19)(20)(30))

(C) Will return a function reference

Consider the below javascript program, and predict the output, if executed. var num = 10 const obj1 = { num : 20, func : function (key) { let temp = () => { console.log("Number 1:", num, "Number 2:", this.num, "Sum:", this.num + num + key) } temp() } } const obj2 = { num : 30, func : function (key) { console.log("Function Called !!", key) } } new_func = obj1.func.bind(obj2, 40) new_func()

(B) Number 1: 10 Number 2: 30 Sum: 80

(A) Number 1: 10 Number 2: 20 Sum: 70

(C) Number 1: 20 Number 2: 20 Sum: 80

(D) Number 1: 20 Number 2: 30 Sum: 90

Consider the following Vue application with markup “index.html” and javascript file “app.js”. index.html: Total: {{total}} {{batsmans.strike.name}}: {{batsmans.strike.run}} {{batsmans.nonStrike.name}}: {{batsmans.nonStrike.run}} 1 2 app.js: class Player { constructor(name) { this.name = name this.run = 0 } } new Vue({ el: '#app', data: { batsmans: { strike: new Player('Rohit Sharma'), nonStrike: new Player('Virat Kohli'), }, total: 30, }, watch: { total(newRun, oldRun) { change = newRun - oldRun this.batsmans.strike.run += change if (change % 2 == 0) { this.changeStrike() } }, }, methods: { changeStrike() { temp = this.batsmans.strike this.batsmans.strike = this.batsmans.nonStrike this.batsmans.nonStrike = temp }, }, }) If the user clicks on the button with the text “2” twice and “1” once. What will be rendered inside the element with ID “total”, “strike”, and “non-strike”?

(D) Total: 35, Rohit Sharma: 3, Virat Kohli: 2

(A) Total: 5, Virat Kohli: 0, Rohit Sharma: 5

(B) Total: 5, Rohit Sharma: 5, Virat Kohli: 0

(C) Total: 35, Virat Kohli:3, Rohit Sharma: 2

September 2022 term · Modern Application Development II · BSCS2006

MAD 2 Quiz 1: 16 October 2022 (September 2022 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 1 paper sat on 16 Oct 2022, in the September 2022 term: 16 questions for 50 marks in 120 minutes. Every question is below with its answer. Take it as a timed mock test to be marked, or read it through first.

Questions: 16
Marks: 50
Duration: 120 min
MCQ: 14
MSQ: 2

Take as mock test Practise with answers

Updated 25 Sept 2026

Official paper: IIT M QUIZ 1 FOUNDATION DAD DIPLOMA QPD2 16 Oct 2022 · No negative marking.

Question 1

+2 marksOne correct option

Which of the following statements is correct regarding javascript language?

A
The equality operator “==” is used to avoid coercion in the language.
B
A variable declared using the keyword “var” can be used anywhere in the program.
C
The keyword “break” is used to terminate the execution of the program in the language.
D
None of these

Show answer

Correct answer

D
None of these

Question 1 on its own page

Question 2

+2 marksOne correct option

Consider the following Vue application with markup “index.html” and javascript file “app.js”.

index.html:

html

1<div id = "app">
2      <h3> Header Content </h3>
3      <main></main>
4      <h3> Footer Content </h3>
5</div>
6<script src="app.js"></script>

app.js:

javascript

1const main = {
2    template : `
3                <div>
4                    <h3> Main Content </h3>
5                </div>
6                `
7
8}
9
10const comp = {
11    'main' : main
12}
13
14new Vue({
15    el : "#app"
16})

If the file “index.html” is opened with the help of a browser. What will be rendered on the browser?

A
Header Content
Main Content
Footer Content
B
The app will show a warning, and nothing will be shown on the browser.
C
Header Content
Footer Content
D
The app will not show any warning, but nothing will be shown on the browser.

Show answer

Correct answer

C
Header Content
Footer Content

Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the below javascript program, and predict the output, if executed.

javascript

1var num = 20;
2
3function demo () {
4    num = 50;
5
6    function num () {
7        console.log("Number is:", num)
8    }
9}
10demo()
11console.log("Number is:", num)

A
Number is: 20
B
Number is: 50
C
Number is: undefined
D
Number is:

Show answer

Correct answer

A
Number is: 20

Question 3 on its own page

Question 4

+3 marksOne correct option

Consider the following Vue application with markup “index.html” and javascript file “app.js”.

index.html:

html

1<div id = "app">
2        <h3>Number : {{total_num}}</h3>
3        <button @click = "update_num"> Click Me </button>
4</div>
5<script src="app.js"></script>

app.js:

javascript

1new Vue({
2    el : "#app",
3    data : {
4        num : 10
5    },
6    computed : {
7        total_num : function () {
8            return this.num % 3 == 0 ? this.num * 3 + 5 : this.num / 4 + 6;
9        }
10    },
11    methods : {
12        update_num : function () {
13            this.num = this.num < 10 ? this.num * 4 + 1 : this.num * 3 - 5;
14        }
15    }
16})

If the file “index.html” is opened with the help of a browser. What will be rendered on the browser (excluding the button) for the first time and after clicking the button with the text “Click Me” twice?

A
Before Click: Number : 8.5
After Click: Number : 23.5
B
Before Click: Number : 8.5
After Click: Number : 70
C
Before Click: Number : 35
After Click: Number : 23.5
D
Before Click: Number : 35
After Click: Number : 70

Show answer

Correct answer

A
Before Click: Number : 8.5
After Click: Number : 23.5

Question 4 on its own page

Question 5

+3 marksOne correct option

What will be logged on to the console, if the program written below is executed?

javascript

1{
2  let x = 10
3  {
4    let getNum = () => {
5      return x + 10
6    }
7  }
8  console.log(getNum())
9}

A
10
B
NaN
C
Undefined
D
ReferenceError

Show answer

Correct answer

D
ReferenceError

Question 5 on its own page

Question 6

+3 marksOne correct option

What will be logged on to the console, if the program written below is executed?

javascript

1function outer(x) {
2  let a = 2
3  function inner(y) {
4    function innerMost(z) {
5      return x + y + z + a
6    }
7    return innerMost
8  }
9  return inner
10}
11console.log(outer(19)(20)(30))

A
Undefined
B
NaN
C
Will return a function reference
D
71

Show answer

Correct answer

D
71

Question 6 on its own page

Question 7

+3 marksOne correct option

What will be logged on to the console, if the program written below is executed?

javascript

1let x = 10
2var y = 10,
3  z = 10
4{
5  let x = 20
6  var y = 20
7  function test() {
8    var z = 20
9  }
10}
11console.log(x, y, z)

A
10 20 10
B
20 20 20
C
10 20 20
D
10 10 10

Show answer

Correct answer

A
10 20 10

Question 7 on its own page

Question 8

+3 marksOne correct option

What will be logged on to the console, if the program written below is executed?

javascript

1const obj1 = { x: 10, y: 20 },
2  obj2 = { x: 30, y: 40 }
3
4function area() {
5  return this.x * this.y
6}
7
8function test() {
9  return area.call(obj2)
10}
11
12console.log(test.call(obj1), test.call(obj2))

A
200, 1200
B
1200, 200
C
1200, 1200
D
200, 200

Show answer

Correct answer

C
1200, 1200

Question 8 on its own page

Question 9

+3 marksOne correct option

What will be logged on to the console, if the program written below is executed?

javascript

1class Circle {
2  constructor(r) {
3    this.r = r
4  }
5}
6
7Circle.prototype.area = function () {
8  return 3.14 * this.r
9}
10
11const obj1 = new Circle(2)
12console.log(
13  Circle.prototype === obj1.__proto__.__proto__,
14  Circle.prototype === obj1.__proto__
15)

A
false false
B
false true
C
true true
D
true false

Show answer

Correct answer

B
false true

Question 9 on its own page

Question 10

+3 marksOne correct option

Consider the following Vue app with markup “index.html” and javascript file “app.js”.

index.html:

html

1<html lang="en">
2  <head>
3    <style>
4      .dark-mode {
5        color: white;
6        background-color: black;
7      }
8    </style>
9  </head>
10  <body>
11    <div id="app">
12      <h1 :class="{'dark-mode': darkMode}">IITM online degree</h1>
13    </div>
14    <script
15src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
16    <script src="app.js"></script>
17  </body>
18</html>

app.js:

javascript

1new Vue({
2  el: '#app',
3  name: 'app',
4  data: {
5    darkMode: false,
6  },
7  beforeCreate() {
8    this.darkMode = true
9  },
10})

What will be the text colour and background colour of text “IITM Online degree”, assuming a normal browser is used, which shows black coloured text on a white background?

A
Black, White
B
White, Black
C
Black, Black
D
White, White

Show answer

Correct answer

A
Black, White

Question 10 on its own page

Question 11

+4.5 marksOne correct option

Consider the below javascript program, and predict the output, if executed.

javascript

1var num = 10
2
3const obj1 = {
4    num : 20,
5    func : function (key) {
6        let temp = () => {
7            console.log("Number 1:", num, "Number 2:", this.num, "Sum:",
8this.num + num + key)
9        }
10        temp()
11    }
12}
13
14const obj2 = {
15    num : 30,
16    func : function (key) {
17        console.log("Function Called !!", key)
18    }
19}
20
21new_func = obj1.func.bind(obj2, 40)
22new_func()

A
Number 1: 10 Number 2: 20 Sum: 70
B
Number 1: 10 Number 2: 30 Sum: 80
C
Number 1: 20 Number 2: 20 Sum: 80
D
Number 1: 20 Number 2: 30 Sum: 90

Show answer

Correct answer

B
Number 1: 10 Number 2: 30 Sum: 80

Question 11 on its own page

Question 12

+4.5 marksOne correct option

What will be logged on to the console, if the program written below is executed.

javascript

1function getY() {
2  return () => this.y
3}
4
5const Obj1 = {
6  y: 15,
7  getY: getY,
8  obj3: {
9    y: 45,
10    getY: getY,
11  },
12}
13
14console.log(Obj1.obj3.getY()(), Obj1.getY()())

A
Undefined, Undefined
B
Undefined, 15
C
45, 15
D
45, Undefined

Show answer

Correct answer

C
45, 15

Question 12 on its own page

Question 13

+4.5 marksOne correct option

Consider the following Vue application with markup “index.html” and javascript file “app.js”.

index.html:

html

1<body>
2    <div id="app">
3      <h3 id="total">Total: {{total}}</h3>
4      <h4 id="strike">{{batsmans.strike.name}}: {{batsmans.strike.run}}</h4>
5      <h4 id="non-strike">{{batsmans.nonStrike.name}}:
6{{batsmans.nonStrike.run}}</h4>
7      <div>
8        <button @click="total+=1">1</button>
9        <button @click="total+=2">2</button>
10      </div>
11    </div>
12    <script
13src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
14    <script src="app.js"></script>
15  </body>

app.js:

javascript

1class Player {
2  constructor(name) {
3    this.name = name
4    this.run = 0
5  }
6}
7
8new Vue({
9  el: '#app',
10  data: {
11    batsmans: {
12      strike: new Player('Rohit Sharma'),
13      nonStrike: new Player('Virat Kohli'),
14    },
15    total: 30,
16  },
17  watch: {
18    total(newRun, oldRun) {
19      change = newRun - oldRun
20      this.batsmans.strike.run += change
21      if (change % 2 == 0) {
22        this.changeStrike()
23      }
24    },
25  },
26  methods: {
27    changeStrike() {
28      temp = this.batsmans.strike
29      this.batsmans.strike = this.batsmans.nonStrike
30      this.batsmans.nonStrike = temp
31    },
32  },
33})

If the user clicks on the button with the text “2” twice and “1” once. What will be rendered inside the element with ID “total”, “strike”, and “non-strike”?

A
Total: 5, Virat Kohli: 0, Rohit Sharma: 5
B
Total: 5, Rohit Sharma: 5, Virat Kohli: 0
C
Total: 35, Virat Kohli:3, Rohit Sharma: 2
D
Total: 35, Rohit Sharma: 3, Virat Kohli: 2

Show answer

Correct answer

D
Total: 35, Rohit Sharma: 3, Virat Kohli: 2

Question 13 on its own page

Question 14

+4.5 marksOne correct option

Consider the following Vue application with markup “index.html” and javascript file “app.js”.

index.html:

html

1<html lang="en">
2  <head>
3    <style>
4      .sold {
5        color: red;
6      }
7    </style>
8  </head>
9  <body>
10     <div id="app">
11      <Product
12        v-for="(product, index) in products"
13        :product="product"
14        @buy="buy"
15        :key="index"
16      />
17    </div>
18    <script
19src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
20    <script src="app.js"></script>
21  </body>
22</html>

app.js:

javascript

1const Product = {
2  template: `<div :class="{sold:product.sold}">
3    <h4>{{product.name}}</h4>
4    <h3>Price:{{product.price}}</h3>
5    <div><button @click="$emit('buy', product.id)"> Buy </button></div>
6    </div>`,
7  props: ['product'],
8}
9
10new Vue({
11  el: '#app',
12  components: { Product },
13  data() {
14    return {
15      products: [
16        { id: 1, name: 'Watch', price: '200', sold: true },
17        { id: 2, name: 'Mobile', price: '4000', sold: true },
18      ],
19    }
20  },
21  methods: {
22    buy(id) {
23      prod = this.products.find((prod) => {
24        return prod.id == id
25      })
26      prod.sold = false
27    },
28  },
29})

If the user clicks on the button with the text “Buy” corresponding to the product having ID “1”. What will be the text colour of the rendered “Product” component, corresponding to the product having ID “1” and “2”, respectively?

A
Black, Black
B
Black, Red
C
Red, Black
D
Red, Red

Show answer

Correct answer

B
Black, Red

Question 14 on its own page

Question 15

+2 marksOne or more correct options

Which of the following statement(s) is/are false regarding javascript language?

Select all that apply.

A
The variables declared outside all functions using “var” keyword are initialized with the value “undefined”, until the code execution reaches the initialization statement for that particular variable.
B
The variables declared outside all functions using “const” keyword are initialized with the value “null”, until the code execution reaches the initialization statement for that particular variable.
C
The function expressions in the language are not hoisted.
D
A javascript object can not have its own functions or methods.

Show answer

Correct answers

B
The variables declared outside all functions using “const” keyword are initialized with the value “null”, until the code execution reaches the initialization statement for that particular variable.
D
A javascript object can not have its own functions or methods.

Question 15 on its own page

Question 16

+2 marksOne or more correct options

Which of the following statement(s) is/are true regarding the state of a web application?

Select all that apply.

A
The system state is usually a huge collection of information.
B
The system state is dependent on the user interface.
C
Your Amazon wish list is an example of application state.
D
All of these

Show answer

Correct answers

A
The system state is usually a huge collection of information.
C
Your Amazon wish list is an example of application state.

Question 16 on its own page