Vue.js Certification Practice Quiz

A Vue 3 practice quiz application to help you prepare for the certificates.dev Vue.js certification exam.

Features

• 60 Vue.js interview questions sourced from real interview questions
• Random subset selection (40-50 questions) each quiz
• 1 minute timer per question
• Immediate feedback with correct/incorrect highlighting
• Justification for each answer
• Progress tracking
• Final score with review

Quick Start

Prerequisites

• Podman installed on your machine

Start the App

cd vue-cert-quiz
podman-compose up

The app will be available at: http://localhost:5173

Stop the App

Press Ctrl+C in the terminal running podman-compose, then run:

podman-compose down

Or use:

podman-compose down -v

Usage

1. Start Screen: Select the number of questions (10-60) using the slider
2. Quiz: Answer each question within 60 seconds
3. Feedback: After each answer, see if you were correct with justification
4. Results: View your final score and review all answers

Project Structure

vue-cert-quiz/
├── src/
│   ├── components/
│   │   ├── QuizStart.vue       # Welcome screen
│   │   ├── QuizQuestion.vue    # Question display
│   │   ├── QuizResults.vue     # Final score
│   │   └── Timer.vue           # Countdown timer
│   ├── App.vue                 # Main app component
│   ├── main.js                 # Entry point
│   └── data/
│       └── questions.json       # Question bank
├── Containerfile               # Podman build file
├── docker-compose.yml          # Container orchestration
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

Tech Stack

• Vue 3 (Composition API)
• Vite
• Tailwind CSS
• Podman

Development

If you want to modify the questions, edit src/data/questions.json.

Questions are formatted as:

{
  "id": 1,
  "question": "What is Vue.js?",
  "options": ["Correct answer", "Wrong 1", "Wrong 2", "Wrong 3"],
  "correctIndex": 0,
  "justification": "Explanation of the correct answer"
}