Upload 8 files

app.py

@@ -10,10 +10,10 @@ app.secret_key = 'supersecretkey_for_session_management' # Required for flash me
 # Renamed to RAW as we'll augment it with position and path data
 VIDEOS_RAW = [
     {"id": "v1", "title": "A Beginner's Guide to Rainwater Collection", "url": "https://www.youtube.com/embed/uPS3GT1DC_Q?si=OYkUG-tuJeZquIkv", "length": "10:51", "base_points": 50},
-    {"id": "v2", "title": "Introduction to Rainwater Harvesting", "url": "https://www.youtube.com/embed/uPS3GT1DC_Q?si=OYkUG-tuJeZquIkv", "length": "6:44", "base_points": 40},
+    {"id": "v2", "title": "Introduction to Rainwater Harvesting", "url": "https://www.youtube.com/embed/72CVryFbv5I?si=oKWZ5Ep1Z3kcLI-g", "length": "6:44", "base_points": 40},
     {"id": "v3", "title": "First Flush Diverter Explained", "url": "https://www.youtube.com/embed/zO09yau1lCo?si=g-EJqsLU3PNiWjRD", "length": "8:16", "base_points": 60},
     {"id": "v4", "title": "Is Rainwater Safe to Drink?", "url": "https://www.youtube.com/embed/nLphSEiHroU?si=PJ49EHuKVxeYRt_H", "length": "7:00", "base_points": 70}, # Adjusted length for the new video
-    {"id": "v5", "title": "First Flush Installation", "url": "https://www.youtube.com/embed/gxguzuyDicQ?si=m8tMaKPh366Ox89a", "length": "9:34", "base_points": 65},
+    {"id": "v5", "title": "First Flush Installation", "url": "https://www.youtube.com/embed/bbYJvTj8uiw?si=nClbPzN9L2buoilz", "length": "9:34", "base_points": 65},
     {"id": "v6", "title": "DIY Home System Tour", "url": "https://www.youtube.com/embed/J2t_ZZGmBoo?si=LpSyztIH8xtF_Z_3", "length": "10:27", "base_points": 80},
     {"id": "v7", "title": "Upgrading a Large System", "url": "https://www.youtube.com/embed/-NJ8aS4_WDA?si=2C0vCgr2O2hiMJx6", "length": "9:01", "base_points": 75},
     {"id": "v8", "title": "Living on Rainwater in a Desert Environment", "url": "https://www.youtube.com/embed/rxmspcSjjKM?si=TerHbg_Ny_ZjbEy3", "length": "10:43", "base_points": 90},
@@ -88,57 +88,57 @@ for i, video_data in enumerate(VIDEOS_RAW):
 
 
 # Quizzes (Video ID -> List of Questions)
-# Each question: 'question', 'options' (list), 'correct_answer_index' (0-indexed), 'points'
+# Each question: 'question', 'options' (list), 'correct_answer_index' (0-indexed), 'points', 'reason'
 QUIZZES = {
     "v1": [
-        {"question": "What is the primary benefit of rainwater collection?", "options": ["Reduced water bills", "Increased garden pests", "More cloudy days", "Better internet speed"], "correct_answer_index": 0, "points": 20},
-        {"question": "What is a common component of a basic rainwater system?", "options": ["Solar panels", "Downspout", "Microwave", "Treadmill"], "correct_answer_index": 1, "points": 20},
-        {"question": "Why is rainwater harvesting considered sustainable?", "options": ["It uses more energy", "It depletes groundwater", "It utilizes a renewable resource", "It requires constant human intervention"], "correct_answer_index": 2, "points": 20},
+        {"question": "What is the primary benefit of rainwater collection?", "options": ["Reduced water bills", "Increased garden pests", "More cloudy days", "Better internet speed"], "correct_answer_index": 0, "points": 20, "reason": "Rainwater collection significantly reduces the need for municipal or well water, directly lowering utility costs."},
+        {"question": "What is a common component of a basic rainwater system?", "options": ["Solar panels", "Downspout", "Microwave", "Treadmill"], "correct_answer_index": 1, "points": 20, "reason": "A downspout is crucial for directing water from the roof (collection surface) to the storage system."},
+        {"question": "Why is rainwater harvesting considered sustainable?", "options": ["It uses more energy", "It depletes groundwater", "It utilizes a renewable resource", "It requires constant human intervention"], "correct_answer_index": 2, "points": 20, "reason": "Rainwater is a naturally replenished resource, making its use sustainable as it doesn't deplete finite resources."},
     ],
     "v2": [
-        {"question": "What is the first step in harvesting rainwater?", "options": ["Filtering", "Collecting from a surface", "Storing in a tank", "Drinking it"], "correct_answer_index": 1, "points": 20},
-        {"question": "Which of these is NOT typically part of an introduction to rainwater harvesting?", "options": ["System sizing", "Components overview", "Basic benefits", "Advanced purification techniques"], "correct_answer_index": 3, "points": 20},
-        {"question": "What is a common use for harvested rainwater in a household?", "options": ["Cooking", "Showering", "Toilet flushing", "Drinking without treatment"], "correct_answer_index": 2, "points": 20},
+        {"question": "What is the first step in harvesting rainwater?", "options": ["Filtering", "Collecting from a surface", "Storing in a tank", "Drinking it"], "correct_answer_index": 1, "points": 20, "reason": "The initial step is always to collect water, typically from a roof or other suitable surface."},
+        {"question": "Which of these is NOT typically part of an introduction to rainwater harvesting?", "options": ["System sizing", "Components overview", "Basic benefits", "Advanced purification techniques"], "correct_answer_index": 3, "points": 20, "reason": "Advanced purification techniques are usually covered in more in-depth or specialized modules, not basic introductions."},
+        {"question": "What is a common use for harvested rainwater in a household?", "options": ["Cooking", "Showering", "Toilet flushing", "Drinking without treatment"], "correct_answer_index": 2, "points": 20, "reason": "Toilet flushing is a common and excellent use for untreated or minimally treated rainwater, reducing potable water consumption."},
     ],
     "v3": [
-        {"question": "What is the main purpose of a first flush diverter?", "options": ["To increase water pressure", "To divert initial dirty rainwater", "To cool the water", "To attract insects"], "correct_answer_index": 1, "points": 20},
-        {"question": "When does the first flush occur?", "options": ["During the middle of a storm", "After a prolonged dry spell", "At the very beginning of a rain event", "When the tank is full"], "correct_answer_index": 2, "points": 20},
-        {"question": "Why is it important to divert the first flush?", "options": ["To save space in the tank", "To improve water quality", "To reduce the amount of collected water", "To make the system more complex"], "correct_answer_index": 1, "points": 20},
+        {"question": "What is the main purpose of a first flush diverter?", "options": ["To increase water pressure", "To divert initial dirty rainwater", "To cool the water", "To attract insects"], "correct_answer_index": 1, "points": 20, "reason": "A first flush diverter prevents the initial, most contaminated rainwater (carrying debris from the roof) from entering the main storage tank."},
+        {"question": "When does the first flush occur?", "options": ["During the middle of a storm", "After a prolonged dry spell", "At the very beginning of a rain event", "When the tank is full"], "correct_answer_index": 2, "points": 20, "reason": "The 'first flush' refers to the first few minutes of a rainfall event, when the most impurities are washed off collection surfaces."},
+        {"question": "Why is it important to divert the first flush?", "options": ["To save space in the tank", "To improve water quality", "To reduce the amount of collected water", "To make the system more complex"], "correct_answer_index": 1, "points": 20, "reason": "Diverting the first flush significantly improves the overall quality of the water collected in the storage tank."},
     ],
      "v4": [
-        {"question": "What is crucial for making rainwater safe to drink?", "options": ["No filtration at all", "Only basic screening", "Proper filtration and purification", "Adding sugar"], "correct_answer_index": 2, "points": 20},
-        {"question": "What contaminants might be found in raw rainwater?", "options": ["Pure oxygen", "Roof debris, dust, bird droppings", "Salt", "Distilled water"], "correct_answer_index": 1, "points": 20},
-        {"question": "Which method is commonly used for purifying drinking water from rainwater?", "options": ["Boiling", "Freezing", "Microwaving", "Shaking vigorously"], "correct_answer_index": 0, "points": 20},
+        {"question": "What is crucial for making rainwater safe to drink?", "options": ["No filtration at all", "Only basic screening", "Proper filtration and purification", "Adding sugar"], "correct_answer_index": 2, "points": 20, "reason": "For drinking, rainwater requires thorough filtration to remove particulates and purification (like boiling or UV) to eliminate pathogens."},
+        {"question": "What contaminants might be found in raw rainwater?", "options": ["Pure oxygen", "Roof debris, dust, bird droppings", "Salt", "Distilled water"], "correct_answer_index": 1, "points": 20, "reason": "Raw rainwater can pick up various contaminants from the atmosphere and collection surfaces, including organic matter, dust, and animal waste."},
+        {"question": "Which method is commonly used for purifying drinking water from rainwater?", "options": ["Boiling", "Freezing", "Microwaving", "Shaking vigorously"], "correct_answer_index": 0, "points": 20, "reason": "Boiling water for at least one minute is a reliable method to kill most bacteria and viruses, making it safe for consumption."},
     ],
     "v5": [
-        {"question": "What type of pipe is often used for first flush diverters?", "options": ["Electrical conduit", "PVC pipe", "Garden hose", "Metal rebar"], "correct_answer_index": 1, "points": 20},
-        {"question": "Where is a first flush diverter typically installed?", "options": ["Inside the storage tank", "At the very top of the roof", "Between the gutter downspout and the storage tank", "Underground, far from the house"], "correct_answer_index": 2, "points": 20},
-        {"question": "What is a common safety measure during installation?", "options": ["Working alone", "Wearing a blindfold", "Using proper tools and fall protection", "Installing during a thunderstorm"], "correct_answer_index": 2, "points": 20},
+        {"question": "What type of pipe is often used for first flush diverters?", "options": ["Electrical conduit", "PVC pipe", "Garden hose", "Metal rebar"], "correct_answer_index": 1, "points": 20, "reason": "PVC (Polyvinyl Chloride) pipes are commonly used due to their durability, cost-effectiveness, and ease of installation for water systems."},
+        {"question": "Where is a first flush diverter typically installed?", "options": ["Inside the storage tank", "At the very top of the roof", "Between the gutter downspout and the storage tank", "Underground, far from the house"], "correct_answer_index": 2, "points": 20, "reason": "It's installed in the downspout system before the water enters the main storage, allowing the initial flow to be diverted."},
+        {"question": "What is a common safety measure during installation?", "options": ["Working alone", "Wearing a blindfold", "Using proper tools and fall protection", "Installing during a thunderstorm"], "correct_answer_index": 2, "points": 20, "reason": "Safety precautions like using correct tools and fall protection are essential, especially when working on roofs or with heavy equipment."},
     ],
     "v6": [
-        {"question": "What does a 'DIY Home System Tour' typically showcase?", "options": ["Professional installation only", "Pre-built commercial systems", "Custom-built, homeowner-installed systems", "Fantasy systems"], "correct_answer_index": 2, "points": 20},
-        {"question": "What is a common component highlighted in a home tour?", "options": ["An electric car charger", "A storage tank", "A swimming pool heater", "A satellite dish"], "correct_answer_index": 1, "points": 20},
-        {"question": "What can be learned from a DIY system tour?", "options": ["How to break the system", "Specific design choices and challenges", "The history of plumbing", "Advanced quantum physics"], "correct_answer_index": 1, "points": 20},
+        {"question": "What does a 'DIY Home System Tour' typically showcase?", "options": ["Professional installation only", "Pre-built commercial systems", "Custom-built, homeowner-installed systems", "Fantasy systems"], "correct_answer_index": 2, "points": 20, "reason": "DIY tours focus on practical, often budget-friendly systems built and managed by homeowners themselves."},
+        {"question": "What is a common component highlighted in a home tour?", "options": ["An electric car charger", "A storage tank", "A swimming pool heater", "A satellite dish"], "correct_answer_index": 1, "points": 20, "reason": "The storage tank is a central and visually significant component of any rainwater harvesting system, often a key focus in tours."},
+        {"question": "What can be learned from a DIY system tour?", "options": ["How to break the system", "Specific design choices and challenges", "The history of plumbing", "Advanced quantum physics"], "correct_answer_index": 1, "points": 20, "reason": "DIY tours offer insights into practical design considerations, modifications, and solutions to common challenges faced by homeowners."},
     ],
     "v7": [
-        {"question": "What might an upgrade to a large system involve?", "options": ["Reducing tank capacity", "Adding more collection surfaces or storage", "Removing all filters", "Switching to bottled water"], "correct_answer_index": 1, "points": 20},
-        {"question": "Why would someone upgrade a large rainwater harvesting system?", "options": ["To collect less water", "To improve efficiency or meet higher demand", "To make it less reliable", "To attract more birds"], "correct_answer_index": 1, "points": 20},
-        {"question": "What should be considered when planning a system upgrade?", "options": ["Ignoring existing infrastructure", "Only focusing on aesthetics", "Budget, demand, and integration with current setup", "Completely random additions"], "correct_answer_index": 2, "points": 20},
+        {"question": "What might an upgrade to a large system involve?", "options": ["Reducing tank capacity", "Adding more collection surfaces or storage", "Removing all filters", "Switching to bottled water"], "correct_answer_index": 1, "points": 20, "reason": "Upgrading often means expanding capacity to collect more water or increasing storage to meet higher demand."},
+        {"question": "Why would someone upgrade a large rainwater harvesting system?", "options": ["To collect less water", "To improve efficiency or meet higher demand", "To make it less reliable", "To attract more birds"], "correct_answer_index": 1, "points": 20, "reason": "Upgrades are typically motivated by a need for more water, better performance, or adapting to changing water demands."},
+        {"question": "What should be considered when planning a system upgrade?", "options": ["Ignoring existing infrastructure", "Only focusing on aesthetics", "Budget, demand, and integration with current setup", "Completely random additions"], "correct_answer_index": 2, "points": 20, "reason": "Effective planning requires assessing financial resources, water needs, and how new components will fit with existing infrastructure."},
     ],
     "v8": [
-        {"question": "What is a primary challenge of living on rainwater in a desert?", "options": ["Too much rain", "Limited rainfall and high evaporation", "No need for water", "Excessive humidity"], "correct_answer_index": 1, "points": 20},
-        {"question": "What strategy is crucial for rainwater harvesting in arid climates?", "options": ["Using tiny collection areas", "Maximizing collection surfaces and storage", "Wasting water frequently", "Ignoring forecasts"], "correct_answer_index": 1, "points": 20},
-        {"question": "Why is careful management important in a desert environment?", "options": ["Water is abundant", "Water is a scarce and precious resource", "It's a fun hobby", "To prove a point"], "correct_answer_index": 1, "points": 20},
+        {"question": "What is a primary challenge of living on rainwater in a desert?", "options": ["Too much rain", "Limited rainfall and high evaporation", "No need for water", "Excessive humidity"], "correct_answer_index": 1, "points": 20, "reason": "Deserts are characterized by scarce rainfall and high temperatures, leading to significant water loss through evaporation, making collection challenging."},
+        {"question": "What strategy is crucial for rainwater harvesting in arid climates?", "options": ["Using tiny collection areas", "Maximizing collection surfaces and storage", "Wasting water frequently", "Ignoring forecasts"], "correct_answer_index": 1, "points": 20, "reason": "In arid regions, it's vital to capture as much rainfall as possible from large surfaces and store it effectively to last through dry periods."},
+        {"question": "Why is careful management important in a desert environment?", "options": ["Water is abundant", "Water is a scarce and precious resource", "It's a fun hobby", "To prove a point"], "correct_answer_index": 1, "points": 20, "reason": "Water is extremely limited in deserts, so every drop must be managed wisely to ensure survival and sustainability."},
     ],
     "v9": [
-        {"question": "What material are many water storage tanks made from?", "options": ["Glass", "Wood", "Polyethylene", "Cardboard"], "correct_answer_index": 2, "points": 20},
-        {"question": "What tool might be used to prepare a cracked polyethylene tank for repair?", "options": ["A hammer", "A heat gun or plastic welder", "A spoon", "A paperclip"], "correct_answer_index": 1, "points": 20},
-        {"question": "What is a key step in ensuring a successful tank repair?", "options": ["Leaving the crack dirty", "Cleaning and drying the area thoroughly", "Applying repair material blindly", "Ignoring manufacturer instructions"], "correct_answer_index": 1, "points": 20},
+        {"question": "What material are many water storage tanks made from?", "options": ["Glass", "Wood", "Polyethylene", "Cardboard"], "correct_answer_index": 2, "points": 20, "reason": "Polyethylene is a common material for water tanks due to its durability, resistance to corrosion, and food-grade safety for water storage."},
+        {"question": "What tool might be used to prepare a cracked polyethylene tank for repair?", "options": ["A hammer", "A heat gun or plastic welder", "A spoon", "A paperclip"], "correct_answer_index": 1, "points": 20, "reason": "Plastic welding or using a heat gun with filler material is the appropriate method for repairing cracks in polyethylene tanks."},
+        {"question": "What is a key step in ensuring a successful tank repair?", "options": ["Leaving the crack dirty", "Cleaning and drying the area thoroughly", "Applying repair material blindly", "Ignoring manufacturer instructions"], "correct_answer_index": 1, "points": 20, "reason": "A clean, dry surface is essential for proper adhesion and a long-lasting repair when working with adhesives or plastic welding."},
     ],
     "v10": [
-        {"question": "What is the main function of a pump in a rainwater system?", "options": ["To filter the water", "To add chemicals to the water", "To pressurize and distribute water", "To cool the water"], "correct_answer_index": 2, "points": 20},
-        {"question": "What kind of power source do most rainwater pumps use?", "options": ["Manual hand crank", "Electricity", "Solar power only", "Wind power"], "correct_answer_index": 1, "points": 20},
-        {"question": "What needs to be considered when selecting a pump?", "options": ["Its color", "Flow rate and pressure requirements", "The brand of your car", "Its weight"], "correct_answer_index": 1, "points": 20},
+        {"question": "What is the main function of a pump in a rainwater system?", "options": ["To filter the water", "To add chemicals to the water", "To pressurize and distribute water", "To cool the water"], "correct_answer_index": 2, "points": 20, "reason": "Pumps are used to move water from the storage tank to where it's needed, often at a specific pressure for household use."},
+        {"question": "What kind of power source do most rainwater pumps use?", "options": ["Manual hand crank", "Electricity", "Solar power only", "Wind power"], "correct_answer_index": 1, "points": 20, "reason": "While solar pumps exist, most common rainwater systems utilize electric pumps for consistent power and performance."},
+        {"question": "What needs to be considered when selecting a pump?", "options": ["Its color", "Flow rate and pressure requirements", "The brand of your car", "Its weight"], "correct_answer_index": 1, "points": 20, "reason": "The pump must be chosen based on the desired water flow (how much water per minute) and pressure (how strong the water comes out) for the intended application."},
     ],
 }
 
@@ -289,32 +289,64 @@ def quiz(video_id):
         flash("Please complete the video before taking the quiz.", 'warning')
         return redirect(url_for('dashboard'))
 
-    if video_id in user_progress['video_quiz_scores']:
+    # If quiz already taken, and it's a GET request, redirect to dashboard
+    # The user can't retake a quiz, so no need to show old results on GET
+    if video_id in user_progress['video_quiz_scores'] and request.method == 'GET':
         flash(f"You already completed the quiz for '{video['title']}'. Your score: {user_progress['video_quiz_scores'][video_id]} points.", 'info')
         return redirect(url_for('dashboard'))
 
     if request.method == 'POST':
         user_score = 0
         correct_answers_count = 0
+        quiz_feedback = [] # To store feedback for each question
+
         for i, question_data in enumerate(quiz_questions):
-            user_answer_index = request.form.get(f'question_{i}')
-            if user_answer_index:
+            user_answer_index_str = request.form.get(f'question_{i}')
+            user_answer_index = None
+            is_correct = False
+            points_for_this_question = 0
+            user_selected_option_text = "No answer" # Default if nothing selected
+
+            if user_answer_index_str:
                 try:
-                    user_answer_index = int(user_answer_index)
+                    user_answer_index = int(user_answer_index_str)
+                    user_selected_option_text = question_data['options'][user_answer_index]
                     if user_answer_index == question_data['correct_answer_index']:
-                        user_score += question_data['points']
+                        is_correct = True
+                        points_for_this_question = question_data['points']
+                        user_score += points_for_this_question
                         correct_answers_count += 1
                 except ValueError:
-                    pass
+                    pass # user_answer_index remains None, user_selected_option_text is "No answer"
+
+            correct_option_text = question_data['options'][question_data['correct_answer_index']]
+            reason_text = question_data.get('reason', 'No specific reason provided for this question.') # Get reason, provide default
+
+            quiz_feedback.append({
+                'question': question_data['question'],
+                'user_answer_index': user_answer_index,
+                'user_selected_option': user_selected_option_text,
+                'correct_answer_index': question_data['correct_answer_index'],
+                'correct_option': correct_option_text,
+                'is_correct': is_correct,
+                'points_earned': points_for_this_question,
+                'reason': reason_text
+            })
 
         user_progress['points'] += user_score
         user_progress['video_quiz_scores'][video_id] = user_score
         flash(f"Quiz completed for '{video['title']}': You scored {user_score} points ({correct_answers_count}/{len(quiz_questions)} correct)!", 'success')
         session['user_progress'] = user_progress # Update session after modification
         evaluate_badges()
-        return redirect(url_for('dashboard'))
 
-    return render_template('quiz.html', video=video, quiz_questions=quiz_questions, enumerate=enumerate)
+        # Render the quiz page again, but this time with feedback
+        return render_template('quiz.html', video=video, quiz_questions=quiz_questions,
+                               quiz_feedback=quiz_feedback, user_score=user_score,
+                               total_quiz_points=sum(q['points'] for q in quiz_questions),
+                               enumerate=enumerate, quiz_submitted=True)
+
+    # For GET request (displaying quiz for the first time)
+    return render_template('quiz.html', video=video, quiz_questions=quiz_questions, enumerate=enumerate, quiz_submitted=False)
 
 @app.route('/set_username', methods=['POST'])
 def set_username():

templates/base.html

@@ -44,6 +44,7 @@
     </style>
 </head>
 <body>
+    <img src="/static/WhatsApp Image 2025-09-18 at 18.33.55_105edc80.jpg" alt="Logo" style="position: fixed; top: 20px; right: 30px; width: 80px; height: auto; z-index: 1000; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);">
     <div class="container">
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}

templates/certificate.html

@@ -0,0 +1,278 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Certificate of Completion</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@700&family=Open+Sans&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Open Sans', sans-serif;
+            background: linear-gradient(135deg, #f0f2f5 0%, #e0e7ef 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            position: relative;
+        }
+        .certificate-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 24px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+            max-width: 900px;
+            width: 100%;
+            margin-bottom: 30px;
+            border: 10px double #FFD700;
+            overflow: hidden;
+            position: relative;
+        }
+        .certificate {
+            padding: 60px 40px 40px 40px;
+            position: relative;
+            background: linear-gradient(135deg, #fdfdfd 0%, #f3f9ff 100%);
+        }
+        .logo-container {
+            width: 100px;
+            height: 100px;
+            margin: 0 auto 30px auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 20px;
+            background: #fff;
+            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+            position: relative;
+        }
+        .logo-container img {
+            width: 90px;
+            height: auto;
+            border-radius: 12px;
+        }
+        .certificate-title {
+            font-family: 'Playfair Display', serif;
+            font-size: 3em;
+            color: #1d3557;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        .certificate-subtitle {
+            font-size: 1.2em;
+            color: #444;
+            margin-bottom: 30px;
+        }
+        .certificate-body {
+            text-align: center;
+            margin: 40px 0 30px 0;
+        }
+        .certificate-name-label {
+            font-size: 1.1em;
+            color: #6c757d;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+        .certificate-name {
+            font-family: 'Great Vibes', cursive;
+            font-size: 3.2em;
+            color: #0d6efd;
+            margin-bottom: 20px;
+            line-height: 1.2;
+            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.10);
+        }
+        .certificate-text {
+            font-size: 1.1em;
+            color: #495057;
+            line-height: 1.7;
+            margin: 0 auto 20px auto;
+            max-width: 700px;
+        }
+        .certificate-points {
+            font-size: 1.3em;
+            color: #0a9396;
+            font-weight: 700;
+            margin-top: 15px;
+        }
+        .certificate-footer {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 40px;
+            font-size: 1em;
+            color: #555;
+        }
+        .certificate-signature {
+            width: 40%;
+            text-align: center;
+        }
+        .certificate-signature p {
+            margin-top: 40px;
+            border-top: 2px solid #000;
+            padding-top: 8px;
+            font-weight: 600;
+        }
+        .certificate-id {
+            font-size: 0.95em;
+            color: #888;
+            text-align: center;
+            margin-top: 30px;
+            font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+            padding: 10px 20px;
+            background: #f8f9fa;
+            border-radius: 10px;
+            border: 1px solid #eee;
+            display: inline-block;
+        }
+        .download-btn {
+            background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
+            color: white;
+            border: none;
+            padding: 16px 32px;
+            border-radius: 50px;
+            font-size: 1.1em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 32px rgba(0, 180, 216, 0.15);
+            margin: 30px auto 0 auto;
+            display: block;
+            letter-spacing: 0.5px;
+        }
+        .download-btn:hover {
+            background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
+            transform: translateY(-2px) scale(1.01);
+            box-shadow: 0 12px 32px rgba(0, 180, 216, 0.22);
+        }
+        @media (max-width: 700px) {
+            .certificate {
+                padding: 30px 10px;
+            }
+            .certificate-footer {
+                flex-direction: column;
+                gap: 20px;
+            }
+        }
+        @media print {
+            body {
+                background: white;
+                padding: 0;
+            }
+            .download-btn {
+                display: none !important;
+            }
+            .certificate-container {
+                box-shadow: none;
+                max-width: none;
+                width: 100%;
+                background: white;
+                border: none;
+            }
+            .certificate {
+                background: white;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="certificate-container" id="certificate">
+        <div class="certificate">
+            <div class="logo-container">
+                <img src="/static/WhatsApp Image 2025-09-18 at 18.33.55_105edc80.jpg" alt="Logo">
+            </div>
+            <h1 class="certificate-title">Certificate of Completion</h1>
+            <p class="certificate-subtitle">This certifies that</p>
+            <div class="certificate-body">
+                <div class="certificate-name-label">Name:</div>
+                <div class="certificate-name" id="recipientName">{{ username }}</div>
+                <div class="certificate-name-label">has successfully completed the course</div>
+                <div class="certificate-text">
+                    for demonstrating outstanding dedication and mastering the principles of Rainwater Harvesting
+                    through the <strong>Raindrop Quest: Harvest Hero</strong> learning program.
+                </div>
+                <div class="certificate-points">Total Points Earned: <span id="points">{{ total_points }}</span></div>
+            </div>
+            <div class="certificate-footer">
+                <div class="certificate-signature">
+                    <p>Date: <span id="issueDate">{{ 'today' | date('%B %d, %Y') }}</span></p>
+                </div>
+                <div class="certificate-signature">
+                    <p>Instructor: HydroHero Academy</p>
+                </div>
+            </div>
+            <div class="certificate-id">
+                Certificate ID: RWH-2025-<span id="certId">001234</span>
+            </div>
+        </div>
+    </div>
+    <button class="download-btn" onclick="downloadPDF()">
+        📥 Download Certificate
+    </button>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script>
+        // Function to generate random certificate ID
+        function generateCertId() {
+            return Math.random().toString(36).substr(2, 6).toUpperCase();
+        }
+        // Set current date
+        function setDate() {
+            const currentDate = new Date();
+            const options = { month: 'short', year: 'numeric' };
+            document.getElementById('issueDate').textContent = currentDate.toLocaleDateString('en-US', options);
+        }
+        // Set certificate ID
+        function setCertId() {
+            document.getElementById('certId').textContent = generateCertId();
+        }
+        // Function to download certificate as PDF
+        async function downloadPDF() {
+            const certificate = document.getElementById('certificate');
+            const downloadBtn = document.querySelector('.download-btn');
+            downloadBtn.style.display = 'none';
+            try {
+                const canvas = await html2canvas(certificate, {
+                    scale: 3,
+                    useCORS: true,
+                    backgroundColor: '#ffffff',
+                    width: certificate.offsetWidth,
+                    height: certificate.offsetHeight,
+                    logging: false
+                });
+                const { jsPDF } = window.jspdf;
+                const pdf = new jsPDF({
+                    orientation: 'landscape',
+                    unit: 'mm',
+                    format: 'a4'
+                });
+                const imgWidth = 297;
+                const imgHeight = (canvas.height * imgWidth) / canvas.width;
+                const yPosition = (210 - imgHeight) / 2;
+                pdf.addImage(
+                    canvas.toDataURL('image/png', 1.0),
+                    'PNG',
+                    0,
+                    yPosition,
+                    imgWidth,
+                    imgHeight
+                );
+                const recipientName = document.getElementById('recipientName').textContent;
+                const fileName = `Certificate_${recipientName.replace(/\s+/g, '_')}_Rainwater_Harvesting.pdf`;
+                pdf.save(fileName);
+            } catch (error) {
+                alert('Error generating PDF. Please try again.');
+            } finally {
+                downloadBtn.style.display = 'block';
+            }
+        }
+        // Initialize on load
+        document.addEventListener('DOMContentLoaded', function() {
+            setDate();
+            setCertId();
+        });
+    </script>
+</body>
+</html>

templates/landing.html

@@ -176,6 +176,7 @@
     </style>
 </head>
 <body>
+    <img src="/static/WhatsApp Image 2025-09-18 at 18.33.55_105edc80.jpg" alt="Logo" style="position: fixed; top: 20px; right: 30px; width: 80px; height: auto; z-index: 1000; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);">
     <div class="landing-container">
         <h1>💧 Raindrop Quest: Harvest Hero</h1>
         <p>Learn about Rainwater Harvesting in a Fun Way!</p>

templates/quiz.html

@@ -12,7 +12,7 @@
 
     .header {
         background: #1d3557;
-        color:black;
+        color: white; /* Changed to white for better contrast */
         padding: 20px;
         text-align: center;
         border-bottom: 5px solid #457b9d;
@@ -40,7 +40,7 @@
         background: #1d3557;
     }
 
-    .quiz-form {
+    .quiz-form, .quiz-results {
         background: rgba(255, 255, 255, 0.9);
         margin: 40px auto;
         padding: 30px;
@@ -51,7 +51,7 @@
         border: 2px solid #457b9d;
     }
 
-    .quiz-form h3 {
+    .quiz-form h3, .quiz-results h3 {
         font-size: 20px;
         color: #1d3557;
         margin-bottom: 10px;
@@ -96,6 +96,77 @@
         transform: scale(1.05);
         background: linear-gradient(90deg, #48cae4, #023047);
     }
+
+    /* Styles for quiz results */
+    .quiz-results h2 {
+        font-family: 'Montserrat', sans-serif;
+        color: #1d3557;
+        margin-bottom: 25px;
+        font-size: 2.2em;
+    }
+    .quiz-results p.score {
+        font-size: 1.5em;
+        font-weight: bold;
+        color: #023047;
+        margin-bottom: 30px;
+    }
+    .quiz-question-feedback {
+        margin-bottom: 30px;
+        padding: 20px;
+        border-radius: 15px;
+        border: 1px solid #ddd;
+        text-align: left;
+    }
+    .quiz-question-feedback.correct {
+        background-color: #e6ffed; /* Light green */
+        border-color: #28a745; /* Green */
+    }
+    .quiz-question-feedback.incorrect {
+        background-color: #ffe6e6; /* Light red */
+        border-color: #dc3545; /* Red */
+    }
+    .quiz-question-feedback h4 {
+        margin-top: 0;
+        color: #1d3557;
+        font-size: 1.3em;
+    }
+    .quiz-question-feedback .user-answer, .quiz-question-feedback .correct-answer {
+        font-size: 1.1em;
+        margin-bottom: 8px;
+    }
+    .quiz-question-feedback .user-answer span, .quiz-question-feedback .correct-answer span {
+        font-weight: bold;
+    }
+    .quiz-question-feedback .user-answer.correct-choice {
+        color: #28a745;
+    }
+    .quiz-question-feedback .user-answer.incorrect-choice {
+        color: #dc3545;
+    }
+    .quiz-question-feedback .correct-answer-text {
+        color: #28a745;
+    }
+    .quiz-question-feedback .reason {
+        font-style: italic;
+        color: #555;
+        margin-top: 15px;
+        padding-top: 10px;
+        border-top: 1px dashed #ccc;
+    }
+    .quiz-results .back-to-dashboard {
+        display: inline-block;
+        margin-top: 30px;
+        background: #007bff;
+        color: white;
+        padding: 12px 25px;
+        border-radius: 20px;
+        text-decoration: none;
+        font-weight: bold;
+        transition: background 0.3s;
+    }
+    .quiz-results .back-to-dashboard:hover {
+        background: #0056b3;
+    }
 </style>
 
 <div class="header">
@@ -103,17 +174,44 @@
     <a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
 </div>
 
-<form method="POST" class="quiz-form">
-    {% for i, question_data in enumerate(quiz_questions) %}
-        <h3>{{ i+1 }}. {{ question_data.question }}</h3>
-        {% for j, option in enumerate(question_data.options) %}
-            <label>
-                <input type="radio" name="question_{{ i }}" value="{{ j }}" required>
-                {{ option }}
-            </label>
+{% if quiz_submitted %}
+    <div class="quiz-results">
+        <h2>Quiz Results</h2>
+        <p class="score">Your Score: {{ user_score }} / {{ total_quiz_points }} points</p>
+
+        {% for feedback in quiz_feedback %}
+            <div class="quiz-question-feedback {% if feedback.is_correct %}correct{% else %}incorrect{% endif %}">
+                <h4>{{ loop.index }}. {{ feedback.question }}</h4>
+                <p class="user-answer {% if feedback.is_correct %}correct-choice{% else %}incorrect-choice{% endif %}">
+                    Your Answer: <span>{{ feedback.user_selected_option }}</span>
+                    {% if feedback.is_correct %} (Correct! 🎉){% else %} (Incorrect 😔){% endif %}
+                </p>
+                {% if not feedback.is_correct %}
+                    <p class="correct-answer">
+                        Correct Answer: <span class="correct-answer-text">{{ feedback.correct_option }}</span>
+                    </p>
+                {% endif %}
+                <p class="reason">
+                    <strong>Reason:</strong> {{ feedback.reason }}
+                </p>
+            </div>
+        {% endfor %}
+
+        <a href="{{ url_for('dashboard') }}" class="back-to-dashboard">Return to Dashboard</a>
+    </div>
+{% else %}
+    <form method="POST" class="quiz-form">
+        {% for i, question_data in enumerate(quiz_questions) %}
+            <h3>{{ i+1 }}. {{ question_data.question }}</h3>
+            {% for j, option in enumerate(question_data.options) %}
+                <label>
+                    <input type="radio" name="question_{{ i }}" value="{{ j }}" required>
+                    {{ option }}
+                </label>
+            {% endfor %}
+            <br>
         {% endfor %}
-        <br>
-    {% endfor %}
-    <button type="submit">Submit Quiz</button>
-</form>
-{% endblock %}
+        <button type="submit">Submit Quiz</button>
+    </form>
+{% endif %}
+{% endblock %}