I have a project where I need to create a simple quiz. Each correct answer should earn 1 point towards the score. Below is the code I am using:
let app = new Vue({
el: '#app',
data: {
crameworks: [
{skor: 0}
],
frameworks: [
{ name: 'A.Charles Bababage',
votes : true },
{ name: 'B.Naruto',
votes : false },
{ name: 'C.Sasuke',
votes : false },
{ name: 'D.Belva',
votes : false},
],
grameworks : [
{ jawaban: 'A.Pochinok',
votes : true },
{ jawaban: 'B.Miramar',
votes : false },
{ jawaban: 'C.Tambang',
votes : false },
{ jawaban: 'D.Kampong',
votes : false}
],
vrameworks : [
{ answer: 'A.Bisa',
votes : false},
{ answer: 'B.Tidak',
votes : true},
{ answer: 'C.Mungkin',
votes : false},
{ answer: 'D.isin ku aa crown',
votes : false}
]
},
methods:{
skor(){
if(this.votes == true){
this.crameworks[0].skor + 1
}
}
}
})
Below is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My App</title>
<script src="https://cdn.jsdelivr.net/npm/vue">
</script>
</head>
<body>
<div id="app">
<ul>
1. The creator of the printer is
<br>
<p v-for="f in frameworks">
<input type="radio">
{{f.name}}
</p>
</ul>
<ul>
2. Which area does not exist in PUBG game?
<br>
<p v-for="g in grameworks">
<input type="radio">
{{g.jawaban}}
</p>
</ul>
<ul>
3. Can the Kar98K weapon use Extended Sniper scope?
<p v-for="v in vrameworks">
<input type="radio">
{{v.answer}}
</p>
<button type="submit" v-on:Click="skor">Answer</button>
<h1>Score : {{score}}</h1>
<script src="index.js"></script>
</div>
</body>
</html>
For each correct answer, I have set a true statement. However, when trying to print the score, I get a warning message "(function () { [native code] })". The initial score should be set to 0.