Consider the below application with markup “index.html” and javascript file “app.js”. index.html: app.js: const Player = { template: {{striker.name}} {{nonStriker.name}} , data() { return { player1: {name: 'Rohit'}, player2: {name: 'Virat'}, } }, props: { run: { type: Number, default: 0 }, }, computed: { striker() { return this.run % 2 == 0 ? this.player1 : this.player2 }, nonStriker() { return this.run % 2 == 1 ? this.player1 : this.player2 }, }, } const Run = { template: {{run}} , props: { run: Number }, } new Vue({ el: '#app', template: , components: { Run, Player }, data: { score: 0, }, methods: { runChanged(run) { this.score = run }, }, }) Suppose the user clicks on buttons with text “3” and then “4”, what will be rendered inside the “Player” component?

(A) Option figure from the original question paper

(B) Option figure from the original question paper

(C) Option figure from the original question paper

(D) Option figure from the original question paper

Modern Application Development II · End Term · 30 Apr 2023 · January 2023 term · Set QPD1-S2

Question 11: Consider the below application with markup “index.html” …

Question 11

+3 marksOne correct option

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

index.html:

html

1<body>
2    <div id="app"></div>
3    <script
4src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
5    <script src="app.js" type="module"></script>
6</body>

app.js:

javascript

1const Player = {
2  template: `<div><div>{{striker.name}}*</div>
3  <div>{{nonStriker.name}}</div>
4  </div>`,
5  data() {
6    return {
7      player1: {name: 'Rohit'},
8      player2: {name: 'Virat'},
9    }
10  },
11  props: {
12    run: { type: Number, default: 0 },
13  },
14  computed: {
15    striker() {
16      return this.run % 2 == 0 ? this.player1 : this.player2
17    },
18    nonStriker() {
19      return this.run % 2 == 1 ? this.player1 : this.player2
20    },
21  },
22}
23
24const Run = {
25  template: `<button @click="$emit('run-changed',
26run)">{{run}}</button>`,
27  props: { run: Number },
28}
29
30new Vue({
31  el: '#app',
32  template: `<div>
33                <Player :run='score'/>
34                <div style='display: flex'>
35                    <Run :run="3" @run-changed = 'runChanged'/>
36                    <Run :run="4" @run-changed = 'runChanged' />
37                </div>
38             </div>`,
39  components: { Run, Player },
40  data: {
41    score: 0,
42  },
43  methods: {
44    runChanged(run) {
45      this.score = run
46    },
47  },
48})

Suppose the user clicks on buttons with text “3” and then “4”, what will be rendered inside the “Player” component?

Show answer

Correct answer

See the whole paper Take it as a mock test

Question 11 of 32 in the IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 30 Apr 2023, in the January 2023 term (IIT M DIPLOMA ET1 EXAM QPD1 S2 30 Apr 2023). It carries 3 marks.

Question 11: Consider the below application with markup “index.html” …

Question 11

More questions from this paper