MAD Study Hub

Home / Past papers / MAD2 End Term / this paper

IIT M FOUNDATION DIPLOMA ENDTERM QPD1 07 Aug 2022 IBA NS - 07 Aug 2022

MAD2 End Term33 questions100 marks21 MCQ · 12 MSQFoundation / Diploma / QPD1
Elapsed 00:00
Q1MCQ0 marks
question figure
Text of the picture (copyable)
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)
  1. Yes
  2. No
Q2MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding JavaScript language?
  1. JavaScript is a low level programming language.
  2. The “const” keyword can be used to declare objects with block level scope.
  3. Int, char are some primitive data types in the JavaScript language.
  4. The JavaScript language supports both the first order and higher orderfunctions.
Q3MSQ2 marksselect all that apply
Which of the following statement(s) is/are false?
  1. A web application must implement token based authentication to make theapplication secure.
  2. The JAMStack approach separates out the frontend from the backend, andthey both can be updated/modified independently without affecting the other.
  3. It is recommended to avoid the usage of verbs in the API data URLs.
  4. The idea behind bringing an API is to implement caching.
Q4MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding Celery and Redis?
  1. A Celery system can only use Redis as the message broker.
  2. A Celery system may consist of a number of batch jobs.
  3. A Celery system needs worker(s) to execute tasks.
  4. All of these
Q5MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding webhooks and polling?
  1. A webhook uses HTTP protocol.
  2. The term “polling” generally refers to short polling.
  3. Webhooks are used for 1 way communication, unlike web sockets.
  4. In polling, the connection to the server is kept open, until the data is available.
Q6MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding cookies?
  1. Cookies are stored on the server.
  2. Cookies are stored on the browser.
  3. Browser sends the cookies to the origin server automatically in general.
  4. Client has to include cookies manually with the request, in general.
Q7MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding OAuth?
  1. It is a protocol to allow access to resources, hosted on a different server, onbehalf of a user.
  2. It is used for authorization.
  3. It is used for authentication.
  4. None of these
Q8MSQ2 marksselect all that apply
Which of the following is true regarding the Closure in JavaScript?
  1. Closure is the state of the outer function.
  2. Closure is the state of a variable.
  3. Closure is a function along with its lexical environment or surrounding state.
  4. Closures are created every time a function is created in JavaScript.
Q9MCQ3 marks
Which of the following shows the correct output if the javascript program written below is executed? question figure Which of the following shows the correct output if the javascript program written below is executed?
Text of the picture (copyable)
```javascript
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const arr1 = arr.map(r => r**3)
const arr2 = arr1.filter(r => ((r % 3 == 2) || (r % 4 == 3)))
console.log(arr2)
```
  1. [1, 8, 125, 343, 512]
  2. [8, 27, 64, 343, 512]
  3. [8, 27, 125, 343, 512]
  4. None of these
Q10MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose you open “index.html” file in a browser, and type the text “IIT Madras” in the text box shown (after removing the previous text, if any), and hard refresh the page twice, without clicking anywhere. What will be the value shown in the text box, and the “age” placeholder, respectively?
Text of the picture (copyable)
index.html:
```html
<div id = "app">
    <input v-model = "name" @input = "do_something">
    <p>{{age}}</p>
</div>
<script scr = "app.js"></script>
```

app.js:
```javascript
new Vue({
    el : "#app",
    data : {
        name : "#app",
        age : 0,
    },

    mounted () {
        try {
            this.name = localStorage.getItem("name").split(" ")[0];
            this.age = localStorage.getItem("name").split(" ")[1];
        }
        catch {
            this.name = "Default";
            this.age = "Default";
        }
    },

    methods : {
        do_something() {
            localStorage.setItem("name", this.name);
            localStorage.setItem("age", this.age);
        }
    }
})
```
  1. The app will show an error in the console
  2. Default, Default
  3. IIT, Madras
  4. None of these
Q11MCQ3 marks
Which of the following statements is false regarding CORS and CSRF?
  1. The flask framework enforces CSRF protection by default.
  2. The CORS mechanism allows a developer to secure a web application fromexternal origins.
  3. The CORS headers are generally prefixed with the value “Access-Control-Allow”.
  4. An anti CSRF token must be sent with the request, if CSRF protection isenabled.
Q12MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be the color of text rendered inside the div with ID “run”, if the user clicks on the button with text “Six”, 3 times and the button with text “Four”, 4 times?
Text of the picture (copyable)
index.html:

```html
<html>
<head>
    <style>
        .onstrike {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{onstrike:changeStrike}" id="run">{{ run }}</div>
        <button @click="run+=4">Six</button>
        <button @click="run+=3">Four</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
</html>
```
app.js:

```javascript
new Vue({
  el: '#app',
  data: { run: 0 },
  computed: {
    changeStrike() {
      return this.run % 2 === 0 ? true : false
    },
  },
})
```
  1. Black
  2. Blue
  3. White
  4. None of these
Q13MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be the color and font-weight of the text “IITM online degree”?
Text of the picture (copyable)
index.html:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .active {
            color: blue;
        }
        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <Home class="bold" />
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="app.js" type="module"></script>
</html>
```
app.js:
```javascript
Vue.component('Home', {
    template: `<div class='active'>
        IITM online degree
    </div>`,
})

new Vue({
    el: '#app',
})
```
  1. blue, normal
  2. black, normal
  3. blue, bold
  4. black, bold
Q14MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered on the screen?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <template v-for="cont in contributions">
            <div>{{cont.player}}: {{cont.run}}/{{partnerShip}}</div>
        </template>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
new Vue({
  el: '#app',
  data: {
    partnerShip: 210,
    contributions: [
      { player: 'Rohit', run: 100 },
      { player: 'Kohli', run: 110 },
    ],
  },
})
```
  1. Rohit: 100/210Kohli: 110/210
  2. Rohit: 0.48Kohli: 0.52
  3. Rohit: 100Kohli: 110
  4. None of these
Q15MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the div with ID “collections”, when the user selects the option “Type Two” ?
Text of the picture (copyable)
```html
index.html:

<body>
    <div id="app">
        <div>
            <select v-model="collType">
                <option value="all">All</option>
                <option value="typeOne">Type One</option>
                <option value="typeTwo">Type Two</option>
            </select>
        </div>
        <div id="collections">
            <Numbers :numbers="numbers" v-show="collType==='all' "
            /></Numbers>
            <Numbers :numbers="typeOne" v-show="collType==='typeOne' "
            /></Numbers>
            <Numbers :numbers="typeTwo" v-show="collType==='typeTwo' "
            /></Numbers>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
Vue.component('Numbers', {
  template: `<div>
    <span v-for="num in numbers">
      {{num}}
    </span></div>`,
  props: ['numbers'],
})

new Vue({
  el: '#app',
  data: {
    numbers: [2, 3, 4, 6, 7],
    collType: 'typeOne',
  },
  computed: {
    typeOne() {
      return this.numbers.filter((num) => num % 2 === 0)
    },
    typeTwo() {
      return this.numbers.filter((num) => num % 2 !== 0)
    },
  },
})
```
  1. 2 3 4 6 7
  2. 2 4 6
  3. 3 7
  4. None of these
Q16MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose the user types “Apple” in the input box (after removing the existing text, if any). What will be rendered inside the div with ID “result”?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <custom-input v-model="searchText"></custom-input>
        <div id="result">Searching for: {{searchText}}</div>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```

app.js:

```javascript
Vue.component('custom-input', {
    props: ['value'],
    template: `
        <input
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
        >
    `
})

new Vue({
    el: '#app',
    data: { searchText: 'type something ...' },
})
```
  1. Searching for:
  2. Apple
  3. Searching for: ‘type something …’
  4. Searching for: Apple
Q17MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose the application is running on ‘http://127.0.0.1:8080/’. If the user visits the application for the first time and clicks on the button “Go to profile”, what will be displayed on the screen?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script
        src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:

```javascript
const Profile = {
  template: `<div> Welcome {{this.$route.params.name}}</div>`,
}

const Home = {
  template: `<div> This is home page
    <button @click='goToProfile'> Go to profile </button>
  </div>`,
  methods: {
    goToProfile() {
      this.$router.push({ name: 'profile', params: { name: 'narendra' } })
    }
  },
}

const router = new VueRouter({
  routes: [
    { path: '/profile/:name', name: 'profile', component: Profile },
    { path: '/', component: Home },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
  1. Welcome narendra
  2. Welcome
  3. narendra
  4. None of these
Q18MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose the application is running on ‘http://127.0.0.1:8080/’. What will be rendered for the URL “http://127.0.0.1:8080/#/” ?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script
        src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
```javascript
app.js:
const Movies = {
  template: `<div><ul>
    <div>Movies</div>
    <router-view />
  </ul></div>`,
}
const Error = {
  template: `<div> Some Error</div>`,
}
const Hindi = {
  template: `<div><ul>
    <li v-for='movie in hindiMovies'>{{movie.name}}</li>
  </ul></div>`,
  data() {
    return {
      movies: [
        { name: 'Soley', language: 'hindi' },
        { name: 'Dexter', language: 'english' },
      ],
    }
  },
  computed: {
    hindiMovies() {
      return this.movies.filter((movie) => {
        return movie.language === 'english'
      })
    },
  },
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Movies,
      children: [
        { path: 'hindi', component: Hindi },
        { path: '*', component: Error },
      ],
    },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
  1. Movies
  2. MoviesSome Error
  3. MoviesSoley
  4. MoviesDexter
Q19MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the “custom-comp” component?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <custom-comp ref="custom" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```

app.js:

```javascript
Vue.component('custom-comp', {
    data() {
        return { name: 'Rohit Sharma' }
    },
    template: `<div>Welcome {{name}}</div>`,
})

new Vue({
    el: '#app',
    mounted() {
        this.$refs.custom.name = 'Virat Kohli'
    },
})
```
  1. Welcome Rohit Sharma
  2. Welcome Virat Kohli
  3. Welcome
  4. None of these
Q20MSQ3 marksselect all that apply
Which of the following is the correct way to do class binding in Vue (to apply ‘classA’ on the div element), if the data object in the Vue constructor is defined as below? question figure Which of the following is the correct way to do class binding in Vue (to apply ‘classA’ on the div element), if the data object in the Vue constructor is defined as below?
Text of the picture (copyable)
```
data : {
    classObj : {
        classA : true,
        classB : false
    },

    classA : true,
    classB : false,
}
```
  1. question figure
    text
    ```html
<div :class="{classA : classA, classB : classB}"></div>
```
  2. question figure
    text
    ```html
<div :class="{classA : 'classA', classB : 'classB'}"></div>
```
  3. question figure
    text
    ```html
<div :class = "classObj"></div>
```
  4. question figure
    text
    ```html
<div :class="{classObj}"></div>
```
Q21MSQ3 marksselect all that apply
Which of the following statement(s) is/are false?
  1. The server sent events is a mechanism for a server to push events, and it mustrequire service workers on the client to function properly.
  2. In general, a webhook is meant to pull message(s) from an application.
  3. The usage of a message broker over “point-to-point” communication makesthe application scalable.
  4. There is no difference between webhooks and short polling.
Q22MSQ3 marksselect all that apply
Which of the following statement(s) is/are true regarding Celery and Redis, assuming a task named “send_email” is defined using 2 approaches given below? Approach 1: send_email.delay() Approach 2: send_email.apply_async(countdown = 10)
  1. The approach 1 will wait for a user input before dispatching the task to thecelery system.
  2. The approach 2 will dispatch the task to the celery system after waiting for 10seconds, and start the execution, assuming a worker is available.
  3. The approach 2 will immediately dispatch the task to the celery system, butstart the execution after waiting for 10 seconds, assuming a worker is available.
  4. The approach 1 will immediately dispatch the task to the celery system, andstart the execution, assuming a worker is available.
Q23MSQ3 marksselect all that apply
Which of the following statement(s) is/are false regarding Vuex and Vue router?
  1. In general, an application should have separate Vuex stores for all thecomponents.
  2. A path defined in the routes array in Vue router can consist of a number ofchildren paths.
  3. The wildcard (*) should be put at the top of the routes array in the Vue router,so that it matches with all the paths, which are not implemented.
  4. A Vuex store must be used with all Vue applications.
Q24MSQ3 marksselect all that apply
Which of the following statement(s) is/are true regarding fetch API?
  1. The credentials property of the Request interface allows the user agent tosend or receive cookies in cross-origin requests.
  2. The value “omit” of “credentials” will force the browser not to send cookies withthe request.
  3. The value “include” of “credentials” will allow the browser to send credentialseven in cross-origin requests.
  4. The value “include” of “credentials” will allow the browser to send credentialsonly for same origin requests.
Q25MCQ4.5 marks
Which of the following shows the correct output, if the javascript program written below is executed? question figure Which of the following shows the correct output, if the javascript program written below is executed?
Text of the picture (copyable)
```javascript
new Promise((reject, resolve) => {
  let a = 2 * 4 || 0 / 4;
  let b = 3 * 4 && 0 / 4;

  if (a > b) resolve(a);
  else reject(b);
})
  .then((d) => console.log("Passed:", d))
  .catch((e) => console.log("Failed:", e))
  .finally((d) => {
    console.log("About to finish");
    return "Over";
  })
  .then((d) => console.log("Finished !!", d));
```
  1. Failed: 2About to finishFinished !! Over
  2. Passed: 0About to finishFinished !! undefined
  3. Passed: 0About to finishFinished !! Over
  4. Failed: 8About to finishFinished !! undefined
Q26MCQ4.5 marks
question figure question figure
Text of the picture (copyable)
Suppose you own a company where you want to hire candidates for an upcoming project on a deputation basis, and you have received a lot of applications. On discussing with your team members, you decided to shortlist the candidates based on the following 2 criteria:

1. The candidate must have at least 3 years of experience
2. The candidate's age must be less than 30 years

Fill in the `code1` & `code2`, which can be used in Vuex Store to update the "shortlisted" state variable with the objects of those candidates who satisfy the above-mentioned criteria. Also, predict the length of the state variable "shortlisted", after the mutation has completed its execution.
```javascript
const store = new Vuex.Store({
  state : {
    candidates : [
      {
        name : 'sample1',
        age : 28,
        experience : 2.5
      },
      {
        name : 'sample2',
        age : 35,
        experience : 3.5
      },
      {
        name : 'sample3',
        age : 32,
        experience : 3
      },
      {
        name : 'sample4',
        age : 38,
        experience : 2
      },
    ],
    shortlisted : []
  },

  mutations : {
    update_final(state, minimum) {
      for (candidate of state.candidates)
        code2
    },
  },
  actions : {
    send_task : function (context) {
      code1
    }
  }
})
```
  1. question figure
    text
    ```
code1: this.$store.commit("update_final", 2);
code2: if (candidate.experience >= minimum && candidate.age < 30)
  state.shortlisted.push(company)
Length: 3
```
  2. question figure
    text
    ```
code1: context.commit("update_final", 2);
code2: if (experience >= minimum && candidate.age < 30)
           state.shortlisted.push(company)
```
Length: 2
  3. question figure
    text
    ```javascript
code1: this.$store.commit("update_final", 3);
code2: if (experience >= minimum && candidate.age < 30)
    state.shortlisted.push(company)
```
Length: 3
  4. question figure
    text
    ```
code1: context.commit("update_final", 3);
code2: if (candidate.experience >= minimum && candidate.age < 30)
    state.shortlisted.push(company)
```
Length: 2
Q27MCQ4.5 marks
Consider the following javascript program, and predict the output, if executed. question figure Consider the following javascript program, and predict the output, if executed.
Text of the picture (copyable)
```javascript
let propA = 10;

const obj1 = {
    propA : 20,
    propB : function () {
        console.log(propA, this.propA)
    }
}

const obj2 = {
    propA : 30,
    propB : function () {

        let func = () => console.log(propA, this.propA)

        func()
    }
}

obj2.propB.call(obj1);
```
  1. 10 30
  2. 10 20
  3. 10 undefined
  4. The program will raise an error
Q28MCQ4.5 marks
Consider the following javascript program, and predict the output, if executed. Also, predict the minimum time taken (in seconds) to log the value “Executing” on the console. question figure Consider the following javascript program, and predict the output, if executed. Also, predict the minimum time taken (in seconds) to log the value “Executing” on the console.
Text of the picture (copyable)
```javascript
async function some () {

    let promise = await new Promise((res, rej) => {
        setTimeout(() => res("Execution Started"), 1000)
    });;

    let a = await promise;
    let b = a.replace("e", "")
    return new Promise ((rej, res) => {

        let c = a + "\n" + b;
        rej(c);
    })

}
some().then(d => console.log(d)
).catch(e => console.log("Error"))
console.log("Executing")
```
  1. ExecutingExecution StartedExcution StartedTime: 2 seconds
  2. Execution StartedExcution StartdExecutingTime: 2 seconds
  3. ExecutingExecution StartedExcution StartedTime: 0 seconds
  4. Execution StartedExcution StartedExecutingTime: 0 seconds
Q29MCQ4.5 marks
Consider the following JavaScript program. question figure Consider the following JavaScript program. What will be logged on to the console?
Text of the picture (copyable)
```javascript
const p = function (t) {
  return new Promise(((resolve, reject) => {
    setTimeout((() => {
      resolve(t)
    }), t * 1000)
  }))
}

data = []
asyncFunc = async function () {
  p1 = await p(1)
  p2 = await p(2)
  data.push(p2)
  data.push(p1)
}
asyncFunc()
data.push('Outer')
console.log(data)
```
  1. [‘Outer’, 2, 1]
  2. [‘Outer’, 1, 2]
  3. [2, 1, ‘Outer’]
  4. [‘Outer’]
Q30MCQ4.5 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the div for ID “run”, if the user clicks on the button with text “Six”, 3 times and the button with text “Four”, 4 times?
Text of the picture (copyable)
index.html:
```html
<html>
<head>
<style>
.onstrike {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="{onstrike: changeStrike}" id="run">{{run}}</div>
<button @click="run+=4">Six</button>
<button @click="run+=3">Four</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="app.js" type="module"></script>
</body>
</html>
```
app.js:
```javascript
new Vue({
  el: '#app',
  data: { run: 0 },
  computed: {
    changeStrike() {
      return this.run % 2 === 0 ? true : false
    },
  },
})
```
  1. 24
  2. 34
  3. 48
  4. None of these
Q31MCQ4.5 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the div with ID “collections”, when the browser loads the application for the first time?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <div>
            <select v-model="collType">
                <option value="all">All</option>
                <option value="typeOne">Type One</option>
                <option value="typeTwo">Type Two</option>
            </select>
        </div>
        <div id="collections">
            <Numbers :numbers="numbers" v-show="collType==='all'"></Numbers>
            <Numbers :numbers="typeOne" v-show="collType==='typeOne'"></Numbers>
            <Numbers :numbers="typeTwo" v-show="collType==='typeTwo'"></Numbers>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
Vue.component('Numbers', {
    template: `<div>
        <span v-for="num in numbers">
            {{num}}
        </span></div>`,
    props: ['numbers'],
})

new Vue({
    el: '#app',
    data: {
        numbers: [2, 3, 4, 6, 7],
        collType: 'typeOne',
    },
    computed: {
        typeOne() {
            return this.numbers.filter((num) => num % 2 === 0)
        },
        typeTwo() {
            return this.numbers.filter((num) => num % 2 !== 0)
        },
    }
})
```
  1. 2 3 4 6 7
  2. 2 4 6
  3. 3 7
  4. None of these
Q32MCQ4.5 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the router-view component of Movies component for the URL “http://127.0.0.1:8080/#/hindi”?
Text of the picture (copyable)
index.html:

```html
<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
  ></script>
  <script
    src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"
  ></script>
  <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
const Movies = {
  template: `<div><ul>
    <div>Movies</div>
    <router-view />
  </ul></div>`,
}

const Error = {
  template: `<div> Some Error</div>`,
}

const Hindi = {
  template: `<div><ul>
    <li v-for='movie in hindiMovies'>{{ movie.name }}</li>
  </ul></div>`,
  data() {
    return {
      movies: [
        { name: 'Soley', language: 'hindi' },
        { name: 'Dexter', language: 'english' },
      ],
    }
  },
  computed: {
    hindiMovies() {
      return this.movies.filter((movie) => {
        return movie.language === 'english'
      })
    },
  },
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Movies,
      children: [
        { path: 'hindi', component: Hindi },
        { path: '*', component: Error },
      ],
    },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
  1. Some Error
  2. Soley
  3. Dexter
  4. None of these
Q33MCQ2 marks
Which of the following statement(s) is/are correct regarding cookies, local storage, and session storage?
  1. The local storage is a browser based persistent storage.
  2. Cookies are preferred over session or local storage, when the data needs to besent with every request.
  3. The cookies can be set from the server as well as using javascript on the client.
  4. All of these

Answer key

  1. Q1 (MCQ, 0 marks): A
  2. Q2 (MSQ, 2 marks): B, D
  3. Q3 (MSQ, 2 marks): A, D
  4. Q4 (MSQ, 2 marks): B, C
  5. Q5 (MSQ, 2 marks): A, B, C
  6. Q6 (MSQ, 2 marks): B, C
  7. Q7 (MSQ, 2 marks): A, B
  8. Q8 (MSQ, 2 marks): C, D
  9. Q9 (MCQ, 3 marks): C
  10. Q10 (MCQ, 3 marks): C
  11. Q11 (MCQ, 3 marks): A
  12. Q12 (MCQ, 3 marks): B
  13. Q13 (MCQ, 3 marks): C
  14. Q14 (MCQ, 3 marks): A
  15. Q15 (MCQ, 3 marks): C
  16. Q16 (MCQ, 3 marks): D
  17. Q17 (MCQ, 3 marks): A
  18. Q18 (MCQ, 3 marks): B
  19. Q19 (MCQ, 3 marks): B
  20. Q20 (MSQ, 3 marks): A, C
  21. Q21 (MSQ, 3 marks): B, D
  22. Q22 (MSQ, 3 marks): C, D
  23. Q23 (MSQ, 3 marks): A, C, D
  24. Q24 (MSQ, 3 marks): A, B, C
  25. Q25 (MCQ, 4.5 marks): D
  26. Q26 (MCQ, 4.5 marks): D
  27. Q27 (MCQ, 4.5 marks): B
  28. Q28 (MCQ, 4.5 marks): C
  29. Q29 (MCQ, 4.5 marks): D
  30. Q30 (MCQ, 4.5 marks): A
  31. Q31 (MCQ, 4.5 marks): B
  32. Q32 (MCQ, 4.5 marks): C
  33. Q33 (MCQ, 2 marks): D

Concepts this paper tests

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

Here’s a structured summary of core topics, concepts, principles, and equations for the exam, followed by Mermaid knowledge graphs to visualize relationships.

Core Topics & Concepts

1. JavaScript Fundamentals

Key Concepts:

Key Equations/Code Snippets:

// Closure Example
function outer() {
  let x = 10;
  return function inner() { console.log(x); };
}
const closure = outer(); // x is preserved in closure.

// Promise Example
new Promise((resolve, reject) => {
  if (success) resolve("Done");
  else reject("Error");
})
.then(d => console.log(d))
.catch(e => console.log(e));

// Async/Await Example
async function fetchData() {
  const data = await someAsyncTask();
  console.log(data);
}

2. Modern Web Development

Key Concepts:

Key Equations/Code Snippets:

// CORS Header Example (Server-Side)
response.setHeader("Access-Control-Allow-Origin", "*");

// CSRF Token Example (Flask)
<form>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
</form>

// Local Storage Example
localStorage.setItem("key", "value");
const data = localStorage.getItem("key");

3. Vue.js

Key Concepts:

Key Equations/Code Snippets:

// Vue Component Example
Vue.component('my-component', {
  props: ['message'],
  template: `<div>{{ message }}</div>`
});

// Vuex Store Example
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++; }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => commit('increment'), 1000);
    }
  }
});

// Vue Router Example
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

4. Asynchronous Communication

Key Concepts:

Key Equations/Code Snippets:

// Webhook Example (Server-Side)
app.post('/webhook', (req, res) => {
  console.log("Received:", req.body);
  res.status(200).end();
});

// Celery Task Example (Python)
@celery.task
def send_email():
    print("Sending email...")

### Delayed execution
send_email.apply_async(countdown=10)

5. Fetch API & HTTP

Key Concepts:

Key Equations/Code Snippets:

// Fetch API Example
fetch('https://api.example.com/data', {
  method: 'POST',
  credentials: 'include', // Send cookies
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data));

6. Security

Key Concepts:

2. Vue.js Ecosystem

3. Web Communication Methods

4. Authentication & Security

5. Asynchronous Task Queues (Celery + Redis)