TopicFlow Career Edge

User Guide v0.5

📚 What is TopicFlow?

TopicFlow Career Edge is an offline-first career exploration platform designed for educational institutions. It features enterprise-grade role-based access control (RBAC), psychometric assessments, and animated analytics.

🔐 How to Login

Use one of the following demo accounts to access the system:

Role	Username	Password	Access Level
Student	`student@demo`	`student123`	Own data only
Parent	`parent@demo`	`parent123`	Linked students only
Counsellor	`counsellor@demo`	`counsellor123`	Assigned cohorts
Admin	`admin@demo`	`admin123`	Full system access

Session Management

Regular Login: 30-minute session
Remember Me: 7-day session
Auto-logout: Session expires automatically

👥 Roles & Permissions

Student

✅ View personal dashboard
✅ Take career assessment
✅ View own reports
✅ Export personal data (JSON)
❌ Cannot view other students
❌ Cannot access admin panel

Parent

✅ View linked students' dashboards
✅ View linked students' reports
✅ Export linked students' data
❌ Cannot take assessment
❌ Cannot view unlinked students

Counsellor

✅ View all assigned cohort data
✅ Take assessment (for demo/training)
✅ View cohort analytics
✅ Export cohort reports
❌ Cannot access admin functions

Admin

✅ Full system access
✅ User management (create/delete users)
✅ View audit logs
✅ Reset application data
✅ All permissions granted

🔒 UI Permission Locks

TopicFlow implements three types of UI-level permission locks:

Hide Mode

Element is completely hidden from view. Used for role-specific features.

data-lock="hide"

Disable Mode

Element is visible but disabled. Shows tooltip on hover explaining restriction.

data-lock="disable"

Blur Mode

Element is blurred with lock overlay. Creates awareness of restricted content.

data-lock="blur"

📊 Assessment Process

RIASEC Section: 18 questions about career interests (Realistic, Investigative, Artistic, Social, Enterprising, Conventional)
VARK Section: 8 questions about learning styles (Visual, Auditory, Reading, Kinesthetic)
Values Section: 5 slider questions about work values and priorities
Aptitude Section: 4 questions about cognitive abilities

💡 Tip: Answer honestly for most accurate results. There are no right or wrong answers!

⌨️ Keyboard Shortcuts

`Ctrl + L`	Logout
`Ctrl + D`	Go to Dashboard
`Ctrl + R`	Go to Reports
`Ctrl + A`	Go to Assessment (if permitted)
`T`	Toggle Dark/Light Theme

💾 Data Export

Students and authorized users can export their data as JSON files. The export includes:

Assessment answers and scores
Career recommendations
User profile information
Complete audit trail

Note: Export functionality respects RBAC permissions. You can only export data you have permission to view.

🛠️ Admin Functions

Administrators have access to additional management features:

User Management

Create new users with specific roles
Delete existing users
Link students to parent accounts
Assign counsellors to cohorts

Audit Logs

Track all system activities including:

Login attempts (successful and failed)
User creation and deletion
Data access events
Session expirations

System Reset

⚠️ Warning: The "Reset All Data" function permanently deletes all student data, assessments, and app state. This action cannot be undone. Use with extreme caution!

🔧 Technical Information

Technology Stack

Pure Vanilla JavaScript (ES6+)
No external libraries or CDN dependencies
LocalStorage for offline persistence
Canvas-based charts (no Chart.js library)
Hash-based SPA routing

Browser Compatibility

✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 14+
✅ Works offline (file:// protocol)
✅ Local server recommended for full features

Data Storage

All data is stored locally using LocalStorage:

topicflow_users_v5 - User accounts
topicflow_session_v5 - Active session
topicflow_students_v5 - Student profiles
topicflow_assessments_v5 - Assessment data
topicflow_audit_v5 - Audit logs
topicflow_theme - UI theme preference

❓ FAQ

Q: What happens when my session expires?

You'll see a modal notification and be automatically redirected to the login screen. Your data is saved and will be available when you log back in.

Q: Can I extend my session?

Sessions are automatically extended when you interact with the app. Choose "Remember me" at login for a 7-day session.

Q: Is my data secure?

This is a demo/prototype. For production use, implement server-side authentication, encrypted storage, and proper security measures like bcrypt password hashing and HTTPS.

Q: Can I use this offline?

Yes! The entire application works offline. Simply open index.html in your browser. However, a local server is recommended for the best experience.

Go to Application