<template>
<div id="app">
<h1 id="title"gt;{{ quiz.title }}</h1>
<div id="ques" v-for="(question, index) in quiz.questions" :key="question.text">
<div v-show="index === questionIndex">
<div id="tFlex">
<p id="indexStuff"gt;{{index+1}}</p>
<h2 id="quest"gt;{{ quiz.question.text }}</h2>
</div>
<ol>
<li id="choices"> v-for="response in question.responses" :key="response.text">
<label>
<input id="responce" type="radio" v-bind:value="response.correct" v-bind:name="index" v-model="userResponses[index]">
<span class="t">{{response.text}}</span>
</label>
</li>
</ol>
<div id="btns">
<button id="prevbtn"> v-if="questionIndex > 0" v-on:click="prev"<previous Question></button>
<button id="nxtbtn"> v-on:click=<Next Question></button>
</div>
</div>
</div>
<div v-show="questionIndex === quiz.questions.length">
<h2 id="fint"gt;Quiz finished</h2>
<p id="sct">Total score: {{ score() }} / {{ quiz.questions.length }}</p>
<div id="btnFlex">
<button id="chck"v-show="questionIndex === quiz.NumQuestions" v-on:click="check">Check Answers</button>
</div>
</div>
</div>
</template>
<script>
import { db } from './firebase';
const DefaultPath = 'quiz/01';
var Quiz;
db.doc(DefaultPath).get().then((doc) => {
Quiz = doc.data();
});
const quiz = Quiz;
console.log(quiz);
export default {
data() {
return{
quiz:quiz,
questionIndex: 0,
canDo: true,
userResponses:Array(quiz.questions.length).fill(false),
}
},
methods: {
next: function() {
this.questionIndex++;
},
prev: function() {
this.questionIndex--;
},
score: function() {
return this.userResponses.filter(function(val) { return val }).length;
},
check: function() {
this.questionIndex = 0;
this.canDo = false;
this.$forceUpdate();
},
cando: function() {
return {canDo:!this.canDo};
},
},
}
</script>
<style>
@import './style.css';
</style>
I encountered an unusual bug with my Vue.js project. As a newcomer to Vue.js and web firebase technologies, I'm grappling with resolving the issue.
Upon inspecting the Chrome developer tools, I came across an error while attempting to create a quiz application integrated with Firebase. Initially, I experimented with Firestore procedures before delving into the data function intricacies. My journey in the realm of vuejs is just beginning.