Content Studio — Educational Courses

Educational Courses
Complete Guide

Content Studio-র Courses section — YouTube playlist player, level filter, playlist navigation, এবং YouTube API key integration।

Beginner/Intermediate/Advanced filter, YouTube playlist player, localStorage API key — সব feature বিস্তারিত।

Level Filter (3 levels) YouTube Playlist Player Playlist Navigation localStorage API Key
Page Flow

3-Page Navigation

Page 01
Content Hub
hub.html
Page 02
Course Listing
course-listing.html
Page 03
Course Viewer
course-viewer.html?id=X
Page 2

Course Listing

course-listing.html — level filter tabs + course cards with video count and difficulty badge।

Studio
All
Beginner
Intermediate
Advanced
12 videos
Beginner
Basic Electronics — Complete Course
Ohm's Law, Resistors, Capacitors, LED...
8 videos
Intermediate
MATLAB for Engineers
Simulation, Plotting, Simulink Basics...
1
Level Filter Tabs
4 difficulty levels: All, Beginner (green), Intermediate (yellow), Advanced (red). Filters course cards instantly. Different color per level for quick visual identification.
4 level filter — Beginner (green), Intermediate (yellow), Advanced (red)।
2
Course Thumbnail / Icon
Course card thumbnail area. If no custom thumbnail: shows FontAwesome subject icon. Video count badge (bottom-right) pulled from playlist.length.
Custom thumbnail না থাকলে FA icon। Video count badge দেখায়।
3
Difficulty Badge
Color-coded badge: Beginner = green, Intermediate = yellow/amber, Advanced = red.
4
Course Description Preview
Short description snippet below title — pulled from description field, truncated.
Page 3

YouTube Playlist Viewer

course-viewer.html — YouTube IFrame player + scrollable playlist panel, episode navigation.

Courses
Set YouTube API key for video durations. Tap in header to configure.
Ep 3/12
Basic Electronics #3 — Capacitors Explained
Course Playlist
1
Introduction to Electronics
12:30
2
Ohm's Law & Resistors
18:45
Capacitors Explained
22:10
4
LED Circuits & Calculations
15:20
1
API Key Notice Banner
Yellow info banner shown when no youtube_api_key in localStorage. Prompts user to tap the key icon in header to set it. Without key: video durations not shown, enriched data unavailable.
API key না থাকলে yellow banner — key icon tap করে set করতে বলে।
2
YouTube Playlist Player
YouTube IFrame API loads selected episode. Progress bar below shows position in video. Episode X/Total badge in corner.
YouTube IFrame API — selected episode play হয়। Progress bar দেখায়।
3
Playlist Panel (renderPlaylist)
renderPlaylist() generates scrollable episode list. Active episode highlighted with red play icon. Tap any episode → IFrame loads that video.
renderPlaylist() — scrollable episode list। Active episode red highlight।
4
currentVideoIndex State
JS variable currentVideoIndex tracks which episode is playing. Changes when user taps playlist item or video ends (auto-advance).
currentVideoIndex — কোন episode চলছে track করে।
5
Video Duration from API
If YouTube API key present: youtube-data-fetcher.js enriches each playlist item with real duration from YouTube Data API v3. Shown in playlist.
API key থাকলে real video duration YouTube API থেকে fetch হয়।
All Features

Courses System — Every Feature

Level Filter (4 Levels)
All / Beginner / Intermediate / Advanced — color-coded tabs. Instant filter. Level stored in difficulty field of course data.
4 level filter, color-coded. real-time filter।
YouTube Playlist Player
YouTube IFrame API loads individual episode videos. Auto-advance to next when current video ends. Each course stores a playlist[] array of {videoId, title} objects.
YouTube IFrame API — episode শেষ হলে auto-advance।
renderPlaylist()
Dynamically builds scrollable playlist panel UI. Active item highlighted. Tapping any item loads that video in IFrame player instantly.
Scrollable playlist — tap করলে instant video switch।
YouTube API Key (localStorage)
YouTube Data API v3 key stored as localStorage.getItem('youtube_api_key'). Used to fetch video durations for playlist enrichment. Header key icon to set/update.
API key localStorage-এ store হয়। Header key icon দিয়ে set করা যায়।
Duration Enrichment
With API key: each playlist video's duration fetched from YouTube Data API v3, shown in playlist panel. Without key: duration not displayed.
Auto-Advance Episodes
When IFrame player fires onStateChange → ENDED, auto-loads next episode (currentVideoIndex + 1).
Episode Progress Bar
Visual bar under player title showing episode X of Total. Updates on each episode change.
Share Course
Header share button — Web Share API with course title. Clipboard fallback.
Data Schema

content.json — educational-courses fields

FieldTypeDescription
idStringcourse-001 format
titleStringCourse title
descriptionStringShort description shown in listing card preview
difficultyStringbeginner | intermediate | advanced — level filter key
playlist[]ArrayArray of {videoId, title} objects — each episode
thumbnailStringOptional course thumbnail image
iconStringFontAwesome icon class for fallback display
tags[]ArrayTopics for search
languageStringbn | en | bn-en
File Map
FileLocationRole
hub.htmlmobile/content-studio/Entry hub for all 5 content types
course-listing.htmlmobile/content-studio/educational-courses/Level filter tabs + course card list
course-listing.jsmobile/content-studio/educational-courses/Loads content.json, renders + filters cards
course-viewer.htmlmobile/content-studio/educational-courses/YouTube playlist player + episode list
course-viewer.jsmobile/content-studio/educational-courses/renderPlaylist(), IFrame API, currentVideoIndex, API key handling
youtube-data-fetcher.jsmobile/content-studio/educational-courses/Duration enrichment via YouTube Data API v3
content.jsonContent Code/Central data — educational-courses array
Research Papers Guide Written Posts Guide