diff --git a/jupyter-book/preprocessing_visualization/quality_control.ipynb b/jupyter-book/preprocessing_visualization/quality_control.ipynb
index 133e8fc6..1d3f9530 100644
--- a/jupyter-book/preprocessing_visualization/quality_control.ipynb
+++ b/jupyter-book/preprocessing_visualization/quality_control.ipynb
@@ -965,54 +965,103 @@
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": 7,
-   "id": "8ce9c2f0",
+   "cell_type": "markdown",
+   "id": "1c468d05",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "Requirement already satisfied: ipywidgets in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (8.1.5)\n",
-      "Requirement already satisfied: comm>=0.1.3 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipywidgets) (0.2.1)\n",
-      "Requirement already satisfied: ipython>=6.1.0 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipywidgets) (8.30.0)\n",
-      "Requirement already satisfied: traitlets>=4.3.1 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipywidgets) (5.14.3)\n",
-      "Requirement already satisfied: widgetsnbextension~=4.0.12 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipywidgets) (4.0.13)\n",
-      "Requirement already satisfied: jupyterlab-widgets~=3.0.12 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipywidgets) (3.0.13)\n",
-      "Requirement already satisfied: decorator in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (5.1.1)\n",
-      "Requirement already satisfied: jedi>=0.16 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (0.19.2)\n",
-      "Requirement already satisfied: matplotlib-inline in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (0.1.6)\n",
-      "Requirement already satisfied: prompt-toolkit<3.1.0,>=3.0.41 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (3.0.43)\n",
-      "Requirement already satisfied: pygments>=2.4.0 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (2.15.1)\n",
-      "Requirement already satisfied: stack-data in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (0.2.0)\n",
-      "Requirement already satisfied: typing-extensions>=4.6 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (4.12.2)\n",
-      "Requirement already satisfied: pexpect>4.3 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from ipython>=6.1.0->ipywidgets) (4.8.0)\n",
-      "Requirement already satisfied: parso<0.9.0,>=0.8.4 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from jedi>=0.16->ipython>=6.1.0->ipywidgets) (0.8.4)\n",
-      "Requirement already satisfied: ptyprocess>=0.5 in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from pexpect>4.3->ipython>=6.1.0->ipywidgets) (0.7.0)\n",
-      "Requirement already satisfied: wcwidth in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from prompt-toolkit<3.1.0,>=3.0.41->ipython>=6.1.0->ipywidgets) (0.2.5)\n",
-      "Requirement already satisfied: executing in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from stack-data->ipython>=6.1.0->ipywidgets) (0.8.3)\n",
-      "Requirement already satisfied: asttokens in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from stack-data->ipython>=6.1.0->ipywidgets) (2.0.5)\n",
-      "Requirement already satisfied: pure-eval in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from stack-data->ipython>=6.1.0->ipywidgets) (0.2.2)\n",
-      "Requirement already satisfied: six in /Users/seohyon/miniconda3/envs/book/lib/python3.11/site-packages (from asttokens->stack-data->ipython>=6.1.0->ipywidgets) (1.16.0)\n",
-      "Note: you may need to restart the kernel to use updated packages.\n"
-     ]
-    }
-   ],
    "source": [
-    "%pip install ipywidgets"
+    "# Test: Quiz with pure html\n",
+    "## multiple choice question"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
-   "id": "71b4d643",
-   "metadata": {},
+   "execution_count": 84,
+   "id": "b9926ce3",
+   "metadata": {
+    "tags": [
+     "remove_input"
+    ]
+   },
    "outputs": [
     {
      "data": {
       "text/html": [
-       "<div id=\"quiz-cell\">"
+       "\n",
+       "    <style>\n",
+       "        .mcq-box {\n",
+       "            border: none !important;\n",
+       "            box-shadow: none !important;\n",
+       "            outline: none !important;\n",
+       "            padding: 15px;\n",
+       "            width: 400px;\n",
+       "            text-align: left;\n",
+       "            font-size: 18px;\n",
+       "            margin-bottom: 10px;\n",
+       "            background-color: #ffadad;\n",
+       "            border-radius: 10px;\n",
+       "            color: white;\n",
+       "        }\n",
+       "\n",
+       "        /* PDF version: Ensures answer is visible */\n",
+       "        @media print {\n",
+       "            .mcq-box {\n",
+       "                background-color: #ffadad !important;\n",
+       "                -webkit-print-color-adjust: exact !important;\n",
+       "                print-color-adjust: exact !important;\n",
+       "            }\n",
+       "            .mcq-answer-q1 {\n",
+       "                display: block !important;\n",
+       "                font-weight: bold;\n",
+       "                color: red !important;\n",
+       "                margin-top: 5px;\n",
+       "            }\n",
+       "        }\n",
+       "    </style>\n",
+       "\n",
+       "    <div class=\"mcq-box\">\n",
+       "        <p><strong>What is the capital of France?</strong></p>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq1\" value=\"Paris\" \n",
+       "            onclick=\"checkAnswer(this, 'Paris', 'feedback-q1')\"> Paris\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq1\" value=\"London\" \n",
+       "            onclick=\"checkAnswer(this, 'Paris', 'feedback-q1')\"> London\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq1\" value=\"Berlin\" \n",
+       "            onclick=\"checkAnswer(this, 'Paris', 'feedback-q1')\"> Berlin\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq1\" value=\"Madrid\" \n",
+       "            onclick=\"checkAnswer(this, 'Paris', 'feedback-q1')\"> Madrid\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <p id=\"feedback-q1\" style=\"font-weight: bold;\"></p>\n",
+       "        \n",
+       "        <!-- Correct Answer (Hidden in HTML, Always Visible in PDF) -->\n",
+       "        <p class=\"mcq-answer-q1\" style=\"display: none; font-weight: bold; color: red;\">\n",
+       "            ✔ Correct Answer: Paris\n",
+       "        </p>\n",
+       "    </div>\n",
+       "\n",
+       "    <script>\n",
+       "    function checkAnswer(element, correct, feedbackId) {\n",
+       "        let feedback = document.getElementById(feedbackId);\n",
+       "        if (element.value === correct) {\n",
+       "            feedback.innerHTML = \"✅ Correct!\";\n",
+       "            feedback.style.color = \"green\";\n",
+       "        } else {\n",
+       "            feedback.innerHTML = \"❌ Incorrect!\";\n",
+       "            feedback.style.color = \"red\";\n",
+       "        }\n",
+       "    }\n",
+       "    </script>\n",
+       "    "
       ],
       "text/plain": [
        "<IPython.core.display.HTML object>"
@@ -1023,69 +1072,86 @@
     },
     {
      "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "50f37094ca074ff7a4138999f75466e7",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "Label(value='What is the capital of France?')"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    },
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "bdebd1b189904646a5154493648d405f",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "RadioButtons(options=('Berlin', 'Madrid', 'Paris', 'Rome'), style=DescriptionStyle(description_width='initial'…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    },
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "a2093bb4531e465a8941c7c61fa271bd",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "Button(description='Submit', style=ButtonStyle())"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    },
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ecf94275a5f5492eb9da55eb12b851b3",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "Label(value='')"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    },
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "6c1adbd8c0a44a699e1501d434527744",
-       "version_major": 2,
-       "version_minor": 0
-      },
+      "text/html": [
+       "\n",
+       "    <style>\n",
+       "        .mcq-box {\n",
+       "            border: none !important;\n",
+       "            box-shadow: none !important;\n",
+       "            outline: none !important;\n",
+       "            padding: 15px;\n",
+       "            width: 400px;\n",
+       "            text-align: left;\n",
+       "            font-size: 18px;\n",
+       "            margin-bottom: 10px;\n",
+       "            background-color: #ffadad;\n",
+       "            border-radius: 10px;\n",
+       "            color: white;\n",
+       "        }\n",
+       "\n",
+       "        /* PDF version: Ensures answer is visible */\n",
+       "        @media print {\n",
+       "            .mcq-box {\n",
+       "                background-color: #ffadad !important;\n",
+       "                -webkit-print-color-adjust: exact !important;\n",
+       "                print-color-adjust: exact !important;\n",
+       "            }\n",
+       "            .mcq-answer-q2 {\n",
+       "                display: block !important;\n",
+       "                font-weight: bold;\n",
+       "                color: red !important;\n",
+       "                margin-top: 5px;\n",
+       "            }\n",
+       "        }\n",
+       "    </style>\n",
+       "\n",
+       "    <div class=\"mcq-box\">\n",
+       "        <p><strong>Which planet is known as the Red Planet?</strong></p>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq2\" value=\"Earth\" \n",
+       "            onclick=\"checkAnswer(this, 'Mars', 'feedback-q2')\"> Earth\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq2\" value=\"Mars\" \n",
+       "            onclick=\"checkAnswer(this, 'Mars', 'feedback-q2')\"> Mars\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq2\" value=\"Venus\" \n",
+       "            onclick=\"checkAnswer(this, 'Mars', 'feedback-q2')\"> Venus\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq2\" value=\"Jupiter\" \n",
+       "            onclick=\"checkAnswer(this, 'Mars', 'feedback-q2')\"> Jupiter\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <p id=\"feedback-q2\" style=\"font-weight: bold;\"></p>\n",
+       "        \n",
+       "        <!-- Correct Answer (Hidden in HTML, Always Visible in PDF) -->\n",
+       "        <p class=\"mcq-answer-q2\" style=\"display: none; font-weight: bold; color: red;\">\n",
+       "            ✔ Correct Answer: Mars\n",
+       "        </p>\n",
+       "    </div>\n",
+       "\n",
+       "    <script>\n",
+       "    function checkAnswer(element, correct, feedbackId) {\n",
+       "        let feedback = document.getElementById(feedbackId);\n",
+       "        if (element.value === correct) {\n",
+       "            feedback.innerHTML = \"✅ Correct!\";\n",
+       "            feedback.style.color = \"green\";\n",
+       "        } else {\n",
+       "            feedback.innerHTML = \"❌ Incorrect!\";\n",
+       "            feedback.style.color = \"red\";\n",
+       "        }\n",
+       "    }\n",
+       "    </script>\n",
+       "    "
+      ],
       "text/plain": [
-       "Button(description='Next', disabled=True, style=ButtonStyle())"
+       "<IPython.core.display.HTML object>"
       ]
      },
      "metadata": {},
@@ -1094,7 +1160,82 @@
     {
      "data": {
       "text/html": [
-       "</div>"
+       "\n",
+       "    <style>\n",
+       "        .mcq-box {\n",
+       "            border: none !important;\n",
+       "            box-shadow: none !important;\n",
+       "            outline: none !important;\n",
+       "            padding: 15px;\n",
+       "            width: 400px;\n",
+       "            text-align: left;\n",
+       "            font-size: 18px;\n",
+       "            margin-bottom: 10px;\n",
+       "            background-color: #ffadad;\n",
+       "            border-radius: 10px;\n",
+       "            color: white;\n",
+       "        }\n",
+       "\n",
+       "        /* PDF version: Ensures answer is visible */\n",
+       "        @media print {\n",
+       "            .mcq-box {\n",
+       "                background-color: #ffadad !important;\n",
+       "                -webkit-print-color-adjust: exact !important;\n",
+       "                print-color-adjust: exact !important;\n",
+       "            }\n",
+       "            .mcq-answer-q3 {\n",
+       "                display: block !important;\n",
+       "                font-weight: bold;\n",
+       "                color: red !important;\n",
+       "                margin-top: 5px;\n",
+       "            }\n",
+       "        }\n",
+       "    </style>\n",
+       "\n",
+       "    <div class=\"mcq-box\">\n",
+       "        <p><strong>Who wrote 'Hamlet'?</strong></p>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq3\" value=\"Shakespeare\" \n",
+       "            onclick=\"checkAnswer(this, 'Shakespeare', 'feedback-q3')\"> Shakespeare\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq3\" value=\"Hemingway\" \n",
+       "            onclick=\"checkAnswer(this, 'Shakespeare', 'feedback-q3')\"> Hemingway\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq3\" value=\"Austen\" \n",
+       "            onclick=\"checkAnswer(this, 'Shakespeare', 'feedback-q3')\"> Austen\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <label style=\"color: white;\">\n",
+       "            <input type=\"radio\" name=\"qq3\" value=\"Dickens\" \n",
+       "            onclick=\"checkAnswer(this, 'Shakespeare', 'feedback-q3')\"> Dickens\n",
+       "        </label><br>\n",
+       "        \n",
+       "        <p id=\"feedback-q3\" style=\"font-weight: bold;\"></p>\n",
+       "        \n",
+       "        <!-- Correct Answer (Hidden in HTML, Always Visible in PDF) -->\n",
+       "        <p class=\"mcq-answer-q3\" style=\"display: none; font-weight: bold; color: red;\">\n",
+       "            ✔ Correct Answer: Shakespeare\n",
+       "        </p>\n",
+       "    </div>\n",
+       "\n",
+       "    <script>\n",
+       "    function checkAnswer(element, correct, feedbackId) {\n",
+       "        let feedback = document.getElementById(feedbackId);\n",
+       "        if (element.value === correct) {\n",
+       "            feedback.innerHTML = \"✅ Correct!\";\n",
+       "            feedback.style.color = \"green\";\n",
+       "        } else {\n",
+       "            feedback.innerHTML = \"❌ Incorrect!\";\n",
+       "            feedback.style.color = \"red\";\n",
+       "        }\n",
+       "    }\n",
+       "    </script>\n",
+       "    "
       ],
       "text/plain": [
        "<IPython.core.display.HTML object>"
@@ -1107,111 +1248,328 @@
    "source": [
     "from IPython.display import HTML, display\n",
     "\n",
-    "display(HTML('<div id=\"quiz-cell\">'))\n",
-    "\n",
-    "import ipywidgets as widgets\n",
-    "from IPython.display import clear_output, display\n",
-    "\n",
-    "# Questions, options, and correct answers\n",
-    "questions = [\n",
-    "    {\n",
-    "        \"question\": \"What is the capital of France?\",\n",
-    "        \"options\": [\"Berlin\", \"Madrid\", \"Paris\", \"Rome\"],\n",
-    "        \"answer\": \"Paris\",\n",
-    "    },\n",
-    "    {\n",
-    "        \"question\": \"Which programming language is primarily used for data analysis?\",\n",
-    "        \"options\": [\"Python\", \"C++\", \"Java\", \"Ruby\"],\n",
-    "        \"answer\": \"Python\",\n",
-    "    },\n",
-    "    {\n",
-    "        \"question\": \"What is the largest planet in the Solar System?\",\n",
-    "        \"options\": [\"Earth\", \"Mars\", \"Jupiter\", \"Saturn\"],\n",
-    "        \"answer\": \"Jupiter\",\n",
-    "    },\n",
-    "]\n",
-    "\n",
-    "\n",
-    "# Function to display the quiz\n",
-    "def create_quiz():\n",
-    "    score = 0  # Track the score\n",
-    "    question_index = 0  # Current question index\n",
-    "\n",
-    "    # Widgets for the quiz\n",
-    "    question_label = widgets.Label()\n",
-    "    options = widgets.RadioButtons(\n",
-    "        description=\"\", style={\"description_width\": \"initial\"}\n",
-    "    )\n",
-    "    submit_button = widgets.Button(description=\"Submit\")\n",
-    "    feedback_label = widgets.Label(value=\"\")\n",
-    "    next_button = widgets.Button(description=\"Next\")\n",
-    "    next_button.disabled = True  # Disabled until the current question is answered\n",
-    "\n",
-    "    # Callback for submit button\n",
-    "    def on_submit(change):\n",
-    "        nonlocal score\n",
-    "        if options.value == questions[question_index][\"answer\"]:\n",
-    "            feedback_label.value = \"Correct! 🎉\"\n",
-    "            score += 1\n",
-    "        else:\n",
-    "            feedback_label.value = f\"Incorrect. The correct answer is {questions[question_index]['answer']}.\"\n",
-    "        submit_button.disabled = True\n",
-    "        next_button.disabled = False\n",
-    "\n",
-    "    # Callback for next button\n",
-    "    def on_next(change):\n",
-    "        nonlocal question_index\n",
-    "        question_index += 1\n",
-    "        if question_index < len(questions):\n",
-    "            load_question()\n",
-    "        else:\n",
-    "            show_final_score()\n",
-    "\n",
-    "    # Load a question\n",
-    "    def load_question():\n",
-    "        feedback_label.value = \"\"\n",
-    "        submit_button.disabled = False\n",
-    "        next_button.disabled = True\n",
-    "        question_label.value = questions[question_index][\"question\"]\n",
-    "        options.options = questions[question_index][\"options\"]\n",
-    "\n",
-    "    # Show the final score\n",
-    "    def show_final_score():\n",
-    "        clear_output()\n",
-    "        display(widgets.Label(value=f\"Your final score is: {score}/{len(questions)}\"))\n",
-    "\n",
-    "    # Set up the initial question\n",
-    "    load_question()\n",
-    "\n",
-    "    # Display all widgets\n",
-    "    display(question_label, options, submit_button, feedback_label, next_button)\n",
-    "\n",
-    "    # Connect button callbacks\n",
-    "    submit_button.on_click(on_submit)\n",
-    "    next_button.on_click(on_next)\n",
-    "\n",
-    "\n",
-    "# Run the quiz\n",
-    "create_quiz()\n",
-    "\n",
-    "display(HTML(\"</div>\"))"
+    "\n",
+    "def multiple_choice_question(\n",
+    "    question_id,\n",
+    "    question,\n",
+    "    options,\n",
+    "    correct_answer,\n",
+    "    bg_color=\"#ffadad\",\n",
+    "    text_color=\"white\",\n",
+    "    answer_color=\"red\",\n",
+    "):\n",
+    "    options_html = \"\"\n",
+    "    for option in options:\n",
+    "        options_html += f\"\"\"\n",
+    "        <label style=\"color: {text_color};\">\n",
+    "            <input type=\"radio\" name=\"q{question_id}\" value=\"{option}\"\n",
+    "            onclick=\"checkAnswer(this, '{correct_answer}', 'feedback-{question_id}')\"> {option}\n",
+    "        </label><br>\n",
+    "        \"\"\"\n",
+    "\n",
+    "    html_code = f\"\"\"\n",
+    "    <style>\n",
+    "        .mcq-box {{\n",
+    "            border: none !important;\n",
+    "            box-shadow: none !important;\n",
+    "            outline: none !important;\n",
+    "            padding: 15px;\n",
+    "            width: 400px;\n",
+    "            text-align: left;\n",
+    "            font-size: 18px;\n",
+    "            margin-bottom: 10px;\n",
+    "            background-color: {bg_color};\n",
+    "            border-radius: 10px;\n",
+    "            color: {text_color};\n",
+    "        }}\n",
+    "\n",
+    "        /* PDF version: Ensures answer is visible */\n",
+    "        @media print {{\n",
+    "            .mcq-box {{\n",
+    "                background-color: {bg_color} !important;\n",
+    "                -webkit-print-color-adjust: exact !important;\n",
+    "                print-color-adjust: exact !important;\n",
+    "            }}\n",
+    "            .mcq-answer-{question_id} {{\n",
+    "                display: block !important;\n",
+    "                font-weight: bold;\n",
+    "                color: {answer_color} !important;\n",
+    "                margin-top: 5px;\n",
+    "            }}\n",
+    "        }}\n",
+    "    </style>\n",
+    "\n",
+    "    <div class=\"mcq-box\">\n",
+    "        <p><strong>{question}</strong></p>\n",
+    "        {options_html}\n",
+    "        <p id=\"feedback-{question_id}\" style=\"font-weight: bold;\"></p>\n",
+    "\n",
+    "        <!-- Correct Answer (Hidden in HTML, Always Visible in PDF) -->\n",
+    "        <p class=\"mcq-answer-{question_id}\" style=\"display: none; font-weight: bold; color: {answer_color};\">\n",
+    "            ✔ Correct Answer: {correct_answer}\n",
+    "        </p>\n",
+    "    </div>\n",
+    "\n",
+    "    <script>\n",
+    "    function checkAnswer(element, correct, feedbackId) {{\n",
+    "        let feedback = document.getElementById(feedbackId);\n",
+    "        if (element.value === correct) {{\n",
+    "            feedback.innerHTML = \"✅ Correct!\";\n",
+    "            feedback.style.color = \"green\";\n",
+    "        }} else {{\n",
+    "            feedback.innerHTML = \"❌ Incorrect!\";\n",
+    "            feedback.style.color = \"red\";\n",
+    "        }}\n",
+    "    }}\n",
+    "    </script>\n",
+    "    \"\"\"\n",
+    "    display(HTML(html_code))\n",
+    "\n",
+    "\n",
+    "multiple_choice_question(\n",
+    "    \"q1\",\n",
+    "    \"What is the capital of France?\",\n",
+    "    [\"Paris\", \"London\", \"Berlin\", \"Madrid\"],\n",
+    "    \"Paris\",\n",
+    ")\n",
+    "\n",
+    "multiple_choice_question(\n",
+    "    \"q2\",\n",
+    "    \"Which planet is known as the Red Planet?\",\n",
+    "    [\"Earth\", \"Mars\", \"Venus\", \"Jupiter\"],\n",
+    "    \"Mars\",\n",
+    ")\n",
+    "\n",
+    "multiple_choice_question(\n",
+    "    \"q3\",\n",
+    "    \"Who wrote 'Hamlet'?\",\n",
+    "    [\"Shakespeare\", \"Hemingway\", \"Austen\", \"Dickens\"],\n",
+    "    \"Shakespeare\",\n",
+    ")"
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": 12,
-   "id": "2d67783c",
+   "cell_type": "markdown",
+   "id": "a8c1849e",
    "metadata": {},
+   "source": [
+    "## flip card"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 78,
+   "id": "f567ab22",
+   "metadata": {
+    "tags": [
+     "remove_input"
+    ]
+   },
    "outputs": [
     {
      "data": {
       "text/html": [
        "\n",
-       "<style>\n",
-       "    #quiz-cell {\n",
-       "        display: none;\n",
-       "    }\n",
-       "</style>\n"
+       "    <style>\n",
+       "        .flip-card-q1 {\n",
+       "            background-color: transparent;\n",
+       "            width: 350px;\n",
+       "            height: 200px;\n",
+       "            perspective: 1000px;\n",
+       "            display: inline-block;\n",
+       "            margin: 10px;\n",
+       "            text-align: center;\n",
+       "            padding: 10px;\n",
+       "        }\n",
+       "        .flip-card-inner-q1 {\n",
+       "            position: relative;\n",
+       "            width: 100%;\n",
+       "            height: 100%;\n",
+       "            text-align: center;\n",
+       "            transition: transform 0.6s;\n",
+       "            transform-style: preserve-3d;\n",
+       "            transform-origin: center;\n",
+       "        }\n",
+       "        .flip-card-q1:hover .flip-card-inner-q1 {\n",
+       "            transform: rotateY(180deg);\n",
+       "        }\n",
+       "        .flip-card-front-q1, .flip-card-back-q1 {\n",
+       "            position: absolute;\n",
+       "            width: 100%;\n",
+       "            height: 100%;\n",
+       "            min-height: 200px;\n",
+       "            backface-visibility: hidden;\n",
+       "            display: flex;\n",
+       "            align-items: center;\n",
+       "            justify-content: center;\n",
+       "            font-weight: bold;\n",
+       "            color: white;\n",
+       "            padding: 20px;\n",
+       "            border-radius: 15px;\n",
+       "            box-sizing: border-box;\n",
+       "            overflow: hidden;\n",
+       "            text-align: center;\n",
+       "        }\n",
+       "        .flip-card-front-q1 {\n",
+       "            background-color: #ffadad;\n",
+       "            font-size: 20px;\n",
+       "        }\n",
+       "        .flip-card-back-q1 {\n",
+       "            background-color: #a8d480;\n",
+       "            transform: rotateY(180deg);\n",
+       "            font-size: 20px;\n",
+       "        }\n",
+       "\n",
+       "        /* PDF export */\n",
+       "        @media print {\n",
+       "            .flip-card-q1, .flip-card-front-q1, .flip-card-back-q1 {\n",
+       "                background-color: #ffadad !important;\n",
+       "                -webkit-print-color-adjust: exact !important;\n",
+       "                print-color-adjust: exact !important;\n",
+       "                border-radius: 15px !important;\n",
+       "            }\n",
+       "            .flip-card-back-q1 {\n",
+       "                background-color: #a8d480 !important;\n",
+       "            }\n",
+       "            .flip-card-inner-q1 {\n",
+       "                transform: none !important;\n",
+       "            }\n",
+       "            .flip-card-front-q1, .flip-card-back-q1 {\n",
+       "                position: relative;\n",
+       "                transform: none !important;\n",
+       "                display: block !important;\n",
+       "                height: 100% !important;\n",
+       "                min-height: 200px !important;\n",
+       "                padding: 20px;\n",
+       "                text-align: center;\n",
+       "                display: flex;\n",
+       "                align-items: center;\n",
+       "                justify-content: center;\n",
+       "            }\n",
+       "        }\n",
+       "    </style>\n",
+       "\n",
+       "    <div class=\"flip-card-q1\">\n",
+       "        <div class=\"flip-card-inner-q1\">\n",
+       "            <div class=\"flip-card-front-q1\">\n",
+       "                This is a simple question\n",
+       "            </div>\n",
+       "            <div class=\"flip-card-back-q1\">\n",
+       "                a simple answer\n",
+       "            </div>\n",
+       "        </div>\n",
+       "    </div>\n",
+       "    <noscript>\n",
+       "        <p><strong>Q:</strong> This is a simple question</p>\n",
+       "        <p><strong>Answer:</strong> a simple answer</p>\n",
+       "    </noscript>\n",
+       "    "
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "    <style>\n",
+       "        .flip-card-q2 {\n",
+       "            background-color: transparent;\n",
+       "            width: 350px;\n",
+       "            height: 200px;\n",
+       "            perspective: 1000px;\n",
+       "            display: inline-block;\n",
+       "            margin: 10px;\n",
+       "            text-align: center;\n",
+       "            padding: 10px;\n",
+       "        }\n",
+       "        .flip-card-inner-q2 {\n",
+       "            position: relative;\n",
+       "            width: 100%;\n",
+       "            height: 100%;\n",
+       "            text-align: center;\n",
+       "            transition: transform 0.6s;\n",
+       "            transform-style: preserve-3d;\n",
+       "            transform-origin: center;\n",
+       "        }\n",
+       "        .flip-card-q2:hover .flip-card-inner-q2 {\n",
+       "            transform: rotateY(180deg);\n",
+       "        }\n",
+       "        .flip-card-front-q2, .flip-card-back-q2 {\n",
+       "            position: absolute;\n",
+       "            width: 100%;\n",
+       "            height: 100%;\n",
+       "            min-height: 200px;\n",
+       "            backface-visibility: hidden;\n",
+       "            display: flex;\n",
+       "            align-items: center;\n",
+       "            justify-content: center;\n",
+       "            font-weight: bold;\n",
+       "            color: white;\n",
+       "            padding: 20px;\n",
+       "            border-radius: 15px;\n",
+       "            box-sizing: border-box;\n",
+       "            overflow: hidden;\n",
+       "            text-align: center;\n",
+       "        }\n",
+       "        .flip-card-front-q2 {\n",
+       "            background-color: #ffadad;\n",
+       "            font-size: 20px;\n",
+       "        }\n",
+       "        .flip-card-back-q2 {\n",
+       "            background-color: #a8d480;\n",
+       "            transform: rotateY(180deg);\n",
+       "            font-size: 15px;\n",
+       "        }\n",
+       "\n",
+       "        /* PDF export */\n",
+       "        @media print {\n",
+       "            .flip-card-q2, .flip-card-front-q2, .flip-card-back-q2 {\n",
+       "                background-color: #ffadad !important;\n",
+       "                -webkit-print-color-adjust: exact !important;\n",
+       "                print-color-adjust: exact !important;\n",
+       "                border-radius: 15px !important;\n",
+       "            }\n",
+       "            .flip-card-back-q2 {\n",
+       "                background-color: #a8d480 !important;\n",
+       "            }\n",
+       "            .flip-card-inner-q2 {\n",
+       "                transform: none !important;\n",
+       "            }\n",
+       "            .flip-card-front-q2, .flip-card-back-q2 {\n",
+       "                position: relative;\n",
+       "                transform: none !important;\n",
+       "                display: block !important;\n",
+       "                height: 100% !important;\n",
+       "                min-height: 200px !important;\n",
+       "                padding: 20px;\n",
+       "                text-align: center;\n",
+       "                display: flex;\n",
+       "                align-items: center;\n",
+       "                justify-content: center;\n",
+       "            }\n",
+       "        }\n",
+       "    </style>\n",
+       "\n",
+       "    <div class=\"flip-card-q2\">\n",
+       "        <div class=\"flip-card-inner-q2\">\n",
+       "            <div class=\"flip-card-front-q2\">\n",
+       "                this is another question, but with long answer\n",
+       "            </div>\n",
+       "            <div class=\"flip-card-back-q2\">\n",
+       "                back_font_size must be adjusted for long answers\n",
+       "            </div>\n",
+       "        </div>\n",
+       "    </div>\n",
+       "    <noscript>\n",
+       "        <p><strong>Q:</strong> this is another question, but with long answer</p>\n",
+       "        <p><strong>Answer:</strong> back_font_size must be adjusted for long answers</p>\n",
+       "    </noscript>\n",
+       "    "
       ],
       "text/plain": [
        "<IPython.core.display.HTML object>"
@@ -1222,14 +1580,122 @@
     }
    ],
    "source": [
-    "display(\n",
-    "    HTML(\"\"\"\n",
-    "<style>\n",
-    "    #quiz-cell {\n",
-    "        display: none;\n",
-    "    }\n",
-    "</style>\n",
-    "\"\"\")\n",
+    "def flip_card(\n",
+    "    question_id,\n",
+    "    question,\n",
+    "    answer,\n",
+    "    front_color=\"#ffadad\",\n",
+    "    back_color=\"#a8d480\",\n",
+    "    text_color=\"white\",\n",
+    "    front_font_size=20,\n",
+    "    back_font_size=20,\n",
+    "):\n",
+    "    html_code = f\"\"\"\n",
+    "    <style>\n",
+    "        .flip-card-{question_id} {{\n",
+    "            background-color: transparent;\n",
+    "            width: 350px;\n",
+    "            height: 200px;\n",
+    "            perspective: 1000px;\n",
+    "            display: inline-block;\n",
+    "            margin: 10px;\n",
+    "            text-align: center;\n",
+    "            padding: 10px;\n",
+    "        }}\n",
+    "        .flip-card-inner-{question_id} {{\n",
+    "            position: relative;\n",
+    "            width: 100%;\n",
+    "            height: 100%;\n",
+    "            text-align: center;\n",
+    "            transition: transform 0.6s;\n",
+    "            transform-style: preserve-3d;\n",
+    "            transform-origin: center;\n",
+    "        }}\n",
+    "        .flip-card-{question_id}:hover .flip-card-inner-{question_id} {{\n",
+    "            transform: rotateY(180deg);\n",
+    "        }}\n",
+    "        .flip-card-front-{question_id}, .flip-card-back-{question_id} {{\n",
+    "            position: absolute;\n",
+    "            width: 100%;\n",
+    "            height: 100%;\n",
+    "            min-height: 200px;\n",
+    "            backface-visibility: hidden;\n",
+    "            display: flex;\n",
+    "            align-items: center;\n",
+    "            justify-content: center;\n",
+    "            font-weight: bold;\n",
+    "            color: {text_color};\n",
+    "            padding: 20px;\n",
+    "            border-radius: 15px;\n",
+    "            box-sizing: border-box;\n",
+    "            overflow: hidden;\n",
+    "            text-align: center;\n",
+    "        }}\n",
+    "        .flip-card-front-{question_id} {{\n",
+    "            background-color: {front_color};\n",
+    "            font-size: {front_font_size}px;\n",
+    "        }}\n",
+    "        .flip-card-back-{question_id} {{\n",
+    "            background-color: {back_color};\n",
+    "            transform: rotateY(180deg);\n",
+    "            font-size: {back_font_size}px;\n",
+    "        }}\n",
+    "\n",
+    "        /* PDF export */\n",
+    "        @media print {{\n",
+    "            .flip-card-{question_id}, .flip-card-front-{question_id}, .flip-card-back-{question_id} {{\n",
+    "                background-color: {front_color} !important;\n",
+    "                -webkit-print-color-adjust: exact !important;\n",
+    "                print-color-adjust: exact !important;\n",
+    "                border-radius: 15px !important;\n",
+    "            }}\n",
+    "            .flip-card-back-{question_id} {{\n",
+    "                background-color: {back_color} !important;\n",
+    "            }}\n",
+    "            .flip-card-inner-{question_id} {{\n",
+    "                transform: none !important;\n",
+    "            }}\n",
+    "            .flip-card-front-{question_id}, .flip-card-back-{question_id} {{\n",
+    "                position: relative;\n",
+    "                transform: none !important;\n",
+    "                display: block !important;\n",
+    "                height: 100% !important;\n",
+    "                min-height: 200px !important;\n",
+    "                padding: 20px;\n",
+    "                text-align: center;\n",
+    "                display: flex;\n",
+    "                align-items: center;\n",
+    "                justify-content: center;\n",
+    "            }}\n",
+    "        }}\n",
+    "    </style>\n",
+    "\n",
+    "    <div class=\"flip-card-{question_id}\">\n",
+    "        <div class=\"flip-card-inner-{question_id}\">\n",
+    "            <div class=\"flip-card-front-{question_id}\">\n",
+    "                {question}\n",
+    "            </div>\n",
+    "            <div class=\"flip-card-back-{question_id}\">\n",
+    "                {answer}\n",
+    "            </div>\n",
+    "        </div>\n",
+    "    </div>\n",
+    "    <noscript>\n",
+    "        <p><strong>Q:</strong> {question}</p>\n",
+    "        <p><strong>Answer:</strong> {answer}</p>\n",
+    "    </noscript>\n",
+    "    \"\"\"\n",
+    "    display(HTML(html_code))\n",
+    "\n",
+    "\n",
+    "# Example Flip Cards with Different Back Font Sizes\n",
+    "flip_card(\"q1\", \"This is a simple question\", \"a simple answer\")\n",
+    "flip_card(\n",
+    "    \"q2\",\n",
+    "    \"this is another question, but with long answer\",\n",
+    "    \"back_font_size must be adjusted for long answers\",\n",
+    "    front_font_size=20,\n",
+    "    back_font_size=15,\n",
     ")"
    ]
   }