refactor user view and controller to adhere to MVC

streamlit_src/controllers/user_controller.py

@@ -1,56 +1,353 @@
+from typing import Callable, Dict, List, Tuple
 import streamlit as st
 import numpy as np
 from models.air_quality_model import AirQualityModel
 from views.user_view import UserView
+import os
+import pandas as pd
+import random
+import json
+from datetime import date, timedelta
+import plotly.graph_objects as go
 
 
 class UserController:
-    def __init__(self):
+    """
+    A class to handle the user interface.
+    """
+
+    def __init__(self) -> None:
+        """
+        Initializes the UserController class.
+        """
         self.model = AirQualityModel()
         self.view = UserView()
+        self.today_data = self.model.get_today_data()
+        self.next_three_days = self.model.next_three_day_predictions()
+
+        self.who_guidelines = {
+            "Pollutant": ["NO2 (µg/m³)", "O3 (µg/m³)"],
+            "WHO Guideline": [self.model.WHO_NO2_LEVEL, self.model.WHO_O3_LEVEL],
+        }
 
-        # Ensure session state for first run and quiz question
+        # Ensure session state for quiz and quiz answer tracking
         if "is_first_run" not in st.session_state:
             st.session_state.is_first_run = True
-
         if "question_choice" not in st.session_state:
             st.session_state.question_choice = np.random.randint(0, 5)
 
-    def show_dashboard(self):
-        # Get today's data and predictions
-        today_data = self.model.get_today_data()
-        next_three_days = self.model.next_three_day_predictions()
+        # Paths for external data
+        self.interactions_path = os.path.join(
+            os.path.dirname(os.path.dirname(__file__)), "json_interactions/"
+        )
+        self.facts_path = os.path.join(self.interactions_path, "facts.json")
+        self.questions_path = os.path.join(self.interactions_path, "question.json")
+        self.awareness_path = os.path.join(self.interactions_path, "awareness.json")
+
+    def show_dashboard(self) -> None:
+        """
+        Shows the main page of the user interface.
+        """
+        self.show_current_data()
+
+        self.two_columns_layout(0.7, self.raise_awareness, self.quiz)
+
+        # Plot selection and rendering
+        plot_type = self.view.view_option_selection(["Line Plot", "Gauge Plot"])
+        if plot_type == "Line Plot":
+            line_fig = self.prepare_line_plot()
+            self.view.display_predictions_lineplot(line_fig)
+        elif plot_type == "Gauge Plot":
+            gauge_plots = self.prepare_gauge_plots()
+            self.view.display_predictions_gaugeplot(gauge_plots)
+
+        # WHO comparison
+        who_comparisons = self.compare_to_who()
+        self.view.compare_to_who(who_comparisons)
+
+        # Sources
+        sources = [
+            (
+                "WHO Air Quality Guidelines",
+                "https://www.who.int/news-room/fact-sheets/detail/ambient-(outdoor)-air-quality-and-health",
+            ),
+            (
+                "Air Pollution Facts",
+                "https://www.un.org/sustainabledevelopment/air-pollution/",
+            ),
+        ]
+        self.view.print_sources(sources)
+
+    def show_current_data(self) -> None:
+        """
+        Shows the current data on the main page of the user interface.
+        """
+        merged_data_df = self.prepare_data_for_view()
+        self.view.show_current_data(merged_data_df)
 
-        # WHO Guidelines
-        who_guidelines = {
+    def prepare_data_for_view(self) -> pd.DataFrame:
+        """
+        Prepares the current data for the view.
+
+        Returns
+        -------
+        pd.DataFrame
+            The current data in a pandas DataFrame.
+        """
+        merged_data = {
             "Pollutant": ["NO2 (µg/m³)", "O3 (µg/m³)"],
-            "WHO Guideline": [self.model.WHO_NO2_LEVEL, self.model.WHO_O3_LEVEL],
+            "Current Concentration": [
+                self.today_data["NO2 (µg/m³)"],
+                self.today_data["O3 (µg/m³)"],
+            ],
+            "WHO Guideline": self.who_guidelines["WHO Guideline"],
         }
+        return pd.DataFrame(merged_data)
+
+    def raise_awareness(self) -> None:
+        """
+        Shows the awareness content on the main page of the user interface.
+        """
+        random_fact, awareness_expanders, health_message = (
+            self.prepare_awareness_content()
+        )
+        self.view.raise_awareness(random_fact, awareness_expanders, health_message)
 
-        # Display current data and predictions
-        self.view.show_current_data(today_data, who_guidelines)
+    def prepare_awareness_content(
+        self,
+    ) -> Tuple[str, List[Tuple[str, str]], Dict[str, str]]:
+        """
+        Prepare awareness content including a random fact, expanders, and health message based on air quality data.
 
-        # Use session state to avoid resetting the quiz question after each interaction
-        if st.session_state.is_first_run:
-            st.session_state.question_choice = np.random.randint(0, 5)
-            st.session_state.is_first_run = False
+        Returns
+        -------
+        Tuple[str, List[Tuple[str, str]], Dict[str, str]]
+            A tuple containing the random fact, awareness expanders, and health message.
+        """
+        with open(self.facts_path, "r") as facts_file:
+            facts = json.load(facts_file)
+            random_fact = random.choice(facts["facts"])
+
+        with open(self.awareness_path, "r") as awareness_file:
+            awareness = json.load(awareness_file)
+            awareness_expanders = [
+                (title, "\n".join(text)) for title, text in awareness.items()
+            ]
+
+        health_message = {"message": "", "type": ""}
+        if (
+            self.today_data["NO2 (µg/m³)"] > self.who_guidelines["WHO Guideline"][0]
+            or self.today_data["O3 (µg/m³)"] > self.who_guidelines["WHO Guideline"][1]
+        ):
+            health_message["message"] = (
+                "🚨 High pollution levels today. Avoid outdoor activities if possible, especially for vulnerable groups."
+            )
+            health_message["type"] = "error"
+        else:
+            health_message["message"] = (
+                "✅ Air quality is within safe limits today. Enjoy your outdoor activities!"
+            )
+            health_message["type"] = "success"
+
+        return random_fact, awareness_expanders, health_message
+
+    def quiz(self) -> None:
+        """
+        Show a quiz question and return the answer and whether the answer was correct.
 
-        # Raise awareness and display the quiz with the saved question number
-        self.view.raise_awareness_and_quiz(
-            today_data, who_guidelines, question_nr=st.session_state.question_choice
+        Returns
+        -------
+        tuple
+            A tuple containing the answer and a boolean indicating whether the answer was correct.
+        """
+        question_number = st.session_state.question_choice
+        with open(self.questions_path, "r") as questions_file:
+            quiz_data = json.load(questions_file)
+            question = quiz_data["quiz"][question_number]["question"]
+            options = quiz_data["quiz"][question_number]["options"]
+            submitted, answer = self.view.quiz(question, options)
+
+        if submitted:
+            correct_answer = quiz_data["quiz"][question_number]["answer"]
+            if answer == correct_answer:
+                self.view.success("Correct answer!")
+            else:
+                self.view.error(
+                    f"Wrong answer! The correct answer was {correct_answer[0].lower() + correct_answer[1:]}."
+                )
+
+    def two_columns_layout(
+        self, ratio: float, left_function: Callable, right_function: Callable
+    ) -> None:
+        """
+        Divide the page into two columns and call the left and right functions within them.
+
+        Parameters
+        ----------
+        ratio : float
+            The ratio of the left to the right column.
+        left_function : Callable
+            The function to be called in the left column.
+        right_function : Callable
+            The function to be called in the right column.
+        """
+        left, right = st.columns([ratio, 1 - ratio], gap="large")
+
+        with left:
+            left_function()
+
+        with right:
+            right_function()
+
+    def prepare_line_plot(self) -> go.Figure:
+        """
+        Prepare a line plot for the next three days' NO2 and O3 levels.
+
+        Returns:
+            go.Figure: A plotly figure object.
+        """
+        tomorrow, day_after_tomorrow, two_days_after_tomorrow = (
+            self.get_next_three_days_dates()
+        )
+        self.next_three_days["Date"] = [
+            tomorrow,
+            day_after_tomorrow,
+            two_days_after_tomorrow,
+        ]
+        fig = go.Figure()
+        fig.add_trace(
+            go.Scatter(
+                x=self.next_three_days["Date"],
+                y=self.next_three_days["NO2 (µg/m³)"],
+                mode="lines+markers+text",
+                name="NO2",
+                line=dict(color="blue"),
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=self.next_three_days["Date"],
+                y=self.next_three_days["O3 (µg/m³)"],
+                mode="lines+markers+text",
+                name="O3",
+                line=dict(color="lightblue"),
+            )
         )
 
-        # Plot selection
-        plot_type = self.view.view_option_selection()
-        if plot_type == "Line Plot":
-            self.view.display_predictions_lineplot(next_three_days, who_guidelines)
-        elif plot_type == "Gauge Plot":
-            self.view.display_predictions_gaugeplot(next_three_days, who_guidelines)
+        # WHO guideline as horizontal dotted lines
+        fig.add_hline(
+            y=self.who_guidelines["WHO Guideline"][0],
+            line_dash="dot",
+            line_color="blue",
+            annotation_text="WHO NO2 Guideline",
+        )
+        fig.add_hline(
+            y=self.who_guidelines["WHO Guideline"][1],
+            line_dash="dot",
+            line_color="lightblue",
+            annotation_text="WHO O3 Guideline",
+        )
+
+        fig.update_layout(
+            title="Predictions for the Next 3 Days",
+            xaxis_title="Date",
+            yaxis_title="Pollutant Concentration (µg/m³)",
+            hovermode="x unified",
+        )
+        return fig
+
+    def get_next_three_days_dates(self) -> tuple:
+        """
+        Get the next three days' dates.
+
+        Returns:
+            tuple: A tuple of three date objects.
+        """
+        tomorrow = date.today() + timedelta(days=1)
+        day_after_tomorrow = date.today() + timedelta(days=2)
+        two_days_after_tomorrow = date.today() + timedelta(days=3)
+        return tomorrow, day_after_tomorrow, two_days_after_tomorrow
+
+    def compare_to_who(self) -> list:
+        """
+        Compare the current pollutant levels to WHO guidelines.
 
-        # Compare to WHO guidelines
-        self.view.compare_to_who(
-            today_data, self.model.WHO_NO2_LEVEL, self.model.WHO_O3_LEVEL
+        Returns:
+            list: A list of tuples containing the pollutant name, comparison message, and message type.
+        """
+        comparisons = []
+        for i, pollutant in enumerate(["NO2 (µg/m³)", "O3 (µg/m³)"]):
+            if self.today_data[pollutant] > self.who_guidelines["WHO Guideline"][i]:
+                comparisons.append(
+                    (
+                        pollutant,
+                        f"🚨 {pollutant} levels exceed WHO guidelines!",
+                        "error",
+                    )
+                )
+            else:
+                comparisons.append(
+                    (
+                        pollutant,
+                        f"✅ {pollutant} levels are within safe limits",
+                        "success",
+                    )
+                )
+        return comparisons
+
+    def prepare_gauge_plots(self) -> list:
+        """
+        Prepare gauge plots for the next three days' NO2 and O3 levels.
+
+        Returns:
+            list: A list of tuples containing the day index, formatted date, and two plotly figures (for NO2 and O3).
+        """
+        tomorrow, day_after_tomorrow, two_days_after_tomorrow = (
+            self.get_next_three_days_dates()
         )
+        self.next_three_days["Date"] = [
+            tomorrow,
+            day_after_tomorrow,
+            two_days_after_tomorrow,
+        ]
+
+        gauge_plots = []
+        for i, day in enumerate(
+            [tomorrow, day_after_tomorrow, two_days_after_tomorrow]
+        ):
+            no2_value = self.next_three_days["NO2 (µg/m³)"][i]
+            o3_value = self.next_three_days["O3 (µg/m³)"][i]
+            fig_no2 = self.create_gauge_plot(
+                no2_value, self.who_guidelines["WHO Guideline"][0], "NO2 (µg/m³)"
+            )
+            fig_o3 = self.create_gauge_plot(
+                o3_value, self.who_guidelines["WHO Guideline"][1], "O3 (µg/m³)"
+            )
+            gauge_plots.append((i + 1, day.strftime("%B %d, %Y"), fig_no2, fig_o3))
+        return gauge_plots
 
-        # Print sources
-        self.view.print_sources()
+    def create_gauge_plot(
+        self, value: float, guideline: float, title: str
+    ) -> go.Figure:
+        """
+        Create a gauge plot for a given pollutant value and guideline.
+
+        Args:
+            value (float): The pollutant concentration value.
+            guideline (float): The WHO guideline value for the pollutant.
+            title (str): The title of the gauge plot.
+
+        Returns:
+            go.Figure: A Plotly figure representing the gauge plot.
+        """
+        color = "green" if value <= guideline else "red"
+        fig = go.Figure(
+            go.Indicator(
+                mode="gauge+number",
+                value=value,
+                title={"text": title},
+                gauge={"axis": {"range": [0, 2 * guideline]}, "bar": {"color": color}},
+            )
+        )
+        fig.update_layout(height=250, width=250, margin=dict(t=0, b=0, l=0, r=0))
+        return fig

streamlit_src/json_interactions/awareness.json

@@ -0,0 +1,8 @@
+{
+  "What is Air Pollution?": [
+    "Air pollution is a serious concern that affects the environment and public health. High levels of pollutants, such as ozone (O\u2083) and nitrogen dioxide (NO\u2082), can lead to respiratory problems, aggravate pre-existing conditions like asthma, and contribute to cardiovascular diseases."
+  ],
+  "Why O\u2083 and NO\u2082 Matter": [
+    "Ozone (O\u2083): Formed by chemical reactions in the atmosphere, particularly on sunny days. High levels can cause chest pain, coughing, throat irritation, and airway inflammation. \nNitrogen Dioxide (NO\u2082): Mostly emitted from vehicles and industrial activities, this can cause irritation of the respiratory system and decrease lung function, especially during long-term exposure."
+  ]
+}

streamlit_src/views/user_view.py

@@ -1,335 +1,148 @@
-# views/user_view.py
 import streamlit as st
 import pandas as pd
-from datetime import date, datetime, timedelta
 import plotly.graph_objects as go
-import json
-import random
-import os
-
-FACTS_PATH = os.path.join(
-    os.path.dirname(os.path.dirname(__file__)), "json_interactions/", "facts.json"
-)
-
-QUESTIONS_PATH = os.path.join(
-    os.path.dirname(os.path.dirname(__file__)), "json_interactions/", "question.json"
-)
+import datetime
 
 
 class UserView:
-    def show_current_data(self, today_data, who_guidelines):
-        st.sidebar.markdown(f"Today's Date: **{date.today().strftime('%B %d, %Y')}**")
-
-        # Merge today_data and who_guidelines into one DataFrame
-        merged_data = {
-            "Pollutant": ["NO2 (µg/m³)", "O3 (µg/m³)"],
-            "Current Concentration": [
-                today_data["NO2 (µg/m³)"],
-                today_data["O3 (µg/m³)"],
-            ],
-            "WHO Guideline": [
-                who_guidelines["WHO Guideline"][0],  # NO2 guideline
-                who_guidelines["WHO Guideline"][1],  # O3 guideline
-            ],
-        }
+    """
+    A class to handle all user interface elements.
+    """
 
-        merged_data_df = pd.DataFrame(merged_data)
+    def show_current_data(self, merged_data_df: pd.DataFrame) -> None:
+        """
+        Show the current pollutant concentrations along with WHO guidelines.
 
-        # Use Streamlit column configuration with hide_index=True
+        Args:
+            merged_data_df (pd.DataFrame): A pandas DataFrame containing the current pollutant concentrations and WHO guidelines.
+        """
+        st.sidebar.markdown(
+            f"Today's Date: **{datetime.date.today().strftime('%B %d, %Y')}**"
+        )
         st.sidebar.markdown("### Current Pollutant Concentrations and WHO Guidelines")
         st.sidebar.dataframe(merged_data_df, hide_index=True)
 
-    def get_next_three_days_dates(self):
+    def success(self, message: str) -> None:
         """
-        Returns the next three days' dates in datetime format as a tuple.
+        Show a success message.
 
-        :return: tuple of three datetime objects, representing tomorrow, day after tomorrow, and two days after tomorrow.
+        Args:
+            message (str): The message to be displayed.
         """
-        today = datetime.now()  # Get the current date and time
-        tomorrow = today + timedelta(days=1)
-        day_after_tomorrow = today + timedelta(days=2)
-        two_days_after_tomorrow = today + timedelta(days=3)
-        return tomorrow, day_after_tomorrow, two_days_after_tomorrow
+        st.success(message)
 
-    def display_predictions_lineplot(self, next_three_days, who_guidelines):
-        tomorrow, day_after_tomorrow, two_days_after_tomorrow = (
-            self.get_next_three_days_dates()
-        )
-
-        # Update the dataframe with actual dates in datetime format
-        next_three_days["Date"] = [
-            tomorrow,
-            day_after_tomorrow,
-            two_days_after_tomorrow,
-        ]
-
-        # Create the plot using Plotly for more customization
-        fig = go.Figure()
-
-        # Add NO2 line
-        fig.add_trace(
-            go.Scatter(
-                x=next_three_days["Date"],
-                y=next_three_days["NO2 (µg/m³)"],
-                mode="lines+markers+text",
-                name="NO2 (µg/m³)",
-                text=[f"{v:.2f} µg/m³" for v in next_three_days["NO2 (µg/m³)"]],
-                textposition="top right",
-                line=dict(color="blue"),
-            )
-        )
-
-        # Add O3 line
-        fig.add_trace(
-            go.Scatter(
-                x=next_three_days["Date"],
-                y=next_three_days["O3 (µg/m³)"],
-                mode="lines+markers+text",
-                name="O3 (µg/m³)",
-                text=[f"{v:.2f} µg/m³" for v in next_three_days["O3 (µg/m³)"]],
-                textposition="top right",
-                line=dict(color="lightblue"),
-            )
-        )
+    def error(self, message: str) -> None:
+        """
+        Show an error message.
 
-        # Add WHO guideline as horizontal dotted lines
-        fig.add_hline(
-            y=who_guidelines["WHO Guideline"][0],
-            line_dash="dot",
-            line_color="blue",
-            annotation_text="WHO NO2 Guideline",
-            annotation_position="bottom right",
-        )
-        fig.add_hline(
-            y=who_guidelines["WHO Guideline"][1],
-            line_dash="dot",
-            line_color="lightblue",
-            annotation_text="WHO O3 Guideline",
-            annotation_position="bottom right",
-        )
+        Args:
+            message (str): The message to be displayed.
+        """
+        st.error(message)
 
-        # Update layout for better visuals
-        fig.update_layout(
-            title="Predictions for the Next 3 Days with WHO Guidelines",
-            xaxis_title="Date",
-            yaxis_title="Pollutant Concentration (µg/m³)",
-            hovermode="x unified",
-        )
+    def display_predictions_lineplot(self, fig: go.Figure) -> None:
+        """
+        Show a line plot of the predictions.
 
-        # Display the plot in Streamlit
+        Args:
+            fig (go.Figure): The plotly figure to be displayed.
+        """
         st.plotly_chart(fig)
 
-    def get_color(self, value, who_limit):
-        half_who_limit = who_limit / 2
-
-        if value <= half_who_limit:
-            # Green -> Yellow gradient
-            return f"rgba({int(255 * value / half_who_limit)}, 255, 0, 1)"  # Gradient from green to yellow
-        elif value <= who_limit:
-            # Yellow -> Red gradient
-            excess_value = value - half_who_limit
-            return f"rgba(255, {int(255 - (255 * excess_value / half_who_limit))}, 0, 1)"  # Gradient from yellow to red
-        else:
-            # Beyond the WHO limit, fully red
-            return "rgba(255, 0, 0, 1)"  # Fully red
-
-    def display_predictions_gaugeplot(self, next_three_days, who_guidelines):
-        st.markdown("### Predictions for the Next 3 Days")
-        # Convert date to datetime and calculate future dates
-        tomorrow, day_after_tomorrow, two_days_after_tomorrow = (
-            self.get_next_three_days_dates()
-        )
-
-        # Update the dataframe with actual dates in datetime format
-        next_three_days["Date"] = [
-            tomorrow,
-            day_after_tomorrow,
-            two_days_after_tomorrow,
-        ]
-        for i in range(3):
-            formatted_date = next_three_days["Date"][i].strftime("%B %d, %Y")
-
-            st.markdown(f"#### Day {i+1}: {formatted_date}")
-
-            # use multiple columns for centering
-            _, col1, _, col2, _ = st.columns([0.2, 1, 0.2, 1, 0.2], gap="small")
+    def display_predictions_gaugeplot(self, gauge_plots: list) -> None:
+        """
+        Show a gauge plot of the predictions.
 
-            # NO2 Gauge
+        Args:
+            gauge_plots (list): A list of tuples containing the day, formatted date, and two plotly figures (for NO2 and O3).
+        """
+        for day, formatted_date, fig_no2, fig_o3 in gauge_plots:
+            st.markdown(f"#### Day {day}: {formatted_date}")
+            col1, col2 = st.columns([1, 1])
             with col1:
-                # Get color based on NO2 value
-                no2_value = next_three_days["NO2 (µg/m³)"][i]
-                no2_color = self.get_color(
-                    no2_value, who_guidelines["WHO Guideline"][0]
-                )
-                fig_no2 = go.Figure(
-                    go.Indicator(
-                        mode="gauge+number",
-                        value=next_three_days["NO2 (µg/m³)"][i],
-                        title={"text": "NO2 (µg/m³)"},
-                        gauge={
-                            "axis": {
-                                "range": [
-                                    0,
-                                    2 * who_guidelines["WHO Guideline"][0],
-                                ]
-                            },
-                            "bar": {"color": no2_color},
-                        },
-                        domain={"x": [0, 1], "y": [0, 1]},  # Controls size
-                    )
-                )
-                fig_no2.update_layout(
-                    height=250, width=250, margin=dict(t=0, b=0, l=0, r=0)
-                )
                 st.plotly_chart(fig_no2)
-
-            # O3 Gauge
             with col2:
-                o3_value = next_three_days["O3 (µg/m³)"][i]
-                o3_color = self.get_color(o3_value, who_guidelines["WHO Guideline"][1])
-                fig_o3 = go.Figure(
-                    go.Indicator(
-                        mode="gauge+number",
-                        value=next_three_days["O3 (µg/m³)"][i],
-                        title={"text": "O3 (µg/m³)"},
-                        gauge={
-                            "axis": {
-                                "range": [
-                                    0,
-                                    1.5 * who_guidelines["WHO Guideline"][1],
-                                ]
-                            },
-                            "bar": {"color": o3_color},
-                        },
-                        domain={"x": [0, 1], "y": [0, 1]},  # Controls size
-                    )
-                )
-                fig_o3.update_layout(
-                    height=250, width=250, margin=dict(t=0, b=0, l=0, r=0)
-                )
                 st.plotly_chart(fig_o3)
 
-    def view_option_selection(self) -> str:
-        st.markdown("### Visualizing Air Quality Predictions")
-        plot_type = st.selectbox("", ("Line Plot", "Gauge Plot"))
-        return plot_type
-
-    def compare_to_who(self, today_data, no2_level, o3_level):
-        if today_data["NO2 (µg/m³)"] > no2_level:
-            st.sidebar.error("⚠️ NO2 levels are above WHO guidelines!")
-        else:
-            st.sidebar.success("✅ NO2 levels are within safe limits.")
-
-        if today_data["O3 (µg/m³)"] > o3_level:
-            st.sidebar.error("⚠️ O3 levels are above WHO guidelines!")
-        else:
-            st.sidebar.success("✅ O3 levels are within safe limits.")
-
-    def raise_awareness(self, today_data, who_guidelines):
-        st.markdown("### Air Quality Awareness")
-
-        # Load facts from the JSON file
-        with open(FACTS_PATH, "r") as f:
-            facts = json.load(f)["facts"]
+    def view_option_selection(self, plot_type: list) -> str:
+        """
+        Ask the user to select a plot type.
 
-        # Randomly select a fact from the list
-        random_fact = random.choice(facts)
+        Args:
+            plot_type (list): A list of strings containing the options to be displayed.
 
-        # Create expandable sections for key pollutant information
-        with st.expander("🌍 What is Air Pollution?"):
-            st.write("""
-            **Air pollution** is a serious concern that affects the environment and public health.
-            High levels of pollutants, such as ozone (O₃) and nitrogen dioxide (NO₂), can lead to
-            respiratory problems, aggravate pre-existing conditions like asthma, and contribute to
-            cardiovascular diseases.
-            """)
+        Returns:
+            str: The selected option.
+        """
+        st.markdown("### Visualizing Air Quality Predictions")
+        return st.selectbox("", plot_type)
 
-        with st.expander("⚠️ Why O₃ and NO₂ Matter"):
-            st.write("""
-            **Ozone (O₃):** Formed by chemical reactions in the atmosphere, particularly on sunny days.
-            High levels can cause chest pain, coughing, throat irritation, and airway inflammation.
+    def compare_to_who(self, warnings: list) -> None:
+        """
+        Compare the current pollutant concentrations with WHO guidelines and display the results.
 
-            **Nitrogen Dioxide (NO₂):** Mostly emitted from vehicles and industrial activities, this can cause
-            irritation of the respiratory system and decrease lung function, especially during long-term exposure.
-            """)
+        Args:
+            warnings (list): A list of tuples containing the pollutant, message, and level (error or success) of the warning.
+        """
+        for pollutant, message, level in warnings:
+            if level == "error":
+                st.sidebar.error(message)
+            elif level == "success":
+                st.sidebar.success(message)
+
+    def raise_awareness(
+        self, random_fact: str, awareness_expanders: list, health_message: dict
+    ) -> None:
+        """
+        Raise awareness about air quality issues and provide health recommendations.
 
-        self.add_spaces(num_lines=3)
+        Args:
+            random_fact (str): A random fact about air quality.
+            awareness_expanders (list): A list of tuples containing the title and content of the expanders.
+            health_message (dict): A dictionary containing the health recommendation message and type (error or success).
+        """
+        st.markdown("### Air Quality Awareness")
+        # Awareness sections
+        for expander_title, expander_content in awareness_expanders:
+            with st.expander(expander_title):
+                st.write(expander_content)
 
-        # Display the random fact for user awareness
+        # Fact section
         st.markdown("### Did You Know?")
-        st.info(random_fact)  # Display the random fact in an info box
+        st.info(random_fact)
 
-        self.add_spaces(num_lines=3)
-
-        # Show real-time suggestions for high pollution days
+        # Health recommendation section
         st.markdown("### Health Recommendations Based on Current Levels")
-        if (
-            today_data["NO2 (µg/m³)"] > who_guidelines["WHO Guideline"][0]
-            or today_data["O3 (µg/m³)"] > who_guidelines["WHO Guideline"][1]
-        ):
-            st.error(
-                "🚨 High pollution levels today. Avoid outdoor activities if possible, especially for vulnerable groups."
-            )
+        if health_message["type"] == "error":
+            st.error(health_message["message"])
         else:
-            st.success(
-                "✅ Air quality is within safe limits today. Enjoy your outdoor activities!"
-            )
-
-        self.add_spaces(num_lines=3)
+            st.success(health_message["message"])
 
-    def print_sources(self):
-        # Provide user links to external resources or reports
-        st.markdown("### Learn More")
-        st.markdown(
-            "[WHO Air Quality Guidelines](https://www.who.int/news-room/fact-sheets/detail/ambient-(outdoor)-air-quality-and-health)"
-        )
-        st.markdown(
-            "[Air Pollution Facts](https://www.un.org/sustainabledevelopment/air-pollution/)"
-        )
+    def quiz(self, question: str, options: list) -> tuple:
+        """
+        Ask a quiz question and return the answer and whether the answer was correct.
 
-    def quiz(self, question_nr=0):
-        with open(QUESTIONS_PATH, "r") as f:
-            quiz_data = json.load(f)
-        # Access the quiz questions
-        questions = quiz_data["quiz"]
-        random_question = questions[question_nr]
+        Args:
+            question (str): The question to be asked.
+            options (list): A list of strings containing the options.
 
-        # Add a simple quiz to engage the user
+        Returns:
+            tuple: A tuple containing the answer and a boolean indicating whether the answer was correct.
+        """
         st.markdown("### Quick Quiz: How Much Do You Know About Air Pollution?")
         with st.form(key="quiz_form"):
-            # Display the first question and options
-            st.write(random_question["question"])
-            options = random_question["options"]
+            st.write(question)
             answer = st.radio("Choose an option:", options)
-            submitted = st.form_submit_button("Submit Answer")
-
-            if submitted:
-                if answer == random_question["answer"]:
-                    st.success("Correct!")
-                else:
-                    st.error(
-                        "Incorrect. The correct answer is: " + random_question["answer"]
-                    )
-
-    def raise_awareness_and_quiz(self, today_data, who_guidelines, question_nr=0):
-        # Create two columns: main column for awareness and right column for the quiz
-        col_main, col_right = st.columns(
-            [0.7, 0.3], gap="large"
-        )  # 70% for awareness, 30% for quiz
+            submit_button = st.form_submit_button("Submit Answer")
+        return submit_button, answer
 
-        # Left column: Raise awareness
-        with col_main:
-            self.raise_awareness(today_data, who_guidelines)
-
-        # Right column: Quiz
-        with col_right:
-            self.quiz(question_nr)
-
-    def add_spaces(self, num_lines=1):
-        """Add vertical space between sections by adding empty lines.
+    def print_sources(self, sources: list) -> None:
+        """
+        Print the sources used in the application.
 
         Args:
-            num_lines (int): Number of blank lines to add. Default is 1.
+            sources (list): A list of tuples containing the source text and URL.
         """
-        for _ in range(num_lines):
-            st.write("")  # This adds a blank line to create space
+        st.markdown("### Learn More")
+        for source_text, source_url in sources:
+            st.markdown(f"[{source_text}]({source_url})")