1️⃣ Pure Code Layer (Zero Data)
Contains only UI rendering, auto-play timer countdown engine, video simulation player, and keyboard navigation.
js/topic_gallery.js • css/topic_gallery.css
2️⃣ Topics Data Layer (Pure Content)
Defines topic numbers, titles, workflow narratives (2-3 lines), feature checklists, and sequence of steps using logical asset keys.
data/clinic_topics.json
3️⃣ Asset Mapping Layer (Images & Movies)
Maps logical asset keys (`patient_reg_form`, `med_history_vitals`) to physical image/video paths, base URLs, or CDN endpoints.
data/clinic_assets.json
How to Customize Topics and Map Assets in Your App
To create a gallery for any other app or product, simply supply your own JSON topic configuration and asset map:
// 1. Define your asset map (or load from JSON)
const myAssetMap = {
basePath: 'images/',
assets: {
'step1_img': 'my_feature_step1.png',
'step2_img': 'my_feature_step2.png',
'demo_movie': { file: 'my_demo.png', type: 'video', duration: '03:15' }
}
};
// 2. Define your topics data (pure content & 2-3 lines narrative)
const myTopics = [
{
title: 'Customer Onboarding',
narrative: 'Fast, secure customer registration with multi-factor authentication.',
highlights: ['OAuth2 integration', 'Instant verification'],
media: [
{ assetKey: 'step1_img', title: 'Sign Up Screen', tag: 'Step 1' },
{ assetKey: 'step2_img', title: 'Dashboard Tour', tag: 'Step 2' }
]
}
];
// 3. Launch with full separation of code and data
TopicMediaGallery.openModal({ topics: myTopics }, {
assetMap: myAssetMap,
autoPlay: true,
interval: 5
});
// Or asynchronously load directly from separate JSON files:
TopicMediaGallery.openFromJSON('data/clinic_topics.json', 'data/clinic_assets.json');