SCORM, xAPI, Tincan Player and Telemetry

[rks-031]

Ticket Contents

Content Player
A player that supports the playback of multiple types of content right from mp4 videos, PDF documents to SCORM, XAPI and Tincan types of content.

Feature Value
The Player shall be integrated in iGOT Platform and all the course/programs etc. shall be played through this integrated player.

Feature Vision
The Player shall be able to emit the heartbeats, current timestamp, progress etc.
Player shall be able to play different types of content such as PDF documents, epub files, mp4 files and similar other media content.

Goals & Mid-Point Milestone

1. Develop a versatile Content Player integrated with the iGOT Platform capable of playing various types of content, including mp4 videos, PDF documents, SCORM, xAPI, and Tin Can packages.
2. Enable seamless playback of courses and programs within the iGOT Platform using the integrated Content Player.
3. Implement telemetry features to track user engagement and progress, including heartbeats, current timestamp, and progress metrics.

Setup/Installation

No response

Expected Outcome

1. Enhanced user experience through a unified Content Player for accessing diverse content types within the iGOT Platform.
2. Improved tracking and analysis of user engagement and progress through telemetry data.
3. Increased accessibility and usability of iGOT courses and programs across different content formats.

Acceptance Criteria

1. Content Player successfully integrated with iGOT Platform, enabling playback of various content types.
2. SCORM, xAPI, and Tin Can packages can be played seamlessly within the Content Player.
3. Telemetry features implemented to track user interactions, including heartbeats, current timestamp, and progress.
4. Content Player capable of handling different media formats such as PDF documents, epub files, mp4 videos, etc.
5. User feedback indicating satisfaction with the playback experience and telemetry data accuracy.

Implementation Details

The project has to be built from scratch and is tech stack agnostic.

Mockups/Wireframes

No response

Product Name

Karmayogi

Organisation Name

MeitY

Domain

⁠Learning & Development

Tech Skills Needed

Other

Mentor(s)

Rajnish Kumar Singh

Category

Backend

[vinayakjaas]

Weekly Learnings & Updates

Week 1 (11th June - 17th June)

• Go through the react-pdf Documentation
  react-pdf
• Familiarized with the API, available components (Document, Page), and their usage.
• Learn how to Improve PDF Handling Capabilities
• Learn Advanced PDF Handling and Navigation

Week 2 (18th June - 24th June)

• learn how to handle incoming requests and Develop server-side logic for handling file uploads and retrievals.
• Integrate Multer middleware to handle multipart/form-data by following official Documentation. Implement file validation to ensure only PDF files are uploaded.
  https://www.scaler.com/topics/nodejs/multer-in-node-js/
  
• Brush my knowledge and Create RESTful API endpoints for uploading and retrieving PDFs. Implement route handling and controller logic for the API endpoints.
  https://www.youtube.com/watch?v=E8uka5CjLKw

Week 3 (25th June - 1st July)

• Utilized Axios to fetch PDF files from the backend for this I follow Official Documentation of Axios
  https://www.npmjs.com/package/axios
• Used hooks like useState and useEffect to manage state and lifecycle methods for fetching and displaying PDFs.
• Considered lazy loading for large PDFs to improve performance.

Week 4 (2nd July - 8th July)

• Convert entire code into build phase so we able to create library
• Build any Library in react and how we call this library
• Learn about how to deploy library globally(npm OR yarn packages)
  https://docs.npmjs.com/

Week 5 (9th July - 15th July)

• Learn about XAPI ,Scrom Cloud and TinCan packages from official Documentation
  https://xapi.com/
• By following Documentation of Tincan Pacakges integerate with our backend codebase
  https://scorm.com/project-tin-can-phase-3-tin-can-packages-in-scorm-cloud/
• Testing the shareable data from Scrom Cloud
  

Week 6 (16th July - 22nd July)

• Define schema for storing quiz results, including fields for learner details and quiz performance metrics.
• Implement controller functions to handle core logic. Functions include saving quiz results and converting quiz data into xAPI statements for SCORM Cloud.
• Understand the structure of xAPI statements and how to map quiz result data to the xAPI format. This involves setting up the actor, verb, object, and result properties according to the xAPI specification.
• Create RESTful API endpoints using Express. Define endpoints for saving quiz results and fetching stored results. Organize routes and controllers to handle these endpoints efficiently.
• Understand the data flow from frontend to backend: how quiz data is submitted by the frontend, processed by the backend, and converted into xAPI statements for SCORM Cloud.

Week 7 (23rd July - 29th July)

• Go through design part for quiz Portal use some Open source packages such as Tailwind etc
• Connect Frontend to backend using library such as axios so for go through proper documentation
• For testing purpose we used Postman and Thunder Client

Week 8 (30th July - 5th Aug)

• Gained knowledge of the various content types supported by SCORM Cloud, including SCORM 1.2, SCORM 2004, AICC, xAPI (Tin Can), and cmi5.
• Became familiar with the latest features and updates in SCORM Cloud, particularly those related to content management, such as improved content uploading processes, enhanced reporting capabilities, and better integration with third-party tools.
• Developed a deep understanding of how to transfer data from xAPI to SCORM Cloud, including setting up the necessary configurations, handling authentication, and managing data storage and retrieval.

Week 9 (6th Aug - 12th Aug)

• Gained proficiency in setting up a robust server-side architecture to manage video content, ensuring secure authentication and authorization processes.
• Learned the intricacies of handling and managing video content metadata, including how to store, retrieve, and utilize metadata effectively.
• Enhanced skills in implementing error handling and logging mechanisms, crucial for debugging and maintaining the system.

Week 10 (13th Aug - 19th Aug)

• Gained hands-on experience in implementing backend functionality to allow users to upload video files securely.
• Techniques for extracting and capturing metadata from uploaded video files. This knowledge is vital for automating the process of organizing video content and making it searchable.
• Enhanced skills in validating complex workflows, ensuring that each step in the video upload and metadata management process functions correctly.

Week 11 (20th Aug - 26th Aug)

• Learned how to design and implement a frontend video player component and seamlessly integrate it with the backend to fetch and display video content.
• Developed the ability to handle video metadata and ensure it is correctly fetched and rendered with the video player.
• Gained experience in ensuring the video player is responsive and compatible across various screen sizes and devices, improving UX.

Week 12 (27th Aug - 2nd Sept)

• Integrated and implemented essential video player controls (play, pause, forward, rewind) for a functional playback experience.
• Learned to capture and store important video state information like timestamps when paused or stopped, enhancing user engagement and session persistence.
• Developed the ability to reflect video completion in the UI, such as showing a "completed" badge for finished videos.

Week 13 (3rd Sept - 9th Sept)

• Learned how to set up the environment and dependencies for EPUB rendering, essential for handling eBooks or digital reading material.
• Integrated a suitable EPUB library into the project and learned how to render EPUB files within the application.
• Finalized project documentation, improving understanding of documenting technical implementations and providing a clear guide for future development.

[rks-031]

Weekly Goals

Week 1 (11th June - 17th June)

• Set up the codebase and go through the official documentation of React.
• Familiarization with APIs (fetching and implementation).
• Go through the PDF libraries and learn PDF handling and navigation.

Week 2 (18th June - 24th June)

• Implement the server-side code for PDFDatabaseRenderer.
• Configure MongoDB as the database.
• Set up Multer to handle multipart/form data.
• Create API endpoints for PDF retrieval.
• Integrate PDF processing and storage with MongoDB, ensuring robust error handling and validation for file uploads.

Week 3 (25th June - 1st July)

• Develop a frontend application to interact with the backend PDF Database rendering service.
• Use the react-pdf library's Document and Page components to render the PDF
• Add basic navigation and state management to switch between the Show and Hide PDF.
• Add styling and UI enhancements to improve user experience and thoroughly test the front end to ensure proper backend integration.

Week 4 (2nd July - 8th July)

• Finalize the code for the pdf library
• Publish the npm library
• Complete the documentation

Week 5 (9th July - 15th July)

• Setup Backend for interaction with SCORM cloud database for sending XAPI data to the database.
• Use TinCan packages to set up the code in JS.
• Test the API using tools like Postman, ThunderClient, etc.

Week 6 (16th July - 22nd July)

• Write backend code for the Quiz portal.
• Convert JSON data Into Xapi and store it in the SCORM cloud.
• Create various endpoints for post and fetch data from frontend.
• Test the backend code.

Week 7 (23rd July - 29th July)

• Design UI for quiz portal.
• Store the learner's data, total correct and incorrect answers, and their final score.
• Fetching XAPI data from scrom and convert into JSON format.
• Test the backend code.

Week 8 (30th July - 5th Aug)

• Investigate the various content types supported by SCORM Cloud
• Explore any new features or updates in SCORM Cloud related to content management.
• Write detailed documentation on transferring data from xAPI to SCORM Cloud.

Week 9 (6th Aug - 12th Aug)

• Set up server-side code to support video content and ensure proper authentication and authorization mechanisms.
• Handle video content metadata and ensure it is correctly stored and retrieved.
• Implement error handling and logging for video content operations.
• Validate video content compatibility and playback functionality.
• Test the implementation using testing software such as ThunderClient/Postman.

Week 10 (13th Aug - 19th Aug)

• Implement the backend functionality to allow users to upload video files.
• Extract and capture metadata from the uploaded video files.
• Integrate with SCORM Cloud to upload the video and its associated metadata.
• Validate the workflow and ensure the system functions correctly.

Week 11 (20th Aug - 26th Aug)

• Design and implement a frontend component to display the video player.
• Integrate the video player with the backend to fetch and render the video content(MetaData).
• Ensure responsive design and compatibility with different screen sizes and devices.

Week 12 (27th Aug - 2nd Sept)

• Design a responsive and user-friendly UI for video playback.
• Integrate a video player component with basic controls (play, pause, forward, rewind).
• Record and store the timestamp when a video is paused or stopped.
• Track video completion status and record it in the database or SCORM Cloud.
• Update the UI to reflect progress (e.g., show a "completed" badge for finished videos).
• Optimize video loading times and reduce buffering delays.

Week 13 (3rd Sept - 9th Sept)

• Set up the basic environment and dependencies required for EPUB rendering
• Integrate the chosen EPUB library into the project.
• Ensure that the EPUB files can be loaded and rendered properly on the UI.
• Create a basic UI component that can display the contents of any EPUB book or reading material.
• Finalize the Documentation.