File size: 3,214 Bytes
ce52889 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | """
Progress tracker component for SkillSync
"""
import gradio as gr
def create_progress_tracker(progress_manager, total_lessons=25):
"""Create a progress tracking display"""
# Get progress data
progress_data = progress_manager.get_overall_progress(total_lessons)
completed = progress_data['completed_lessons']
percentage = progress_data['percentage']
quizzes_passed = progress_data['quizzes_passed']
avg_score = 0
if progress_manager.progress.get('quiz_scores'):
scores = [s.get('score', 0) for s in progress_manager.progress['quiz_scores'].values()]
avg_score = int(sum(scores) / len(scores)) if scores else 0
# Progress display
gr.Markdown("### 📊 Your Progress")
with gr.Row():
with gr.Column(scale=1):
gr.HTML(f"""
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; padding: 20px; border-radius: 15px; text-align: center;">
<div style="font-size: 36px; font-weight: bold;">{percentage}%</div>
<div style="font-size: 14px;">Overall Completion</div>
</div>
""")
with gr.Column(scale=1):
gr.HTML(f"""
<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white; padding: 20px; border-radius: 15px; text-align: center;">
<div style="font-size: 36px; font-weight: bold;">{completed}/{total_lessons}</div>
<div style="font-size: 14px;">Lessons Completed</div>
</div>
""")
with gr.Column(scale=1):
gr.HTML(f"""
<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white; padding: 20px; border-radius: 15px; text-align: center;">
<div style="font-size: 36px; font-weight: bold;">{quizzes_passed}/5</div>
<div style="font-size: 14px;">Quizzes Passed</div>
</div>
""")
with gr.Column(scale=1):
gr.HTML(f"""
<div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
color: white; padding: 20px; border-radius: 15px; text-align: center;">
<div style="font-size: 36px; font-weight: bold;">{avg_score}%</div>
<div style="font-size: 14px;">Avg Quiz Score</div>
</div>
""")
# Progress bar
gr.HTML(f"""
<div style="margin: 20px 0;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span style="font-weight: 600;">Course Progress</span>
<span>{percentage}%</span>
</div>
<div style="background: #e0e0e0; border-radius: 10px; height: 20px; width: 100%;">
<div style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 10px; height: 100%; width: {percentage}%;
transition: width 0.5s ease;"></div>
</div>
</div>
""")
return progress_data
|