Tip

For best results, initiate chat on the files or code changes.

@Inshamhaque Here's the complete implementation assistance for the Infographics feature, including the Dynamic Visual Content from lessons:

Complete Implementation Guide for Infographics & Dynamic Visual Content

1. Models Implementation

First, add these models to web/models.py:

from django.db import models
from django.contrib.auth.models import User
from django.utils.text import slugify
import json

class Tag(models.Model):
    name = models.CharField(max_length=50, unique=True)
    slug = models.SlugField(unique=True)
    description = models.TextField(blank=True)
    
    def __str__(self):
        return self.name
    
    def save(self, *args, **kwargs):
        if not self.slug:
            self.slug = slugify(self.name)
        super().save(*args, **kwargs)
        
    class Meta:
        ordering = ['name']

class Infographic(models.Model):
    CATEGORY_CHOICES = [
        ('educational_tip', 'Educational Tip'),
        ('did_you_know', 'Did You Know'),
        ('fact', 'Fact'),
        ('guide', 'Guide'),
        ('lesson_summary', 'Lesson Summary'),  # For "What I Learned Today"
    ]
    
    title = models.CharField(max_length=200)
    description = models.TextField()
    content = models.JSONField(help_text="Structured content for the infographic")
    thumbnail = models.ImageField(upload_to='infographics/thumbnails/')
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    is_active = models.BooleanField(default=True)
    category = models.CharField(max_length=50, choices=CATEGORY_CHOICES)
    tags = models.ManyToManyField(Tag, blank=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='infographics')
    views = models.IntegerField(default=0)
    shares = models.IntegerField(default=0)
    lesson = models.ForeignKey('Lesson', on_delete=models.SET_NULL, null=True, blank=True, 
                              related_name='infographics', 
                              help_text="Link to lesson (for 'What I Learned Today' summaries)")
    
    def __str__(self):
        return self.title
        
    class Meta:
        ordering = ['-created_at']
        
    def get_template_path(self):
        """Return the appropriate template for rendering this infographic type"""
        if self.category == 'lesson_summary':
            return 'infographics/templates/lesson_summary.html'
        return 'infographics/templates/standard.html'
        
    def get_content_for_social(self):
        """Get formatted content for social media sharing"""
        # This can be customized based on the content structure
        try:
            if isinstance(self.content, str):
                content_dict = json.loads(self.content)
            else:
                content_dict = self.content
                
            if self.category == 'lesson_summary':
                return {
                    'title': self.title,
                    'key_points': content_dict.get('key_points', []),
                    'quote': content_dict.get('quote', ''),
                }
            return content_dict
        except (json.JSONDecodeError, AttributeError):
            return {'error': 'Invalid content format'}

2. Forms Implementation

Add these forms to web/forms.py:

from django import forms
import json
from .models import Infographic, Tag, Lesson

class InfographicForm(forms.ModelForm):
    class Meta:
        model = Infographic
        fields = ['title', 'description', 'content', 'thumbnail', 
                  'category', 'tags', 'is_active', 'lesson']
        widgets = {
            'content': forms.Textarea(attrs={'class': 'json-editor', 'rows': 10}),
            'description': forms.Textarea(attrs={'rows': 4}),
        }
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # Make lesson field optional and only visible for lesson summary types
        self.fields['lesson'].required = False
        
    def clean_content(self):
        """Validate that content is valid JSON."""
        content = self.cleaned_data.get('content')
        if isinstance(content, str):
            try:
                return json.loads(content)
            except json.JSONDecodeError:
                raise forms.ValidationError("Content must be valid JSON.")
        return content

class LessonSummaryForm(InfographicForm):
    """Form specifically for lesson summaries"""
    
    key_points = forms.CharField(
        widget=forms.Textarea(attrs={'rows': 5}),
        help_text="Enter key points from the lesson (one per line)",
        required=False
    )
    
    quote = forms.CharField(
        widget=forms.Textarea(attrs={'rows': 2}),
        help_text="An important quote or takeaway",
        required=False
    )
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # Make lesson field required for this form
        self.fields['lesson'].required = True
        # Set category to lesson_summary
        self.initial['category'] = 'lesson_summary'
        self.fields['category'].widget = forms.HiddenInput()
        
        # If we're editing existing content, populate the form fields
        if self.instance and self.instance.pk and self.instance.content:
            content = self.instance.content
            if isinstance(content, str):
                try:
                    content = json.loads(content)
                except json.JSONDecodeError:
                    content = {}
            
            if isinstance(content, dict):
                self.initial['key_points'] = '\n'.join(content.get('key_points', []))
                self.initial['quote'] = content.get('quote', '')
    
    def clean(self):
        cleaned_data = super().clean()
        # Create a structured content JSON from the form fields
        key_points = cleaned_data.get('key_points', '').split('\n')
        key_points = [point.strip() for point in key_points if point.strip()]
        
        content = {
            'key_points': key_points,
            'quote': cleaned_data.get('quote', ''),
            'lesson_id': cleaned_data.get('lesson').id if cleaned_data.get('lesson') else None,
            'lesson_title': str(cleaned_data.get('lesson')) if cleaned_data.get('lesson') else None,
        }
        
        cleaned_data['content'] = content
        return cleaned_data

3. Views Implementation

Add these views to web/views.py:

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.decorators import login_required, permission_required
from django.contrib import messages
from django.http import JsonResponse, HttpResponse
from django.urls import reverse
from django.views.decorators.csrf import csrf_exempt
from django.template.loader import render_to_string
from .models import Infographic, Tag, Lesson
from .forms import InfographicForm, LessonSummaryForm
import json
import base64
from PIL import Image
from io import BytesIO

# Infographics main views
@login_required
def infographics_list(request):
    """View to list all infographics."""
    category = request.GET.get('category', None)
    tag = request.GET.get('tag', None)
    
    infographics = Infographic.objects.filter(is_active=True)
    
    if category:
        infographics = infographics.filter(category=category)
    if tag:
        infographics = infographics.filter(tags__slug=tag)
    
    infographics = infographics.order_by('-created_at')
    
    # Get all categories and tags for filtering
    categories = dict(Infographic.CATEGORY_CHOICES)
    tags = Tag.objects.all()
    
    context = {
        'infographics': infographics,
        'title': 'Educational Infographics',
        'categories': categories,
        'tags': tags,
        'selected_category': category,
        'selected_tag': tag,
    }
    return render(request, 'infographics/list.html', context)

@login_required
def infographic_detail(request, pk):
    """View to display a specific infographic."""
    infographic = get_object_or_404(Infographic, pk=pk, is_active=True)
    
    # Increment view count
    infographic.views += 1
    infographic.save(update_fields=['views'])
    
    # Determine which template to use based on the infographic type
    template = infographic.get_template_path()
    
    context = {
        'infographic': infographic,
    }
    return render(request, template, context)

@login_required
@permission_required('web.add_infographic')
def infographic_create(request):
    """View to create a new infographic."""
    category = request.GET.get('category', None)
    
    # Use different form based on category
    if category == 'lesson_summary':
        form_class = LessonSummaryForm
        title = 'Create Lesson Summary'
    else:
        form_class = InfographicForm
        title = 'Create Infographic'
    
    if request.method == 'POST':
        form = form_class(request.POST, request.FILES)
        if form.is_valid():
            infographic = form.save(commit=False)
            infographic.author = request.user
            infographic.save()
            form.save_m2m()  # Save many-to-many relationships
            messages.success(request, f"{title.split(' ')[1]} created successfully!")
            return redirect('infographic_detail', pk=infographic.pk)
    else:
        initial = {}
        if category:
            initial['category'] = category
        form = form_class(initial=initial)
    
    context = {
        'form': form,
        'title': title,
        'is_lesson_summary': category == 'lesson_summary',
    }
    return render(request, 'infographics/form.html', context)

@login_required
@permission_required('web.change_infographic')
def infographic_update(request, pk):
    """View to update an existing infographic."""
    infographic = get_object_or_404(Infographic, pk=pk)
    
    # Use different form based on infographic category
    if infographic.category == 'lesson_summary':
        form_class = LessonSummaryForm
        title = 'Edit Lesson Summary'
    else:
        form_class = InfographicForm
        title = 'Edit Infographic'
    
    if request.method == 'POST':
        form = form_class(request.POST, request.FILES, instance=infographic)
        if form.is_valid():
            form.save()
            messages.success(request, f"{title.split(' ')[1]} updated successfully!")
            return redirect('infographic_detail', pk=infographic.pk)
    else:
        form = form_class(instance=infographic)
    
    context = {
        'form': form,
        'infographic': infographic,
        'title': title,
        'is_lesson_summary': infographic.category == 'lesson_summary',
    }
    return render(request, 'infographics/form.html', context)

@login_required
@permission_required('web.delete_infographic')
def infographic_delete(request, pk):
    """View to delete an infographic."""
    infographic = get_object_or_404(Infographic, pk=pk)
    
    if request.method == 'POST':
        infographic.delete()
        messages.success(request, "Infographic deleted successfully!")
        return redirect('infographics_list')
    
    context = {
        'infographic': infographic,
    }
    return render(request, 'infographics/delete_confirm.html', context)

# Special Dynamic Content Generation Views
@login_required
def create_lesson_summary(request, lesson_id=None):
    """Creates a 'What I Learned Today' summary from a lesson."""
    lesson = None
    if lesson_id:
        lesson = get_object_or_404(Lesson, pk=lesson_id)
    
    initial = {
        'category': 'lesson_summary',
        'lesson': lesson,
    }
    
    if lesson:
        initial.update({
            'title': f"What I Learned Today: {lesson.title}",
            'description': f"Key takeaways from the lesson '{lesson.title}'",
        })
    
    if request.method == 'POST':
        form = LessonSummaryForm(request.POST, request.FILES)
        if form.is_valid():
            infographic = form.save(commit=False)
            infographic.author = request.user
            infographic.save()
            form.save_m2m()
            messages.success(request, "Lesson summary created successfully!")
            return redirect('infographic_detail', pk=infographic.pk)
    else:
        form = LessonSummaryForm(initial=initial)
    
    context = {
        'form': form,
        'title': 'Create Lesson Summary',
        'is_lesson_summary': True,
        'lesson': lesson,
    }
    return render(request, 'infographics/lesson_summary_form.html', context)

@login_required
def generate_summary_preview(request):
    """AJAX endpoint to generate a preview of a lesson summary."""
    if request.method == 'POST' and request.headers.get('x-requested-with') == 'XMLHttpRequest':
        key_points = request.POST.get('key_points', '').split('\n')
        key_points = [point.strip() for point in key_points if point.strip()]
        quote = request.POST.get('quote', '')
        lesson_id = request.POST.get('lesson', None)
        
        lesson = None
        if lesson_id:
            try:
                lesson = Lesson.objects.get(pk=lesson_id)
            except Lesson.DoesNotExist:
                pass
        
        context = {
            'key_points': key_points,
            'quote': quote,
            'lesson': lesson,
        }
        
        html = render_to_string('infographics/preview_lesson_summary.html', context)
        return JsonResponse({'html': html})
    
    return JsonResponse({'error': 'Invalid request'}, status=400)

# Social sharing functionality
@login_required
def track_infographic_share(request, pk):
    """View to track when an infographic is shared."""
    if request.method == 'POST':
        infographic = get_object_or_404(Infographic, pk=pk)
        platform = request.POST.get('platform', 'unknown')
        
        # Increment share count
        infographic.shares += 1
        infographic.save(update_fields=['shares'])
        
        # Return a response that can be used by JavaScript
        if request.headers.get('x-requested-with') == 'XMLHttpRequest':
            return JsonResponse({'success': True, 'shares': infographic.shares})
        
        # If it's a regular form submission, redirect back to the detail page
        return redirect('infographic_detail', pk=pk)
    
    # If not a POST request, redirect to the detail page
    return redirect('infographic_detail', pk=pk)

@login_required
def generate_image(request, pk):
    """Generate an image version of the infographic for sharing."""
    infographic = get_object_or_404(Infographic, pk=pk, is_active=True)
    
    # Generate HTML for the infographic
    context = {'infographic': infographic, 'for_image': True}
    html = render_to_string(infographic.get_template_path(), context)
    
    # This would typically use a headless browser or HTML-to-image library
    # For simplicity, let's return a JSON response with the HTML
    # In a real implementation, you would use something like Puppeteer, wkhtmltoimage, or a service like Cloudinary
    
    return JsonResponse({
        'html': html,
        'title': infographic.title,
        'image_url': infographic.thumbnail.url if infographic.thumbnail else '',
    })

# Filtered views
def popular_infographics(request):
    """View to display most shared/viewed infographics."""
    infographics = Infographic.objects.filter(is_active=True).order_by('-shares', '-views')[:10]
    
    context = {
        'infographics': infographics,
        'title': 'Most Popular Infographics',
    }
    return render(request, 'infographics/list.html', context)

def infographics_by_category(request, category):
    """View to display infographics filtered by category."""
    infographics = Infographic.objects.filter(is_active=True, category=category).order_by('-created_at')
    
    context = {
        'infographics': infographics,
        'category': category,
        'title': f'{dict(Infographic.CATEGORY_CHOICES).get(category, "").title()} Infographics',
    }
    return render(request, 'infographics/list.html', context)

def infographics_by_tag(request, tag_slug):
    """View to display infographics filtered by tag."""
    tag = get_object_or_404(Tag, slug=tag_slug)
    infographics = Infographic.objects.filter(is_active=True, tags=tag).order_by('-created_at')
    
    context = {
        'infographics': infographics,
        'tag': tag,
        'title': f'Infographics tagged with "{tag.name}"',
    }
    return render(request, 'infographics/list.html', context)

def infographics_by_lesson(request, lesson_id):
    """View to display infographics related to a specific lesson."""
    lesson = get_object_or_404(Lesson, pk=lesson_id)
    infographics = Infographic.objects.filter(is_active=True, lesson=lesson).order_by('-created_at')
    
    context = {
        'infographics': infographics,
        'lesson': lesson,
        'title': f'Infographics for {lesson.title}',
    }
    return render(request, 'infographics/list.html', context)

4. URL Configuration

Add these URLs to web/urls.py:

# Infographics URLs
path('infographics/', views.infographics_list, name='infographics_list'),
path('infographics/create/', views.infographic_create, name='infographic_create'),
path('infographics/popular/', views.popular_infographics, name='popular_infographics'),
path('infographics/category/<str:category>/', views.infographics_by_category, name='infographics_by_category'),
path('infographics/tag/<slug:tag_slug>/', views.infographics_by_tag, name='infographics_by_tag'),
path('infographics/lesson/<int:lesson_id>/', views.infographics_by_lesson, name='infographics_by_lesson'),
path('infographics/<int:pk>/', views.infographic_detail, name='infographic_detail'),
path('infographics/<int:pk>/update/', views.infographic_update, name='infographic_update'),
path('infographics/<int:pk>/delete/', views.infographic_delete, name='infographic_delete'),
path('infographics/<int:pk>/share/', views.track_infographic_share, name='track_infographic_share'),
path('infographics/<int:pk>/image/', views.generate_image, name='generate_infographic_image'),
path('lessons/<int:lesson_id>/create-summary/', views.create_lesson_summary, name='create_lesson_summary'),
path('preview-lesson-summary/', views.generate_summary_preview, name='preview_lesson_summary'),

5. Admin Interface

Add to web/admin.py:

from django.contrib import admin
from .models import Infographic, Tag

@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    list_display = ('name', 'slug')
    search_fields = ('name',)
    prepopulated_fields = {'slug': ('name',)}

@admin.register(Infographic)
class InfographicAdmin(admin.ModelAdmin):
    list_display = ('title', 'category', 'author', 'created_at', 'is_active', 'views', 'shares', 'lesson')
    list_filter = ('category', 'is_active', 'created_at')
    search_fields = ('title', 'description')
    readonly_fields = ('views', 'shares', 'created_at', 'updated_at')
    filter_horizontal = ('tags',)
    autocomplete_fields = ['lesson']
    
    fieldsets = (
        (None, {
            'fields': ('title', 'description', 'thumbnail', 'content')
        }),
        ('Classification', {
            'fields': ('category', 'tags', 'lesson')
        }),
        ('Status', {
            'fields': ('is_active', 'author')
        }),
        ('Statistics', {
            'fields': ('views', 'shares', 'created_at', 'updated_at'),
            'classes': ('collapse',)
        }),
    )
    
    def get_readonly_fields(self, request, obj=None):
        readonly_fields = list(self.readonly_fields)
        if obj and obj.category == 'lesson_summary':
            readonly_fields.append('category')
        return readonly_fields
    
    def save_model(self, request, obj, form, change):
        if not change:  # If creating a new object
            obj.author = request.user
        super().save_model(request, obj, form, change)

6. Templates

Create these templates in your project:

6.1. `templates/infographics/list.html`

{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title|default:"Infographics" }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">{{ title|default:"Educational Infographics" }}</h1>
        
        <div class="flex space-x-2">
            {% if user.is_staff %}
            <div class="relative group">
                <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
                    Create New
                </button>
                <div class="hidden group-hover:block absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-lg z-10">
                    <a href="{% url 'infographic_create' %}?category=educational_tip" class="block px-4 py-2 hover:bg-gray-100">Educational Tip</a>
                    <a href="{% url 'infographic_create' %}?category=did_you_know" class="block px-4 py-2 hover:bg-gray-100">Did You Know?</a>
                    <a href="{% url 'infographic_create' %}?category=fact" class="block px-4 py-2 hover:bg-gray-100">Fact</a>
                    <a href="{% url 'infographic_create' %}?category=guide" class="block px-4 py-2 hover:bg-gray-100">Guide</a>
                    <a href="{% url 'infographic_create' %}?category=lesson_summary" class="block px-4 py-2 hover:bg-gray-100">Lesson Summary</a>
                </div>
            </div>
            {% endif %}
            <a href="{% url 'popular_infographics' %}" class="bg-gray-200 hover:bg-gray-300 py-2 px-4 rounded">
                Most Popular
            </a>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold mb-4">Filters</h2>
        <div class="flex flex-wrap gap-4">
            <!-- Category filters -->
            <div>
                <h3 class="text-sm font-medium mb-2">Categories</h3>
                <div class="flex flex-wrap gap-2">
                    <a href="{% url 'infographics_list' %}" class="px-3 py-1 rounded-full text-sm {% if not selected_category %}bg-blue-100 text-blue-800{% else %}bg-gray-100{% endif %}">
                        All
                    </a>
                    {% for category_key, category_name in categories.items %}
                    <a href="{% url 'infographics_by_category' category_key %}" 
                       class="px-3 py-1 rounded-full text-sm {% if selected_category == category_key %}bg-blue-100 text-blue-800{% else %}bg-gray-100{% endif %}">
                        {{ category_name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Tag filters -->
            {% if tags %}
            <div>
                <h3 class="text-sm font-medium mb-2">Tags</h3>
                <div class="flex flex-wrap gap-2">
                    {% for tag in tags %}
                    <a href="{% url 'infographics_by_tag' tag.slug %}" 
                       class="px-3 py-1 rounded-full text-sm {% if selected_tag == tag.slug %}bg-green-100 text-green-800{% else %}bg-gray-100{% endif %}">
                        {{ tag.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    
    {% if infographics %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for infographic in infographics %}
        <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:shadow-xl hover:-translate-y-1">
            <a href="{% url 'infographic_detail' infographic.pk %}">
                <img src="{{ infographic.thumbnail.url }}" alt="{{ infographic.title }}" class="w-full h-48 object-cover">
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <h2 class="text-xl font-semibold">{{ infographic.title }}</h2>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                            {{ infographic.get_category_display }}
                        </span>
                    </div>
                    <p class="text-gray-600 mb-4 line-clamp-2">{{ infographic.description }}</p>
                    
                    {% if infographic.tags.all %}
                    <div class="flex flex-wrap gap-1 mb-4">
                        {% for tag in infographic.tags.all|slice:":3" %}
                        <span class="bg-gray-200 px-2 py-0.5 rounded-full text-xs">{{ tag.name }}</span>
                        {% endfor %}
                        {% if infographic.tags.all|length > 3 %}
                        <span class="bg-gray-200 px-2 py-0.5 rounded-full text-xs">+{{ infographic.tags.all|length|add:"-3" }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <div class="flex items-center justify-between text-sm text-gray-500">
                        <div class="flex items-center space-x-3">
                            <span><i class="fas fa-eye mr-1"></i> {{ infographic.views }}</span>
                            <span><i class="fas fa-share-alt mr-1"></i> {{ infographic.shares }}</span>
                        </div>
                        <span>{{ infographic.created_at|date:"M d, Y" }}</span>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-gray-100 rounded-lg p-8 text-center">
        <p class="text-xl text-gray-500">No infographics found.</p>
        {% if user.is_staff %}
        <a href="{% url 'infographic_create' %}" class="mt-4 inline-block bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
            Create New Infographic
        </a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

6.2. `templates/infographics/detail.html` (Standard template)

{% extends 'base.html' %}
{% load static %}

{% block title %}{{ infographic.title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/infographics.css' %}">
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <div class="md:flex">
            <div class="md:w-1/2">
                <img src="{{ infographic.thumbnail.url }}" alt="{{ infographic.title }}" class="w-full h-auto">
            </div>
            <div class="p-6 md:w-1/2">
                <div class="flex justify-between items-center mb-4">
                    <h1 class="text-3xl font-bold">{{ infographic.title }}</h1>
                    <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                        {{ infographic.get_category_display }}
                    </span>
                </div>
                
                <p class="text-gray-700 mb-6">{{ infographic.description }}</p>
                
                {% if infographic.tags.all %}
                <div class="mb-6">
                    <h2 class="text-xl font-semibold mb-2">Tags</h2>
                    <div class="flex flex-wrap gap-2">
                        {% for tag in infographic.tags.all %}
                        <a href="{% url 'infographics_by_tag' tag.slug %}" class="bg-gray-200 px-2 py-1 rounded text-sm hover:bg-gray-300">
                            {{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                
                <div class="mb-6">
                    <h2 class="text-xl font-semibold mb-4">Share This Infographic</h2>
                    <div class="flex space-x-4">
                        <button onclick="shareInfographic('twitter')" class="share-button bg-blue-400 hover:bg-blue-500 text-white p-2 rounded-full">
                            <i class="fab fa-twitter"></i>
                        </button>
                        <button onclick="shareInfographic('facebook')" class="share-button bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                            <i class="fab fa-facebook-f"></i>
                        </button>
                        <button onclick="shareInfographic('linkedin')" class="share-button bg-blue-800 hover:bg-blue-900 text-white p-2 rounded-full">
                            <i class="fab fa-linkedin-in"></i>
                        </button>
                        <button onclick="shareInfographic('whatsapp')" class="share-button bg-green-500 hover:bg-green-600 text-white p-2 rounded-full">
                            <i class="fab fa-whatsapp"></i>
                        </button>
                        <button onclick="copyLink()" class="share-button bg-gray-200 hover:bg-gray-300 p-2 rounded-full">
                            <i class="fas fa-link"></i>
                        </button>
                        <button onclick="downloadImage()" class="share-button bg-purple-500 hover:bg-purple-600 text-white p-2 rounded-full">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center justify-between text-sm text-gray-500">
                    <div>
                        <span><i class="fas fa-eye mr-1"></i> {{ infographic.views }} views</span>
                        <span class="mx-2">•</span>
                        <span><i class="fas fa-share-alt mr-1"></i> {{ infographic.shares }} shares</span>
                    </div>
                    <div>
                        Published {{ infographic.created_at|date:"F j, Y" }}
                    </div>
                </div>
                
                {% if infographic.lesson %}
                <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                    <h3 class="font-medium">Based on lesson:</h3>
                    <a href="{% url 'lesson_detail' infographic.lesson.id %}" class="text-blue-600 hover:underline">
                        {{ infographic.lesson.title }}
                    </a>
                </div>
                {% endif %}
                
                {% if user.is_staff or user == infographic.author %}
                <div class="mt-6 flex space-x-4">
                    <a href="{% url 'infographic_update' infographic.pk %}" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded">
                        Edit
                    </a>
                    <a href="{% url 'infographic_delete' infographic.pk %}" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded">
                        Delete
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Render the infographic content -->
        <div id="infographic-content" class="p-6 border-t border-gray-200">
            <h2 class="text-2xl font-bold mb-4">Content</h2>
            <!-- Content will be rendered by JavaScript -->
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/infographics.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contentContainer = document.getElementById('infographic-content');
        const content = {{ infographic.content|safe }};
        
        // Render infographic content based on category and structure
        renderInfographicContent(content, contentContainer, '{{ infographic.category }}');
    });
    
    // Function to share the infographic
    function shareInfographic(platform) {
        const url = window.location.href;
        const title = '{{ infographic.title|escapejs }}';
        const description = '{{ infographic.description|escapejs }}';
        
        let shareUrl = '';
        
        switch(platform) {
            case 'twitter':
                shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;
                break;
            case 'facebook':
                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
                break;
            case 'linkedin':
                shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
                break;
            case 'whatsapp':
                shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(title + ': ' + url)}`;
                break;
        }
        
        if (shareUrl) {
            // Track the share
            fetch('{% url "track_infographic_share" infographic.pk %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': '{{ csrf_token }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `platform=${platform}`
            });
            
            // Open share window
            window.open(shareUrl, '_blank', 'width=600,height=400');
        }
    }
    
    // Function to copy the link to clipboard
    function copyLink() {
        const url = window.location.href;
        navigator.clipboard.writeText(url).then(() => {
            alert('Link copied to clipboard!');
            
            // Track the copy action
            fetch('{% url "track_infographic_share" infographic.pk %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': '{{ csrf_token }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: 'platform=copy'
            });
        });
    }
    
    // Function to download the infographic as an image
    function downloadImage() {
        fetch('{% url "generate_infographic_image" infographic.pk %}')
            .then(response => response.json())
            .then(data => {
                // In a real implementation, this would download an actual image
                // For now, we'll just open the image in a new tab
                const imageWindow = window.open('', '_blank');
                imageWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>${data.title}</title>
                        <style>
                            body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
                            .container { max-width: 800px; margin: 0 auto; }
                            .image-header { text-align: center; margin-bottom: 20px; }
                            .image-header img { max-width: 100%; }
                            .download-hint { text-align: center; margin-top: 20px; color: #666; }
                        </style>
                    </head>
                    <body>
                        <div class="container">
                            <div class="image-header">
                                <h1>${data.title}</h1>
                                <img src="${data.image_url}" alt="${data.title}">
                            </div>
                            <div>${data.html}</div>
                            <p class="download-hint">Right-click on the image and select "Save image as..." to download.</p>
                        </div>
                    </body>
                    </html>
                `);
                
                // Track the download
                fetch('{% url "track_infographic_share" infographic.pk %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRFToken': '{{ csrf_token }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: 'platform=download'
                });
            });
    }
</script>
{% endblock %}

6.3. `templates/infographics/templates/lesson_summary.html`

{% extends 'base.html' %}
{% load static %}

{% block title %}{{ infographic.title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/infographics.css' %}">
<style>
    .key-point {
        background-color: #f8fafc;
        border-left: 4px solid #3b82f6;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0.25rem;
    }
    
    .quote-container {
        background-color: #eff6ff;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin: 2rem 0;
        position: relative;
    }
    
    .quote-container:before {
        content: '"';
        font-size: 5rem;
        color: #93c5fd;
        position: absolute;
        top: -1rem;
        left: 0.5rem;
        font-family: Georgia, serif;
    }
    
    .quote-text {
        font-style: italic;
        font-size: 1.25rem;
        margin-left: 2rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <header class="bg-blue-600 text-white p-6">
            <h1 class="text-3xl font-bold">{{ infographic.title }}</h1>
            <p class="mt-2 text-blue-100">{{ infographic.description }}</p>
            
            {% if infographic.lesson %}
            <div class="mt-4 bg-blue-700 inline-block px-3 py-1 rounded-full">
                <a href="{% url 'lesson_detail' infographic.lesson.id %}" class="text-white hover:underline">
                    <i class="fas fa-book-open mr-2"></i>View Original Lesson
                </a>
            </div>
            {% endif %}
        </header>
        
        <div class="p-6">
            <div class="mb-8" id="summary-content">
                {% if not for_image %}
                <h2 class="text-2xl font-bold mb-6">Key Takeaways</h2>
                
                <div class="key-points-container">
                    {% for point in infographic.content.key_points %}
                    <div class="key-point">
                        <p>{{ point }}</p>
                    </div>
                    {% empty %}
                    <p class="text-gray-500">No key points available.</p>
                    {% endfor %}
                </div>
                
                {% if infographic.content.quote %}
                <div class="quote-container">
                    <p class="quote-text">{{ infographic.content.quote }}</p>
                </div>
                {% endif %}
                {% endif %}
            </div>
            
            <div class="flex justify-between items-center border-t border-gray-200 pt-6">
                <div class="flex items-center text-sm text-gray-500">
                    <span><i class="fas fa-eye mr-1"></i> {{ infographic.views }} views</span>
                    <span class="mx-2">•</span>
                    <span><i class="fas fa-share-alt mr-1"></i> {{ infographic.shares }} shares</span>
                    <span class="mx-2">•</span>
                    <span><i class="fas fa-calendar mr-1"></i> {{ infographic.created_at|date:"F j, Y" }}</span>
                </div>
                
                <div class="share-buttons">
                    <button onclick="shareInfographic('twitter')" class="share-button bg-blue-400 hover:bg-blue-500 text-white p-2 rounded-full">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button onclick="shareInfographic('facebook')" class="share-button bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button onclick="copyLink()" class="share-button bg-gray-200 hover:bg-gray-300 p-2 rounded-full">
                        <i class="fas fa-link"></i>
                    </button>
                    <button onclick="downloadImage()" class="share-button bg-purple-500 hover:bg-purple-600 text-white p-2 rounded-full">
                        <i class="fas fa-download"></i>
                    </button>
                </div>
            </div>
            
            {% if user.is_staff or user == infographic.author %}
            <div class="mt-6 flex space-x-4">
                <a href="{% url 'infographic_update' infographic.pk %}" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded">
                    Edit
                </a>
                <a href="{% url 'infographic_delete' infographic.pk %}" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded">
                    Delete
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Include the same sharing functions as in the standard template
    function shareInfographic(platform) {
        const url = window.location.href;
        const title = '{{ infographic.title|escapejs }}';
        
        let shareUrl = '';
        
        switch(platform) {
            case 'twitter':
                shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;
                break;
            case 'facebook':
                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
                break;
            case 'linkedin':
                shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
                break;
            case 'whatsapp':
                shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(title + ': ' + url)}`;
                break;
        }
        
        if (shareUrl) {
            // Track the share
            fetch('{% url "track_infographic_share" infographic.pk %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': '{{ csrf_token }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `platform=${platform}`
            });
            
            // Open share window
            window.open(shareUrl, '_blank', 'width=600,height=400');
        }
    }
    
    // Function to copy the link to clipboard
    function copyLink() {
        const url = window.location.href;
        navigator.clipboard.writeText(url).then(() => {
            alert('Link copied to clipboard!');
            
            // Track the copy action
            fetch('{% url "track_infographic_share" infographic.pk %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': '{{ csrf_token }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: 'platform=copy'
            });
        });
    }
    
    // Function to download the infographic as an image
    function downloadImage() {
        // Similar to the standard template implementation
        fetch('{% url "generate_infographic_image" infographic.pk %}')
            .then(response => response.json())
            .then(data => {
                const imageWindow = window.open('', '_blank');
                imageWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>${data.title}</title>
                        <style>
                            body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
                            .container { max-width: 800px; margin: 0 auto; }
                            .image-header { text-align: center; margin-bottom: 20px; }
                            .image-header img { max-width: 100%; }
                            .download-hint { text-align: center; margin-top: 20px; color: #666; }
                        </style>
                    </head>
                    <body>
                        <div class="container">
                            <div class="image-header">
                                <h1>${data.title}</h1>
                                <img src="${data.image_url}" alt="${data.title}">
                            </div>
                            <div>${data.html}</div>
                            <p class="download-hint">Right-click on the image and select "Save image as..." to download.</p>
                        </div>
                    </body>
                    </html>
                `);
                
                // Track the download
                fetch('{% url "track_infographic_share" infographic.pk %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRFToken': '{{ csrf_token }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: 'platform=download'
                });
            });
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        // Populate the summary content
        const summaryContent = document.getElementById('summary-content');
        // This is already handled by the template, but you could add more dynamic content here
    });
</script>
{% endblock %}

6.4. `templates/infographics/form.html`

{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/jsoneditor.min.css' %}">
<style>
    .json-editor {
        min-height: 300px;
    }
    .form-group {
        margin-bottom: 1.5rem;
    }
    .field-note {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: 0.25rem;
    }
    .label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        display: block;
    }
    .preview-container {
        border: 1px solid #e5e7eb;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-top: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h1 class="text-3xl font-bold mb-6">{{ title }}</h1>
        
        <form method="post" enctype="multipart/form-data" class="infographic-form">
            {% csrf_token %}
            
            {% if form.errors %}
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <p class="font-bold">Please correct the errors below:</p>
                {{ form.non_field_errors }}
            </div>
            {% endif %}
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-group">
                    <label for="{{ form.title.id_for_label }}" class="label">Title</label>
                    {{ form.title }}
                    {{ form.title.errors }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.category.id_for_label }}" class="label">Category</label>
                    {{ form.category }}
                    {{ form.category.errors }}
                </div>
                
                <div class="form-group md:col-span-2">
                    <label for="{{ form.description.id_for_label }}" class="label">Description</label>
                    {{ form.description }}
                    {{ form.description.errors }}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.thumbnail.id_for_label }}" class="label">Thumbnail</label>
                    {{ form.thumbnail }}
                    {{ form.thumbnail.errors }}
                    <p class="field-note">Recommended size: 1200x630px</p>
                </div>
                
                <div class="form-group">
                    <label for="{{ form.tags.id_for_label }}" class="label">Tags</label>
                    {{ form.tags }}
                    {{ form.tags.errors }}
                </div>
                
                {% if is_lesson_summary %}
                <div class="form-group md:col-span-2">
                    <label for="{{ form.lesson.id_for_label }}" class="label">Lesson</label>
                    {{ form.lesson }}
                    {{ form.lesson.errors }}
                    <p class="field-note">Select the lesson this summary is based on</p>
                </div>
                
                <div class="form-group md:col-span-2">
                    <label for="{{ form.key_points.id_for_label }}" class="label">Key Points</label>
                    {{ form.key_points }}
                    {{ form.key_points.errors }}
                    <p class="field-note">Enter one key point per line</p>
                </div>
                
                <div class="form-group md:col-span-2">
                    <label for="{{ form.quote.id_for_label }}" class="label">Quote</label>
                    {{ form.quote }}
                    {{ form.quote.errors }}
                    <p class="field-note">An important quote or takeaway from the lesson</p>
                </div>
                
                <div class="md:col-span-2">
                    <button type="button" id="preview-button" class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded mb-4">
                        Preview
                    </button>
                    <div id="preview-container" class="preview-container hidden"></div>
                </div>
                {% else %}
                <div class="form-group md:col-span-2">
                    <label for="{{ form.content.id_for_label }}" class="label">Content (JSON)</label>
                    {{ form.content }}
                    {{ form.content.errors }}
                    <p class="field-note">Enter structured content in JSON format</p>
                </div>
                {% endif %}
                
                <div class="form-group">
                    <label for="{{ form.is_active.id_for_label }}" class="label">Active</label>
                    {{ form.is_active }}
                    {{ form.is_active.errors }}
                    <p class="field-note">If unchecked, this infographic will not be visible to users</p>
                </div>
            </div>
            
            <div class="mt-6 flex space-x-4">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded">
                    {% if infographic %}Update{% else %}Create{% endif %}
                </button>
                <a href="{% url 'infographics_list' %}" class="bg-gray-300 hover:bg-gray-400 py-2 px-6 rounded">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/jsoneditor.min.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize JSON editor if not lesson summary
        {% if not is_lesson_summary %}
        const container = document.getElementById('{{ form.content.id_for_label }}');
        const options = {
            mode: 'tree',
            modes: ['tree', 'view', 'form', 'code', 'text'],
        };
        const editor = new JSONEditor(container, options);
        
        try {
            const initialValue = {{ form.content.value|default:'{}' }};
            editor.set(initialValue);
        } catch (e) {
            console.error('Error setting initial JSON value:', e);
            editor.set({});
        }
        
        // Update form value before submit
        document.querySelector('.infographic-form').addEventListener('submit', function() {
            const jsonValue = JSON.stringify(editor.get());
            container.value = jsonValue;
        });
        {% endif %}
        
        // Preview functionality for lesson summaries
        {% if is_lesson_summary %}
        const previewButton = document.getElementById('preview-button');
        const previewContainer = document.getElementById('preview-container');
        
        previewButton.addEventListener('click', function() {
            const formData = new FormData();
            formData.append('key_points', document.getElementById('{{ form.key_points.id_for_label }}').value);
            formData.append('quote', document.getElementById('{{ form.quote.id_for_label }}').value);
            formData.append('lesson', document.getElementById('{{ form.lesson.id_for_label }}').value);
            
            fetch('{% url "preview_lesson_summary" %}', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.html) {
                    previewContainer.innerHTML = data.html;
                    previewContainer.classList.remove('hidden');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                previewContainer.innerHTML = '<p class="text-red-500">Error generating preview</p>';
                previewContainer.classList.remove('hidden');
            });
        });
        {% endif %}
    });
</script>
{% endblock %}

6.5. `templates/infographics/delete_confirm.html`

{% extends 'base.html' %}

{% block title %}Delete Infographic{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-lg p-6 max-w-lg mx-auto">
        <h1 class="text-2xl font-bold mb-4">Delete Infographic</h1>
        
        <div class="bg-red-50 text-red-800 p-4 rounded-md mb-6">
            <p>Are you sure you want to delete the infographic <strong>"{{ infographic.title }}"</strong>?</p>
            <p class="mt-2">This action cannot be undone.</p>
        </div>
        
        <form method="post">
            {% csrf_token %}
            <div class="flex space-x-4">
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded">
                    Yes, delete
                </button>
                <a href="{% url 'infographic_detail' infographic.pk %}" class="bg-gray-300 hover:bg-gray-400 py-2 px-4 rounded">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

7. JavaScript Files

7.1. `static/js/infographics.js`

/**
 * Renders the infographic content based on its category and structure
 */
function renderInfographicContent(content, container, category) {
    if (!content) {
        container.innerHTML = '<p class="text-gray-500">No content available.</p>';
        return;
    }
    
    // Default rendering for educational tips and general content
    if (category === 'educational_tip' || category === 'did_you_know' || category === 'fact') {
        renderFactContent(content, container);
    } else if (category === 'guide') {
        renderGuideContent(content, container);
    } else if (category === 'lesson_summary') {
        renderLessonSummary(content, container);
    } else {
        // Fallback: just display as JSON
        container.innerHTML = `<pre class="bg-gray-100 p-4 rounded overflow-auto">${JSON.stringify(content, null, 2)}</pre>`;
    }
}

/**
 * Renders content for educational tips, "did you know?" facts
 */
function renderFactContent(content, container) {
    let html = '';
    
    if (content.sections) {
        content.sections.forEach(section => {
            html += `<div class="mb-8">`;
            
            if (section.title) {
                html += `<h3 class="text-xl font-bold mb-4">${section.title}</h3>`;
            }
            
            if (section.text) {
                html += `<p class="mb-4">${section.text}</p>`;
            }
            
            if (section.image) {
                html += `<img src="${section.image}" alt="${section.imageAlt || section.title || 'Infographic section'}" class="w-full mb-4 rounded-lg">`;
            }
            
            if (section.list && Array.isArray(section.list)) {
                html += `<ul class="list-disc pl-5 mb-4">`;
                section.list.forEach(item => {
                    html += `<li class="mb-2">${item}</li>`;
                });
                html += `</ul>`;
            }
            
            html += `</div>`;
        });
    } else if (content.fact) {
        html += `
            <div class="fact-container bg-blue-50 p-6 rounded-lg">
                <div class="fact-icon text-center mb-4">
                    <i class="fas fa-lightbulb text-4xl text-yellow-500"></i>
                </div>
                <div class="fact-content text-center">
                    <p class="text-xl">${content.fact}</p>
                    ${content.source ? `<p class="text-sm text-gray-500 mt-4">Source: ${content.source}</p>` : ''}
                </div>
            </div>
        `;
    }
    
    container.innerHTML = html || '<p class="text-gray-500">No structured content available.</p>';
}

/**
 * Renders content for guides (step-by-step content)
 */
function renderGuideContent(content, container) {
    let html = '';
    
    if (content.steps && Array.isArray(content.steps)) {
        html += `<div class="steps-container">`;
        
        content.steps.forEach((step, index) => {
            html += `
                <div class="step-item mb-8">
                    <div class="step-header flex items-center mb-4">
                        <div class="step-number bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">
                            ${index + 1}
                        </div>
                        <h3 class="text-xl font-bold">${step.title || `Step ${index + 1}`}</h3>
                    </div>
                    
                    <div class="step-content ml-11">
                        ${step.description ? `<p class="mb-4">${step.description}</p>` : ''}
                        ${step.image ? `<img src="${step.image}" alt="Step ${index + 1}" class="w-full mb-4 rounded-lg">` : ''}
                        
                        ${step.tips && step.tips.length ? `
                            <div class="tips-container bg-yellow-50 p-4 rounded-md my-4">
                                <h4 class="font-bold mb-2">Tips:</h4>
                                <ul class="list-disc pl-5">
                                    ${step.tips.map(tip => `<li>${tip}</li>`).join('')}
                                </ul>
                            </div>
                        ` : ''}
                    </div>
                </div>
            `;
        });
        
        html += `</div>`;
    }
    
    container.innerHTML = html || '<p class="text-gray-500">No steps available for this guide.</p>';
}

/**
 * Renders content for lesson summaries
 */
function renderLessonSummary(content, container) {
    let html = '';
    
    html += `<h2 class="text-2xl font-bold mb-6">Key Takeaways</h2>`;
    
    if (content.key_points && Array.isArray(content.key_points) && content.key_points.length) {
        html += `<div class="key-points-container">`;
        
        content.key_points.forEach(point => {
            html += `
                <div class="key-point bg-gray-50 border-l-4 border-blue-500 p-4 mb-4 rounded">
                    <p>${point}</p>
                </div>
            `;
        });
        
        html += `</div>`;
    } else {
        html += `<p class="text-gray-500 mb-4">No key points available.</p>`;
    }
    
    if (content.quote) {
        html += `
            <div class="quote-container bg-blue-50 p-6 rounded-lg my-6 relative">
                <div class="quote-mark absolute text-6xl text-blue-200 font-serif leading-none" style="top: 0.5rem; left: 1rem;">"</div>
                <p class="quote-text text-lg italic pl-8">${content.quote}</p>
            </div>
        `;
    }
    
    if (content.lesson_title) {
        html += `
            <div class="lesson-reference mt-6 pt-4 border-t border-gray-200">
                <p class="text-sm text-gray-600">From lesson: <strong>${content.lesson_title}</strong></p>
            </div>
        `;
    }
    
    container.innerHTML = html;
}

8. Implementation Steps

To implement this feature:

Database Setup:
- Add the models to your Django models file
- Run python manage.py makemigrations and python manage.py migrate
Static Files:
- Create the necessary directories
- Add the JavaScript and CSS files
Templates:
- Create the template directory structure
- Add the HTML templates
Form Implementation:
- Add the forms to your forms file
View Implementation:
- Add the view functions to your views file
URL Configuration:
- Add the URL patterns to your urls file
Admin Registration:
- Register the models in your admin file
Integration with Lessons:
- Add "Create Summary" buttons to your lesson detail templates
- Sample code for lesson_detail.html:

{% if user.is_staff or user == lesson.instructor %}
<div class="mt-4">
    <a href="{% url 'create_lesson_summary' lesson.id %}" class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded inline-flex items-center">
        <i class="fas fa-magic mr-2"></i> Create "What I Learned Today" Summary
    </a>
</div>
{% endif %}

This implementation provides everything you need to create, view, edit, and share both static infographics and dynamic lesson summaries. The "What I Learned Today" feature connects directly to your existing lesson model and allows for easy creation of shareable summaries from lesson content.

Let me know if you need any clarification on specific parts of the implementation!

🐰 📊

Uh oh!

Infographics: Share quick educational tips or "Did you know?" facts in easily digestible visual formats. #46

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions