Web · Vue 3 · Security
CCIE Security Study Guide_
An interactive study quiz for the CCIE Security exam, built in Vue 3. Thirty-one multiple-choice questions load from JSON, with single- and multi-answer scoring and a results breakdown at the end — a study aid that ties straight back to my networking and security track.
The live build is hosted here — launch the quiz →
Overview
A focused single-purpose web app: a home screen with the question count, a quiz view that walks through each question, and a results view that scores the run. Questions live in a separate questions.json file, so the bank can grow without touching the app — and several are "choose three" style, so scoring handles multi-answer questions, not just single picks.
What's in it
📋 JSON-driven question bank
Questions, options and answers load from questions.json at runtime — content is fully decoupled from the app code.
🧩 Component views
Home, Quiz and Result are separate Vue 3 <script setup> components, with state lifted to the app root.
✅ Single & multi-answer scoring
Handles both single-pick and "choose three" questions, tracking the score across the run.
📊 Results breakdown
A final screen reports how you did, so it works as a real revision loop rather than a one-shot quiz.
How it works
- Data-driven: the root component fetches
questions.jsonon mount (via the build's base URL, so it works hosted in a subfolder) and passes questions down to the views. - State: the current index, selected answers and running score live at the app root; the Quiz and Result components are thin and presentational.
- Build: Vite bundles it to static HTML/CSS/JS with a relative base, so it drops straight into a subdirectory of this site.
- Honest scope: it started from the Vue starter and grew a real question bank and scoring — there's room to add explanations and exam-section tagging next.