IIT M QUIZ 1 FOUNDATION DAD DIPLOMA QPE1 16 Oct 2022 - 16 Oct 2022

THIS IS QUESTION PAPER FOR THE SUBJECT "DIPLOMA LEVEL: MODERN APPLICATION DEVELOPMENT 2"

ARE YOU SURE YOU HAVE TO WRITE EXAM FOR THIS SUBJECT?
CROSS CHECK YOUR HALL TICKET TO CONFIRM THE SUBJECTS TO BE WRITTEN.

(IF IT IS NOT THE CORRECT SUBJECT, PLS CHECK THE SECTION AT THE TOP FOR THE SUBJECTS REGISTERED BY YOU)

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

index.html:

```html
<div id = "app">
    <h3> Header Section </h3>
    <main></main>
    <h3> Footer Section </h3>
</div>
<script src="app.js"></script>
```

app.js:

```javascript
const main = {
    template : `
        <div>
            <h3> Main Section </h3>
        </div>
    `
}

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?

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

```javascript
var xyz = 40;

function demo () {
    xyz = 20;

    function xyz () {
        console.log("Number is:", xyz)
    }
}
demo()
console.log("Number is:", xyz)
```

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

index.html:

```html
<div id = "app">
    <h3>Number : {{total_num}}</h3>
    <button @click = "update_num"> Click Me </button>
</div>
<script src="app.js"></script>
```

app.js:

```javascript
new Vue({
    el : "#app",
    data : {
        num : 9,
    },
    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?

What will be logged on to the console, if the program written below is executed?
```javascript
{
    let x = 10
    {
        let getNum = () => {
            return x + 10
        }
        console.log(getNum())
    }
}
```

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

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

```javascript
let x = 10
var y = 10,
  z = 10
{
  let x = 20
  var z = 20
  function test() {
    var y = 20
  }
}
console.log(x, y, z)
```

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

```javascript
const obj1 = { x: 10, y: 20 },
obj2 = { x: 30, y: 40 }

function area() {
  return this.x * this.y
}

function test() {
  return area.call(obj1)
}

console.log(test.call(obj1), test.call(obj2))
```

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

```javascript
class Circle {
  constructor(r) {
    this.r = r
  }
}

Circle.prototype.area = function () {
  return 3.14 * this.r
}

const obj1 = new Circle(2)
console.log(
  Circle.prototype === obj1.prototype,
  Circle.prototype === obj1.__proto__
)
```

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

index.html:

```html
<html lang="en">
<head>
    <style>
        .dark-mode {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 :class="{'dark-mode': darkMode}">IITM online degree</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
```

app.js:

```javascript
new Vue({
    el: '#app',
    name: 'app',
    data: {
        darkMode: false,
    },
    created() {
        this.darkMode = true
    },
})
```

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?

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

```javascript
var num = 30

const obj1 = {
    num : 10,
    func : function (key) {
        let temp = () => {
            console.log("Number 1:", num, "Number 2:", this.num, "Sum:",
            this.num + num + key)
        }
        temp()
    }
}

const obj2 = {
    num : 20,
    func : function (key) {
        console.log("Function Called !!", key)
    }
}

new_func = obj1.func.bind(obj2, 50)
new_func()
```

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

```javascript
function getY() {
  return () => this.y
}

const Obj1 = {
  y: 45,
  getY: getY,
  obj3: {
    y: 15,
    getY: getY,
  },
}

console.log(Obj1.obj3.getY()(), Obj1.getY()())
```

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

index.html:

```html
<body>
    <div id="app">
        <h3 id="total">Total: {{total}}</h3>
        <h4 id="strike">{{batsmans.strike.name}}: {{batsmans.strike.run}}</h4>
        <h4 id="non-strike">{{batsmans.nonStrike.name}}: {{batsmans.nonStrike.run}}</h4>
        <div>
            <button @click="total+=1">1</button>
            <button @click="total+=2">2</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
```

app.js:

```javascript
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" four times and "1" twice. What will be rendered inside the element with ID "total", "strike", and "non-strike"?

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

index.html:

```html
<html lang="en">
<head>
    <style>
        .sold {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <Product
            v-for="(product, index) in products"
            :product="product"
            @buy="buy"
            :key="index"
        />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
```

app.js:

```javascript
const Product = {
    template: `<div :class="{sold: product.sold}">
        <h4>{{product.name}}</h4>
        <h3>Price:{{product.price}}</h3>
        <div><button @click="$emit('buy', product.id)"> Buy </button></div>
    </div>`,
    props: ['product'],
}

new Vue({
    el: '#app',
    components: { Product },
    data() {
        return {
            products: [
                { id: 1, name: 'Watch', price: '200', sold: true },
                { id: 2, name: 'Mobile', price: '4000', sold: true },
            ],
        }
    },
    methods: {
        buy(id) {
            prod = this.products.find((prod) => {
                return prod.id == id
            })
            prod.sold = false
        },
    },
})
```

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