lovemycodesnippets

<script setup>
…

const reset = () => {
  totalCorrect.value = 0;
  questionsAnswered.value = 0;
};
</script>

<template>

lovemycodesnippets

…

<template>
  <div class="questions-ctr">
    <div class="progress">
      <div
        class="bar"
        :style="{
          width: `${(questionsAnswered / questions.length) * 100}%`,
        }"></div>

lovemycodesnippets

<script setup>
…

const questionAnswered = (is_correct) => {
  if (is_correct) {
    totalCorrect.value++;
  }
  questionsAnswered.value++;
};
</script>

lovemycodesnippets

<script setup>
… 

const selectAnswer = (is_correct) => {
  emit("question-answered", is_correct);
};
</script>

<template>
  <div class="questions-ctr">

lovemycodesnippets

<script setup>
const props = defineProps({
  questions: Array,
  answers: Array,
  questionsAnswered: Number,
});

…
</script>

lovemycodesnippets

<script setup>
…
</script>

<template>
  <main>
    <div class="ctr">
      <Questions
        v-if="questionsAnswered < questions.length"
        :questions="questions"

lovemycodesnippets

<script setup>
const props = defineProps({
  questions: Array,
  answers: Array,
});

const getAnswersForQuestion = (questionId) => {
  return props.answers.filter((answer) => answer.question.id === questionId);
};
</script>

lovemycodesnippets

<script setup>
useSeoMeta({
  title: "Quiz - QA app",
  ogTitle: "Quiz - QA app",
  description:
    "Let's test your knowledge with our engaging and challenging quiz app.",
  ogDescription:
    "Let's test your knowledge with our engaging and challenging quiz app.",
  ogImage:
    "https://res.cloudinary.com/terieyenike/image/upload/v1720489148/quiz_vyvk4d.png",

lovemycodesnippets

<script setup>
useSeoMeta({
  …
});

const questionsAnswered = useState("questionsAnswered", () => 0);
const totalCorrect = useState("totalCorrect", () => 0);

const { data: questions } = await useFetch(`/api/questions`);
const { data: answers } = await useFetch(`/api/answers`);

lovemycodesnippets

<template>
  <div class="result">
    <div class="title">You got sample result 1!</div>
    <div class="desc">Enter a short description here about the result.</div>
    <div class="score">You answered 1 out of 5 correctly.</div>
  </div>
</template>