agentic-ai-engineering/site/.vitepress/theme/Quiz.vue

<template>
  <div class="quiz-block">
    <div class="quiz-header">
      <span class="quiz-badge">Quiz</span>
      <span class="quiz-count">{{ current + 1 }} / {{ questions.length }}</span>
    </div>

    <div v-if="!finished" class="quiz-body">
      <h4 class="quiz-q">{{ questions[current].q }}</h4>

      <div class="quiz-options">
        <button
          v-for="(opt, i) in questions[current].opts"
          :key="i"
          class="quiz-opt"
          :class="{
            correct: answered && i === questions[current].ans,
            wrong: answered && selected === i && i !== questions[current].ans,
            disabled: answered
          }"
          :disabled="answered"
          @click="answer(i)"
        >
          <span class="opt-letter">{{ ['A','B','C','D'][i] }}</span>
          <span class="opt-text">{{ opt }}</span>
          <span v-if="answered && i === questions[current].ans" class="opt-icon material-symbols-outlined">check_circle</span>
          <span v-if="answered && selected === i && i !== questions[current].ans" class="opt-icon material-symbols-outlined">cancel</span>
        </button>
      </div>

      <div v-if="answered" class="quiz-feedback" :class="{ correct: selected === questions[current].ans }">
        <p>{{ selected === questions[current].ans ? 'Correct!' : questions[current].exp || 'Not quite.' }}</p>
        <button class="quiz-next" @click="next">
          {{ current < questions.length - 1 ? 'Next Question' : 'See Results' }}
        </button>
      </div>
    </div>

    <div v-else class="quiz-results">
      <div class="result-score">{{ score }} / {{ questions.length }}</div>
      <div class="result-pct">{{ Math.round(score / questions.length * 100) }}%</div>
      <div class="result-msg">
        <template v-if="score === questions.length">Perfect score. You've mastered this module.</template>
        <template v-else-if="score >= questions.length * 0.7">Good work. Review the missed questions.</template>
        <template v-else>Review the module material and try again.</template>
      </div>
      <button class="quiz-retry" @click="reset">Retry Quiz</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  questions: {
    type: Array,
    required: true,
  }
})

const current = ref(0)
const selected = ref(-1)
const answered = ref(false)
const score = ref(0)
const finished = ref(false)

function answer(i) {
  if (answered.value) return
  selected.value = i
  answered.value = true
  if (i === props.questions[current.value].ans) {
    score.value++
  }
}

function next() {
  if (current.value < props.questions.length - 1) {
    current.value++
    selected.value = -1
    answered.value = false
  } else {
    finished.value = true
  }
}

function reset() {
  current.value = 0
  selected.value = -1
  answered.value = false
  score.value = 0
  finished.value = false
}
</script>

<style scoped>
.quiz-block {
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
}
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--vp-c-bg-mute);
  border-bottom: 1px solid var(--vp-c-border);
}
.quiz-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vp-c-brand-1);
}
.quiz-count {
  font-size: 12px;
  color: var(--vp-c-text-3);
}
.quiz-body { padding: 20px; }
.quiz-q {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.5;
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--vp-c-text-1);
  transition: all 0.15s;
}
.quiz-opt:hover:not(.disabled) {
  border-color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
}
.quiz-opt.disabled { cursor: default; }
.quiz-opt.correct {
  border-color: #22c55e;
  background: rgba(34,197,94,0.08);
}
.quiz-opt.wrong {
  border-color: #ef4444;
  background: rgba(239,68,68,0.08);
}
.opt-letter {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--vp-c-bg-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.quiz-opt.correct .opt-letter { background: #22c55e; color: #fff; }
.quiz-opt.wrong .opt-letter { background: #ef4444; color: #fff; }
.opt-text { flex: 1; }
.opt-icon { font-size: 20px; color: #22c55e; }
.quiz-opt.wrong .opt-icon { color: #ef4444; }
.quiz-feedback {
  margin-top: 16px;
  padding: 16px;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 8px;
}
.quiz-feedback.correct {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.15);
}
.quiz-feedback p { font-size: 13px; color: var(--vp-c-text-2); margin: 0 0 12px; }
.quiz-next, .quiz-retry {
  padding: 8px 20px;
  background: var(--vp-c-brand-1);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-next:hover, .quiz-retry:hover { background: var(--vp-c-brand-3); }
.quiz-results {
  text-align: center;
  padding: 40px 20px;
}
.result-score {
  font-size: 48px;
  font-weight: 800;
  color: var(--vp-c-brand-1);
  line-height: 1;
}
.result-pct {
  font-size: 16px;
  color: var(--vp-c-text-3);
  margin-bottom: 12px;
}
.result-msg {
  font-size: 14px;
  color: var(--vp-c-text-2);
  margin-bottom: 20px;
}
</style>