https://github.com/rk28284/assessmentlms

Welcome to the LMS React Page project! This project aims to create a seamless learning experience by embedding YouTube videos and assessments in a user-friendly interface.
https://github.com/rk28284/assessmentlms

html-css-javascript react tailwindcss typescript

Last synced: about 10 hours ago
JSON representation

Welcome to the LMS React Page project! This project aims to create a seamless learning experience by embedding YouTube videos and assessments in a user-friendly interface.

• Host: GitHub
• URL: https://github.com/rk28284/assessmentlms
• Owner: rk28284
• Created: 2024-12-20T16:02:29.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-21T07:49:51.000Z (about 2 months ago)
• Last Synced: 2024-12-21T08:30:05.700Z (about 2 months ago)
• Topics: html-css-javascript, react, tailwindcss, typescript
• Language: TypeScript
• Homepage:
• Size: 49.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Learning Management System (LMS) - React Page




    
Welcome to the LMS React Page project! This project aims to create a seamless learning experience by embedding YouTube videos and assessments in a user-friendly interface. The application is designed to facilitate a structured learning path, allowing users to engage with video content and complete assessments in a vertical scroll layout.

-

    
Features

    


        


YouTube Video Playback: Embed YouTube videos in a clean iframe player without displaying additional details such as titles, channel names, or suggested videos.

        


Automatic Scrolling: Automatically scroll to the assessment section once the YouTube video finishes playing.

        


Assessment Display: Show assessments related to the completed video directly below the video frame.

        


Manual Navigation: Users can manually proceed to the next video and assessment using a "Next Task" button, which is only enabled after completing the current assessment.

        


Vertical Scroll Layout: Each video and its corresponding assessment are displayed in a vertical scroll layout for a smooth user experience.

        


UI and Accessibility: Utilize ShadCN components for a consistent and stylish interface, supporting dark mode and ensuring accessibility with ARIA roles and keyboard navigation.

        


Dummy Data: Use dummy JSON data to simulate video URLs and assessment details, making it easy to replace with API integration in the future.

    

-

    
Requirements

    
YouTube Video Playback with Hidden Details

    


        
Embed YouTube videos using the iframe player.

        
Configure the iframe to hide video details by adding parameters to the URL.

        
Detect when the video finishes and automatically scroll to the corresponding assessment section.

        
Load video URLs and metadata from dummy JSON data.

    

-

    
Assessment Section

    


        
Display assessments related to the completed video directly below the YouTube frame.

        
Include various assessment types:

            


                
Multiple-choice questions with correct answer validation.

                
Short answer questions with text input for users.

            

        

        
Provide interactive feedback for user responses.

    

-

    
Manual Navigation

    


        
Implement a "Next Task" button to manually scroll to the next section.

        
Ensure users can only proceed to the next video and assessment after completing the current assessment.

    

-

    
Vertical Scroll Flow

    


        
Ensure smooth transitions between sections during auto or manual scroll.

    

-

    
UI and Accessibility

    


        
Use ShadCN components for consistency and style.

        
Support dark mode with a toggle.

        
Ensure accessibility (ARIA roles, keyboard navigation, and feedback for all interactions).

    

-

    
Dummy Data

    


        
Use a JSON object to simulate YouTube video and assessment data .

        
Ensure the structure is easy to replace with APIs in the future.

    

-

    
Acceptance Criteria

    
YouTube Video Section

    


        
Videos load in a clean iframe player without showing video titles, channel details, or suggested videos.

        
Automatically scrolls to the assessment when the video ends.

        
Users can manually navigate using the "Next Task" button.

    

-

    
Assessment Section

    


        
Assessments are displayed immediately after their respective videos.

        
Validations provide immediate feedback for user inputs.

        
Users must complete the assessment to unlock the next video and assessment.

    

-

    
Flow and Navigation

    


        
Videos and assessments appear sequentially in a vertical scroll layout.

        
Navigation between tasks is smooth and intuitive.

    

-

    
Dummy Data

    


        
JSON contains video URLs, titles, and related assessment details.

        
All interactions dynamically update the JSON state.

    

-

    
Performance and Responsiveness

    


        
The page is responsive and works well on desktop and tablets.

        
Video playback and scrolling transitions are smooth without noticeable lag.

    

-

    
Getting Started

    
To get started with the project, follow these steps:

    


        


Clone the repository:

            
git clone https://github.com/rk28284/AssessmentLms.git

cd AssessmentLms

        

        


Install dependencies:

            
npm install

        

        


Run the application:

            
npm run dev

        

        


Open your browser and navigate to http://localhost:3000 to view the application.