fawzymohamed/devops
Overview
This skill provides practical guidance and components for implementing a quiz system using Nuxt UI and TypeScript. It covers data interfaces, question formats (single, multiple, true/false), scoring logic, and ready-to-use Vue components for container, question, and results views. Use this skill when building quizzes, grading flows, and review screens in a learning management context.
How this skill works
The skill defines TypeScript interfaces for Quiz, QuizQuestion, QuizAnswer, and QuizState, plus YAML-friendly question payloads for all supported types. It includes composable-driven component patterns: QuizContainer manages flow and state, QuizQuestion handles UI and selection for each question type, and QuizResults computes and displays score, pass/fail, and per-question feedback. Scoring uses exact-match rules for multiple-choice and direct comparison for single/true-false, returning a percentage score.
When to use it
- Building a lesson-level quiz UI with Nuxt and Vue 3
- Implementing question types (single, multiple, true/false) and selection UX
- Adding scoring, pass/fail logic, and retry flows
- Rendering detailed results with explanations and per-question status
- Creating composables that manage quiz state and navigation
Best practices
- Follow the Content Alignment Rule: only test concepts covered in the lesson text
- Mix question types and include clear explanations for each correct answer
- Use exact-match scoring for multi-select to avoid partial-credit ambiguity
- Keep question counts in the 3–7 range according to lesson difficulty and length
- Default passing score to 70% and expose passingScore for per-quiz overrides
Example use cases
- A lesson page that injects a Quiz object and mounts QuizContainer to assess comprehension
- An authoring tool that serializes question YAML into the Quiz interface for runtime
- A course module that aggregates quiz results and emits completion events to progress tracking
- A review screen that highlights incorrect answers and shows explanations for remediation
FAQ
Multiple-choice questions require exact match: the selected set must have the same items and length as the correctAnswers array to count as correct.
Can I allow partial credit for multi-select?
The provided logic uses exact-match scoring. If you need partial credit, modify the calculateScore function to award fractional points based on overlap.
How do I ensure quiz questions only test lesson content?
Verify each quiz concept appears in the lesson text. If a useful concept is missing, add it to the lesson before creating the question.
4 skills
This skill helps you implement a reusable LMS quiz system with quiz containers, questions, scoring, and results in Nuxt UI.
This skill helps you apply UI/UX design patterns for an LMS, improving navigation, accessibility, and responsive layouts across pages.
This skill helps you implement Vue 3 composables with localStorage persistence in Nuxt 4, enabling progress, quizzes, and certificates.
This skill helps you build consistent Nuxt UI v4 components, layouts, and interactions with buttons, cards, forms, and skeleton states.
