Interactive Quiz Builder: Design Requirements & Initial Specifications

This document outlines the comprehensive design requirements, initial specifications, user experience (UX) recommendations, and proposed visual identity for the "Interactive Quiz Builder." This forms the foundational step in translating the product vision into a tangible design, ensuring a user-centric and robust solution.

1. Product Vision & Core User Stories

Product Vision: To empower users to effortlessly create, customize, and share engaging interactive quizzes, fostering learning, assessment, and entertainment across various contexts. The builder will be intuitive for creators and delightful for quiz-takers, offering rich media support and insightful analytics.

Key User Stories (Examples):

• As an Educator: I want to create a multiple-choice quiz with detailed explanations for correct and incorrect answers, so I can assess student comprehension and provide immediate, constructive feedback.
• As a Marketer: I want to build a personality quiz with custom branding and lead capture forms, so I can engage my audience and generate qualified leads.
• As a Trainer: I want to design a timed assessment with a variety of question types (e.g., true/false, short answer), so I can efficiently evaluate participant knowledge retention.
• As a Quiz Enthusiast: I want to easily share my created quizzes with friends via a direct link or social media, so we can challenge each other and have fun.
• As a Quiz Taker: I want a clear, mobile-responsive interface to take quizzes, with immediate results and the option to review my answers, so I can learn from my mistakes.
• As an Administrator: I want to view analytics on quiz performance (e.g., completion rates, average scores, most missed questions), so I can understand engagement and identify areas for improvement.

2. Detailed Design Specifications

2.1. Functional Requirements (What the system will do)

• Quiz Creation & Management:

* Dashboard: Display a list of all created quizzes, with options for search, filter, edit, delete, preview, and publish.

* Quiz Settings:

* Title, Description, Category/Tags.

* Quiz Type (e.g., educational, trivia, personality, assessment).

* Time Limits (per quiz or per question).

* Scoring Logic (points per question, negative marking, partial credit).

* Result Display Options (immediate, at end, never).

* Retry Options (allow multiple attempts, limit attempts).

* Randomization (questions, answer options).

* Branding/Customization (logo, primary colors, background image).

* Access Control (public, private with password, invite-only).

* Lead Capture Form integration (optional, before or after quiz).

• Question & Answer Editor:

* Supported Question Types:

* Multiple Choice (single correct answer)

* Multiple Select (multiple correct answers)

* True/False

* Short Answer/Text Input

* Image/Video Based Questions

* Matching (e.g., drag-and-drop)

* Rating Scale (e.g., Likert scale for feedback/personality quizzes)

* Content Editor: Rich text editor for questions and answers (bold, italics, links).

* Media Integration: Upload images, GIFs, and embed videos (YouTube, Vimeo) into questions and answer options.

* Feedback per Answer: Provide specific feedback/explanation for each answer option (correct and incorrect).

* Question Reordering: Drag-and-drop functionality to reorder questions.

* Question Duplication: Easily duplicate existing questions.

• Quiz Taking Experience:

* Responsive Design: Optimized for desktop, tablet, and mobile devices.

* Progress Indicator: Clear visual indication of progress (e.g., "Question 5 of 10").

* Navigation: Clear "Next" and "Previous" buttons (if allowed).

* Timer Display: Prominent, real-time timer if a time limit is set.

* Submission: Clear "Submit" button at the end of the quiz.

• Results & Analytics:

* Individual Results: Display score, correct/incorrect answers, time taken, and specific feedback for each question.

* Quiz Review: Option for quiz-takers to review all questions and their answers post-completion.

* Creator Analytics:

* Number of attempts, completion rate.

* Average score, highest/lowest scores.

* Most frequently missed questions.

* Time spent per question/quiz.

* Participant list (if logged in/lead capture used).

• Sharing & Embedding:

* Direct Link: Generate a unique URL for each published quiz.

* Social Sharing: Integrated buttons for popular platforms (Facebook, Twitter, LinkedIn).

* Embed Code: Provide iframe code for embedding quizzes into websites/blogs.

2.2. Non-Functional Requirements (How well the system will perform)

• Performance: Fast loading times for both quiz builder and quiz-taker interfaces (target < 2 seconds).
• Scalability: Ability to handle a large number of quizzes, questions, and concurrent quiz takers without performance degradation.
• Security: Robust user authentication, data encryption, protection against common web vulnerabilities (OWASP Top 10).
• Usability: Intuitive, easy to learn, and efficient for both creators and takers. Minimal clicks to achieve common tasks.
• Accessibility: Adherence to WCAG 2.1 AA standards for users with disabilities (keyboard navigation, screen reader compatibility, high contrast).
• Reliability: High uptime and minimal data loss. Regular backups.
• Maintainability: Clean, modular code architecture for easy updates and feature additions.
• Responsiveness: Flawless display and functionality across a wide range of devices and screen sizes.

3. Wireframe Descriptions (Conceptual Layouts)

3.1. Dashboard Screen (Quiz Creator)

• Header: Logo, User Profile/Account, "Create New Quiz" button.
• Main Area:

* Search Bar & Filters: Ability to search quizzes by title/tags, filter by status (draft, published), category.

* Quiz List: A table or card-based view displaying:

* Quiz Title

* Status (Draft/Published)

* Number of Questions

* Number of Attempts/Participants

* Average Score (if applicable)

* Last Modified Date

* Action Buttons: Edit, Preview, Publish/Unpublish, Share, Delete, Analytics.

• "Create New Quiz" Button: Prominently placed, leading to the Quiz Editor.

3.2. Quiz Editor Screen (Main View)

• Header: Quiz Title (editable), "Save Draft," "Preview," "Publish" buttons.
• Left Sidebar/Panel (Quiz Settings):

* Sections for: "General Info" (Title, Description, Category), "Quiz Rules" (Time, Scoring, Retries), "Appearance" (Branding, Colors), "Sharing & Access."

* Each section expands to reveal relevant input fields.

• Central Area (Question List):

* "Add New Question" button (with dropdown for question types).

* List of existing questions, each presented as a card or collapsible panel:

* Question Type Icon

* First few words of the question text

* Number of Answers

* Action Icons: Edit (opens detailed question editor), Duplicate, Delete, Reorder (drag handle).

• Bottom Bar: Status messages (e.g., "Quiz saved successfully").

3.3. Question Editor Screen (Detail View - e.g., Multiple Choice)

• Header: "Back to Quiz Editor," Question Type label (e.g., "Multiple Choice Question").
• Question Input Area:

* Rich text editor for the main question text.

* "Add Media" button (for images/videos related to the question).

• Answer Options Area:

* List of answer input fields.

* Each answer field includes:

* Rich text editor for answer text.

* "Add Media" button (for images/videos as answer options).

* Checkbox/Radio button to mark as "Correct Answer."

* Input field for "Feedback/Explanation" specific to this answer.

* "Delete Answer" button.

* "Add Another Answer" button.

• Question Specific Settings: (e.g., for Multiple Choice: "Allow multiple selections").
• Footer: "Save Question" button, "Cancel" button.

3.4. Quiz Taker View Screen

• Header: Quiz Title, Progress Indicator ("Question 3 of 10"), Timer (if applicable).
• Main Content Area:

* Question Display: Clearly presents the question text and any associated media.

* Answer Options: Displays answer choices (radio buttons for single choice, checkboxes for multiple select, input field for short answer).

* Instructions: Brief instructions if needed (e.g., "Select all that apply").

• Footer: "Previous" button (if allowed), "Next Question" button. "Submit Quiz" button on the final question.

3.5. Quiz Results Screen (Quiz Taker)

• Header: Quiz Title, "Your Results."
• Summary:

* Overall Score (e.g., "8/10 points," "80%").

* Time Taken.

* "Congratulations!" or "Better luck next time!" message.

• Details:

* Option to "Review Answers" (shows each question with user'

Step 2: Design Specifications for Interactive Quiz Builder

This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Interactive Quiz Builder". The goal is to create a professional, intuitive, and highly functional platform that empowers users to effortlessly create engaging quizzes.

1. Detailed Design Specifications

1.1. Product Overview

• Product Name: Interactive Quiz Builder
• Purpose: To provide a robust, user-friendly, and highly customizable platform for creating, managing, and distributing interactive quizzes.
• Target Audience: Educators, marketers, content creators, trainers, small business owners, and anyone needing to assess knowledge, gather feedback, or engage an audience.
• Core Value Proposition: Simplify quiz creation with a powerful, intuitive interface, offering diverse question types, extensive customization, and insightful analytics.

1.2. Key Features & Functionality

• Dashboard:

* Overview of all created quizzes (list view with key stats).

* Quick actions: Create New Quiz, Edit, Preview, Share, View Analytics, Delete.

* Summary statistics (e.g., Total Quizzes, Total Participants, Average Score).

• Quiz Creation Workflow (Guided Steps):

* Step 1: Quiz Details: Title, Description, Cover Image, Category, Tags.

* Step 2: Questions: Add, edit, reorder questions; select question types.

* Step 3: Settings: Configure quiz behavior (timing, attempts, scoring, feedback).

* Step 4: Design: Customize appearance (themes, colors, fonts, branding).

* Step 5: Publish & Share: Generate shareable links, embed codes, social sharing options.

• Question Types:

* Multiple Choice: Single or multiple correct answers.

* True/False: Binary choice.

* Fill-in-the-Blank: Text input for specific words/phrases.

* Short Answer: Free-form text input (requires manual grading or keyword matching).

* Image Choice: Select an option represented by an image.

(Future Consideration)*: Rating Scale, Drag & Drop, Hotspot.

• Question Customization:

* Add text, images, or video to questions and answers.

* Set point values per question.

* Provide specific feedback for correct/incorrect answers.

• Quiz Settings:

* Timing: Time limit per quiz or per question.

* Attempts: Limit number of attempts per participant.

* Scoring: Enable/disable scoring, set passing score (percentage), show score at end.

* Randomization: Randomize question order, randomize answer options.

* Feedback: General feedback message on completion, custom redirect URL.

* Visibility: Public/Private, password protection.

• Design Customization:

* Pre-defined themes/templates.

* Custom color palette (primary, secondary, background, text).

* Font selection (integration with Google Fonts).

* Branding: Upload custom logo.

• Preview Functionality:

* Real-time preview of the quiz as it's being built.

* Device responsiveness preview (desktop, tablet, mobile).

• Publishing & Sharing:

* Unique shareable URL.

* Embed code (iframe) for websites.

* Direct sharing to popular social media platforms.

• Analytics & Reporting (Basic):

* Total participants, average score, completion rate.

* Breakdown of correct/incorrect answers per question.

* Participant-level data (if enabled).

• User Management: User profile, account settings, subscription management (if applicable).

1.3. User Flows (High-Level)

1. Create a New Quiz:

* User navigates to Dashboard.

* Clicks "Create New Quiz".

* Follows the guided 5-step workflow (Details -> Questions -> Settings -> Design -> Publish).

* Saves draft at any point, previews, and finally publishes the quiz.

1. Edit an Existing Quiz:

* User navigates to Dashboard.

* Selects a quiz from "My Quizzes" list.

* Clicks "Edit" action.

* Accesses the quiz editor, makes changes, and saves/updates.

1. View Quiz Results/Analytics:

* User navigates to Dashboard.

* Selects a quiz from "My Quizzes" list.

* Clicks "View Analytics" action.

* Reviews performance data and participant responses.

2. Wireframe Descriptions (Key Screens)

2.1. Dashboard Screen

• Layout: Standard web application layout with a persistent header and a left-hand navigation sidebar.
• Header:

* Left: Product Logo (e.g., "PantheraHive Quiz Builder").

* Right: "Create New Quiz" button (prominent), User Profile/Avatar (with dropdown for settings, logout).

• Left Sidebar Navigation:

* Dashboard (active state).

* My Quizzes.

* Analytics.

* Account Settings.

* Help/Support.

• Main Content Area (My Quizzes):

* Title: "My Quizzes" with a search bar and filter options (e.g., by status, category).

* Quiz List (Table/Card View): Each entry displays:

* Quiz Title (clickable to edit).

* Status (Draft, Published, Archived).

* Date Created/Last Modified.

* Total Participants (if published).

* Actions: "Edit", "Preview", "Share", "View Analytics", "Delete" (icon buttons).

* Quick Stats Section (Optional, top of main content): Small cards showing "Total Quizzes", "Total Participants (last 30 days)", "Average Score Across All Quizzes".

2.2. Quiz Editor - Quiz Details Screen (Step 1)

• Layout: Header, Step-by-step navigation indicator, main content area for form inputs, action buttons at bottom.
• Header:

* Left: "Quiz Title - Details" (editable title).

* Right: "Save Draft" button, "Preview" button, "Publish" button.

• Step Navigation Indicator:

* Horizontal progress bar or numbered tabs: 1. Details > 2. Questions > 3. Settings > 4. Design > 5. Publish. (Current step "Details" highlighted).

• Main Content Area:

* Quiz Title: Large text input field (<input type="text">).

* Quiz Description: Multi-line text area (<textarea>) with rich text editor options (bold, italic, links).

* Cover Image: Upload area (drag & drop or click to upload) with preview.

* Category: Dropdown selector (e.g., Education, Marketing, Entertainment).

* Tags: Input field with auto-suggest/chips for adding keywords.

• Bottom Actions: "Next: Questions" button.

2.3. Quiz Editor - Questions Screen (Step 2)

• Layout: Header, Step navigation, left sidebar for question list, main content area for question editor.
• Header: Same as Quiz Details screen.
• Step Navigation Indicator: 1. Details > 2. Questions > 3. Settings > 4. Design > 5. Publish. ("Questions" highlighted).
• Left Sidebar (Question List):

* "Add New Question" button (prominent).

* List of existing questions: Each item shows question number, a snippet of the question text, and question type icon.

* Drag-and-drop handles for reordering questions.

* Context menu (e.g., Duplicate, Delete) on hover/click.

• Main Content Area (Question Editor):

* Question Type Selector: Dropdown or icon buttons (e.g., Multiple Choice, True/False, Fill-in-the-Blank).

* Question Text: Rich text editor for the question itself.

* Media Upload: Option to add image/video specific to the question.

* Answer Section (dynamic based on question type):

* Multiple Choice: List of input fields for options, radio button/checkbox to mark correct answer(s), "Add Option" button, "Remove Option" icon.

* True/False: Two radio buttons "True" and "False", with one marked as correct.

* Fill-in-the-Blank: Input field for the correct answer(s) (can specify multiple correct variations).

* Feedback Messages: Input fields for "Correct Answer Feedback" and "Incorrect Answer Feedback".

* Point Value: Numeric input for points awarded for the question.

* Question Actions: "Delete Question", "Duplicate Question".

• Bottom Actions: "Previous: Details" button, "Next: Settings" button.

2.4. Quiz Editor - Design Screen (Step 4)

• Layout: Header, Step navigation, main content area with design controls, and a prominent live preview section.
• Header: Same as Quiz Details screen.
• Step Navigation Indicator: 1. Details > 2. Questions > 3. Settings > 4. Design > 5. Publish. ("Design" highlighted).
• Main Content Area (Design Controls):

* Theme Selector: Grid of pre-designed themes/templates with small preview images.

* Custom Colors:

* Primary Color: Color picker.

* Secondary Color: Color picker.

* Background Color: Color picker.

* Text Color: Color picker.

* Accent Color: Color picker.

* Font Selection: Dropdown for global font (e.g., integrated with Google Fonts).

* Branding: Logo upload area with preview, toggle for "Display Logo in Quiz".

• Live Preview Area:

* Large section (e.g., right half or bottom half of the screen) displaying an interactive, real-time preview of the quiz as design changes are applied.

* Device toggles (desktop, tablet, mobile) for responsive preview.

• Bottom Actions: "Previous: Settings" button, "Next: Publish" button.

3. Color Palettes

A modern, clean, and professional aesthetic is recommended, balancing vibrancy with readability.

3.1. Primary Palette

• Primary Brand Color: #007bff (A vibrant, trustworthy blue)

Usage*: Call-to-action buttons (e.g., "Create New Quiz", "Publish"), primary navigation highlights, active states, progress indicators.

• Secondary Accent Color: #28a745 (A fresh, positive green)

Usage*: Success messages, "Correct Answer" indicators, positive confirmations.

• Tertiary Accent Color: #6c757d (A sophisticated, neutral gray)

Usage*: Secondary buttons (e.g.,

Project: Interactive Quiz Builder - Final Design Asset Specifications

Deliverable Summary:

This document outlines the comprehensive design specifications for the "Interactive Quiz Builder" platform. It encompasses detailed wireframe descriptions for key user flows, a robust color palette, typography guidelines, iconography, imagery recommendations, and critical User Experience (UX) principles. The goal is to provide a clear, actionable blueprint for the visual and interactive design, ensuring a modern, intuitive, and engaging experience for both quiz creators and quiz takers. While the user input "test input for topic" suggests content generation, this deliverable focuses on the overarching design of the builder platform itself, designed to be topic-agnostic and highly adaptable.

1. Overall Design Philosophy

Our design philosophy for the Interactive Quiz Builder centers on simplicity, engagement, and empowerment.

• Simplicity: A clean, uncluttered interface that minimizes cognitive load, allowing users to focus on quiz creation without distractions. Intuitive navigation and clear information hierarchy are paramount.
• Engagement: Visual elements and interaction patterns are crafted to make the quiz creation process enjoyable and the quiz-taking experience dynamic. This includes thoughtful use of color, animation, and feedback.
• Empowerment: Providing creators with powerful yet easy-to-use tools to build diverse and effective quizzes. For quiz takers, the design aims to facilitate a smooth, fair, and often fun assessment experience.
• Accessibility: Ensuring the platform is usable by individuals with diverse abilities, adhering to WCAG 2.1 AA standards for contrast, keyboard navigation, and semantic structure.
• Modern & Responsive: A contemporary aesthetic that scales seamlessly across various devices and screen sizes, from desktop to mobile.

2. Detailed Design Specifications

2.1. Wireframe Descriptions (Key Screens)

The following descriptions outline the core structure and functionality of critical screens within the Interactive Quiz Builder.

2.1.1. Dashboard / Quiz List

• Purpose: Central hub for managing existing quizzes and initiating new ones.
• Layout:

* Header: Brand logo, user avatar/profile menu, "Create New Quiz" button (prominent).

* Sidebar (Optional/Collapsible): Navigation links (Dashboard, Analytics, Settings, Help).

* Main Content Area:

* Search Bar & Filters: For quiz name, status (draft, published), topic, date.

* Quiz Cards/List: Each card/row displays:

* Quiz Title

* Status (e.g., Draft, Published, Archived)

* Number of Questions

* Number of Attempts/Participants

* Last Modified Date

* Action Buttons: "Edit," "Preview," "Publish/Unpublish," "Share," "Delete," "View Results."

* Pagination/Load More: For extensive quiz lists.

• Key Interactions: Quick access to edit, preview, and publish quizzes. Clear call-to-action for creating new quizzes.

2.1.2. Quiz Editor (Main Creation Interface)

• Purpose: The primary workspace for building and configuring a quiz.
• Layout:

* Header: Quiz title (editable), "Save Draft" / "Publish" buttons, "Preview" button, "Back to Dashboard" link.

* Left Sidebar (Collapsible):

* Quiz Sections/Questions List: A hierarchical list of questions (e.g., Section 1 > Question 1, Question 2; Section 2 > Question 3). Drag-and-drop functionality for reordering questions/sections.

* "Add Question" / "Add Section" buttons: Prominently displayed.

* Quiz Settings Link: To access a dedicated settings panel.

* Main Content Area (Question Editor Panel):

* Currently Selected Question: Displays the detailed editor for the selected question type (see 2.1.4).

* Empty State: When no question is selected, provides guidance to add the first question.

* Right Sidebar (Contextual/Collapsible):

* Quiz-level Settings Snippet: Quick access to quiz duration, attempts, scoring method.

* Question-level Settings: Specific to the selected question (e.g., points, required, timer).

• Key Interactions: Real-time saving indication, intuitive drag-and-drop, clear separation of quiz-level and question-level controls.

2.1.3. Question Type Selector (Modal/Panel)

• Purpose: Allows creators to choose the type of question they want to add.
• Layout:

* Modal/Overlay: Appears when "Add Question" is clicked.

* Question Type Cards/List: Each card/item includes:

* Icon representing the question type.

* Question Type Name (e.g., Multiple Choice, True/False, Open-Ended, Image Hotspot, Matching).

* Brief Description of the question type.

* "Cancel" / "Select" buttons.

• Key Interactions: Clear visual distinction between question types, easy selection.

2.1.4. Question Editor (Specific - e.g., Multiple Choice)

• Purpose: Detailed interface for inputting question content, options, and settings.
• Layout:

* Question Text Input: Rich text editor for question prompt.

* Media Upload: Option to add image/video/audio to the question.

* Answer Options Section:

* List of input fields for each answer choice.

* Radio Buttons/Checkboxes: To mark correct answer(s).

* "Add Option" button.

* "Remove Option" icon/button for each choice.

* Feedback Section (Optional):

* Input field for general feedback.

* Input fields for correct/incorrect specific feedback.

* Question Settings (Contextual Right Sidebar or Accordion):

* Points awarded for correct answer.

* Required question (toggle).

* Time limit for question (optional).

* Randomize answer order (toggle).

* Hint text (optional).

• Key Interactions: Real-time preview of question as it's built, easy manipulation of options, clear indication of correct answers.

2.1.5. Quiz Taker Interface

• Purpose: The interface presented to users taking the quiz.
• Layout:

* Header: Quiz Title, Progress Bar (e.g., "Question 3 of 10"), Timer (if applicable).

* Main Content Area:

* Question Display: Clear, large font for question text. Any associated media (image, video).

* Answer Options: Visually distinct and easily clickable (radio buttons for single choice, checkboxes for multiple choice, input fields for open-ended).

* "Previous" / "Next" / "Submit" buttons: Clearly labeled. "Submit" only available on final question or upon completion.

* Footer (Optional): "Flag Question" or "Help" link.

• Key Interactions: Smooth transitions between questions, clear selection states, immediate feedback on interaction.

2.1.6. Results Page (Quiz Taker)

• Purpose: Display quiz performance to the taker.
• Layout:

* Header: Quiz Title, "Your Score" (prominently displayed), "Percentage Correct."

* Summary Section: Total questions, correct answers, incorrect answers, time taken.

* Question-by-Question Review (Optional):

* Original Question

* Your Answer

* Correct Answer (highlighted)

* Feedback (general or specific)

* Points awarded/lost.

* Action Buttons: "Retake Quiz" (if allowed), "View Leaderboard" (if applicable), "Share Results."

• Key Interactions: Clear visual feedback on performance, easy review of answers.

2.2. Layout & Grid System

• Grid System: 12-column responsive grid (e.g., Bootstrap or custom CSS Grid).
• Breakpoints:

* Extra Small (XS): <576px (Mobile Portrait)

* Small (SM): 576px - 767px (Mobile Landscape, Small Tablets)

* Medium (MD): 768px - 991px (Tablets, Small Laptops)

* Large (LG): 992px - 1199px (Laptops, Desktops)

* Extra Large (XL): ≥1200px (Large Desktops)

• Spacing:

* Consistent use of a base unit (e.g., 8px or 10px) for margins, padding, and component spacing.

* Hierarchy in spacing: Larger gaps for major sections, smaller for elements within a component.

• Content Width: Max content width for desktop to prevent overly long lines of text (e.g., 1200px - 1440px).

2.3. Typography

• Primary Font (Headings & Key UI Elements): Montserrat

* Purpose: Modern, geometric sans-serif, excellent legibility for titles and prominent text.

* Weights: Regular (400), Medium (500), Semi-bold (600), Bold (700).

* Usage: H1, H2, H3, Main Navigation, Call-to-Action buttons.

• Secondary Font (Body Text & UI Details): Open Sans

* Purpose: Highly readable, neutral sans-serif, suitable for long-form content and smaller text.

* Weights: Light (300), Regular (400), Semi-bold (600).

* Usage: H4-H6, Paragraphs, Labels, Form Inputs, Captions, Tooltips.

• Font Sizes (Examples - Responsive Scaling Required):

* H1: 48px (Desktop), 36px (Mobile)

* H2: 36px (Desktop), 28px (Mobile)

* H3: 28px (Desktop), 22px (Mobile)

* H4: 22px (Desktop), 18px (Mobile)

* Body Large: 18px

* Body Regular: 16px

* Small Text/Caption: 14px

• Line Height:

* Headings: 1.2em - 1.3em

* Body Text: 1.5em - 1.6em

• Text Color:

* Primary Text: #333333 (Dark Grey)

* Secondary Text: #666666 (Medium Grey)

* Disabled Text: #AAAAAA (Light Grey)

* White Text: #FFFFFF (for dark backgrounds)

2.4. Iconography

• Style: Line-based, minimalist, consistent stroke weight (e.g., 1.5px or 2px). Filled icons can be used for active states or specific actions.
• Library: Material Design Icons, Font Awesome Pro, or a custom set.
• Usage:

* Navigation: Home, Dashboard, Settings, Profile.

* Actions: Add, Edit, Delete, Save, Publish, Preview, Share, Duplicate.

* Question Types: Multiple Choice, True/False, Open-Ended, Image, Matching.

* Feedback/Status: Checkmark (success), Exclamation (warning), X (error), Info circle.

• Size: Standard sizes (e.g., 16px, 20px, 24px) with clear scaling rules.

2.5. Imagery & Illustrations

• Style: Flat, modern, slightly abstract illustrations