Gig  Overview:This project involves converting the Quiz Pages for an online learning platform using Vue.js 3 Composition API and TailwindCSS. The quiz functionality is a critical component of the Individual Course Detail Page, allowing users to test their knowledge after completing course modules. The design should ensure a user-friendly and interactive experience while maintaining consistent responsiveness and aesthetic appeal. You are provided with a link to UI design for the Quiz pages.

Scope of Work:

1. Quiz Tab on the Individual Course Detail Page:

Required Features:

-Display quiz guidelines associated with the lesson in a card, including:

-Quiz Instructions.

-Start or Resume button for each quiz.

-Right-side card with a list of lessons in the course, instructors name above.

-The course video display above the quiz tab card with course description, start date and title above.

Expected Tasks:

-Vue.js 3 Composition API:

-Dynamically fetch and display quizzes linked to the course/lesson.

-Update quiz status (Not Attempted, In Progress, Completed) based on user interaction or backend data.

-Use Composition API for state management and reusable logic.

-TailwindCSS:

-Use badges or tags with distinct colors to indicate quiz status.

-Ensure mobile responsiveness.

2. Quiz Attempt Page:

Required Features:

-Dynamic rendering of quiz questions and options, including:

-Multiple-choice questions.

-True/False questions.

-Navigation options:

-Quiz layout should be scrollable to allow students to view questions by scrolling up and down .

-Submit button at the end of the quiz.

-Real-time feedback for quiz attempts.

Expected Tasks:

-Vue.js 3 Composition API:

-Fetch and display quiz questions dynamically.

-Track user's answers and handle navigation between questions.

-Implement logic for submitting the quiz and handling responses.

-TailwindCSS:

-Style questions and answers for readability and usability.

-Add a clear visual hierarchy to differentiate questions, options, and controls.

-Design a timer or progress bar for timed quizzes.

3. Quiz Results Page:

Required Features:

-Display quiz results, including:

-User score (percentage and total correct answers).

-Feedback for correct and incorrect answers .

-Button to Previous and Next lesson.

Expected Tasks:

-Vue.js 3 Composition API:

-Fetch and display quiz results dynamically.

-Implement logic for reviewing answers.

-TailwindCSS:

-Design a clean layout for result details and feedback.

Required Skills:

Strong proficiency in Vue.js 3 with experience in using the Composition API.

Expertise in TailwindCSS for creating responsive and modern UI layouts.

Ability to work with Vue.js state management (Vuex or Composition API’s reactive states) for dynamic data rendering.

Experience with form validation and handling user input securely in frontend applications.

Knowledge of responsive design principles and mobile-first development.

Familiarity with Git for version control.

Design & Aesthetic Requirements:

Color Scheme:

-Primary color: #D50036 

-Secondary color: #C4C4C4

-Primary-green: #00B454

-Primary-yellow:#F39D1C

-Primary-gray:#4B5054

-Primary-black:#0F151F

-Primary-red:#E50303

-Background color: #F5F5F5 

-Text color: #000000, #D50036, #FFFFFF 

-Button color: #D50036

-Border color: #E5E5E5

• These color codes are the company’s brand colors and design guide

Fonts:

-Use a clean, modern font like Source-san.

Spacing:

-Generous padding and margin for a spacious design that enhances readability.

Responsiveness:

-Ensure that all pages are responsive across all device sizes, from desktop to mobile.

Layout:

-Use TailwindCSS grid and flex utilities for consistent alignment.

-Ensure buttons, progress bars, and question layouts are accessible and easy to interact with on all devices.

Expectations: 

As a Techo chosen to participate in this gig, we have some expectations.

-Timely Completion: complete each gig within the given timeframe. If the gig has not been completed within this frame, the project will be re-assigned.

-Communication: Stay in touch with the Community Manager for guidance, support and feedback throughout the project. This can be done through the chat box in the My Gigs section underneath the gig description.

-Work-Ethic Alignment: Make a concerted effort to comply with our standards.

Figma Link: https://www.figma.com/design/pLelrc266CYuIKP6gnwyHC/Quiz?node-id=0-1&p=f&t=Gj0vSs2U16Y7uiRK-0

Repository Link : Clone from lms_quiz branch for this project. https://github.com/suburban-fiber-company/Suburban_LMS_Student/tree/lms_quiz

https://github.com/suburban-fiber-company/Suburban_LMS_Student/tree/lms_teachers