<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashcard System with Pagination and Review Tracking</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* General Styles */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        .app-header {
            width: auto;
            background-color: #6200ea;
            padding: 15px 20px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            color: white;
            font-size: 24px;
            font-weight: 500;
            text-align: center;
        }
        .log-container {
            margin-top: 20px;
            width: 100%;
            max-width: 600px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            overflow-y: auto;
            max-height: 200px;
        }
        .log {
            font-size: 14px;
            color: #333;
            line-height: 1.5;
        }
    </style>

    <style>
/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}



.date-changer {
    margin-bottom: 20px;
    font-size: 16px;
}

.topic-filter, #layout-select {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #ffffff;
    color: #333;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    appearance: none;
    cursor: pointer;
    text-align: left;
}

.filter-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 300px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.filter-btn, .show-all-btn, .apply-btn {
    background-color: #6200ea;
    color: #fff;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.filter-btn:hover, .apply-btn:hover {
    background-color: #3700b3;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Show All Button Distinct Style */
.show-all-btn {
    background-color: #03dac6;
    color: #fff;
}

.show-all-btn:hover {
    background-color: #018786;
}

.badge {
    background-color: #fff;
    color: #6200ea;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.modern-card {
    position: relative;
    background-color: white;
    border-radius: 15px;
    width: 100%; /* Use full width */
    max-width: 800px; /* Full width to avoid scrolling in vertical layout */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s;
    border: 2px solid #ddd;
    box-sizing: border-box; /* Ensure padding is contained within the card */
}

.question {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    padding-right: 30px; /* Space for the bookmark */
}

.answer {
    font-size: 18px;
    color: #333;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    display: none;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.dont-know-btn, .know-btn {
    padding: 10px 20px;
    width: auto;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}

.dont-know-btn {
    background-color: #e53935;
}

.know-btn {
    background-color: #388e3c;
}

/* Hover effect for dont-know-btn */
.dont-know-btn:hover {
    background-color: #d32f2f; /* Darker shade of red */
}

/* Hover effect for know-btn */
.know-btn:hover {
    background-color: #2e7d32; /* Darker shade of green */
}


.bookmark {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    color: #ddd;
    cursor: default;
    transition: color 0.3s;
}

.review-metric {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #555;
    margin-top: 15px;
}

.filter-info {
    background-color: #e3f2fd;
    color: #1e88e5;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
    width: 95%;
    max-width: 600px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.topic-header {
    font-size: 24px;
    font-weight: 700;
    color: #6200ea;
    margin: 20px 0 10px;
    text-align: center;
    width: 100%;
}






/* Hide extra elements in horizontal layout */
.horizontal-layout .modern-card {
    display: none; /* Only the current flashcard will be displayed in the horizontal layout */
}

.horizontal-layout .navigation-buttons {
    display: flex; /* Show navigation buttons in horizontal layout */
}

.horizontal-layout .flashcard-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110%; /* Use full width */
    max-width: none; /* Adjust max-width if needed for screen fit */
    padding: 0 20px;
    box-sizing: border-box;
}

.horizontal-layout .modern-card {
    width: 110%; /* Stretch to fill container */
    max-width: 800px; /* Optional: adjust for full screen width */
}

/* Horizontal layout info box styling */
#horizontal-info {
    display: none; /* Only visible in horizontal layout */
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}

#horizontal-topic {
    font-size: 20px;
    font-weight: 700;
    color: #6200ea;
    margin-bottom: 5px;
}

#horizontal-position {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}


 .navigation-buttons {
    display: flex;
    justify-content: center; /* Center buttons on smaller screens */
        gap: 30px;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin: 20px auto;
    padding: 10px 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.navigation-buttons button {
    background-color: #6200ea; /* Primary color */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.navigation-buttons button:disabled {
    background-color: #9e9e9e; /* Gray color when disabled */
    cursor: not-allowed;
    box-shadow: none;
}

.navigation-buttons button:hover:not(:disabled) {
    background-color: #3700b3; /* Darker color on hover */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}


/* Dropdown container styling */
.dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    width: 600px;
    z-index: 1000;
}

.dropdown-content {
    color: #333;
    font-size: 16px;
}

.close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}



  /* Ensure flashcards-container stretches fully in vertical layout */
.vertical-layout .flashcard-container {
    width: 100%; /* Use full width in vertical layout */
    max-width: none; /* Remove max-width constraint */
    padding: 0; /* Optional: remove padding if added */
    box-sizing: border-box;
    margin: 0 auto; /* Center align in the container */
}

/* Ensure container and flashcards align correctly in all layouts */
.flashcard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Add this class to body or main container when in vertical layout mode */
.vertical-layout .container {
    width: 100%; /* Ensure container width is full */
}



    #toggleButton {
        background-color: #4CAF50; /* Green background */
        border: none;
        color: white; /* White text color */
        padding: 12px 24px; /* Padding for better spacing */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px; /* Font size */
        cursor: pointer; /* Pointer cursor on hover */
        border-radius: 8px; /* Rounded corners */
        transition: background-color 0.3s ease; /* Smooth transition on hover */
    }

    #toggleButton:hover {
        background-color: #45a049; /* Darker green on hover */
    }

    #toggleButton:focus {
        outline: none; /* Remove outline on focus */
    }

    #toggleButton:active {
        background-color: #388e3c; /* Even darker green when button is clicked */
    }


    .star-btn {
    color: lightgray;
    font-size: 20px;
    margin: 0 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.star-btn.active {
    color: gold;
}

.bookmark {
    cursor: pointer;
    margin-left: auto;
}

/* Emoji styling */
        .emoji {
            font-size: 24px;  /* Larger font size */
            vertical-align: middle;
            display: inline-block;
            animation: slow-bounce 2s infinite;  /* Animation applied */
        }

        /* Slow bounce animation */
        @keyframes slow-bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px); /* Small bounce */
            }
        }




    </style>

    <style>
      .header-image, .hr-image {
            width: 50px;
            height: 50px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 10px;
        }

         /* Modal Styles */
        .modal97 {
            display: none;
            position: fixed;
            z-index: 10;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.9);
        }

        .modal-top-bar97 {
            width: 80%;
            max-width: 700px;
            margin: auto;
            padding: 10px;
            display: flex;
            justify-content: flex-end;
            border-bottom: 5px solid #007bff;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 20;
            position: relative;
        }

        .modal-controls97 {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .close97 {
            color: #333;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .zoom-buttons97 {
            display: flex;
            gap: 5px;
        }

        .zoom-button97 {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .zoom-button97:hover {
            background-color: #0056b3;
        }

        .modal-content-wrapper97 {
            position: relative;
            width: 80%;
            max-width: 700px;
            margin: auto;
        }

        .modal-content97 {
            display: block;
            width: 100%;
            height: auto;
            margin: auto;
        }

         .header-image, .hr-image {
            width: 50px;
            height: 50px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 10px;
        }

        .popup {
            display: none;
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .popup-content {
            position: relative;
            margin: 10% auto;
            width: 80%;
            max-width: 600px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }

        .popup-image {
            width: 100%;
            height: auto;
        }

        .close {
            position: absolute;
            top: 1px;
            right: 8px;
            color: #333;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }

</style>
</head>
<body>

<!-- App Header -->
<div class="app-header">
    <img src="https://firebasestorage.googleapis.com/v0/b/akrass-plus.appspot.com/o/ContentImage%2Fkmc_20240901_152317.png?alt=media&token=74a10ca6-8504-49c3-9580-d2122f1eeba5" alt="Header Image" class="header-image" onclick="openModal('header-popup-97')" />
    MBBS Flashcards Study
</div>

<hr>
<p style="margin-left: 20px;"><b>Subject</b>: ANATOMY</p>
<p style="margin-left: 20px;"><b>Chapter</b>: 1. EMBRYOLOGY, GENERAL ANATOMY</p>
<p style="margin-left: 20px;"><b>BOOK Reference</b>: All 3 coaching institute Notes , <img src="https://firebasestorage.googleapis.com/v0/b/akrass-plus.appspot.com/o/ContentImage%2FIMG_20241226_130132_759.jpg?alt=media&token=3a1239cf-8495-41d9-b2f5-e90c60f659ac" alt="HR Image" class="hr-image" onclick="openModal('hr-popup-97')" />👈                                                                                                              </p>
<p style="margin-left: 20px;"><b>Total Flashcards</b>: 422</p>
<hr>


    <!-- Modal Pop-Up for Header Image -->
    <div id="header-popup-97" class="modal97">
        <div class="modal-top-bar97">
            <div class="modal-controls97">
                <span class="close97" onclick="closeModal('header-popup-97')">Close</span>
                 <div class="zoom-buttons97">
                    <button class="zoom-button97" onclick="zoomImage('header-popup-97', 0.9)">zoom -</button>
                    <button class="zoom-button97" onclick="zoomImage('header-popup-97', 1.1)">+</button>
                </div>
             </div>
        </div>
      <div class="modal-content-wrapper97">
             <img class="modal-content97" src="https://firebasestorage.googleapis.com/v0/b/akrass-plus.appspot.com/o/ContentImage%2Fkmc_20240901_152317.png?alt=media&token=74a10ca6-8504-49c3-9580-d2122f1eeba5" alt="Header Image Full View" class="popup-image" />
         </div>
    </div>

    <!-- Modal Pop-Up for HR Image -->
    <div id="hr-popup-97" class="modal97">
         <div class="modal-top-bar97">
             <div class="modal-controls97">
               <span class="close97" onclick="closeModal('hr-popup-97')">Close</span>
                <div class="zoom-buttons97">
                 <button class="zoom-button97" onclick="zoomImage('hr-popup-97', 0.9)">zoom -</button>
                    <button class="zoom-button97" onclick="zoomImage('hr-popup-97', 1.1)">+</button>
                 </div>
            </div>
         </div>
      <div class="modal-content-wrapper97">
            <img class="modal-content97" src="
https://firebasestorage.googleapis.com/v0/b/akrass-plus.appspot.com/o/ContentImage%2FIMG_20241226_130132_759.jpg?alt=media&token=3a1239cf-8495-41d9-b2f5-e90c60f659ac" alt="HR Image Full View" class="popup-image" />
       </div>
   </div>


<!-- Main Container -->
<div class="container">

<button id="toggleButton" onclick="toggleDropdownContent(event)">How to Use the Flashcard System (Step-by-Step - Click Here👈)</button>

<div id="dropdownContent" class="dropdown" style="display: none;">
    <div class="dropdown-content">
        <button class="close" onclick="closeDropdown('dropdownContent')">Close</button>
        <br><h2>How to Use the Flashcard System</h2>

        <ol>
            <li><strong>Select Layout:</strong>
                <ul>
                    <li>Choose how you want to view flashcards:</li>
                    <li><strong>Horizontal Layout:</strong> One flashcard displayed at a time.</li>
                    <li><strong>Vertical Layout (Default):</strong> Flashcards shown one below another.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #007BFF;">

            <li><strong>Select Topics:</strong>
                <ul>
                    <li>Pick multiple topics you want to study.</li>
                    <li>At the end of each topic, you’ll see:
                        <ul>
                            <li>Total flashcards in that topic.</li>
                            <li>Flashcards you’ve reviewed at least once (e.g., <strong>(2/6)</strong> means 2 out of 6 reviewed).</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #28A745;">

            <li><strong>Apply Filter:</strong>
                <ul>
                    <li>Click <strong>Apply Filter</strong> to display selected topics.</li>
                    <li>All Flashcards of selected topics will appear in your chosen layout (horizontal or vertical).</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #DC3545;">

            <li><strong>Review Flashcards:</strong>
                <ul>
                    <li>View the flashcard to read the question and try to recall the answer.</li>
        <li>After attempting to recall, use the buttons:</li>
                    <li>Use the buttons:
                        <ul>
                            <li><strong>Know:</strong> If you know the answer.</li>
                            <li><strong>Don’t Know:</strong> If unsure or don’t know the answer.</li>
                            <li>If you initially clicked "Know" but later feel unsure, click "Don’t Know" to adjust your response.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #FFC107;">

            <li><strong>Review Stages:</strong>
                <ul>
                    <li>Each reviewed flashcard shows the next review date.</li>
                    <li>Review stages based on time intervals:
                        <ul>
                            <li><strong>First Review:</strong> 3 days after the first read.</li>
                            <li><strong>Second Review:</strong> 7 days after the first review.</li>
                            <li><strong>Third Review:</strong> 14 days after the second review.</li>
                            <li><strong>Final Review:</strong> 28 days after the third review.</li>
                            <li><strong>Completed:</strong> No further reviews needed.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #17A2B8;">

            <li><strong>Pending Review Flashcards:</strong>
                <ul>
                    <li>Flashcards ready for review are shown in the <strong>Pending Review</strong> section.</li>
                    <li>Pending cards only show from selected topics.</li>
                    <li>To view all pending flashcards from all topics, select and apply <strong>"All Topics"</strong> in the topic section (by default, "All Topics" is applied).</li>
                    <li>When you are inside the Pending Flashcards Review section, to exit this section, click the <strong>"Show All Flashcards"</strong> button. It displays all flashcards (including pending flashcards) from the selected topics.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #6C757D;">

            <li><strong>Bookmark Colors:</strong>
                <ul>
                    <li>Flashcard review stages are visually represented:</li>
                    <li><strong>Red:</strong> First Review.</li>
                    <li><strong>Pink:</strong> Second Review.</li>
                    <li><strong>Blue:</strong> Third Review.</li>
                    <li><strong>Green:</strong> Final Review.</li>
                    <li><strong>Gold:</strong> Completed.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #343A40;">

             <li><strong>Star Mark Flashcards:</strong>
                <ul>
                    <li>Mark very important or difficult flashcards using the <strong>Star Mark</strong> button.</li>
                    <li>These star-marked flashcards are ideal for focused review before exams.</li>
                    <li>Click the <strong>Starred Flashcards</strong> button to filter and view only the star-marked flashcards from the selected topics.</li>
                    <li>When you click <strong>Starred Ready for Review</strong>, it displays all star-marked flashcards that are ready for review, including those in any review stage (First, Second, Third, or Final).</li>
                    <li>This feature ensures you spend your time efficiently by focusing on critical flashcards when time is limited.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #007BFF;">

            <li><strong>Efficient Learning:</strong>
                <ul>
                    <li>The system ensures:</li>
                    <li><strong>Easy Points Flashcards:</strong> Reviewed in fewer rounds.</li>
                    <li><strong>Moderate/Difficult Points:</strong> Reviewed more frequently in more number of rounds.</li>
                    <li>Saves your time by allocating appropriate focus on difficult flashcards.</li>
                    <li>You can utilize your time efficiently and complete your syllabus within your time schedule.</li>
                </ul>
            </li>


        </ol>
    </div>
</div>

 <br>




     <!-- Dropdown for Layout Selection -->
    <div class="custom-select-container">
        <label for="layout-select"><b>Select Layout:</b></label>
        <select id="layout-select" class="custom-select" onchange="selectLayout(this.value)">
            <option value="vertical">Vertical Layout</option>
            <option value="horizontal">Horizontal Layout</option>
        </select>
    </div>

    <!-- Topic Selection Multi-select -->
    <div class="custom-select-container">
        <label for="topic-filter"><b>Select Multiple Topics & Apply Filter:</b></label>
        <select id="topic-filter" class="topic-filter" multiple>
            <!-- Options will be dynamically populated -->
        </select>
    </div>

    <!-- Apply Filter and Show All Buttons -->
    <button class="apply-btn" onclick="applySelectedTopics()">Apply Selected Topics</button><br>
    <button class="show-all-btn" onclick="showAllFlashcards()">Show All Flashcards</button>

     <div class="filter-container">
        <button class="filter-btn" onclick="filterFlashcards(0)">First Review<br> (Red) <span id="count-stage-0" class="badge">0</span></button>
        <button class="filter-btn" onclick="filterFlashcards(1)">Second Review<br> (Pink) <span id="count-stage-1" class="badge">0</span></button>
        <button class="filter-btn" onclick="filterFlashcards(2)">Third Review<br> (Blue) <span id="count-stage-2" class="badge">0</span></button>
        <button class="filter-btn" onclick="filterFlashcards(3)">Final Review<br> (Green) <span id="count-stage-3" class="badge">0</span></button>
        <button class="filter-btn" id="completed-flashcards-btn" onclick="filterFlashcards(4)">Completed Flashcards<br> 🏆 <span id="count-completed" class="badge">0 completed</span></button>
     </div>
 <div class="filter-container">
    <button class="filter-btn" onclick="showStarredFlashcards()">⭐ Starred Flashcards: <span id="count-starred" class="badge">0 Marked</span>, <span id="count-pending" class="badge">0 Pending</span></button>
    <button class="filter-btn" onclick="showStarredReadyFlashcards()">🌟 Starred Ready Review: <span id="count-starred-ready" class="badge">0 Marked</span>, <span id="count-ready-pending" class="badge">0 Pending</span></button>
</div>


    <div id="filter-info-container"></div> <!-- Filter info container for separate line display -->

<div id="horizontal-info" style="display: none;">
    <div id="horizontal-topic"></div>
    <div id="horizontal-position"></div>
</div>



    <!-- Flashcard Display Area -->
    <div id="flashcards-container" class="flashcard-container">
        <!-- Flashcards will be rendered here dynamically -->
    </div>

    <!-- Navigation for Horizontal Layout -->
    <div class="navigation-buttons" style="display: none;">
        <button id="prev-btn" onclick="navigateFlashcards('prev')" disabled>Previous</button>
        <button id="next-btn" onclick="navigateFlashcards('next')">Next</button>
    </div>
</div>




<!-- Dropdown content that replaces the modal -->
<div id="bookmarkDropdown1" class="dropdown">
    <div class="dropdown-content">
        <!-- Close button -->
        <span class="close" onclick="closeDropdown('bookmarkDropdown1')">×</span>
        <h2>Review Stage Colors</h2>
        <ul>
            <li><span style="color: red;"><i class="fas fa-bookmark"></i></span> First Review</li>
            <li><span style="color: pink;"><i class="fas fa-bookmark"></i></span> Second Review</li>
            <li><span style="color: blue;"><i class="fas fa-bookmark"></i></span> Third Review</li>
            <li><span style="color: green;"><i class="fas fa-bookmark"></i></span> Final Review</li>
            <li><span style="color: gold;"><i class="fas fa-bookmark"></i></span> Completed</li>
        </ul>
    </div>
</div>



<!-- Dropdown for Inactive Know Button Click -->
<div id="inactiveKnowDropdown" class="dropdown">
    <div class="dropdown-content">
        <span class="close" onclick="closeDropdown('inactiveKnowDropdown')">&times;</span>
        <h2>Button Inactive</h2>
        <p>The "Know" button is inactive until the review is ready. Please wait until the next review date.</p>
    </div>
</div>


<script>

 document.addEventListener('DOMContentLoaded', () => {
    openDatabase();
    const layoutSelect = document.getElementById('layout-select');
    const initialLayout = layoutSelect.value || 'vertical';
    selectLayout(initialLayout);
});

const dbName = "FlashcardDB1NPG1";
const storeName = "flashcardProgress";


const flashcards = [
    {
        "id": 1,
        "topic": "topic1",
        "question": "What is the zygote stage in embryology?",
        "answer": "<li>The zygote stage is defined as the period from fertilization to 2 weeks.</li>",
        "memoryTip": "Think of a zygote as a \"newlywed\" couple just starting their journey together!",
        "emoji": "👰‍♂️"
    },
    {
        "id": 2,
        "topic": "topic1",
        "question": "When is the two-cell stage reached after fertilization?",
        "answer": "<li>The two-cell stage is reached approximately 30 hours after fertilization.</li>",
        "memoryTip": "It’s like a couple doubling their dinner plans in just 30 hours!",
        "emoji": "🍽️"
    },
    {
        "id": 3,
        "topic": "topic1",
        "question": "At what time frame does the four-cell stage occur?",
        "answer": "<li>The four-cell stage occurs at approximately 40 hours after fertilization.</li>",
        "memoryTip": "Four cells in 40 hours? That’s some speedy matchmaking!",
        "emoji": "🏃‍♂️"
    },
    {
        "id": 4,
        "topic": "topic1",
        "question": "When does the 12-to-16-cell stage occur?",
        "answer": "<li>The 12-to-16-cell stage occurs at approximately 3 days after fertilization.</li>",
        "memoryTip": "It’s like a party that grows from 2 to 16 guests in just 3 days!",
        "emoji": "🎉"
    },
    {
        "id": 5,
        "topic": "topic1",
        "question": "When is the late morula stage reached?",
        "answer": "<li>The late morula stage is reached at approximately 4 days after fertilization.</li>",
        "memoryTip": "Think of the morula as a \"berry\" of cells getting ready to blossom!",
        "emoji": "🍓"
    },
    {
        "id": 6,
        "topic": "topic2",
        "question": "What is the pre-organogenesis period?",
        "answer": "<li>The pre-organogenesis period is from fertilization to the formation of the embryo, lasting 0-14 days.</li>",
        "memoryTip": "It’s like the warm-up before the big game of organ formation!",
        "emoji": "🏈"
    },
    {
        "id": 7,
        "topic": "topic2",
        "question": "What happens during the gastrulation/embryonic period?",
        "answer": "<li>During the gastrulation/embryonic period, the primitive streak and intra-embryonic mesoderm are formed.</li>",
        "memoryTip": "Think of gastrulation as the \"stirring\" of a pot to mix all the ingredients!",
        "emoji": "🍲"
    },
    {
        "id": 8,
        "topic": "topic2",
        "question": "What anomalies can teratogens cause during the pre-organogenesis period?",
        "answer": "<li>Anomalies produced by teratogens during this period can result in the death of the embryo.</li>",
        "memoryTip": "Teratogens are like party crashers that can ruin the whole event!",
        "emoji": "🚫"
    },
    {
        "id": 9,
        "topic": "topic2",
        "question": "What congenital anomalies can teratogens cause during the organogenesis period?",
        "answer": "<li>Anomalies produced by teratogens during the organogenesis period can result in congenital anomalies.</li>",
        "memoryTip": "Think of congenital anomalies as the \"party favors\" that no one wanted!",
        "emoji": "🎁"
    },
    {
        "id": 10,
        "topic": "topic3",
        "question": "What is the major growth-promoting factor during development before and after birth?",
        "answer": "<li>The major growth-promoting factor is insulin-like growth factor-I (IGF-I), which has mitogenic and anabolic effects.</li>",
        "memoryTip": "IGF-I is like the \"personal trainer\" for your cells, helping them bulk up!",
        "emoji": "💪"
    },
    {
        "id": 11,
        "topic": "topic3",
        "question": "How do fetal tissues relate to IGF-I?",
        "answer": "<li>Fetal tissues express IGF-I, and serum levels of IGF-I are correlated with fetal growth.</li>",
        "memoryTip": "Think of IGF-I as the \"growth hormone\" that keeps the baby on track for a growth spurt!",
        "emoji": "📈"
    },
    {
        "id": 12,
        "topic": "topic3",
        "question": "What happens when there are mutations in the IGF-1 gene?",
        "answer": "<li>Mutations in the IGF-1 gene can result in intrauterine growth restriction (IUGR), and this growth retardation continues after birth.</li>",
        "memoryTip": "Mutations are like a \"bad GPS\" that leads to a detour in growth!",
        "emoji": "🗺️"
    },
    {
        "id": 13,
        "topic": "topic3",
        "question": "How does postnatal growth differ from prenatal growth?",
        "answer": "<li>Postnatal growth depends upon growth hormone (GH), in contrast to the prenatal period which relies on IGF-I.</li>",
        "memoryTip": "After birth, it’s like switching from baby food to a full buffet of growth hormones!",
        "emoji": "🍽️"
    },
    {
        "id": 14,
        "topic": "topic4",
        "question": "What is gastrulation?",
        "answer": "<li>Gastrulation is the process that establishes all three germ layers (trilaminar disc) during the 3rd week of gestation.</li>",
        "memoryTip": "Gastrulation is like laying down the foundation for a three-story building!",
        "emoji": "🏗️"
    },
    {
        "id": 15,
        "topic": "topic5",
        "question": "What are the derivatives of surface ectoderm?",
        "answer": "<li>The derivatives of surface ectoderm include skin, mucus membranes, lower part of the anal canal, terminal part of the male urethra, labia majora and outer labia minora, anterior epithelium of the cornea, epithelium of conjunctiva, lens placode, iris, ciliary body, and the outer layer of the tympanic membrane and membranous labyrinth.</li>",
        "memoryTip": "Surface ectoderm is like the \"skin\" of the body, covering all the important bits!",
        "emoji": "🧖‍♀️"
    },
    {
        "id": 16,
        "topic": "topic5",
        "question": "What glands are derived from the surface ectoderm?",
        "answer": "<li>The glands derived from surface ectoderm include sweat glands, sebaceous glands, parotid glands, mammary glands, and lacrimal glands.</li>",
        "memoryTip": "These glands are like the \"spa services\" for your skin, keeping it fresh and clean!",
        "emoji": "🧴"
    },
    {
        "id": 17,
        "topic": "topic5",
        "question": "What are the other derivatives of surface ectoderm?",
        "answer": "<li>Other derivatives of surface ectoderm include hair, nails, enamel of teeth, and the lens of the eye.</li>",
        "memoryTip": "Think of these as the \"accessories\" that make the body look good!",
        "emoji": "💅"
    },
    {
        "id": 18,
        "topic": "topic5",
        "question": "What does the neural ectoderm give rise to?",
        "answer": "<li>The neural ectoderm gives rise to the central nervous system (CNS), retina, pineal body, and posterior pituitary.</li>",
        "memoryTip": "Neural ectoderm is like the \"brain factory,\" producing all the important brain parts!",
        "emoji": "🧠"
    },
    {
        "id": 19,
        "topic": "topic5",
        "question": "What are the endocrine derivatives of the ectoderm?",
        "answer": "<li>The endocrine derivatives of the ectoderm include the anterior pituitary and adrenal medulla.</li>",
        "memoryTip": "These glands are like the \"bosses\" of hormone production, calling all the shots!",
        "emoji": "👔"
    },
    {
        "id": 20,
        "topic": "topic6",
        "question": "What structures are derived from the endoderm in the mouth and digestive system?",
        "answer": "<li>The endoderm gives rise to the epithelium of the mouth, palate, tongue, tonsil, respiratory tract, pharynx, and gastrointestinal tract up to the upper part of the anal canal.</li>",
        "memoryTip": "Think of the endoderm as the \"mouthful\" layer that covers all the tasty parts of your digestive tract!",
        "emoji": "🍽️"
    },
    {
        "id": 21,
        "topic": "topic6",
        "question": "Which structures are included in the endoderm derivatives related to the ear and gall bladder?",
        "answer": "<li>The endoderm includes the Eustachian tube, middle and inner ear, gall bladder, extrahepatic pancreatic ducts.</li>",
        "memoryTip": "The endoderm is like a VIP pass to the ear and gall bladder party!",
        "emoji": "🎉"
    },
    {
        "id": 22,
        "topic": "topic6",
        "question": "What parts of the urinary and reproductive systems are derived from the endoderm?",
        "answer": "<li>The bladder (except trigone), male and female urethra (except in its posterior wall), greater part of the vagina, vestibule, and inner surface of labia minora are derived from the endoderm.</li>",
        "memoryTip": "The endoderm is the \"plumbing\" layer, making sure everything flows smoothly!",
        "emoji": "🚽"
    },
    {
        "id": 23,
        "topic": "topic6",
        "question": "What exocrine glands are derived from the endoderm?",
        "answer": "<li>The liver, pancreas, glands in the walls of the gastrointestinal tract, and the prostate (except glandular zone) are derived from the endoderm.</li>",
        "memoryTip": "The endoderm is like a chef, cooking up all the exocrine glands in the body!",
        "emoji": "👨‍🍳"
    },
    {
        "id": 24,
        "topic": "topic7",
        "question": "What connective tissues are derived from the mesoderm?",
        "answer": "<li>The mesoderm gives rise to all connective tissues, including fascia, tendons, and ligaments.</li>",
        "memoryTip": "The mesoderm is the \"glue\" that holds everything together in the body!",
        "emoji": "🏗️"
    },
    {
        "id": 25,
        "topic": "topic7",
        "question": "Which structures of the skin and teeth are derived from the mesoderm?",
        "answer": "<li>The dermis of the skin and dentine of teeth are derived from the mesoderm.</li>",
        "memoryTip": "The mesoderm is like a dentist, making sure your skin and teeth are well-structured!",
        "emoji": "🦷"
    },
    {
        "id": 26,
        "topic": "topic7",
        "question": "What types of muscle are derived from the mesoderm?",
        "answer": "<li>All muscles except those of the iris are derived from the mesoderm.</li>",
        "memoryTip": "The mesoderm is the \"muscle builder,\" pumping up all the muscles except the eye's!",
        "emoji": "💪"
    },
    {
        "id": 27,
        "topic": "topic7",
        "question": "Which organs are derived from the mesoderm?",
        "answer": "<li>The heart, blood vessels, lymphatics, kidneys, ureters, glandular zone of the prostate, ovaries, uterus, tubes, vagina (upper part), adrenal cortex, testes, epididymis, ductus deferens, seminal vesicles, and ejaculatory duct are derived from the mesoderm.</li>",
        "memoryTip": "The mesoderm is like a factory, producing all the essential organs for the body!",
        "emoji": "🏭"
    },
    {
        "id": 28,
        "topic": "topic7",
        "question": "What nervous system components are derived from the mesoderm?",
        "answer": "<li>The meninges and microglia are derived from the mesoderm.</li>",
        "memoryTip": "The mesoderm is the \"brain's bodyguard,\" providing protection and support!",
        "emoji": "🛡️"
    },
    {
        "id": 29,
        "topic": "topic8",
        "question": "What happens during the 3rd week of embryonic development?",
        "answer": "<li>Neural tube formation occurs during the 3rd week of embryonic development.</li>",
        "memoryTip": "The 3rd week is when the brain starts to \"tube\" up for its big debut!",
        "emoji": "🧠"
    },
    {
        "id": 30,
        "topic": "topic8",
        "question": "What occurs in the 4th week of neural development?",
        "answer": "<li>Fusion of the neural folds occurs in the 4th week.</li>",
        "memoryTip": "In the 4th week, the neural folds are like friends hugging it out!",
        "emoji": "🤗"
    },
    {
        "id": 31,
        "topic": "topic8",
        "question": "What significant closure happens on the 25th day of development?",
        "answer": "<li>Closure of the anterior pore occurs on the 25th day, with the posterior pore closing on the 27th day.</li>",
        "memoryTip": "On day 25, the brain says, \"No more leaks!\" and seals up tight!",
        "emoji": "🔒"
    },
    {
        "id": 32,
        "topic": "topic8",
        "question": "What develops on the 28th day of neural development?",
        "answer": "<li>The most cranial pair of cervical spinal ganglia develops on the 28th day.</li>",
        "memoryTip": "On day 28, the brain gets its \"gang\" together for some serious networking!",
        "emoji": "🤝"
    },
    {
        "id": 33,
        "topic": "topic8",
        "question": "What occurs during the 5th week of neural development?",
        "answer": "<li>Formation of brain vesicles, sympathetic ganglia, and cerebral hemispheres occurs during the 5th week.</li>",
        "memoryTip": "The 5th week is when the brain starts to \"vesicle\" its plans for the future!",
        "emoji": "🧩"
    },
    {
        "id": 34,
        "topic": "topic8",
        "question": "What significant brain structure forms during the 8th week?",
        "answer": "<li>The cerebellum forms during the 8th week.</li>",
        "memoryTip": "The cerebellum is like the brain's \"balance coach,\" making sure everything stays upright!",
        "emoji": "⚖️"
    },
    {
        "id": 35,
        "topic": "topic8",
        "question": "What is formed during the 10th week of development?",
        "answer": "<li>The corpus callosum is formed during the 10th week.</li>",
        "memoryTip": "The corpus callosum is like the brain's \"bridge,\" connecting both sides for teamwork!",
        "emoji": "🌉"
    },
    {
        "id": 36,
        "topic": "topic8",
        "question": "What develops during the 12th week of neural development?",
        "answer": "<li>The cerebellar cortex and Purkinje cells are formed during the 12th week.</li>",
        "memoryTip": "The cerebellar cortex is like the brain's \"fine-tuning\" department, perfecting coordination!",
        "emoji": "🎼"
    },
    {
        "id": 37,
        "topic": "topic8",
        "question": "What significant structure forms during the 15th week?",
        "answer": "<li>The dentate nucleus forms during the 15th week.</li>",
        "memoryTip": "The dentate nucleus is like the brain's \"note-taker,\" keeping track of all the important info!",
        "emoji": "📝"
    },
    {
        "id": 38,
        "topic": "topic8",
        "question": "When does myelination begin in neural development?",
        "answer": "<li>Myelination begins in the 4th month of development.</li>",
        "memoryTip": "Myelination is like putting on a cozy sweater for the nerves to keep them warm and speedy!",
        "emoji": "🧥"
    },
    {
        "id": 39,
        "topic": "topic9",
        "question": "From which embryonic structure is the vertebral column formed?",
        "answer": "<li>The vertebral column is formed from the sclerotome of somites.</li>",
        "memoryTip": "The sclerotome is like the \"builder\" of the spine, stacking up the vertebrae!",
        "emoji": "🏗️"
    },
    {
        "id": 40,
        "topic": "topic9",
        "question": "What happens to the mesenchymal cells during vertebral column development?",
        "answer": "<li>Mesenchymal cells running transversely across a segment condense to form the perichordal disc.</li>",
        "memoryTip": "The mesenchymal cells are like a team of workers, compressing to create the intervertebral disc!",
        "emoji": "🛠️"
    },
    {
        "id": 41,
        "topic": "topic9",
        "question": "What does the perichordal disc become?",
        "answer": "<li>The perichordal disc becomes the intervertebral disc.</li>",
        "memoryTip": "The perichordal disc is like a \"cushion\" that keeps the spine comfy!",
        "emoji": "🛋️"
    },
    {
        "id": 42,
        "topic": "topic9",
        "question": "What happens to the notochord in the region of the vertebral bodies?",
        "answer": "<li>The notochord regresses entirely in the region of the vertebral bodies but persists and enlarges in the region of the intervertebral disc, forming the nucleus pulposus and annulus fibrosus.</li>",
        "memoryTip": "The notochord is like a magician, disappearing from the vertebrae but reappearing as the \"core\" of the discs!",
        "emoji": "🎩"
    },
    {
        "id": 43,
        "topic": "topic10",
        "question": "What structures are derived from the neural crest?",
        "answer": "<li>Structures derived from the neural crest include connective tissue and bones of the face and skull, spinal (dorsal root) ganglia, cranial nerve ganglia, C cells of the thyroid gland, conotruncal septum in the heart, odontoblasts, dermis in the face and neck, sympathetic chain and preaortic ganglia, parasympathetic ganglia of the GIT, adrenal medulla, Schwann cells, arachnoid and pia mater, and melanocytes.</li>",
        "memoryTip": "Think of the neural crest as a \"neural buffet\" serving a variety of structures!",
        "emoji": "🍽️"
    },
    {
        "id": 44,
        "topic": "topic10",
        "question": "What disturbances can occur due to issues with the neural crest?",
        "answer": "<li>Disturbances in neural crest can lead to Hirchsprung's disease, cardiac septal defects (Aortico-Pulmonary), cleft lip and cleft palate, fronto-nasal dysplasia, neurofibromatosis, tumors of the adrenal medulla, and albinism.</li>",
        "memoryTip": "If the neural crest is a buffet, disturbances are like food poisoning—nobody wants that!",
        "emoji": "🤢"
    },
    {
        "id": 45,
        "topic": "topic11",
        "question": "What is posterior rachischisis?",
        "answer": "<li>Posterior rachischisis is a condition where the whole length of the neural tube is unclosed.</li>",
        "memoryTip": "Think of it as a \"backless\" neural tube—definitely not a fashion statement!",
        "emoji": "👗"
    },
    {
        "id": 46,
        "topic": "topic11",
        "question": "What is anencephaly?",
        "answer": "<li>Anencephaly is a condition where the neural tube remains open in the brain region.</li>",
        "memoryTip": "Anencephaly sounds like \"an empty head\"—and that's exactly what it is!",
        "emoji": "🧠"
    },
    {
        "id": 47,
        "topic": "topic11",
        "question": "What is cranium bifidum?",
        "answer": "<li>Cranium bifidum is the non-closure of the cranium.</li>",
        "memoryTip": "Cranium bifidum is like a \"bifid\" hat—it's missing the top!",
        "emoji": "🎩"
    },
    {
        "id": 48,
        "topic": "topic11",
        "question": "What is spina bifida?",
        "answer": "<li>Spina bifida is the non-closure of the vertebral canal at the caudal end.</li>",
        "memoryTip": "Spina bifida is like a \"spine with a gap\"—not the best design!",
        "emoji": "🦴"
    },
    {
        "id": 49,
        "topic": "topic11",
        "question": "What is spina bifida occulta?",
        "answer": "<li>Spina bifida occulta is a defect in the vertebral arches, covered by skin, and usually does not involve underlying neural tissue.</li>",
        "memoryTip": "Occulta means \"hidden\"—like a secret spine party under the skin!",
        "emoji": "🤫"
    },
    {
        "id": 50,
        "topic": "topic11",
        "question": "What is spina bifida cystica?",
        "answer": "<li>Spina bifida cystica is when neural tissue and/or meninges protrude through a defect in the vertebral arches and skin to form a cyst-like sac.</li>",
        "memoryTip": "Cystica sounds like \"sack\"—and that's exactly what it is, a sack of nerves!",
        "emoji": "🎒"
    },
    {
        "id": 51,
        "topic": "topic11",
        "question": "What is encephalocele?",
        "answer": "<li>Encephalocele is the bulging of neural tissue outside the cranial cavity due to failure of fusion.</li>",
        "memoryTip": "Encephalocele is like a \"brain balloon\" that didn't get tied off!",
        "emoji": "🎈"
    },
    {
        "id": 52,
        "topic": "topic11",
        "question": "What is myelocele?",
        "answer": "<li>Myelocele is the bulging of neural tissue in the spinal region.</li>",
        "memoryTip": "Myelocele sounds like \"my little bulge\"—and that's what it is!",
        "emoji": "🐣"
    },
    {
        "id": 53,
        "topic": "topic11",
        "question": "What is meningocele?",
        "answer": "<li>Meningocele is the bulging of meninges.</li>",
        "memoryTip": "Meningocele is like a \"meninges bubble\"—just floating around!",
        "emoji": "🫧"
    },
    {
        "id": 54,
        "topic": "topic12",
        "question": "How is the tympanic membrane formed?",
        "answer": "<li>The tympanic membrane is formed by the apposition of the tubotympanic recess and the ectodermal cleft, with intervening mesoderm forming the connective tissue.</li>",
        "memoryTip": "Think of the tympanic membrane as a \"musical sandwich\" with layers of sound!",
        "emoji": "🎶"
    },
    {
        "id": 55,
        "topic": "topic13",
        "question": "What is the derivation of the lens and conjunctiva?",
        "answer": "<li>The lens and conjunctiva are derived from surface ectoderm.</li>",
        "memoryTip": "The lens is like a \"clear window\" made from ectoderm—no smudges allowed!",
        "emoji": "🪟"
    },
    {
        "id": 56,
        "topic": "topic13",
        "question": "What is the derivation of the retina?",
        "answer": "<li>The retina is derived from neuroectoderm (optic cup).</li>",
        "memoryTip": "The retina is like a \"neuro camera\" capturing all the sights!",
        "emoji": "📷"
    },
    {
        "id": 57,
        "topic": "topic13",
        "question": "What is the derivation of the vitreous, ciliary body, and iris?",
        "answer": "<li>The vitreous, ciliary body, and iris are derived from mesoderm.</li>",
        "memoryTip": "Think of them as \"mesoderm's fancy trio\"—always together!",
        "emoji": "🎤"
    },
    {
        "id": 58,
        "topic": "topic13",
        "question": "What is the derivation of the choroid?",
        "answer": "<li>The choroid is derived from mesoderm, possibly infiltrated by neural crest cells.</li>",
        "memoryTip": "The choroid is like a \"mesoderm mystery\"—who's sneaking in?",
        "emoji": "🕵️"
    },
    {
        "id": 59,
        "topic": "topic13",
        "question": "What is the derivation of the ciliary muscles?",
        "answer": "<li>The ciliary muscles are derived from mesenchymal cells covering the developing ciliary body, possibly from neural crest.</li>",
        "memoryTip": "Ciliary muscles are like \"muscle builders\" for your eye—flexing for focus!",
        "emoji": "💪"
    },
    {
        "id": 60,
        "topic": "topic13",
        "question": "What is the derivation of the muscles of the iris?",
        "answer": "<li>The muscles of the iris are derived from neuroectoderm (from the optic cup).</li>",
        "memoryTip": "Iris muscles are like \"eye bouncers\" controlling the light!",
        "emoji": "🚪"
    },
    {
        "id": 61,
        "topic": "topic13",
        "question": "What is the derivation of the sclera?",
        "answer": "<li>The sclera is derived from mesoderm, possibly infiltrated by neural crest cells.</li>",
        "memoryTip": "The sclera is like the \"tough skin\" of the eye—keeping everything in!",
        "emoji": "🛡️"
    },
    {
        "id": 62,
        "topic": "topic13",
        "question": "What is the derivation of the cornea?",
        "answer": "<li>The cornea is derived from surface epithelium (ectoderm) for the outer layer, and the substantia propria and inner epithelium from neural crest.</li>",
        "memoryTip": "The cornea is like a \"clear shield\"—protecting the eye while letting light in!",
        "emoji": "🛡️"
    },
    {
        "id": 63,
        "topic": "topic13",
        "question": "What is the derivation of blood vessels in the eye?",
        "answer": "<li>Blood vessels in the eye are derived from mesoderm.</li>",
        "memoryTip": "Blood vessels are like \"highways\" for nutrients—keeping the eye well-fed!",
        "emoji": "🚧"
    },
    {
        "id": 64,
        "topic": "topic13",
        "question": "What is the derivation of the optic nerve?",
        "answer": "<li>The optic nerve is derived from neuroectoderm, with coverings (pia, arachnoid, and dura) from mesoderm.</li>",
        "memoryTip": "The optic nerve is like the \"data cable\" for your eye—sending signals to the brain!",
        "emoji": "📡"
    },
    {
        "id": 65,
        "topic": "topic14",
        "question": "What are the origins of the skeletal system?",
        "answer": "<li>The skeletal system develops from paraxial and lateral plate (somatic layer) mesoderm and from neural crest.</li>",
        "memoryTip": "Think of the skeletal system as a \"mesodermal masterpiece\" crafted from the finest layers of embryonic art!",
        "emoji": "🎨"
    },
    {
        "id": 66,
        "topic": "topic14",
        "question": "What forms the segmented series of tissue blocks in the musculoskeletal system?",
        "answer": "<li>The paraxial mesoderm forms a segmented series of tissue blocks known as somitomeres in the head region and somites from the occipital region caudally.</li>",
        "memoryTip": "Imagine the paraxial mesoderm as a train of \"somite cars\" chugging along the neural tube!",
        "emoji": "🚂"
    },
    {
        "id": 67,
        "topic": "topic14",
        "question": "How many pairs of somites are present by the end of the fifth week of development?",
        "answer": "<li>By the end of the fifth week, 42 to 44 pairs of somites are present.</li>",
        "memoryTip": "Think of somites as a \"somite party\" with 42 to 44 guests showing up!",
        "emoji": "🎉"
    },
    {
        "id": 68,
        "topic": "topic14",
        "question": "What are the specific pairs of somites present in the body?",
        "answer": "<li>There are 4 occipital, 8 cervical, 12 thoracic, 5 lumbar, 5 sacral, and 8-10 coccygeal pairs.</li>",
        "memoryTip": "Remember the somite count like a family reunion: 4 heads, 8 necks, 12 chests, 5 lower backs, and a few tails!",
        "emoji": "👪"
    },
    {
        "id": 69,
        "topic": "topic14",
        "question": "Which somites disappear during development?",
        "answer": "<li>The first occipital and the last five to seven coccygeal somites later disappear.</li>",
        "memoryTip": "Think of these disappearing somites as the \"ghosts of development\" that vanish into thin air!",
        "emoji": "👻"
    },
    {
        "id": 70,
        "topic": "topic14",
        "question": "What are the preaxial and postaxial bones of the upper limb?",
        "answer": "<li>The preaxial bone of the upper limb is the radius, and the postaxial bone is the ulna.</li>",
        "memoryTip": "Picture the radius as the \"leading actor\" and the ulna as the \"supporting role\" in the upper limb drama!",
        "emoji": "🎭"
    },
    {
        "id": 71,
        "topic": "topic14",
        "question": "What are the preaxial and postaxial bones of the lower limb?",
        "answer": "<li>The preaxial bone of the lower limb is the tibia, and the postaxial bone is the fibula.</li>",
        "memoryTip": "Imagine the tibia as the \"tallest tower\" and the fibula as its \"sidekick\" in the leg!",
        "emoji": "🏰"
    },
    {
        "id": 72,
        "topic": "topic14",
        "question": "Which digits are formed on the preaxial border?",
        "answer": "<li>The thumb and great toe are formed on the preaxial border.</li>",
        "memoryTip": "Think of the thumb and great toe as the \"VIPs\" of the preaxial party!",
        "emoji": "👑"
    },
    {
        "id": 73,
        "topic": "topic15",
        "question": "What muscles are innervated by the oculomotor nerve (III)?",
        "answer": "<li>The superior, medial, and ventral recti muscles are innervated by the oculomotor nerve (III).</li>",
        "memoryTip": "Picture the oculomotor nerve as the \"director\" guiding the eye muscles in a performance!",
        "emoji": "🎬"
    },
    {
        "id": 74,
        "topic": "topic15",
        "question": "Which muscle is innervated by the trochlear nerve (IV)?",
        "answer": "<li>The superior oblique muscle is innervated by the trochlear nerve (IV).</li>",
        "memoryTip": "Think of the superior oblique as the \"twist and shout\" muscle of the eye!",
        "emoji": "🎤"
    },
    {
        "id": 75,
        "topic": "topic15",
        "question": "What muscle is associated with the trigeminal nerve (V)?",
        "answer": "<li>The jaw-closing muscles are associated with the trigeminal nerve (V).</li>",
        "memoryTip": "Imagine the trigeminal nerve as the \"jaw's best friend\" helping it close up shop!",
        "emoji": "🤐"
    },
    {
        "id": 76,
        "topic": "topic15",
        "question": "Which muscle is innervated by the abducens nerve (VI)?",
        "answer": "<li>The lateral rectus muscle is innervated by the abducens nerve (VI).</li>",
        "memoryTip": "Picture the lateral rectus as the \"outward-looking\" muscle, always checking the sides!",
        "emoji": "👀"
    },
    {
        "id": 77,
        "topic": "topic15",
        "question": "What is the function of the facial nerve (VII) in relation to somitomeres?",
        "answer": "<li>The facial nerve (VII) innervates the jaw-opening muscles of the second arch.</li>",
        "memoryTip": "Think of the facial nerve as the \"jaw's personal trainer,\" helping it open wide!",
        "emoji": "🏋️"
    },
    {
        "id": 78,
        "topic": "topic15",
        "question": "Which muscle is innervated by the glossopharyngeal nerve (IX)?",
        "answer": "<li>The stylopharyngeus muscle is innervated by the glossopharyngeal nerve (IX).</li>",
        "memoryTip": "Imagine the stylopharyngeus as the \"stylish pharynx\" muscle, always in vogue!",
        "emoji": "👗"
    },
    {
        "id": 79,
        "topic": "topic15",
        "question": "What muscles are innervated by the vagus nerve (X)?",
        "answer": "<li>The intrinsic laryngeals are innervated by the vagus nerve (X).</li>",
        "memoryTip": "Picture the vagus nerve as the \"voice coach\" for the intrinsic laryngeals!",
        "emoji": "🎤"
    },
    {
        "id": 80,
        "topic": "topic15",
        "question": "Which nerve innervates the tongue?",
        "answer": "<li>The hypoglossal nerve (XII) innervates the tongue.</li>",
        "memoryTip": "Think of the hypoglossal nerve as the \"tongue's personal assistant,\" always ready to help it move!",
        "emoji": "👅"
    },
    {
        "id": 81,
        "topic": "topic16",
        "question": "What is the critical time for craniofacial development?",
        "answer": "<li>The critical time for craniofacial development is weeks 3-4, which coincides with gastrulation.</li>",
        "memoryTip": "Remember craniofacial development as the \"week 3-4 makeover\" for the embryo!",
        "emoji": "💄"
    },
    {
        "id": 82,
        "topic": "topic16",
        "question": "What do neural crest cells form in the head and neck?",
        "answer": "<li>Neural crest cells form the bones of the face and anterior skull.</li>",
        "memoryTip": "Think of neural crest cells as the \"architects\" designing the face and skull!",
        "emoji": "🏗️"
    },
    {
        "id": 83,
        "topic": "topic16",
        "question": "What does mesoderm contribute to in the skull?",
        "answer": "<li>Mesoderm forms the posterior bones and base of the skull.</li>",
        "memoryTip": "Picture the mesoderm as the \"foundation layer\" of the skull, holding everything up!",
        "emoji": "🏰"
    },
    {
        "id": 84,
        "topic": "topic16",
        "question": "What does the lateral plate mesoderm form?",
        "answer": "<li>The lateral plate mesoderm forms laryngeal cartilage.</li>",
        "memoryTip": "Imagine the lateral plate mesoderm as the \"cartilage craftsman\" shaping the larynx!",
        "emoji": "🎨"
    },
    {
        "id": 85,
        "topic": "topic17",
        "question": "What structures are formed from the frontonasal prominence?",
        "answer": "<li>The frontonasal prominence forms the forehead, bridge of the nose, and medial and lateral nasal prominences.</li>",
        "memoryTip": "Think of the frontonasal prominence as the \"forehead factory\" producing all the upper facial features!",
        "emoji": "🏭"
    },
    {
        "id": 86,
        "topic": "topic17",
        "question": "What does the maxillary prominence form?",
        "answer": "<li>The maxillary prominence forms the cheeks and lateral portion of the upper lip.</li>",
        "memoryTip": "Picture the maxillary prominence as the \"cheeky smile\" of the face!",
        "emoji": "😄"
    },
    {
        "id": 87,
        "topic": "topic17",
        "question": "What structures are formed from the medial nasal prominence?",
        "answer": "<li>The medial nasal prominence forms the philtrum of the upper lip, crest, and tip of the nose.</li>",
        "memoryTip": "Think of the medial nasal prominence as the \"nose's finishing touch\" with a stylish philtrum!",
        "emoji": "👃"
    },
    {
        "id": 88,
        "topic": "topic17",
        "question": "What does the lateral nasal prominence contribute to?",
        "answer": "<li>The lateral nasal prominence contributes to the alae of the nose.</li>",
        "memoryTip": "Imagine the lateral nasal prominence as the \"wings\" of the nose, helping it take flight!",
        "emoji": "🕊️"
    },
    {
        "id": 89,
        "topic": "topic17",
        "question": "What structures are formed from the mandibular prominence?",
        "answer": "<li>The mandibular prominence forms the lower lip.</li>",
        "memoryTip": "Picture the mandibular prominence as the \"lip artist\" crafting the perfect pout!",
        "emoji": "💋"
    },
    {
        "id": 90,
        "topic": "topic18",
        "question": "What is brachycephaly?",
        "answer": "<li>Brachycephaly is the premature closure of all cranial sutures, resulting in a cloverleaf skull shape.</li>",
        "memoryTip": "Think of brachycephaly as the \"cloverleaf shortcut\" that makes the skull too round!",
        "emoji": "🍀"
    },
    {
        "id": 91,
        "topic": "topic18",
        "question": "What is trigonocephaly?",
        "answer": "<li>Trigonocephaly is the premature closure of the frontal suture, leading to an egg-shaped skull.</li>",
        "memoryTip": "Picture trigonocephaly as the \"egg-cellent\" shape of a skull that forgot to crack!",
        "emoji": "🥚"
    },
    {
        "id": 92,
        "topic": "topic18",
        "question": "What is oxycephaly?",
        "answer": "<li>Oxycephaly is the premature closure of the coronal suture, resulting in a tower-shaped skull.</li>",
        "memoryTip": "Think of oxycephaly as the \"tower of skull\" that reached for the sky too soon!",
        "emoji": "🏰"
    },
    {
        "id": 93,
        "topic": "topic18",
        "question": "What is plagiocephaly?",
        "answer": "<li>Plagiocephaly is the one-sided premature closure of the coronal suture.</li>",
        "memoryTip": "Imagine plagiocephaly as the \"lopsided hat\" that didn't fit quite right!",
        "emoji": "🎩"
    },
    {
        "id": 94,
        "topic": "topic18",
        "question": "What is scaphocephaly?",
        "answer": "<li>Scaphocephaly is the premature closure of the sagittal suture, resulting in a boat-shaped skull.</li>",
        "memoryTip": "Picture scaphocephaly as the \"boat-shaped skull\" ready to sail the seas of development!",
        "emoji": "⛵"
    },
    {
        "id": 95,
        "topic": "topic18",
        "question": "What is craniosynostosis?",
        "answer": "<li>Craniosynostosis is the premature closure of one or more sutures in the skull.</li>",
        "memoryTip": "Think of craniosynostosis as the \"suture snatcher\" that closes the skull too early!",
        "emoji": "🚫"
    },
    {
        "id": 96,
        "topic": "topic19",
        "question": "What is the first organ of the body to start functioning?",
        "answer": "<li>The heart is the first organ of the body to start functioning.</li>",
        "memoryTip": "The heart is like the early bird that gets the worm, but in this case, it gets the blood!",
        "emoji": "❤️"
    },
    {
        "id": 97,
        "topic": "topic19",
        "question": "During which days of development are the major septa of the heart formed?",
        "answer": "<li>The major septa of the heart are formed between the 27th and 37th days of development.</li>",
        "memoryTip": "Think of it as the heart's construction phase, where it builds walls to keep things organized!",
        "emoji": "🏗️"
    },
    {
        "id": 98,
        "topic": "topic19",
        "question": "How many pairs of aortic arches appear during development, and which ones disappear?",
        "answer": "<li>Six pairs of aortic arches appear, with the 1st, 2nd, and 5th arches disappearing.</li>",
        "memoryTip": "It's like a magic show where some arches just vanish into thin air!",
        "emoji": "🎩"
    },
    {
        "id": 99,
        "topic": "topic19",
        "question": "What are the embryonic structures that correspond to the adult aorta and pulmonary trunk?",
        "answer": "<li>The embryonic structure is the truncus arteriosus, which develops into the aorta and pulmonary trunk.</li>",
        "memoryTip": "Think of the truncus arteriosus as the trunk of a tree that splits into two branches!",
        "emoji": "🌳"
    },
    {
        "id": 100,
        "topic": "topic19",
        "question": "What embryonic structures give rise to the arch of the aorta?",
        "answer": "<li>The aortic sac, left 4th aortic arch, and left dorsal aorta give rise to the arch of the aorta.</li>",
        "memoryTip": "It's like a family reunion where different branches come together to form one big arch!",
        "emoji": "🎉"
    },
    {
        "id": 101,
        "topic": "topic19",
        "question": "What does the left dorsal aorta and fused dorsal aorta develop into?",
        "answer": "<li>They develop into the descending aorta.</li>",
        "memoryTip": "Think of it as a slide that goes down from the top of the heart!",
        "emoji": "⬇️"
    },
    {
        "id": 102,
        "topic": "topic19",
        "question": "What does the primitive ventricle become in adults?",
        "answer": "<li>It becomes the trabeculated part of the right and left ventricles.</li>",
        "memoryTip": "The primitive ventricle is like a rough draft that gets polished into a masterpiece!",
        "emoji": "🎨"
    },
    {
        "id": 103,
        "topic": "topic19",
        "question": "What does the primitive atrium develop into?",
        "answer": "<li>It develops into the trabeculated part of the right and left atria.</li>",
        "memoryTip": "The primitive atrium is like a starter home that gets upgraded into a fancy mansion!",
        "emoji": "🏰"
    },
    {
        "id": 104,
        "topic": "topic19",
        "question": "What adult structures arise from the sinus venosus?",
        "answer": "<li>It gives rise to the smooth part of the right atrium (sinus venerum), coronary sinus, and the oblique vein of the left atrium.</li>",
        "memoryTip": "The sinus venosus is like a busy intersection where different roads meet!",
        "emoji": "🚦"
    },
    {
        "id": 105,
        "topic": "topic19",
        "question": "What is the septum primum and what does it become?",
        "answer": "<li>The septum primum becomes the fossa ovalis.</li>",
        "memoryTip": "Think of the septum primum as a door that gets closed off, leaving a little window!",
        "emoji": "🚪"
    },
    {
        "id": 106,
        "topic": "topic19",
        "question": "What does the septum secundum develop into?",
        "answer": "<li>It develops into the annulus ovalis.</li>",
        "memoryTip": "The septum secundum is like a bouncer at a club, keeping things in order!",
        "emoji": "🕴️"
    },
    {
        "id": 107,
        "topic": "topic19",
        "question": "What is the origin of the septum spurium?",
        "answer": "<li>It is derived from the fusion of the right and left venous valves.</li>",
        "memoryTip": "The septum spurium is like a friendship bracelet made from two different colors!",
        "emoji": "🧑‍🤝‍🧑"
    },
    {
        "id": 108,
        "topic": "topic19",
        "question": "When does the heart tube bend and form the cardiac loop?",
        "answer": "<li>The heart tube bends and forms the cardiac loop by day 28.</li>",
        "memoryTip": "It's like the heart doing a little dance to get into shape!",
        "emoji": "💃"
    },
    {
        "id": 109,
        "topic": "topic20",
        "question": "What does the remnant of the first aortic arch become?",
        "answer": "<li>It becomes the maxillary artery and may form the external carotid artery.</li>",
        "memoryTip": "The first aortic arch is like a baby bird that grows up to be a strong maxillary artery!",
        "emoji": "🐦"
    },
    {
        "id": 110,
        "topic": "topic20",
        "question": "What does the remnant of the second aortic arch develop into?",
        "answer": "<li>It develops into the hyoid and stapedial arteries.</li>",
        "memoryTip": "The second aortic arch is like a musical note that helps create harmony in the body!",
        "emoji": "🎶"
    },
    {
        "id": 111,
        "topic": "topic20",
        "question": "What does the right horn of the aortic sac become?",
        "answer": "<li>It becomes the brachiocephalic artery.</li>",
        "memoryTip": "The right horn is like a trumpet that leads the way for blood flow!",
        "emoji": "🎺"
    },
    {
        "id": 112,
        "topic": "topic20",
        "question": "What do the right 4th arch artery and 7th cervical intersegmental artery develop into?",
        "answer": "<li>They develop into the right subclavian artery.</li>",
        "memoryTip": "Think of them as a team working together to deliver blood to the right arm!",
        "emoji": "🤝"
    },
    {
        "id": 113,
        "topic": "topic20",
        "question": "What does the left 7th cervical intersegmental artery become?",
        "answer": "<li>It becomes the left subclavian artery.</li>",
        "memoryTip": "The left 7th is like a left-handed pitcher, always throwing blood to the left side!",
        "emoji": "🥎"
    },
    {
        "id": 114,
        "topic": "topic20",
        "question": "What does the proximal part of the 3rd arch artery develop into?",
        "answer": "<li>It develops into the common carotid artery.</li>",
        "memoryTip": "The proximal part is like the main road leading to the head and neck!",
        "emoji": "🛣️"
    },
    {
        "id": 115,
        "topic": "topic20",
        "question": "What does the distal part of the 3rd arch artery and cervical part of the dorsal aorta become?",
        "answer": "<li>They develop into the internal carotid artery.</li>",
        "memoryTip": "The distal part is like a secret passageway leading to the brain!",
        "emoji": "🧠"
    },
    {
        "id": 116,
        "topic": "topic20",
        "question": "What does the bud from the 3rd arch artery develop into?",
        "answer": "<li>It develops into the external carotid artery.</li>",
        "memoryTip": "The bud is like a flower blooming into a beautiful external carotid artery!",
        "emoji": "🌼"
    },
    {
        "id": 117,
        "topic": "topic20",
        "question": "What does part of the 6th arch (pulmonary arch) artery become?",
        "answer": "<li>It becomes the pulmonary artery.</li>",
        "memoryTip": "The 6th arch is like a bridge connecting the heart to the lungs!",
        "emoji": "🌉"
    },
    {
        "id": 118,
        "topic": "topic20",
        "question": "What does the part of the left 6th arch artery between the lung bud and aorta develop into?",
        "answer": "<li>It develops into the ductus arteriosus.</li>",
        "memoryTip": "The ductus arteriosus is like a shortcut for blood to bypass the lungs before birth!",
        "emoji": "⏩"
    },
    {
        "id": 119,
        "topic": "topic21",
        "question": "What do the internal jugular veins develop from?",
        "answer": "<li>They develop from the anterior cardinal veins (external jugular veins are secondary channels).</li>",
        "memoryTip": "The internal jugular veins are like the VIP lanes of the venous system!",
        "emoji": "🎟️"
    },
    {
        "id": 120,
        "topic": "topic21",
        "question": "What is the origin of the superior vena cava?",
        "answer": "<li>It originates from the right anterior cardinal vein and right common cardinal vein.</li>",
        "memoryTip": "The superior vena cava is like the main highway for blood coming from the upper body!",
        "emoji": "🛤️"
    },
    {
        "id": 121,
        "topic": "topic21",
        "question": "What does the inferior vena cava develop from?",
        "answer": "<li>It develops from segments of the venous system.</li>",
        "memoryTip": "The inferior vena cava is like a basement that collects all the blood from below!",
        "emoji": "⬇️"
    },
    {
        "id": 122,
        "topic": "topic21",
        "question": "What does the hepatic vein correspond to?",
        "answer": "<li>It corresponds to the right hepatic vein.</li>",
        "memoryTip": "The hepatic vein is like a delivery truck bringing blood to the liver!",
        "emoji": "🚚"
    },
    {
        "id": 123,
        "topic": "topic21",
        "question": "What does the prerenal vein develop into?",
        "answer": "<li>It develops into the right subcardinal vein.</li>",
        "memoryTip": "The prerenal vein is like a pre-party gathering before the big event in the kidneys!",
        "emoji": "🎉"
    },
    {
        "id": 124,
        "topic": "topic21",
        "question": "What do the renal veins correspond to?",
        "answer": "<li>They correspond to the right subcardinal and supracardinal anastomosis.</li>",
        "memoryTip": "The renal veins are like a duo working together to keep the kidneys happy!",
        "emoji": "👯‍♂️"
    },
    {
        "id": 125,
        "topic": "topic21",
        "question": "What does the post renal vein develop into?",
        "answer": "<li>It develops into the right supracardinal vein.</li>",
        "memoryTip": "The post renal vein is like the last guest to leave the party, making sure everything is cleaned up!",
        "emoji": "🧹"
    },
    {
        "id": 126,
        "topic": "topic21",
        "question": "What does the lower end of the venous system correspond to?",
        "answer": "<li>It corresponds to the right posterior cardinal vein.</li>",
        "memoryTip": "The lower end is like the foundation of a house, supporting everything above!",
        "emoji": "🏠"
    },
    {
        "id": 127,
        "topic": "topic21",
        "question": "What does the left renal vein develop from?",
        "answer": "<li>It develops from the mesonephric vein, left subcardinal veins, and inter-subcardinal anastomosis.</li>",
        "memoryTip": "The left renal vein is like a family reunion of veins coming together!",
        "emoji": "👪"
    },
    {
        "id": 128,
        "topic": "topic21",
        "question": "What do the testicular/ovarian veins correspond to?",
        "answer": "<li>They correspond to the remnants of subcardinal veins below the inter-subcardinal anastomosis.</li>",
        "memoryTip": "The testicular/ovarian veins are like the last pieces of a puzzle that complete the picture!",
        "emoji": "🧩"
    },
    {
        "id": 129,
        "topic": "topic21",
        "question": "What happens to the left anterior cardinal vein and left common cardinal veins after anastomosing?",
        "answer": "<li>They regress after anastomosing.</li>",
        "memoryTip": "It's like a magic trick where the veins disappear after joining forces!",
        "emoji": "🎩"
    },
    {
        "id": 130,
        "topic": "topic22",
        "question": "What is the remnant of the ductus arteriosus?",
        "answer": "<li>The remnant of the ductus arteriosus is the ligamentum arteriosum.</li>",
        "memoryTip": "Think of the ductus arteriosus as a bridge that got turned into a \"ligament\" after the traffic stopped!",
        "emoji": "🌉"
    },
    {
        "id": 131,
        "topic": "topic22",
        "question": "What structure corresponds to the ductus venosus?",
        "answer": "<li>The ductus venosus corresponds to the ligamentum venosum.</li>",
        "memoryTip": "The ductus venosus went from being a busy highway to a quiet \"ligament\" lane!",
        "emoji": "🛣️"
    },
    {
        "id": 132,
        "topic": "topic22",
        "question": "What is the remnant of the left umbilical vein?",
        "answer": "<li>The remnant of the left umbilical vein is the ligamentum teres hepatis (round ligament).</li>",
        "memoryTip": "The left umbilical vein took a roundabout route to become the round ligament!",
        "emoji": "🔄"
    },
    {
        "id": 133,
        "topic": "topic22",
        "question": "What happens to the right umbilical vein?",
        "answer": "<li>The right umbilical vein disappears.</li>",
        "memoryTip": "The right umbilical vein decided to play hide and seek and never came back!",
        "emoji": "👻"
    },
    {
        "id": 134,
        "topic": "topic22",
        "question": "What is the remnant of the vitello intestinal duct?",
        "answer": "<li>The remnant of the vitello intestinal duct is Meckel's diverticulum.</li>",
        "memoryTip": "Meckel's diverticulum is like a leftover piece of pizza that you forgot in the fridge!",
        "emoji": "🍕"
    },
    {
        "id": 135,
        "topic": "topic22",
        "question": "What structure corresponds to the urachus?",
        "answer": "<li>The urachus corresponds to the median umbilical ligament.</li>",
        "memoryTip": "The urachus went from being a urinary highway to a median ligament lane!",
        "emoji": "🚧"
    },
    {
        "id": 136,
        "topic": "topic22",
        "question": "What do the vitelline arteries become?",
        "answer": "<li>The vitelline arteries become the celiac, superior mesenteric, and inferior mesenteric arteries.</li>",
        "memoryTip": "The vitelline arteries branched out into a \"celiac\" family reunion with the mesenteric cousins!",
        "emoji": "👨‍👩‍👧‍👦"
    },
    {
        "id": 137,
        "topic": "topic22",
        "question": "What is the remnant of the proximal part of the umbilical artery?",
        "answer": "<li>The proximal part of the umbilical artery becomes the internal iliac and superior vesical artery.</li>",
        "memoryTip": "The proximal umbilical artery took a detour to become the internal iliac artery and its buddy, the superior vesical artery!",
        "emoji": "🛤️"
    },
    {
        "id": 138,
        "topic": "topic22",
        "question": "What does the distal part of the umbilical artery become?",
        "answer": "<li>The distal part of the umbilical artery becomes the medial umbilical ligament.</li>",
        "memoryTip": "The distal umbilical artery decided to become a \"medial\" ligament instead of a highway!",
        "emoji": "🏞️"
    },
    {
        "id": 139,
        "topic": "topic22",
        "question": "What is the remnant of the left common cardinal vein (Cuvier's left duct)?",
        "answer": "<li>The remnant of the left common cardinal vein is the oblique vein of the left atrium.</li>",
        "memoryTip": "The left common cardinal vein took a shortcut and became the oblique vein of the left atrium!",
        "emoji": "↗️"
    },
    {
        "id": 140,
        "topic": "topic23",
        "question": "What happens to the proximal parts of the vitelline and umbilical veins?",
        "answer": "<li>They are broken up into small channels to form the sinusoids of the liver.</li>",
        "memoryTip": "The veins got a makeover and turned into the \"sinusoidal\" party of the liver!",
        "emoji": "🎉"
    },
    {
        "id": 141,
        "topic": "topic23",
        "question": "What do the sinusoids of the liver drain into?",
        "answer": "<li>The sinusoids drain into the sinus venosus.</li>",
        "memoryTip": "The sinusoids are like the liver's drainage system, sending all the waste to the sinus venosus!",
        "emoji": "🚽"
    },
    {
        "id": 142,
        "topic": "topic23",
        "question": "What does each horn of the sinus venosus receive?",
        "answer": "<li>Each horn receives one vitelline vein, one umbilical vein, and one common cardinal vein.</li>",
        "memoryTip": "The sinus venosus is like a party host, welcoming one of each type of vein to the gathering!",
        "emoji": "🎊"
    },
    {
        "id": 143,
        "topic": "topic23",
        "question": "What happens to the left sinus horn?",
        "answer": "<li>The left sinus horn reduces, and blood from the left side of the liver is rechanneled toward the right.</li>",
        "memoryTip": "The left sinus horn decided to go on a diet and rechanneled its blood to the right!",
        "emoji": "⚖️"
    },
    {
        "id": 144,
        "topic": "topic23",
        "question": "What forms the hepatocardiac portion of the inferior vena cava?",
        "answer": "<li>The enlargement of the right vitelline vein forms the hepatocardiac portion of the inferior vena cava.</li>",
        "memoryTip": "The right vitelline vein bulked up to become the \"hepatocardiac\" heavyweight champion!",
        "emoji": "🏋️"
    },
    {
        "id": 145,
        "topic": "topic23",
        "question": "What happens to the proximal part of the left vitelline vein?",
        "answer": "<li>The proximal part of the left vitelline vein disappears.</li>",
        "memoryTip": "The left vitelline vein pulled a disappearing act and left no trace behind!",
        "emoji": "🎩"
    },
    {
        "id": 146,
        "topic": "topic23",
        "question": "How does the left umbilical vein connect to the sinus venosus?",
        "answer": "<li>The left umbilical vein connects to the sinus venosus by the ductus venosus.</li>",
        "memoryTip": "The left umbilical vein took a shortcut through the ductus venosus to reach the sinus venosus!",
        "emoji": "🛣️"
    },
    {
        "id": 147,
        "topic": "topic23",
        "question": "What does the ductus venosus connect?",
        "answer": "<li>The ductus venosus connects the left branch of the portal vein to the left hepatic vein.</li>",
        "memoryTip": "The ductus venosus is like a bridge connecting two important veins for a smooth flow!",
        "emoji": "🌉"
    },
    {
        "id": 148,
        "topic": "topic23",
        "question": "What does the ductus arteriosus carry?",
        "answer": "<li>The ductus arteriosus carries most of the blood from the right ventricle to the dorsal aorta.</li>",
        "memoryTip": "The ductus arteriosus is the express lane for blood traveling from the heart to the aorta!",
        "emoji": "🚀"
    },
    {
        "id": 149,
        "topic": "topic23",
        "question": "What happens to the ductus arteriosus after birth?",
        "answer": "<li>It is obliterated and seen as the ligamentum arteriosum.</li>",
        "memoryTip": "The ductus arteriosus went from a busy road to a quiet ligament after the baby arrived!",
        "emoji": "🛤️"
    },
    {
        "id": 150,
        "topic": "topic23",
        "question": "What do the left umbilical vein and ductus venosus become after obliteration?",
        "answer": "<li>They become the ligamentum teres hepatis and ligamentum venosum, respectively.</li>",
        "memoryTip": "The left umbilical vein and ductus venosus turned into ligaments, like a couple of friends who decided to settle down!",
        "emoji": "👯"
    },
    {
        "id": 151,
        "topic": "topic24",
        "question": "What develops into the visceral pleura?",
        "answer": "<li>The mesoderm covering the outside of the lung develops into the visceral pleura.</li>",
        "memoryTip": "The mesoderm is like a cozy blanket wrapping the lungs in a pleural hug!",
        "emoji": "🛌"
    },
    {
        "id": 152,
        "topic": "topic24",
        "question": "What forms the parietal pleura?",
        "answer": "<li>The somatic mesoderm lining the body wall forms the parietal pleura.</li>",
        "memoryTip": "The somatic mesoderm is like the wall's wallpaper, giving the lungs a nice room to breathe!",
        "emoji": "🏠"
    },
    {
        "id": 153,
        "topic": "topic24",
        "question": "How many generations of subdivisions form by the end of six months?",
        "answer": "<li>Approximately 17 generations of subdivisions have formed by the end of six months.</li>",
        "memoryTip": "The lungs are like a family tree, branching out with 17 generations by six months!",
        "emoji": "🌳"
    },
    {
        "id": 154,
        "topic": "topic24",
        "question": "How many additional divisions form during postnatal life?",
        "answer": "<li>An additional 6 divisions form during postnatal life.</li>",
        "memoryTip": "After birth, the lungs keep growing like a plant that just won't stop sprouting!",
        "emoji": "🌱"
    },
    {
        "id": 155,
        "topic": "topic24",
        "question": "How many stages is lung development divided into?",
        "answer": "<li>Lung development is divided into 5 stages.</li>",
        "memoryTip": "The lung development process is like a five-act play, each act revealing more about the lungs!",
        "emoji": "🎭"
    },
    {
        "id": 156,
        "topic": "topic24",
        "question": "What are the stages of lung development?",
        "answer": "<li>The stages are: Embryonic, Pseudoglandular, Canalicular, Saccular, and Alveolar.</li>",
        "memoryTip": "Think of lung development as a journey through five exciting stages, like a lung amusement park!",
        "emoji": "🎢"
    },
    {
        "id": 157,
        "topic": "topic24",
        "question": "What occurs during the embryonic stage of lung development?",
        "answer": "<li>The embryonic stage lasts from 26 days to 6 weeks, until the formation of bronchopulmonary segments.</li>",
        "memoryTip": "The embryonic stage is like the foundation of a house, setting up the future lung structure!",
        "emoji": "🏗️"
    },
    {
        "id": 158,
        "topic": "topic24",
        "question": "What happens during the pseudoglandular stage?",
        "answer": "<li>The pseudoglandular stage lasts from 6 to 16 weeks, until the formation of terminal bronchioles.</li>",
        "memoryTip": "The pseudoglandular stage is like a factory producing bronchioles, getting ready for the big show!",
        "emoji": "🏭"
    },
    {
        "id": 159,
        "topic": "topic24",
        "question": "What occurs during the canalicular stage?",
        "answer": "<li>The canalicular stage lasts from 16 to 28 weeks, when respiratory bronchioles and respiratory vasculature begin to appear.</li>",
        "memoryTip": "The canalicular stage is like the lungs getting their first set of roads and highways!",
        "emoji": "🛣️"
    },
    {
        "id": 160,
        "topic": "topic24",
        "question": "What happens during the saccular stage?",
        "answer": "<li>The saccular stage lasts from 28 to 36 weeks, when terminal sacs form.</li>",
        "memoryTip": "The saccular stage is like the lungs inflating their balloons for the first time!",
        "emoji": "🎈"
    },
    {
        "id": 161,
        "topic": "topic24",
        "question": "What occurs during the alveolar stage?",
        "answer": "<li>The alveolar stage lasts from 36 weeks to term, when mature alveoli form.</li>",
        "memoryTip": "The alveolar stage is the grand finale, where the lungs finally get their cozy alveoli!",
        "emoji": "🎆"
    },
    {
        "id": 162,
        "topic": "topic24",
        "question": "When do primitive alveoli type two alveolar cells develop?",
        "answer": "<li>They develop in the 6th month.</li>",
        "memoryTip": "The primitive alveoli are like the first guests arriving at the lung party!",
        "emoji": "🎉"
    },
    {
        "id": 163,
        "topic": "topic24",
        "question": "How many alveoli are present at birth compared to adulthood?",
        "answer": "<li>Only one sixth of the adult number of alveoli are present at birth; the remaining are formed in childhood.</li>",
        "memoryTip": "At birth, the lungs are like a starter pack of alveoli, with the full set coming later!",
        "emoji": "🎁"
    },
    {
        "id": 164,
        "topic": "topic25",
        "question": "What is the artery of the foregut?",
        "answer": "<li>The artery of the foregut is the coeliac trunk.</li>",
        "memoryTip": "The coeliac trunk is like the main highway for all things foregut!",
        "emoji": "🛣️"
    },
    {
        "id": 165,
        "topic": "topic25",
        "question": "What is the artery of the midgut?",
        "answer": "<li>The artery of the midgut is the superior mesenteric artery.</li>",
        "memoryTip": "The superior mesenteric artery is the VIP route for midgut traffic!",
        "emoji": "🚦"
    },
    {
        "id": 166,
        "topic": "topic25",
        "question": "What is the artery of the hindgut?",
        "answer": "<li>The artery of the hindgut is the inferior mesenteric artery.</li>",
        "memoryTip": "The inferior mesenteric artery is the last stop on the digestive highway!",
        "emoji": "🛑"
    },
    {
        "id": 167,
        "topic": "topic25",
        "question": "What are the derivatives of the foregut?",
        "answer": "<li>The derivatives of the foregut include the part of the floor of the mouth, pharynx, thyroid, oesophagus, stomach, duodenum (up to the major duodenal papilla), liver, extra-hepatic biliary system, pancreas, and respiratory system.</li>",
        "memoryTip": "The foregut is like a buffet, serving a variety of delicious organs!",
        "emoji": "🍽️"
    },
    {
        "id": 168,
        "topic": "topic25",
        "question": "What are the derivatives of the midgut?",
        "answer": "<li>The derivatives of the midgut include the duodenum (part distal to major papilla), jejunum, ileum, caecum, appendix, ascending colon, and right two-thirds of the transverse colon.</li>",
        "memoryTip": "The midgut is the main course, with all the good stuff for digestion!",
        "emoji": "🍝"
    },
    {
        "id": 169,
        "topic": "topic25",
        "question": "What are the derivatives of the hindgut?",
        "answer": "<li>The derivatives of the hindgut include the left one-third of the transverse colon, descending colon, sigmoid colon, rectum, upper part of the anal canal, and parts of the urogenital system derived from the primitive urogenital sinus.</li>",
        "memoryTip": "The hindgut is the cleanup crew, making sure everything is sorted out at the end!",
        "emoji": "🧹"
    },
    {
        "id": 170,
        "topic": "topic26",
        "question": "What structures are formed from the dorsal mesogastrium?",
        "answer": "<li>Greater Omentum, Gastrosplenic ligament, Gastrophrenic ligament, and LienoRenal ligament.</li>",
        "memoryTip": "Think of the dorsal mesogastrium as the \"greater\" party planner, organizing all the big ligaments!",
        "emoji": "🎉"
    },
    {
        "id": 171,
        "topic": "topic26",
        "question": "What structures are formed from the ventral mesogastrium?",
        "answer": "<li>Lesser Omentum, Falciform ligament, Coronary ligament, and right and left Triangular ligaments.</li>",
        "memoryTip": "The ventral mesogastrium is like a \"lesser\" party planner, but still has some fancy ligaments on the guest list!",
        "emoji": "🎈"
    },
    {
        "id": 172,
        "topic": "topic27",
        "question": "What structures are formed from the mesonephric duct in males?",
        "answer": "<li>Posterior wall of Prostatic Urethra, Ureteric buds forming ureter, Pelves, Calyces, Collecting duct, Trigone of bladder, Appendix of epididymis, Ductus deferens, Epididymis, Ejaculatory ducts, Prostate, and Seminal Vesicles.</li>",
        "memoryTip": "The mesonephric duct in males is like a plumbing system, connecting all the important parts for a smooth operation!",
        "emoji": "🚰"
    },
    {
        "id": 173,
        "topic": "topic27",
        "question": "What are the remnants of the mesonephric duct in males?",
        "answer": "<li>None.</li>",
        "memoryTip": "No remnants means it's a clean slate—like a freshly washed car!",
        "emoji": "🚗"
    },
    {
        "id": 174,
        "topic": "topic28",
        "question": "What structures are formed from the mesonephric duct in females?",
        "answer": "<li>Superior aberrant tubule, Inferior aberrant tubule, and Paradidymis.</li>",
        "memoryTip": "In females, the mesonephric duct is like a \"superior\" backup plan, just in case!",
        "emoji": "🛡️"
    },
    {
        "id": 175,
        "topic": "topic28",
        "question": "What are the remnants of the mesonephric duct in females?",
        "answer": "<li>Paroophoron and Epoophoron/Gartner's duct.</li>",
        "memoryTip": "Remnants in females are like old toys in the attic—still there but not really in use!",
        "emoji": "🧸"
    },
    {
        "id": 176,
        "topic": "topic29",
        "question": "What structures are formed from the paramesonephric duct in females?",
        "answer": "<li>Uterus, Uterine tubes, and part of the Vagina.</li>",
        "memoryTip": "The paramesonephric duct is like the ultimate home builder for the female reproductive system!",
        "emoji": "🏠"
    },
    {
        "id": 177,
        "topic": "topic29",
        "question": "What are the remnants of the paramesonephric duct in males?",
        "answer": "<li>Appendix of testes and Prostatic Utricle.</li>",
        "memoryTip": "Male remnants are like the leftover pieces of a puzzle—still there but not part of the main picture!",
        "emoji": "🧩"
    },
    {
        "id": 178,
        "topic": "topic30",
        "question": "At what week does the primary intestinal loop begin to rotate?",
        "answer": "<li>At the 8th week.</li>",
        "memoryTip": "The 8th week is when the intestines start their dance—just don’t forget to rotate counterclockwise!",
        "emoji": "🔄"
    },
    {
        "id": 179,
        "topic": "topic30",
        "question": "How much does the primary intestinal loop rotate?",
        "answer": "<li>Approximately 270°.</li>",
        "memoryTip": "A 270° rotation is like a roller coaster ride—just enough twist to keep it exciting!",
        "emoji": "🎢"
    },
    {
        "id": 180,
        "topic": "topic31",
        "question": "What structures contribute to the formation of the diaphragm?",
        "answer": "<li>Septum transversum, Pleuro-peritoneal membranes, Ventral and dorsal mesenteries of the esophagus, and mesoderm of the body wall.</li>",
        "memoryTip": "The diaphragm is like a team effort, with all parts working together to keep the breath of life flowing!",
        "emoji": "🤝"
    },
    {
        "id": 181,
        "topic": "topic32",
        "question": "From which bud does the uncinate process and inferior part of the head of the pancreas develop?",
        "answer": "<li>From the ventral bud.</li>",
        "memoryTip": "The ventral bud is like the chef cooking up the uncinate process—always stirring things up!",
        "emoji": "👨‍🍳"
    },
    {
        "id": 182,
        "topic": "topic32",
        "question": "From which bud does the remaining part of the pancreas develop?",
        "answer": "<li>From the dorsal bud.</li>",
        "memoryTip": "The dorsal bud is the quiet one in the kitchen, but it still makes a big impact on the pancreas!",
        "emoji": "🍽️"
    },
    {
        "id": 183,
        "topic": "topic32",
        "question": "What is the main pancreatic duct also known as?",
        "answer": "<li>The duct of Wirsung.</li>",
        "memoryTip": "Think of Wirsung as the \"main street\" of the pancreas, where all the important traffic flows!",
        "emoji": "🛣️"
    },
    {
        "id": 184,
        "topic": "topic32",
        "question": "What happens to the proximal part of the dorsal pancreatic duct?",
        "answer": "<li>It either is obliterated or persists as the accessory pancreatic duct (of Santorini).</li>",
        "memoryTip": "The accessory duct is like the sidekick in a superhero movie—sometimes it steals the show!",
        "emoji": "🦸‍♂️"
    },
    {
        "id": 185,
        "topic": "topic33",
        "question": "What does Meckel's diverticulum represent?",
        "answer": "<li>The persistent proximal part of the vitelline duct.</li>",
        "memoryTip": "Meckel's diverticulum is like a stubborn souvenir that just won't leave the party!",
        "emoji": "🎁"
    },
    {
        "id": 186,
        "topic": "topic33",
        "question": "How common is Meckel's diverticulum in the population?",
        "answer": "<li>It is present in 2% of the population.</li>",
        "memoryTip": "Just like finding a rare Pokémon, Meckel's diverticulum is a rare find in the human body!",
        "emoji": "🎮"
    },
    {
        "id": 187,
        "topic": "topic33",
        "question": "Where is Meckel's diverticulum typically located?",
        "answer": "<li>On the anti-mesenteric border, usually 2 inches long and 2 feet from the ileo-caecal valve.</li>",
        "memoryTip": "Think of Meckel's diverticulum as the \"hidden treasure\" of the intestines, tucked away just out of sight!",
        "emoji": "🗺️"
    },
    {
        "id": 188,
        "topic": "topic33",
        "question": "What are the characteristics of Meckel's diverticulum?",
        "answer": "<li>It has all three coats of the intestinal wall and its own blood supply.</li>",
        "memoryTip": "Meckel's diverticulum is like a mini-intestine with its own VIP access!",
        "emoji": "🎟️"
    },
    {
        "id": 189,
        "topic": "topic34",
        "question": "From which mesoderm does the urogenital system arise?",
        "answer": "<li>From intermediate mesoderm.</li>",
        "memoryTip": "The intermediate mesoderm is like the middle child, often overlooked but crucial for the urogenital system!",
        "emoji": "👶"
    },
    {
        "id": 190,
        "topic": "topic34",
        "question": "What is the main genital duct of males?",
        "answer": "<li>The mesonephric duct/Wolffian duct.</li>",
        "memoryTip": "The Wolffian duct is like the main highway for male reproductive structures—always busy!",
        "emoji": "🛣️"
    },
    {
        "id": 191,
        "topic": "topic34",
        "question": "What is the main genital duct of females?",
        "answer": "<li>The para-mesonephric duct/Mullerian duct.</li>",
        "memoryTip": "The Mullerian duct is like the scenic route for female reproductive structures—beautiful and essential!",
        "emoji": "🌄"
    },
    {
        "id": 192,
        "topic": "topic34",
        "question": "When do germ cells appear in the genital ridges?",
        "answer": "<li>At the 6th week.</li>",
        "memoryTip": "The 6th week is when germ cells start their journey—like little explorers setting out on an adventure!",
        "emoji": "🧭"
    },
    {
        "id": 193,
        "topic": "topic35",
        "question": "What structure does the gonadal/genital ridge develop into in males?",
        "answer": "<li>Testis</li>",
        "memoryTip": "Think of a testy guy who just can't wait to be a testis!",
        "emoji": "🧪"
    },
    {
        "id": 194,
        "topic": "topic35",
        "question": "What structure does the gonadal/genital ridge develop into in females?",
        "answer": "<li>Ovary</li>",
        "memoryTip": "An ovary is like a treasure chest, full of eggs waiting to be discovered!",
        "emoji": "🥚"
    },
    {
        "id": 195,
        "topic": "topic35",
        "question": "What does the cortex of the testis develop into?",
        "answer": "<li>Seminiferous tubules</li>",
        "memoryTip": "Seminiferous tubules are like tiny tubes of toothpaste, squeezing out sperm!",
        "emoji": "🧴"
    },
    {
        "id": 196,
        "topic": "topic35",
        "question": "What does the cortex of the ovary develop into?",
        "answer": "<li>Ovarian follicles</li>",
        "memoryTip": "Ovarian follicles are like little eggs in a basket, waiting to hatch!",
        "emoji": "🥚"
    },
    {
        "id": 197,
        "topic": "topic35",
        "question": "What does the medulla of the testis develop into?",
        "answer": "<li>Rete testes</li>",
        "memoryTip": "Rete testes are like a network of roads for sperm to travel!",
        "emoji": "🛣️"
    },
    {
        "id": 198,
        "topic": "topic35",
        "question": "What does the medulla of the ovary develop into?",
        "answer": "<li>Rete ovarii</li>",
        "memoryTip": "Rete ovarii is like a secret passage for eggs to escape!",
        "emoji": "🗝️"
    },
    {
        "id": 199,
        "topic": "topic35",
        "question": "What does the gubernacular cord develop into in males?",
        "answer": "<li>Gubernaculum testis and spermatic cord</li>",
        "memoryTip": "The spermatic cord is like a delivery truck for sperm, always on the move!",
        "emoji": "🚚"
    },
    {
        "id": 200,
        "topic": "topic35",
        "question": "What does the gubernacular cord develop into in females?",
        "answer": "<li>Proximal: Ovarian ligament; Distal: Round ligament of uterus</li>",
        "memoryTip": "The round ligament is like a hula hoop, keeping everything in place!",
        "emoji": "🏐"
    },
    {
        "id": 201,
        "topic": "topic35",
        "question": "What do primitive sex cells develop into in males?",
        "answer": "<li>Sperm</li>",
        "memoryTip": "Sperm are like tiny swimmers, racing to the finish line!",
        "emoji": "🏊"
    },
    {
        "id": 202,
        "topic": "topic35",
        "question": "What do primitive sex cells develop into in females?",
        "answer": "<li>Egg</li>",
        "memoryTip": "Eggs are like the VIPs of reproduction, waiting for their moment to shine!",
        "emoji": "🌟"
    },
    {
        "id": 203,
        "topic": "topic35",
        "question": "What does the Mullerian tubercle develop into in males?",
        "answer": "<li>Seminal colliculus</li>",
        "memoryTip": "The seminal colliculus is like a traffic cop for sperm, directing them where to go!",
        "emoji": "🚦"
    },
    {
        "id": 204,
        "topic": "topic35",
        "question": "What does the Mullerian tubercle develop into in females?",
        "answer": "<li>Hymen</li>",
        "memoryTip": "The hymen is like a ribbon on a gift, marking a special occasion!",
        "emoji": "🎀"
    },
    {
        "id": 205,
        "topic": "topic35",
        "question": "What does the genital tubercle develop into in males?",
        "answer": "<li>Phallus (penis), glans penis, urethra in glans</li>",
        "memoryTip": "The phallus is like a flagpole, standing tall and proud!",
        "emoji": "🚩"
    },
    {
        "id": 206,
        "topic": "topic35",
        "question": "What does the genital tubercle develop into in females?",
        "answer": "<li>Clitoris</li>",
        "memoryTip": "The clitoris is like a hidden treasure, often overlooked but oh-so-important!",
        "emoji": "💎"
    },
    {
        "id": 207,
        "topic": "topic35",
        "question": "What do genital swellings develop into in males?",
        "answer": "<li>Scrotum</li>",
        "memoryTip": "The scrotum is like a protective pouch for the jewels inside!",
        "emoji": "👑"
    },
    {
        "id": 208,
        "topic": "topic35",
        "question": "What do genital swellings develop into in females?",
        "answer": "<li>Labia majora</li>",
        "memoryTip": "Labia majora are like the curtains of a theater, framing the main event!",
        "emoji": "🎭"
    },
    {
        "id": 209,
        "topic": "topic35",
        "question": "What do urethral/genital folds develop into in males?",
        "answer": "<li>Floor of urethral plate (ventral penis)</li>",
        "memoryTip": "The floor of the urethral plate is like the foundation of a house, supporting everything above!",
        "emoji": "🏠"
    },
    {
        "id": 210,
        "topic": "topic35",
        "question": "What do urethral/genital folds develop into in females?",
        "answer": "<li>Labia minora</li>",
        "memoryTip": "Labia minora are like the delicate lace on a fancy dress, adding elegance!",
        "emoji": "👗"
    },
    {
        "id": 211,
        "topic": "topic35",
        "question": "What does the mesonephros (Wolffian body) develop into in males?",
        "answer": "<li>Appendix of epididymis, efferent ductules, lobules of epididymis, paradidymis, aberrant ductules</li>",
        "memoryTip": "The mesonephros is like a Swiss Army knife, full of useful tools for sperm!",
        "emoji": "🛠️"
    },
    {
        "id": 212,
        "topic": "topic35",
        "question": "What does the mesonephros (Wolffian body) develop into in females?",
        "answer": "<li>Appendices vesiculosae, epoophoron tubules, paroophoron tubules</li>",
        "memoryTip": "The epoophoron is like a forgotten attic, full of old treasures!",
        "emoji": "🏚️"
    },
    {
        "id": 213,
        "topic": "topic35",
        "question": "What does the mesonephric duct (Wolffian duct) develop into in males?",
        "answer": "<li>Duct of epididymis, vas deferens, ejaculatory duct, part of bladder and prostatic urethra</li>",
        "memoryTip": "The vas deferens is like a highway for sperm, speeding them to their destination!",
        "emoji": "🛣️"
    },
    {
        "id": 214,
        "topic": "topic35",
        "question": "What does the mesonephric duct (Wolffian duct) develop into in females?",
        "answer": "<li>Duct of Epoophoron (Gartner's duct), part of bladder and urethra</li>",
        "memoryTip": "Gartner's duct is like a forgotten side street, still hanging around!",
        "emoji": "🛤️"
    },
    {
        "id": 215,
        "topic": "topic35",
        "question": "What does the paramesonephric (Mullerian) duct develop into in males?",
        "answer": "<li>Appendix of testis, prostatic utricle</li>",
        "memoryTip": "The appendix of testis is like a leftover from a meal, just hanging around!",
        "emoji": "🍽️"
    },
    {
        "id": 216,
        "topic": "topic35",
        "question": "What does the paramesonephric (Mullerian) duct develop into in females?",
        "answer": "<li>Uterine tube, uterus, vagina</li>",
        "memoryTip": "The uterus is like a cozy home for a future baby, complete with a nursery!",
        "emoji": "🏡"
    },
    {
        "id": 217,
        "topic": "topic35",
        "question": "What does the allantoic duct develop into in both sexes?",
        "answer": "<li>Urachus</li>",
        "memoryTip": "The urachus is like a forgotten water slide, once fun but now just a memory!",
        "emoji": "💧"
    },
    {
        "id": 218,
        "topic": "topic35",
        "question": "What does the cloaca develop into in males?",
        "answer": "<li>None</li>",
        "memoryTip": "Sometimes, nothing is just as important as something!",
        "emoji": "🚫"
    },
    {
        "id": 219,
        "topic": "topic35",
        "question": "What does the cloaca develop into in females?",
        "answer": "<li>None</li>",
        "memoryTip": "No cloaca means no mess, just a clean slate!",
        "emoji": "🧼"
    },
    {
        "id": 220,
        "topic": "topic35",
        "question": "What does the dorsal part of the cloaca develop into in both sexes?",
        "answer": "<li>Rectum and upper part of anal canal</li>",
        "memoryTip": "The rectum is like the final stop on the digestive train, no more stops after this!",
        "emoji": "🚂"
    },
    {
        "id": 221,
        "topic": "topic35",
        "question": "What does the ventral part of the cloaca develop into in males?",
        "answer": "<li>Most of bladder, part of prostatic urethra</li>",
        "memoryTip": "The bladder is like a water balloon, ready to burst at any moment!",
        "emoji": "🎈"
    },
    {
        "id": 222,
        "topic": "topic35",
        "question": "What does the ventral part of the cloaca develop into in females?",
        "answer": "<li>Most of bladder and the urethra</li>",
        "memoryTip": "The female bladder is like a well-stocked pond, always ready for a swim!",
        "emoji": "🏊‍♀️"
    },
    {
        "id": 223,
        "topic": "topic35",
        "question": "What does the urogenital sinus develop into in males?",
        "answer": "<li>Prostatic urethra distal to utricle, bulbo-urethral glands, rest of urethra to glans</li>",
        "memoryTip": "The bulbo-urethral glands are like the oil change for the urethra, keeping things running smoothly!",
        "emoji": "🔧"
    },
    {
        "id": 224,
        "topic": "topic35",
        "question": "What does the urogenital sinus develop into in females?",
        "answer": "<li>Greater vestibular glands, vestibule, lower 1/3rd of vagina</li>",
        "memoryTip": "The vestibule is like the welcome mat to the vagina, inviting all who enter!",
        "emoji": "🚪"
    },
    {
        "id": 225,
        "topic": "topic36",
        "question": "From what does the excretory tubules (all parts of nephron) arise?",
        "answer": "<li>Metanephros</li>",
        "memoryTip": "Metanephros is like the grandparent of the nephron, passing down the family traits!",
        "emoji": "👵"
    },
    {
        "id": 226,
        "topic": "topic36",
        "question": "From what does the collecting part (pelves, calyces, ureter) arise?",
        "answer": "<li>Ureteric bud (Mesonephros)</li>",
        "memoryTip": "The ureteric bud is like a budding flower, growing into something beautiful!",
        "emoji": "🌸"
    },
    {
        "id": 227,
        "topic": "topic37",
        "question": "What is the dual origin of the vagina?",
        "answer": "<li>The upper portion is derived from the uterine canal, and the lower portion is derived from the urogenital sinus (sinovaginal bulb/vaginal plate).</li>",
        "memoryTip": "The vagina is like a sandwich, with two different layers coming together for a tasty treat!",
        "emoji": "🥪"
    },
    {
        "id": 228,
        "topic": "topic37",
        "question": "What is the dual origin of the kidney?",
        "answer": "<li>Excretory tubules arise from metanephros; collecting part arises from ureteric bud (mesonephros).</li>",
        "memoryTip": "The kidney is like a two-part puzzle, fitting together perfectly!",
        "emoji": "🧩"
    },
    {
        "id": 229,
        "topic": "topic37",
        "question": "What are Gartner's duct cysts?",
        "answer": "<li>They are the most common dysontogenic cysts of the vagina, arising from the remnant of the Wolffian duct (mesonephros).</li>",
        "memoryTip": "Gartner's duct cysts are like the ghosts of ducts past, haunting the vagina!",
        "emoji": "👻"
    },
    {
        "id": 230,
        "topic": "topic37",
        "question": "What happens to the mesonephric ducts in the female fetus?",
        "answer": "<li>Degeneration is progressive from 10 to 16 weeks, although vestigial remnants may be noted in adults.</li>",
        "memoryTip": "The mesonephric ducts are like old toys, slowly fading away but still leaving a mark!",
        "emoji": "🧸"
    },
    {
        "id": 231,
        "topic": "topic37",
        "question": "What remnants may the female retain from the cranial and caudal excretory tubules in the mesovarium?",
        "answer": "<li>They form the epoophoron and paroophoron, respectively.</li>",
        "memoryTip": "The epoophoron and paroophoron are like the forgotten cousins of the reproductive system!",
        "emoji": "👨‍👩‍👧‍👦"
    },
    {
        "id": 232,
        "topic": "topic38",
        "question": "What structure divides the cloaca into the posterior anorectal canal and the anterior primitive urogenital sinus?",
        "answer": "<li>The urorectal septum divides the cloaca.</li>",
        "memoryTip": "Think of the urorectal septum as a traffic cop, directing waste to one lane and urogenital traffic to another!",
        "emoji": "🚦"
    },
    {
        "id": 233,
        "topic": "topic38",
        "question": "What forms most of the bladder during development?",
        "answer": "<li>The cranial and largest part of the urogenital sinus, known as the vesicourethral canal, forms most of the bladder.</li>",
        "memoryTip": "The vesicourethral canal is like the VIP section of the bladder party—it's where all the action happens!",
        "emoji": "🎉"
    },
    {
        "id": 234,
        "topic": "topic38",
        "question": "When do the mesonephric ducts open into the urogenital sinus during development?",
        "answer": "<li>The mesonephric ducts open into the urogenital sinus early in development.</li>",
        "memoryTip": "Think of the mesonephric ducts as early birds that get the worm—opening up before the rest!",
        "emoji": "🐦"
    },
    {
        "id": 235,
        "topic": "topic38",
        "question": "How do the ureters develop?",
        "answer": "<li>The ureters develop as branches of the mesonephric ducts.</li>",
        "memoryTip": "The ureters are like branches on a tree, growing out from the sturdy trunk of the mesonephric ducts!",
        "emoji": "🌳"
    },
    {
        "id": 236,
        "topic": "topic38",
        "question": "What does the remainder of the vesicourethral canal form?",
        "answer": "<li>The remainder of the vesicourethral canal forms the urethra.</li>",
        "memoryTip": "The urethra is the final stretch of the bladder's journey—like the last leg of a relay race!",
        "emoji": "🏃‍♂️"
    },
    {
        "id": 237,
        "topic": "topic38",
        "question": "What is the origin of the trigone in the bladder?",
        "answer": "<li>The trigone is formed by the absorption of mesonephric ducts and is mesodermal in origin.</li>",
        "memoryTip": "The trigone is like a sponge soaking up the mesonephric ducts—no water left behind!",
        "emoji": "🧽"
    },
    {
        "id": 238,
        "topic": "topic38",
        "question": "At what gestational age can the fetal bladder be identified by ultrasound?",
        "answer": "<li>The fetal bladder can be identified by ultrasound at 9-11 weeks.</li>",
        "memoryTip": "The fetal bladder is like a shy kid at a party—only showing up when it’s 9-11 weeks old!",
        "emoji": "👶"
    },
    {
        "id": 239,
        "topic": "topic38",
        "question": "What is considered abnormal regarding the fetal bladder at 13 weeks or later?",
        "answer": "<li>The absence of a bladder image is considered abnormal at 13 weeks or later.</li>",
        "memoryTip": "No bladder at 13 weeks? That’s like showing up to a potluck empty-handed—definitely a red flag!",
        "emoji": "🚩"
    },
    {
        "id": 240,
        "topic": "topic38",
        "question": "What forms the anterior wall of the prostatic urethra in males?",
        "answer": "<li>The anterior wall of the prostatic urethra is formed by the vesicourethral canal, which is derived from endoderm.</li>",
        "memoryTip": "The anterior wall is like the front door of a house—built from the sturdy endoderm!",
        "emoji": "🚪"
    },
    {
        "id": 241,
        "topic": "topic38",
        "question": "What forms the posterior wall of the prostatic urethra in males?",
        "answer": "<li>The posterior wall is formed by absorbed portions of the mesonephric duct, which is mesodermal.</li>",
        "memoryTip": "The posterior wall is like a secret passageway—built from the remnants of the mesonephric duct!",
        "emoji": "🕵️‍♂️"
    },
    {
        "id": 242,
        "topic": "topic38",
        "question": "What does the definitive urogenital sinus form in males?",
        "answer": "<li>The definitive urogenital sinus forms the lower part of the prostatic urethra and the membranous urethra.</li>",
        "memoryTip": "The definitive urogenital sinus is like the architect of the urethra, designing the lower parts with precision!",
        "emoji": "🏗️"
    },
    {
        "id": 243,
        "topic": "topic38",
        "question": "What forms most of the penile urethra?",
        "answer": "<li>The urethral plate forms most of the penile urethra.</li>",
        "memoryTip": "The urethral plate is like the foundation of a house—essential for a solid structure!",
        "emoji": "🏠"
    },
    {
        "id": 244,
        "topic": "topic39",
        "question": "What are pharyngeal arches?",
        "answer": "<li>Pharyngeal arches are rod-like thickenings of mesoderm present in the wall of the foregut.</li>",
        "memoryTip": "Think of pharyngeal arches as the building blocks of the throat—stacked up and ready to go!",
        "emoji": "🏗️"
    },
    {
        "id": 245,
        "topic": "topic39",
        "question": "What forms in the interval between any two pharyngeal arches?",
        "answer": "<li>The endoderm is pushed outwards to form endodermal or pharyngeal pouches.</li>",
        "memoryTip": "The endoderm is like a balloon being inflated between arches—pushing out to create pouches!",
        "emoji": "🎈"
    },
    {
        "id": 246,
        "topic": "topic39",
        "question": "What happens opposite each pharyngeal pouch?",
        "answer": "<li>The surface ectoderm dips inwards to form an ectodermal cleft.</li>",
        "memoryTip": "The ectodermal cleft is like a dip in a dance floor—making room for some serious moves!",
        "emoji": "💃"
    },
    {
        "id": 247,
        "topic": "topic39",
        "question": "What is the mesodermal fate of the first pharyngeal arch?",
        "answer": "<li>The first arch gives rise to the malleus, incus, mylohyoid, and muscles of mastication.</li>",
        "memoryTip": "The first arch is like a band—playing the malleus and incus while the mylohyoid keeps the beat!",
        "emoji": "🎶"
    },
    {
        "id": 248,
        "topic": "topic39",
        "question": "What nerve is associated with the first pharyngeal arch?",
        "answer": "<li>The mandibular nerve is associated with the first pharyngeal arch.</li>",
        "memoryTip": "The mandibular nerve is like the conductor of the arch band—keeping everything in sync!",
        "emoji": "🎻"
    },
    {
        "id": 249,
        "topic": "topic39",
        "question": "What skeletal components are associated with the second pharyngeal arch?",
        "answer": "<li>The second arch is associated with the stapes, styloid process, stylohyoid ligament, smaller cornu of hyoid, and the superior part of the body of hyoid.</li>",
        "memoryTip": "The second arch is like a fancy chandelier—hanging with the stapes and styloid process!",
        "emoji": "💎"
    },
    {
        "id": 250,
        "topic": "topic39",
        "question": "What muscles are derived from the second pharyngeal arch?",
        "answer": "<li>The muscles derived from the second arch include stapedius, stylohyoid, posterior belly of digastric, and muscles of facial expression.</li>",
        "memoryTip": "The second arch muscles are like a facial expression team—always ready to put on a show!",
        "emoji": "🎭"
    },
    {
        "id": 251,
        "topic": "topic39",
        "question": "What is the skeletal component of the third pharyngeal arch?",
        "answer": "<li>The third arch is associated with the greater cornu of the hyoid and the lower part of the body of the hyoid.</li>",
        "memoryTip": "The third arch is like a hyoid support group—lifting the greater cornu and lower body together!",
        "emoji": "🏋️‍♂️"
    },
    {
        "id": 252,
        "topic": "topic39",
        "question": "What muscle is derived from the third pharyngeal arch?",
        "answer": "<li>The stylopharyngeus muscle is derived from the third pharyngeal arch.</li>",
        "memoryTip": "The stylopharyngeus is like the stylist of the throat—always ready to make things look good!",
        "emoji": "✂️"
    },
    {
        "id": 253,
        "topic": "topic39",
        "question": "What nerve is associated with the fourth pharyngeal arch?",
        "answer": "<li>The superior laryngeal nerve (from the vagus nerve) is associated with the fourth pharyngeal arch.</li>",
        "memoryTip": "The superior laryngeal nerve is like the VIP pass for the larynx—ensuring it gets the best treatment!",
        "emoji": "🎟️"
    },
    {
        "id": 254,
        "topic": "topic39",
        "question": "What skeletal components are associated with the fourth pharyngeal arch?",
        "answer": "<li>The fourth arch is associated with the cartilage of the larynx and the hyoid.</li>",
        "memoryTip": "The fourth arch is like a laryngeal construction site—building the cartilage and hyoid!",
        "emoji": "🏗️"
    },
    {
        "id": 255,
        "topic": "topic39",
        "question": "What muscles are derived from the fourth pharyngeal arch?",
        "answer": "<li>The muscles derived from the fourth arch include the constrictors of the pharynx, cricothyroid, and levator palatine.</li>",
        "memoryTip": "The fourth arch muscles are like a pharyngeal choir—singing in harmony to constrict and elevate!",
        "emoji": "🎤"
    },
    {
        "id": 256,
        "topic": "topic39",
        "question": "What is the fate of the sixth pharyngeal arch?",
        "answer": "<li>The sixth arch gives rise to the intrinsic muscles of the larynx.</li>",
        "memoryTip": "The sixth arch is like the laryngeal orchestra—playing all the right notes for voice production!",
        "emoji": "🎼"
    },
    {
        "id": 257,
        "topic": "topic39",
        "question": "What happens to the fifth pharyngeal arch?",
        "answer": "<li>The fifth pharyngeal arch disappears.</li>",
        "memoryTip": "The fifth arch is like a magician—now you see it, now you don’t!",
        "emoji": "🎩"
    },
    {
        "id": 258,
        "topic": "topic39",
        "question": "Which nerve supplies the muscles derived from the first pharyngeal arch?",
        "answer": "<li>The mandibular nerve supplies the muscles derived from the first pharyngeal arch.</li>",
        "memoryTip": "The mandibular nerve is like the delivery guy—bringing supplies to the first arch muscles!",
        "emoji": "📦"
    },
    {
        "id": 259,
        "topic": "topic39",
        "question": "What do the maxillary and mandibular divisions supply?",
        "answer": "<li>The maxillary and mandibular divisions supply sensory nerves to the skin of the face.</li>",
        "memoryTip": "The maxillary and mandibular divisions are like the face's GPS—always knowing where to send the sensory signals!",
        "emoji": "🗺️"
    },
    {
        "id": 260,
        "topic": "topic40",
        "question": "What is the fate of the ventral part of the 1st pouch?",
        "answer": "<li>It is obliterated by the formation of the tongue.</li>",
        "memoryTip": "The tongue is like a magician, making the ventral part disappear!",
        "emoji": "🎩"
    },
    {
        "id": 261,
        "topic": "topic40",
        "question": "What structures are formed from the dorsal part of the 1st pouch?",
        "answer": "<li>It, together with the dorsal part of the 2nd pouch, forms the tubotympanic recess.</li>",
        "memoryTip": "Think of the dorsal parts as a duo forming a recess for a musical jam session!",
        "emoji": "🎶"
    },
    {
        "id": 262,
        "topic": "topic40",
        "question": "What does the proximal part of the 1st pouch develop into?",
        "answer": "<li>The Eustachian tube.</li>",
        "memoryTip": "The Eustachian tube is like a tube slide for sound waves!",
        "emoji": "🎢"
    },
    {
        "id": 263,
        "topic": "topic40",
        "question": "What does the distal part of the 1st pouch develop into?",
        "answer": "<li>The middle ear cavity and tympanic antrum.</li>",
        "memoryTip": "The middle ear is where all the sound waves hang out before the big concert!",
        "emoji": "🎤"
    },
    {
        "id": 264,
        "topic": "topic40",
        "question": "What is formed from the ventral part of the 2nd pouch?",
        "answer": "<li>The tonsil.</li>",
        "memoryTip": "Tonsils are like the bouncers of the throat, keeping out unwanted guests!",
        "emoji": "🚷"
    },
    {
        "id": 265,
        "topic": "topic40",
        "question": "What does the dorsal part of the 2nd pouch contribute to?",
        "answer": "<li>The formation of the tubotympanic recess.</li>",
        "memoryTip": "The dorsal part is like a construction worker building a soundproof room!",
        "emoji": "🏗️"
    },
    {
        "id": 266,
        "topic": "topic40",
        "question": "What structures arise from the 3rd pouch?",
        "answer": "<li>The thymus and inferior parathyroid glands.</li>",
        "memoryTip": "The thymus is like a training camp for T-cells, while the parathyroids are the calcium regulators!",
        "emoji": "🏋️"
    },
    {
        "id": 267,
        "topic": "topic40",
        "question": "What does the 4th pouch develop into?",
        "answer": "<li>The thyroid (from the thyro-glossal duct) and superior parathyroid glands.</li>",
        "memoryTip": "The thyroid is like the body's thermostat, keeping everything in check!",
        "emoji": "🌡️"
    },
    {
        "id": 268,
        "topic": "topic40",
        "question": "What is formed from the 5th pouch?",
        "answer": "<li>The para-follicular (C-cells) of the thyroid from the ultimo-bronchial body.</li>",
        "memoryTip": "C-cells are like the thyroid's secret agents, regulating calcium levels!",
        "emoji": "🕵️"
    },
    {
        "id": 269,
        "topic": "topic41",
        "question": "What structure does the 1st pharyngeal cleft give rise to?",
        "answer": "<li>The external auditory meatus and ear drum.</li>",
        "memoryTip": "The 1st cleft is like a doorbell for your ears, letting sound in!",
        "emoji": "🔔"
    },
    {
        "id": 270,
        "topic": "topic41",
        "question": "What happens to the 2nd, 3rd, and 4th pharyngeal clefts?",
        "answer": "<li>They form the cervical sinus, which disappears and may persist as a brachial cyst.</li>",
        "memoryTip": "The cervical sinus is like a magician's trick, disappearing but sometimes leaving a surprise behind!",
        "emoji": "🎩"
    },
    {
        "id": 271,
        "topic": "topic42",
        "question": "When does the development of the tongue start during embryonic development?",
        "answer": "<li>Approximately 4 weeks of embryo.</li>",
        "memoryTip": "The tongue starts its journey early, like a baby learning to talk before it even arrives!",
        "emoji": "👶"
    },
    {
        "id": 272,
        "topic": "topic42",
        "question": "From which arch does the anterior two-thirds of the tongue develop?",
        "answer": "<li>The first pharyngeal arch.</li>",
        "memoryTip": "The first arch is like the lead singer in a band, setting the stage for the tongue!",
        "emoji": "🎤"
    },
    {
        "id": 273,
        "topic": "topic42",
        "question": "What structures contribute to the body of the tongue?",
        "answer": "<li>Two lateral lingual swellings and one medial swelling, the tuberculum impar.</li>",
        "memoryTip": "The tongue is a team effort, with swellings coming together for a tasty performance!",
        "emoji": "🍽️"
    },
    {
        "id": 274,
        "topic": "topic42",
        "question": "What is the sensory innervation for the anterior two-thirds of the tongue?",
        "answer": "<li>The mandibular branch of the trigeminal nerve.</li>",
        "memoryTip": "The trigeminal nerve is like the tongue's personal messenger, delivering sensations!",
        "emoji": "📬"
    },
    {
        "id": 275,
        "topic": "topic42",
        "question": "What forms the posterior one-third (root) of the tongue?",
        "answer": "<li>A second median swelling, the copula of His or hypobranchial eminence.</li>",
        "memoryTip": "The root of the tongue is like the foundation of a house, built strong and steady!",
        "emoji": "🏠"
    },
    {
        "id": 276,
        "topic": "topic42",
        "question": "What is the sensory innervation for the posterior one-third of the tongue?",
        "answer": "<li>The glossopharyngeal nerve.</li>",
        "memoryTip": "The glossopharyngeal nerve is like the tongue's GPS, guiding sensations to the right place!",
        "emoji": "🗺️"
    },
    {
        "id": 277,
        "topic": "topic43",
        "question": "From where do the tongue muscles derive?",
        "answer": "<li>They originate from myoblasts in the occipital somites.</li>",
        "memoryTip": "Tongue muscles are like little workers coming from the occipital factory!",
        "emoji": "🏭"
    },
    {
        "id": 278,
        "topic": "topic43",
        "question": "Which nerve innervates the tongue muscles?",
        "answer": "<li>The hypoglossal nerve.</li>",
        "memoryTip": "The hypoglossal nerve is like the tongue's personal trainer, keeping it in shape!",
        "emoji": "🏋️"
    },
    {
        "id": 279,
        "topic": "topic44",
        "question": "From which arch does the epiglottis develop?",
        "answer": "<li>The fourth arch.</li>",
        "memoryTip": "The epiglottis is like a gatekeeper, making sure food and air go to the right places!",
        "emoji": "🚪"
    },
    {
        "id": 280,
        "topic": "topic44",
        "question": "What is the innervation of the epiglottis?",
        "answer": "<li>The superior laryngeal nerve.</li>",
        "memoryTip": "The superior laryngeal nerve is like the epiglottis's communication line, keeping it informed!",
        "emoji": "📞"
    },
    {
        "id": 281,
        "topic": "topic45",
        "question": "What is the origin of the epidermis and its appendages?",
        "answer": "<li>They come from surface ectoderm.</li>",
        "memoryTip": "The epidermis is like the skin's outer layer of armor, made from ectodermal knights!",
        "emoji": "🛡️"
    },
    {
        "id": 282,
        "topic": "topic45",
        "question": "Where do melanocytes and Merkel cells originate from?",
        "answer": "<li>They originate from the neural crest.</li>",
        "memoryTip": "Melanocytes are like the skin's color artists, painting it with pigment!",
        "emoji": "🎨"
    },
    {
        "id": 283,
        "topic": "topic45",
        "question": "What is the source of Langerhans cells?",
        "answer": "<li>They come from bone marrow.</li>",
        "memoryTip": "Langerhans cells are like the skin's security team, always on patrol!",
        "emoji": "🚓"
    },
    {
        "id": 284,
        "topic": "topic45",
        "question": "What is the origin of the dermis in limbs and trunks?",
        "answer": "<li>It comes from somatopleuric mesenchyme.</li>",
        "memoryTip": "The dermis is like the skin's cushion, made from mesenchymal marshmallows!",
        "emoji": "🍬"
    },
    {
        "id": 285,
        "topic": "topic45",
        "question": "What is the origin of the dermis in the face, head, and neck?",
        "answer": "<li>It comes from the neural crest.</li>",
        "memoryTip": "The facial dermis is like a cozy blanket, made from neural crest fibers!",
        "emoji": "🛏️"
    },
    {
        "id": 286,
        "topic": "topic46",
        "question": "How many pairs of chromosomes do humans have?",
        "answer": "<li>Humans have 23 pairs of chromosomes.</li>",
        "memoryTip": "Think of chromosomes as a family reunion, with 23 pairs showing up!",
        "emoji": "👨‍👩‍👧‍👦"
    },
    {
        "id": 287,
        "topic": "topic46",
        "question": "What is the minimum number of genes required to make up a living organism?",
        "answer": "<li>The minimum is 470 genes (for a parasite).</li>",
        "memoryTip": "Even parasites have a small gene pool for their party!",
        "emoji": "🎉"
    },
    {
        "id": 288,
        "topic": "topic46",
        "question": "What is the minimum number of genes required to make up a free-living cell?",
        "answer": "<li>The minimum is 1700 genes.</li>",
        "memoryTip": "Free-living cells need a bigger guest list for their bash!",
        "emoji": "🎊"
    },
    {
        "id": 289,
        "topic": "topic46",
        "question": "What percentage of total genes are expressed in the CNS?",
        "answer": "<li>40% of the total genes are expressed in the CNS.</li>",
        "memoryTip": "The CNS is like a VIP section, with 40% of genes getting the spotlight!",
        "emoji": "🌟"
    },
    {
        "id": 290,
        "topic": "topic46",
        "question": "What percentage of genes are expressed by both the CNS and other tissues?",
        "answer": "<li>60% of the remaining genes are expressed by both CNS and other tissues.</li>",
        "memoryTip": "The other tissues are like backup dancers, supporting the CNS's main act!",
        "emoji": "💃"
    },
    {
        "id": 291,
        "topic": "topic46",
        "question": "What mutation is associated with syndactyly and polydactyly?",
        "answer": "<li>Mutations in HOXD13 are associated with a combination of syndactyly and polydactyly (synpolydactyly).</li>",
        "memoryTip": "HOXD13 is like a mischievous artist, creating extra fingers and toes for fun!",
        "emoji": "✋👣"
    },
    {
        "id": 292,
        "topic": "topic47",
        "question": "What is an example of a quadrilateral muscle?",
        "answer": "<li>Thyrohyoid.</li>",
        "memoryTip": "Think of a \"thyroid\" shaped like a square, but it’s just a muscle trying to fit in!",
        "emoji": "🟦"
    },
    {
        "id": 293,
        "topic": "topic47",
        "question": "Name two strap-like muscles.",
        "answer": "<li>Sternohyoid and Sartorius.</li>",
        "memoryTip": "Strap on your seatbelt, because these muscles are ready for a ride!",
        "emoji": "🎢"
    },
    {
        "id": 294,
        "topic": "topic47",
        "question": "What type of muscle is the rectus abdominis?",
        "answer": "<li>Strap-like with tendinous intersections.</li>",
        "memoryTip": "The rectus abdominis is like a belt with fancy holes—keeping everything in place!",
        "emoji": "🏷️"
    },
    {
        "id": 295,
        "topic": "topic47",
        "question": "Give an example of a fusiform muscle.",
        "answer": "<li>Biceps brachii, digastric, or triceps.</li>",
        "memoryTip": "Fusiform muscles are like a bicep curl—big in the middle and tapering at the ends!",
        "emoji": "💪"
    },
    {
        "id": 296,
        "topic": "topic47",
        "question": "What is an example of a triangular muscle?",
        "answer": "<li>Temporalis or adductor longus.</li>",
        "memoryTip": "Triangular muscles are like pizza slices—always a favorite!",
        "emoji": "🍕"
    },
    {
        "id": 297,
        "topic": "topic47",
        "question": "Name a unipennate muscle.",
        "answer": "<li>Flexor pollicis longus, extensor digitorum longus, peroneus tertius, or palmar interossei.</li>",
        "memoryTip": "Unipennate muscles are like a single feather on a quill—sharp and focused!",
        "emoji": "🪶"
    },
    {
        "id": 298,
        "topic": "topic47",
        "question": "What is an example of a bipennate muscle?",
        "answer": "<li>Rectus femoris, dorsal interossei, peroneus longus, flexor hallucis longus, or gastrocnemius.</li>",
        "memoryTip": "Bipennate muscles are like a double-sided sword—strong and ready for action!",
        "emoji": "⚔️"
    },
    {
        "id": 299,
        "topic": "topic47",
        "question": "Name a multipennate muscle.",
        "answer": "<li>Subscapularis, deltoid, or soleus.</li>",
        "memoryTip": "Multipennate muscles are like a bouquet of flowers—many petals, one strong stem!",
        "emoji": "💐"
    },
    {
        "id": 300,
        "topic": "topic47",
        "question": "What is a circumpennate muscle?",
        "answer": "<li>Tibialis anterior.</li>",
        "memoryTip": "Circumpennate muscles are like a circle of friends—always surrounding you!",
        "emoji": "🔵"
    },
    {
        "id": 301,
        "topic": "topic47",
        "question": "Give an example of a spiral/twisted muscle.",
        "answer": "<li>Trapezius, pectoralis major, latissimus dorsi, or supinator.</li>",
        "memoryTip": "Spiral muscles are like a twisty straw—always ready to sip up some strength!",
        "emoji": "🥤"
    },
    {
        "id": 302,
        "topic": "topic47",
        "question": "What is an example of a crossed/cruciate muscle?",
        "answer": "<li>Sternocleidomastoid, masseter, or adductor magnus.</li>",
        "memoryTip": "Crossed muscles are like an X on a treasure map—leading you to strength!",
        "emoji": "🗺️"
    },
    {
        "id": 303,
        "topic": "topic48",
        "question": "Where are simple squamous epithelial cells found?",
        "answer": "<li>Type-I pneumocytes, parietal layer of Bowman's capsule, endothelium of blood vessels, lymphatic vessels, mesothelium of body cavities, endocardium, and thin segment of renal tubules (Ansa nephroni).</li>",
        "memoryTip": "Simple squamous cells are like a thin layer of butter on toast—smooth and everywhere!",
        "emoji": "🍞"
    },
    {
        "id": 304,
        "topic": "topic48",
        "question": "What is the location of simple cuboidal epithelium?",
        "answer": "<li>Lining of respiratory bronchioles, thyroid follicular cells, germinal epithelium of ovary, lens of eye, pigment epithelium of retina, and ependymal cells of choroidal plexus.</li>",
        "memoryTip": "Simple cuboidal cells are like little cubes in a game of Tetris—fitting perfectly in their spots!",
        "emoji": "🎮"
    },
    {
        "id": 305,
        "topic": "topic48",
        "question": "What is a special feature of simple cuboidal epithelium in the PCT?",
        "answer": "<li>It has a brush border.</li>",
        "memoryTip": "The brush border is like a fancy hairdo for cells—always looking sharp!",
        "emoji": "💇"
    },
    {
        "id": 306,
        "topic": "topic48",
        "question": "Where is simple columnar epithelium found?",
        "answer": "<li>Lining of pulmonary bronchioles (keratinized), anal canal above anal valves, uterus, fallopian tubes, large excretory gland ducts, GIT (intestinal cells, goblet cells).</li>",
        "memoryTip": "Simple columnar cells are like tall buildings in a city—standing proud and organized!",
        "emoji": "🏙️"
    },
    {
        "id": 307,
        "topic": "topic48",
        "question": "What is the location of simple columnar epithelium with a striated border?",
        "answer": "<li>Small intestine.</li>",
        "memoryTip": "Striated border cells are like a striped shirt—always in style at the buffet!",
        "emoji": "👕"
    },
    {
        "id": 308,
        "topic": "topic48",
        "question": "Where is simple ciliated columnar epithelium found?",
        "answer": "<li>Most of the respiratory tract, tympanic cavity, auditory tube, uterine tube, and efferent ductules of testes.</li>",
        "memoryTip": "Ciliated columnar cells are like little swimmers—always moving things along!",
        "emoji": "🏊"
    },
    {
        "id": 309,
        "topic": "topic48",
        "question": "What is the location of keratinized stratified squamous epithelium?",
        "answer": "<li>Epidermis of skin and duct of sebaceous glands.</li>",
        "memoryTip": "Keratinized cells are like a tough skin suit—ready to take on the world!",
        "emoji": "🦸"
    },
    {
        "id": 310,
        "topic": "topic48",
        "question": "Where is non-keratinized stratified squamous epithelium found?",
        "answer": "<li>Lining of oral cavity, esophagus, anal canal below anal valves, vagina, corneal epithelium, lining of female urethra, and lining of fossa navicularis of the penile urethra.</li>",
        "memoryTip": "Non-keratinized cells are like a soft blanket—gentle and protective!",
        "emoji": "🛏️"
    },
    {
        "id": 311,
        "topic": "topic48",
        "question": "What is the location of stratified columnar epithelium?",
        "answer": "<li>Lining of prostatic, membranous, and penile urethra up to fossa navicularis, and large ducts of exocrine and sweat glands.</li>",
        "memoryTip": "Stratified columnar cells are like a multi-layer cake—rich and complex!",
        "emoji": "🎂"
    },
    {
        "id": 312,
        "topic": "topic48",
        "question": "Where is pseudostratified columnar epithelium found?",
        "answer": "<li>Lining of trachea and primary bronchi, collecting ducts, lining of efferent ductules, epididymis, and ductus deferens.</li>",
        "memoryTip": "Pseudostratified cells are like a crowded concert—everyone looks different but they’re all together!",
        "emoji": "🎤"
    },
    {
        "id": 313,
        "topic": "topic48",
        "question": "What is the location of transitional epithelium?",
        "answer": "<li>Lining of renal calyces, renal pelvis, ureters, urinary bladder, and urethra up to ejaculatory duct.</li>",
        "memoryTip": "Transitional epithelium is like a stretchy pair of pants—flexible and ready for anything!",
        "emoji": "👖"
    },
    {
        "id": 314,
        "topic": "topic49",
        "question": "What is the nutrient vessel to blood vessels called?",
        "answer": "<li>Vasa vasorum.</li>",
        "memoryTip": "Vasa vasorum is like a food truck for blood vessels—serving up nutrients on the go!",
        "emoji": "🚚"
    },
    {
        "id": 315,
        "topic": "topic49",
        "question": "What are the nerves supplying an artery called?",
        "answer": "<li>Nervi vascularis.</li>",
        "memoryTip": "Nervi vascularis are like the phone chargers for arteries—keeping them energized!",
        "emoji": "🔌"
    },
    {
        "id": 316,
        "topic": "topic50",
        "question": "What is the largest lymphoid organ in the human body?",
        "answer": "<li>The spleen.</li>",
        "memoryTip": "Think of the spleen as the \"big boss\" of lymphoid organs, always ready to take charge!",
        "emoji": "🏰"
    },
    {
        "id": 317,
        "topic": "topic50",
        "question": "What do mast cells produce?",
        "answer": "<li>Heparin, histamine, and tryptase.</li>",
        "memoryTip": "Mast cells are like party planners, always ready with the right \"ingredients\" for a good time!",
        "emoji": "🎉"
    },
    {
        "id": 318,
        "topic": "topic50",
        "question": "How many total bones are in the human body?",
        "answer": "<li>206 bones.</li>",
        "memoryTip": "Remember, 206 is like a full house in poker—everyone's got a seat!",
        "emoji": "♠️"
    },
    {
        "id": 319,
        "topic": "topic50",
        "question": "How many bones are in the upper limb?",
        "answer": "<li>64 bones.</li>",
        "memoryTip": "The upper limb has enough bones to make a skeleton wave hello!",
        "emoji": "👋"
    },
    {
        "id": 320,
        "topic": "topic50",
        "question": "How many bones are in the lower limb?",
        "answer": "<li>62 bones.</li>",
        "memoryTip": "The lower limb has just enough bones to keep you grounded—literally!",
        "emoji": "👣"
    },
    {
        "id": 321,
        "topic": "topic50",
        "question": "How many vertebrae are in the human body?",
        "answer": "<li>33 vertebrae.</li>",
        "memoryTip": "With 33 vertebrae, your spine is like a flexible tower of Jenga blocks!",
        "emoji": "🏗️"
    },
    {
        "id": 322,
        "topic": "topic50",
        "question": "How many ribs are in the human body?",
        "answer": "<li>24 ribs.</li>",
        "memoryTip": "With 24 ribs, your chest is like a musical instrument, ready to play a tune!",
        "emoji": "🎶"
    },
    {
        "id": 323,
        "topic": "topic50",
        "question": "In which gender is the sacral index higher?",
        "answer": "<li>In females, with a sacral index of 115%.</li>",
        "memoryTip": "Females have a higher sacral index, making them the \"sacral queens\"!",
        "emoji": "👑"
    },
    {
        "id": 324,
        "topic": "topic50",
        "question": "What is unique about sesamoid bones?",
        "answer": "<li>They do not have a periosteum.</li>",
        "memoryTip": "Sesamoid bones are like the introverts of the bone world—no periosteum party for them!",
        "emoji": "🤫"
    },
    {
        "id": 325,
        "topic": "topic50",
        "question": "How is the lumbar curvature of the vertebral column different in females?",
        "answer": "<li>It is more pronounced in females.</li>",
        "memoryTip": "Females have a lumbar curve that could rival a roller coaster!",
        "emoji": "🎢"
    },
    {
        "id": 326,
        "topic": "topic50",
        "question": "How is the periosteum attached to bone?",
        "answer": "<li>By Sharpey's fibers, which are collagen fibers.</li>",
        "memoryTip": "Think of Sharpey's fibers as the \"glue\" that keeps the periosteum stuck to the bone!",
        "emoji": "🧴"
    },
    {
        "id": 327,
        "topic": "topic51",
        "question": "Where are Hassal's corpuscles located?",
        "answer": "<li>In the thymus.</li>",
        "memoryTip": "Hassal's corpuscles are like the \"thymus guards,\" keeping watch in the thymus!",
        "emoji": "🛡️"
    },
    {
        "id": 328,
        "topic": "topic51",
        "question": "What is the location of myofibroblasts?",
        "answer": "<li>Wound margin.</li>",
        "memoryTip": "Myofibroblasts are like the \"repair crew\" at the scene of a wound!",
        "emoji": "🛠️"
    },
    {
        "id": 329,
        "topic": "topic51",
        "question": "Where can myxomatous tissue be found?",
        "answer": "<li>In the umbilical cord.</li>",
        "memoryTip": "Myxomatous tissue is like the \"soft cushion\" of the umbilical cord, keeping things comfy!",
        "emoji": "🛏️"
    },
    {
        "id": 330,
        "topic": "topic51",
        "question": "What type of cells are Kulchitsky cells, and where are they found?",
        "answer": "<li>APUD cells found in the lungs.</li>",
        "memoryTip": "Kulchitsky cells are like the \"lung secret agents,\" always on a mission!",
        "emoji": "🕵️‍♂️"
    },
    {
        "id": 331,
        "topic": "topic51",
        "question": "Where are the cords of Bilroth located?",
        "answer": "<li>In the spleen.</li>",
        "memoryTip": "Cords of Bilroth are like the \"spleen's secret pathways,\" keeping things organized!",
        "emoji": "🗺️"
    },
    {
        "id": 332,
        "topic": "topic51",
        "question": "What is the Space of Disse/Space of Mall associated with?",
        "answer": "<li>The liver.</li>",
        "memoryTip": "The Space of Disse is like the \"liver's lounge,\" where cells hang out!",
        "emoji": "🛋️"
    },
    {
        "id": 333,
        "topic": "topic51",
        "question": "Where is the Rockitansky Aschoff sinus found?",
        "answer": "<li>In the gall bladder.</li>",
        "memoryTip": "The Rockitansky Aschoff sinus is like the \"gall bladder's secret hideout\"!",
        "emoji": "🏴‍☠️"
    },
    {
        "id": 334,
        "topic": "topic51",
        "question": "What type of cells are myoid cells, and where are they located?",
        "answer": "<li>Found in the testes.</li>",
        "memoryTip": "Myoid cells are like the \"muscle builders\" of the testes!",
        "emoji": "💪"
    },
    {
        "id": 335,
        "topic": "topic51",
        "question": "Where are Reinke crystals found?",
        "answer": "<li>In Leydig cells of the testes and hilus cells of the ovary.</li>",
        "memoryTip": "Reinke crystals are like the \"jewels\" of the reproductive system!",
        "emoji": "💎"
    },
    {
        "id": 336,
        "topic": "topic51",
        "question": "What is the location of halo cells?",
        "answer": "<li>In the ductus epididymis.</li>",
        "memoryTip": "Halo cells are like the \"angels\" of the ductus epididymis, always watching over!",
        "emoji": "😇"
    },
    {
        "id": 337,
        "topic": "topic51",
        "question": "Where are the pores of Kohn located?",
        "answer": "<li>In the alveoli.</li>",
        "memoryTip": "Pores of Kohn are like the \"breathable windows\" of the alveoli!",
        "emoji": "🌬️"
    },
    {
        "id": 338,
        "topic": "topic51",
        "question": "What is the location of penicillar arterioles?",
        "answer": "<li>In the spleen.</li>",
        "memoryTip": "Penicillar arterioles are like the \"arterial branches\" of the spleen's tree!",
        "emoji": "🌳"
    },
    {
        "id": 339,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in blood?",
        "answer": "<li>RBCs, WBCs, platelets, and plasma.</li>",
        "memoryTip": "Blood is like a \"party mix\" of cells, always ready to circulate!",
        "emoji": "🎊"
    },
    {
        "id": 340,
        "topic": "topic52",
        "question": "What is the function of blood?",
        "answer": "<li>Conduction of nutrients and waste products.</li>",
        "memoryTip": "Blood is the \"delivery service\" of the body, bringing goodies and taking out the trash!",
        "emoji": "🚚"
    },
    {
        "id": 341,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in bone?",
        "answer": "<li>Osteocytes, collagenous fibers, and calcium carbonate.</li>",
        "memoryTip": "Bone is like a \"fortress,\" built strong with its collagen and calcium!",
        "emoji": "🏰"
    },
    {
        "id": 342,
        "topic": "topic52",
        "question": "What is the function of bone?",
        "answer": "<li>Strong support.</li>",
        "memoryTip": "Bone is the \"body's backbone,\" always there to support you!",
        "emoji": "🦴"
    },
    {
        "id": 343,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in cartilage?",
        "answer": "<li>Chondrocytes, collagenous fibers, and elastin in elastic cartilage.  </li>",
        "memoryTip": "",
        "emoji": null
    },
    {
        "id": 344,
        "topic": "topic52",
        "question": "Where is cartilage located?",
        "answer": "<li>In joints, trachea, nose, and larynx.</li>",
        "memoryTip": "Cartilage is like the \"cushion\" in all the right places!",
        "emoji": "🛋️"
    },
    {
        "id": 345,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in adipose tissue?",
        "answer": "<li>Adipocytes with very little matrix.</li>",
        "memoryTip": "Adipose tissue is like the \"body's storage unit\" for lipids!",
        "emoji": "🏢"
    },
    {
        "id": 346,
        "topic": "topic52",
        "question": "What is the function of adipose tissue?",
        "answer": "<li>Stores lipids.</li>",
        "memoryTip": "Adipose tissue is like a \"lipid bank,\" saving energy for a rainy day!",
        "emoji": "💰"
    },
    {
        "id": 347,
        "topic": "topic52",
        "question": "Where is adipose tissue located?",
        "answer": "<li>In the hypodermis and around organs.</li>",
        "memoryTip": "Adipose tissue is like a \"cozy blanket\" around your organs!",
        "emoji": "🛌"
    },
    {
        "id": 348,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in loose (areolar) connective tissue?",
        "answer": "<li>Fibroblasts, mast cells, collagenous fibers, and elastin.</li>",
        "memoryTip": "Loose connective tissue is like the \"body's packing peanuts,\" keeping everything cushy!",
        "emoji": "📦"
    },
    {
        "id": 349,
        "topic": "topic52",
        "question": "What is the function of loose (areolar) connective tissue?",
        "answer": "<li>Binding, protection, nourishment, and holding fluids.</li>",
        "memoryTip": "Loose connective tissue is like the \"body's glue,\" holding everything together!",
        "emoji": "🧪"
    },
    {
        "id": 350,
        "topic": "topic52",
        "question": "Where is loose (areolar) connective tissue located?",
        "answer": "<li>Deep to skin, around muscles, vessels, and organs.</li>",
        "memoryTip": "Loose connective tissue is like the \"undercover agent\" of the body, hiding in plain sight!",
        "emoji": "🕵️"
    },
    {
        "id": 351,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in dense fibrous connective tissue?",
        "answer": "<li>Fibroblasts and densely packed collagenous fibers.</li>",
        "memoryTip": "Dense fibrous tissue is like the \"strongman\" of connective tissues, built to last!",
        "emoji": "💪"
    },
    {
        "id": 352,
        "topic": "topic52",
        "question": "What is the function of dense fibrous connective tissue?",
        "answer": "<li>Strong and flexible.</li>",
        "memoryTip": "Dense fibrous tissue is like a \"flexible rope,\" tough yet bendy!",
        "emoji": "🪢"
    },
    {
        "id": 353,
        "topic": "topic52",
        "question": "Where is dense fibrous connective tissue located?",
        "answer": "<li>In tendons and ligaments.</li>",
        "memoryTip": "Dense fibrous tissue is like the \"strong ties\" that keep your body together!",
        "emoji": "🔗"
    },
    {
        "id": 354,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in elastic connective tissue?",
        "answer": "<li>Fibroblasts and elastin fibers.</li>",
        "memoryTip": "Elastic tissue is like the \"rubber band\" of the body, always ready to stretch!",
        "emoji": "🏋️"
    },
    {
        "id": 355,
        "topic": "topic52",
        "question": "What is the function of elastic connective tissue?",
        "answer": "<li>Flexibility and distensibility.</li>",
        "memoryTip": "Elastic tissue is like a \"bouncy castle,\" ready for fun and games!",
        "emoji": "🎈"
    },
    {
        "id": 356,
        "topic": "topic52",
        "question": "Where is elastic connective tissue located?",
        "answer": "<li>In arteries, larynx, trachea, and bronchi.</li>",
        "memoryTip": "Elastic tissue is like the \"stretchy parts\" of your body, keeping things moving!",
        "emoji": "🏃"
    },
    {
        "id": 357,
        "topic": "topic52",
        "question": "What type of cells and matrix are found in reticular connective tissue?",
        "answer": "<li>Phagocytes and reticular fibers in a jelly matrix.</li>",
        "memoryTip": "Reticular tissue is like the \"net\" of the body, catching all the bad guys!",
        "emoji": "🕸️"
    },
    {
        "id": 358,
        "topic": "topic52",
        "question": "What is the function of reticular connective tissue?",
        "answer": "<li>Phagocytic function.</li>",
        "memoryTip": "Reticular tissue is like the \"clean-up crew,\" always ready to gobble up debris!",
        "emoji": "🧹"
    },
    {
        "id": 359,
        "topic": "topic52",
        "question": "Where is reticular connective tissue located?",
        "answer": "<li>In the liver, spleen, lymph nodes, and bone marrow.</li>",
        "memoryTip": "Reticular tissue is like the \"body's recycling center,\" processing all the waste!",
        "emoji": "♻️"
    },
    {
        "id": 360,
        "topic": "topic53",
        "question": "What is the basic unit of bone?",
        "answer": "<li>The osteon.</li>",
        "memoryTip": "Think of the osteon as the \"building block\" of your bone skyscraper!",
        "emoji": "🏢"
    },
    {
        "id": 361,
        "topic": "topic53",
        "question": "What is an osteon composed of?",
        "answer": "<li>Lamellae arranged around Haversian canals.</li>",
        "memoryTip": "Osteons are like \"layers of an onion,\" with Haversian canals in the center!",
        "emoji": "🧅"
    },
    {
        "id": 362,
        "topic": "topic53",
        "question": "What are osteons rich in?",
        "answer": "<li>Glycoproteins and proteoglycans, which are highly basophilic.</li>",
        "memoryTip": "Osteons are like \"protein-packed powerhouses,\" always ready to support!",
        "emoji": "💪"
    },
    {
        "id": 363,
        "topic": "topic53",
        "question": "What does the central Haversian canal contain?",
        "answer": "<li>Neurovascular canal containing 1 or 2 capillaries.</li>",
        "memoryTip": "The Haversian canal is like the \"highway\" for nutrients in the bone!",
        "emoji": "🛣️"
    },
    {
        "id": 364,
        "topic": "topic53",
        "question": "How do Haversian canals communicate with each other?",
        "answer": "<li>Via Volkman's canal, which are nutrient/vascular perforating channels.</li>",
        "memoryTip": "Haversian canals are like \"chatty neighbors,\" always sharing nutrients!",
        "emoji": "🗣️"
    },
    {
        "id": 365,
        "topic": "topic53",
        "question": "What is the epiphysis?",
        "answer": "<li>The ends and tips of bone that ossify from secondary centers.</li>",
        "memoryTip": "The epiphysis is like the \"tip of the iceberg,\" the visible part of the bone!",
        "emoji": "🧊"
    },
    {
        "id": 366,
        "topic": "topic53",
        "question": "What is the epiphyseal growth plate (physis)?",
        "answer": "<li>The part between the epiphysis and metaphysis, which is the zone of maximum growth.</li>",
        "memoryTip": "The epiphyseal growth plate is like the \"growth spurt zone\" for bones!",
        "emoji": "📈"
    },
    {
        "id": 367,
        "topic": "topic53",
        "question": "What is the diaphysis?",
        "answer": "<li>The part of the bone that ossifies from primary centers and is the strongest part of the bone.</li>",
        "memoryTip": "The diaphysis is like the \"main support beam\" of the bone structure!",
        "emoji": "🏗️"
    },
    {
        "id": 368,
        "topic": "topic53",
        "question": "In which direction are diaphyseal nutrient arteries directed?",
        "answer": "<li>Away from the dominant growing epiphysis.</li>",
        "memoryTip": "Diaphyseal nutrient arteries are like \"rivers flowing away from the mountain,\" nourishing the bone!",
        "emoji": "🏞️"
    },
    {
        "id": 369,
        "topic": "topic54",
        "question": "What are uniaxial joints?",
        "answer": "<li>Joints that allow movement in one plane only.</li>",
        "memoryTip": "Uniaxial joints are like a one-way street; they only allow traffic in one direction!",
        "emoji": "🚦"
    },
    {
        "id": 370,
        "topic": "topic54",
        "question": "Can you name examples of plane/flat joints?",
        "answer": "<li>Acromioclavicular joint and intermetatarsal joint.</li>",
        "memoryTip": "Plane joints are like a flat tire; they just roll along without much action!",
        "emoji": "🛞"
    },
    {
        "id": 371,
        "topic": "topic54",
        "question": "What type of movement do hinge joints allow?",
        "answer": "<li>Only flexion and extension.</li>",
        "memoryTip": "Hinge joints are like doors; they only swing open and closed!",
        "emoji": "🚪"
    },
    {
        "id": 372,
        "topic": "topic54",
        "question": "What are some examples of hinge joints?",
        "answer": "<li>Elbow, ankle, and interphalangeal joints.</li>",
        "memoryTip": "Hinge joints are the \"elbow grease\" of the body, working hard to bend and straighten!",
        "emoji": "💪"
    },
    {
        "id": 373,
        "topic": "topic54",
        "question": "What is a pivot (trochoid) joint?",
        "answer": "<li>A joint that allows rotational movement around a single axis.</li>",
        "memoryTip": "Pivot joints are like a spinning top; they just love to twirl around!",
        "emoji": "🔄"
    },
    {
        "id": 374,
        "topic": "topic54",
        "question": "Can you name examples of pivot joints?",
        "answer": "<li>Superior and inferior radioulnar joints and atlanto-axial joint.</li>",
        "memoryTip": "Pivot joints are the \"twist and shout\" joints of the body!",
        "emoji": "🎉"
    },
    {
        "id": 375,
        "topic": "topic54",
        "question": "What are biaxial joints?",
        "answer": "<li>Joints that allow movement in two planes.</li>",
        "memoryTip": "Biaxial joints are like a dance floor; they let you move in multiple directions!",
        "emoji": "💃"
    },
    {
        "id": 376,
        "topic": "topic54",
        "question": "What are examples of ellipsoid joints?",
        "answer": "<li>Wrist, all metacarpophalangeal joints, and atlanto-occipital joint.</li>",
        "memoryTip": "Ellipsoid joints are like an egg; they can roll in two directions without cracking!",
        "emoji": "🥚"
    },
    {
        "id": 377,
        "topic": "topic54",
        "question": "What is a condylar joint?",
        "answer": "<li>A joint that allows movement in two planes, similar to ellipsoid joints.</li>",
        "memoryTip": "Condylar joints are like a fancy dinner; they allow for a little bit of everything!",
        "emoji": "🍽️"
    },
    {
        "id": 378,
        "topic": "topic54",
        "question": "Can you name examples of condylar joints?",
        "answer": "<li>Knee and temporomandibular joint of the jaw.</li>",
        "memoryTip": "Condylar joints are the \"jaw-dropping\" joints that help you chew and chat!",
        "emoji": "😮"
    },
    {
        "id": 379,
        "topic": "topic54",
        "question": "What is a saddle joint?",
        "answer": "<li>A joint that allows movement in two planes and resembles a saddle.</li>",
        "memoryTip": "Saddle joints are like riding a horse; they let you move forward and backward!",
        "emoji": "🐎"
    },
    {
        "id": 380,
        "topic": "topic54",
        "question": "Can you name examples of saddle joints?",
        "answer": "<li>Thumb (first carpometacarpal), sternoclavicular joint, calcaneocuboidal joint, ankle, and incudomalleolar joint.</li>",
        "memoryTip": "Saddle joints are the \"thumbs up\" joints that help you grip and hold on!",
        "emoji": "👍"
    },
    {
        "id": 381,
        "topic": "topic54",
        "question": "What are multi axial joints?",
        "answer": "<li>Joints that allow movement in multiple planes.</li>",
        "memoryTip": "Multi axial joints are like a 3D movie; they let you see all around!",
        "emoji": "🎥"
    },
    {
        "id": 382,
        "topic": "topic54",
        "question": "Can you name examples of ball and socket joints?",
        "answer": "<li>Shoulder, hip, talo-calcaneonavicular joint, and incudostapedial joint.</li>",
        "memoryTip": "Ball and socket joints are the \"party animals\" of the body, dancing in every direction!",
        "emoji": "🎉"
    },
    {
        "id": 383,
        "topic": "topic55",
        "question": "What is a pressure epiphysis?",
        "answer": "<li>The region of a long bone that forms the joint and transmits the weight of the body.</li>",
        "memoryTip": "Pressure epiphyses are like the strongmen of the bone world, carrying all the weight!",
        "emoji": "💪"
    },
    {
        "id": 384,
        "topic": "topic55",
        "question": "Can you name examples of pressure epiphyses?",
        "answer": "<li>Head of femur, head of humerus, condyles of tibia, and lower end of radius.</li>",
        "memoryTip": "Pressure epiphyses are the \"heavy lifters\" at the gym of your skeleton!",
        "emoji": "🏋️"
    },
    {
        "id": 385,
        "topic": "topic55",
        "question": "What is a traction epiphysis?",
        "answer": "<li>A non-articular epiphysis that does not assist in weight transmission and is where ligaments and tendons attach.</li>",
        "memoryTip": "Traction epiphyses are like the anchors of a ship; they hold everything in place without carrying the load!",
        "emoji": "⚓"
    },
    {
        "id": 386,
        "topic": "topic55",
        "question": "How do traction epiphyses ossify compared to pressure epiphyses?",
        "answer": "<li>Traction epiphyses ossify later than pressure epiphyses.</li>",
        "memoryTip": "Traction epiphyses take their time to grow up, like a teenager who’s not in a rush!",
        "emoji": "⏳"
    },
    {
        "id": 387,
        "topic": "topic55",
        "question": "What are atavistic epiphyses?",
        "answer": "<li>Fused bones that result from evolutionary changes in functionality over generations.</li>",
        "memoryTip": "Atavistic epiphyses are like the \"old school\" bones that just can’t let go of their past!",
        "emoji": "🕰️"
    },
    {
        "id": 388,
        "topic": "topic55",
        "question": "Can you name examples of atavistic epiphyses?",
        "answer": "<li>Coracoid process of scapula, posterior tubercle of talus, and os trigonum.</li>",
        "memoryTip": "Atavistic epiphyses are the \"blast from the past\" bones that remind us of our ancestors!",
        "emoji": "🦴"
    },
    {
        "id": 389,
        "topic": "topic55",
        "question": "What are aberrant epiphyses?",
        "answer": "<li>Epiphyses that are not always present.</li>",
        "memoryTip": "Aberrant epiphyses are like surprise guests at a party; you never know who will show up!",
        "emoji": "🎊"
    },
    {
        "id": 390,
        "topic": "topic55",
        "question": "Can you name examples of aberrant epiphyses?",
        "answer": "<li>Head of the first metacarpal and base of the other metacarpals.</li>",
        "memoryTip": "Aberrant epiphyses are the \"wild cards\" of the bone family, showing up when you least expect it!",
        "emoji": "🃏"
    },
    {
        "id": 391,
        "topic": "topic56",
        "question": "What is the most abundant type of cartilage?",
        "answer": "<li>Hyaline cartilage.</li>",
        "memoryTip": "Think of hyaline as the \"high\" king of cartilage, ruling over all the joints!",
        "emoji": "👑"
    },
    {
        "id": 392,
        "topic": "topic56",
        "question": "Where does hyaline cartilage cover?",
        "answer": "<li>It covers articular surfaces of typical synovial joints.</li>",
        "memoryTip": "Hyaline cartilage is like a cozy blanket for your joints, keeping them comfy!",
        "emoji": "🛏️"
    },
    {
        "id": 393,
        "topic": "topic56",
        "question": "What are the functions of hyaline cartilage?",
        "answer": "<li>It forms epiphyseal growth plates and is found in structures like the arytenoid and articular cartilage.</li>",
        "memoryTip": "Hyaline cartilage helps you grow tall and sing high, just like a tree and a bird!",
        "emoji": "🌳"
    },
    {
        "id": 394,
        "topic": "topic56",
        "question": "Name some locations where hyaline cartilage can be found.",
        "answer": "<li>Cricoid, costal cartilage, thyroid, tracheobronchial, and the nose (septum and lateral wall).</li>",
        "memoryTip": "Hyaline cartilage is like the Swiss Army knife of cartilage—useful in many places!",
        "emoji": "🛠️"
    },
    {
        "id": 395,
        "topic": "topic56",
        "question": "What is fibrocartilage primarily associated with?",
        "answer": "<li>It is found in intra-articular discs, intervertebral discs, menisci, and the acromioclavicular joint.</li>",
        "memoryTip": "Fibrocartilage is the tough guy of cartilage, always ready to cushion the blow!",
        "emoji": "💪"
    },
    {
        "id": 396,
        "topic": "topic56",
        "question": "What joints contain fibrocartilage?",
        "answer": "<li>Glenoid labrum (shoulder joint) and acetabular labrum (hip joint).</li>",
        "memoryTip": "Fibrocartilage is like a bouncer at the joint club, keeping everything in check!",
        "emoji": "🚪"
    },
    {
        "id": 397,
        "topic": "topic56",
        "question": "What is unique about elastic cartilage?",
        "answer": "<li>It never calcifies and is resistant to degeneration.</li>",
        "memoryTip": "Elastic cartilage is like a rubber band—stretchy and never snaps!",
        "emoji": "🏀"
    },
    {
        "id": 398,
        "topic": "topic56",
        "question": "Where can elastic cartilage be found?",
        "answer": "<li>In the auricle, auditory tube, corniculate laryngeal cartilage, cuneiform laryngeal cartilage, external auditory meatus, epiglottis, and apex of arytenoid.</li>",
        "memoryTip": "Elastic cartilage is the party planner of the ear and throat, always flexible and ready to adapt!",
        "emoji": "🎉"
    },
    {
        "id": 399,
        "topic": "topic57",
        "question": "What is Type I collagen associated with?",
        "answer": "<li>Fibrocartilage, bone, dermis of skin, and tendons.</li>",
        "memoryTip": "Type I collagen is like the sturdy backbone of your body—always holding things together!",
        "emoji": "🦴"
    },
    {
        "id": 400,
        "topic": "topic57",
        "question": "What happens to Type I collagen during wound healing?",
        "answer": "<li>It is replaced by Type III collagen.</li>",
        "memoryTip": "Type I collagen is like a temporary band-aid, making way for the fancy new Type III!",
        "emoji": "🩹"
    },
    {
        "id": 401,
        "topic": "topic57",
        "question": "What types of cartilage are associated with Type II collagen?",
        "answer": "<li>Hyaline and elastic cartilages.</li>",
        "memoryTip": "Type II collagen is the \"duo\" of cartilage, always hanging out with hyaline and elastic!",
        "emoji": "🎶"
    },
    {
        "id": 402,
        "topic": "topic57",
        "question": "Where is Type III collagen found?",
        "answer": "<li>In the liver, spleen, tunica media of blood vessels, and muscularis externa of the GIT.</li>",
        "memoryTip": "Type III collagen is like the secret agent of the body, sneaking around in vital organs!",
        "emoji": "🕵️‍♂️"
    },
    {
        "id": 403,
        "topic": "topic57",
        "question": "When is Type III collagen laid down?",
        "answer": "<li>It is laid down first during wound healing and increases in amounts during keloid formation.</li>",
        "memoryTip": "Type III collagen is the eager beaver of healing, always the first to show up on the scene!",
        "emoji": "🦫"
    },
    {
        "id": 404,
        "topic": "topic57",
        "question": "What is Type IV collagen associated with?",
        "answer": "<li>The basal lamina.</li>",
        "memoryTip": "Type IV collagen is like the foundation of a house, keeping everything stable and secure!",
        "emoji": "🏠"
    },
    {
        "id": 405,
        "topic": "topic58",
        "question": "What is intramembranous ossification?",
        "answer": "<li>It occurs in the embryo when mesoderm condenses into highly vascular connective tissue, forming a primary ossification center.</li>",
        "memoryTip": "Intramembranous ossification is like building a house from scratch—starting with a solid foundation!",
        "emoji": "🏗️"
    },
    {
        "id": 406,
        "topic": "topic58",
        "question": "What is an example of a bone formed by intramembranous ossification?",
        "answer": "<li>The flat bones of the skull.</li>",
        "memoryTip": "The skull is like a helmet made from the best building blocks—intramembranous style!",
        "emoji": "🪖"
    },
    {
        "id": 407,
        "topic": "topic58",
        "question": "What is endochondral ossification?",
        "answer": "<li>It occurs in the embryo when mesoderm forms a hyaline cartilage model that develops a primary ossification center at the diaphysis.</li>",
        "memoryTip": "Endochondral ossification is like a caterpillar turning into a butterfly—transforming from soft to strong!",
        "emoji": "🐛"
    },
    {
        "id": 408,
        "topic": "topic58",
        "question": "What happens during endochondral ossification?",
        "answer": "<li>Later, secondary ossification centers form at the epiphysis.</li>",
        "memoryTip": "Endochondral ossification is like a two-part movie—first the main story, then the exciting sequel!",
        "emoji": "🎬"
    },
    {
        "id": 409,
        "topic": "topic58",
        "question": "Name some long bones formed by endochondral ossification.",
        "answer": "<li>Humerus, femur, tibia, and other long bones.</li>",
        "memoryTip": "Long bones are like the skyscrapers of the body, built tall and strong through endochondral ossification!",
        "emoji": "🏢"
    },
    {
        "id": 410,
        "topic": "topic59",
        "question": "Which muscle is supplied by both the musculocutaneous nerve and the radial nerve?",
        "answer": "<li>Brachialis.</li>",
        "memoryTip": "Brachialis is like a multitasker, getting help from two different nerves to flex those muscles!",
        "emoji": "💪"
    },
    {
        "id": 411,
        "topic": "topic59",
        "question": "What nerves supply the adductor magnus?",
        "answer": "<li>The posterior division of the obturator nerve (adductor part) and the tibial part of the sciatic nerve (hamstring part).</li>",
        "memoryTip": "Adductor magnus is like a team player, working with two different nerves to get the job done!",
        "emoji": "🤝"
    },
    {
        "id": 412,
        "topic": "topic59",
        "question": "Which nerves supply the pectineus muscle?",
        "answer": "<li>The femoral nerve (anterior fibers) and the obturator nerve (posterior fibers).</li>",
        "memoryTip": "Pectineus is like a split personality, using two nerves to keep things interesting!",
        "emoji": "🎭"
    },
    {
        "id": 413,
        "topic": "topic59",
        "question": "What nerves innervate the digastric muscle?",
        "answer": "<li>The mylohyoid branch of the mandibular nerve (anterior belly) and the facial nerve (posterior belly).</li>",
        "memoryTip": "Digastric is like a duet, with two nerves singing in harmony!",
        "emoji": "🎤"
    },
    {
        "id": 414,
        "topic": "topic59",
        "question": "Which nerves supply the flexor pollicis brevis?",
        "answer": "<li>The median nerve (superficial head) and the ulnar nerve (deep head).</li>",
        "memoryTip": "Flexor pollicis brevis is like a hand model, showing off its skills with two different nerve stylists!",
        "emoji": "✋"
    },
    {
        "id": 415,
        "topic": "topic59",
        "question": "What nerves innervate the flexor digitorum profundus?",
        "answer": "<li>The anterior interosseous branch of the median nerve and the ulnar nerve.</li>",
        "memoryTip": "Flexor digitorum profundus is like a secret agent, using two nerves to get the job done stealthily!",
        "emoji": "🕶️"
    },
    {
        "id": 416,
        "topic": "topic59",
        "question": "Which nerves supply the biceps femoris?",
        "answer": "<li>The tibial division of the sciatic nerve (long head) and the common fibular nerve (short head).</li>",
        "memoryTip": "Biceps femoris is like a dynamic duo, flexing with the help of two different nerves!",
        "emoji": "🤸"
    },
    {
        "id": 417,
        "topic": "topic60",
        "question": "What is the epithelial turnover time for the buccal mucosa?",
        "answer": "<li>14 days.</li>",
        "memoryTip": "The buccal mucosa is like a fast-food restaurant—quickly serving up new cells!",
        "emoji": "🍔"
    },
    {
        "id": 418,
        "topic": "topic60",
        "question": "How long does it take for the intestinal epithelium to turnover?",
        "answer": "<li>4 days.</li>",
        "memoryTip": "The intestine is like a speedy chef, whipping up new cells in no time!",
        "emoji": "👨‍🍳"
    },
    {
        "id": 419,
        "topic": "topic60",
        "question": "What is the epithelial turnover time for the skin?",
        "answer": "<li>27 days.</li>",
        "memoryTip": "Skin is like a fashion model, taking a bit longer to refresh its look!",
        "emoji": "👗"
    },
    {
        "id": 420,
        "topic": "topic60",
        "question": "How long does it take for the lungs to turnover their epithelium?",
        "answer": "<li>6 months.</li>",
        "memoryTip": "The lungs are like a slow cooker, taking their time to prepare new cells!",
        "emoji": "⏳"
    },
    {
        "id": 421,
        "topic": "topic60",
        "question": "What is the epithelial turnover time for the hard palate?",
        "answer": "<li>24 days.</li>",
        "memoryTip": "The hard palate is like a diligent student, taking a bit of time to ace its cell turnover!",
        "emoji": "📚"
    },
    {
        "id": 422,
        "topic": "topic60",
        "question": "How long does it take for the floor of the mouth to turnover its epithelium?",
        "answer": "<li>20 days.</li>",
        "memoryTip": "The floor of the mouth is like a busy dance floor, quickly refreshing its cells!",
        "emoji": "💃"
    }
];

const topics = {
    "topic1": "1. Embryology Overview",
    "topic2": "2. Organogenesis and Teratogens",
    "topic3": "3. Growth Factors in Development",
    "topic4": "4. Gastrulation and Germ Layers",
    "topic5": "5. Derivatives of Ectoderm",
    "topic6": "6. Derivatives of Endoderm",
    "topic7": "7. Derivatives of Mesoderm",
    "topic8": "8. Neural Tube Development",
    "topic9": "9. Vertebral Column Development",
    "topic10": "10. Neural Crest Development and Disturbances",
    "topic11": "11. Non-Closure of Neural Tube",
    "topic12": "12. Tympanic Membrane Development",
    "topic13": "13. Derivation of Various Parts of the Eyeball",
    "topic14": "14. Musculoskeletal System Development",
    "topic15": "15. Somitomeres and Somites",
    "topic16": "16. Head and Neck Development",
    "topic17": "17. Prominence Structures",
    "topic18": "18. Craniosynostosis",
    "topic19": "19. Cardiovascular System Development",
    "topic20": "20. Embryologic Heart Derivatives",
    "topic21": "21. Development of Venous System",
    "topic22": "22. Remnants and Their Structures",
    "topic23": "23. Development of the Liver and Sinusoids",
    "topic24": "24. Lung Development",
    "topic25": "25. Arteries of the Digestive System",
    "topic26": "26. Development of Mesogastrium",
    "topic27": "27. Mesonephric/Wolffian Duct in Males",
    "topic28": "28. Mesonephric/Wolffian Duct in Females",
    "topic29": "29. Paramesonephric/Mullerian Duct",
    "topic30": "30. Intestinal Loop Rotation",
    "topic31": "31. Formation of the Diaphragm",
    "topic32": "32. Pancreas Development",
    "topic33": "33. Meckel's Diverticulum",
    "topic34": "34. Urogenital System Development",
    "topic35": "35. Fate of Structures Derived from Undifferentiated Genital System",
    "topic36": "36. Kidney Development",
    "topic37": "37. Additional Notes on Development",
    "topic38": "38. Development of Bladder and Urethra",
    "topic39": "39. Pharyngeal Apparatus",
    "topic40": "40. Fate of Endodermal Pouches",
    "topic41": "41. Fate of Pharyngeal Clefts",
    "topic42": "42. Development of the Tongue",
    "topic43": "43. Tongue Muscles",
    "topic44": "44. Development of the Epiglottis",
    "topic45": "45. Development of Skin",
    "topic46": "46. Genetic Information",
    "topic47": "47. Anatomical Classification of Muscles",
    "topic48": "48. Specialized Epithelia and Their Locations",
    "topic49": "49. Blood Vessels",
    "topic50": "50. Specialized Cells",
    "topic51": "51. Special Cells and Their Regions",
    "topic52": "52. Connective Tissue",
    "topic53": "53. Osteology",
    "topic54": "54. Types of Joints",
    "topic55": "55. Types of Epiphysis",
    "topic56": "56. Cartilage Types and Locations",
    "topic57": "57. Collagen Types",
    "topic58": "58. Ossification Processes",
    "topic59": "59. Muscles with Dual Nerve Supply",
    "topic60": "60. Epithelial Turnover Time"
};











let filteredTopics = [];
let filterStage = null;
let reviewStages = {};
let completedFlashcards = [];
let currentDate = new Date();
const reviewStageColors = { 0: 'red', 1: 'pink', 2: 'blue', 3: 'green' };
let db;
let isStarFilterActive = false;
let isStarReadyFilterActive = false;
let currentFlashcardIndex = 0;
let isHorizontal = false;
let starMarked = {};

function toggleStar(starElement, flashcardId) {
        const isStarred = !starMarked[flashcardId]; // Toggle starred status
      starMarked[flashcardId] = isStarred; // Update local state


      // Update UI Immediately
        starElement.classList.toggle('fas', isStarred);
        starElement.classList.toggle('far', !isStarred);
       starElement.style.color = isStarred ? 'gold' : 'lightgray';
       updateStarredCount(); // Recalculate and update counts
    const transaction = db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    const request = store.get(flashcardId);

    request.onsuccess = (event) => {
        let data = event.target.result;

        if (data) {
            // Only update the starred field, keep review metrics unchanged
            data.starred = isStarred;
            store.put(data); // Save the updated data with starred status
        } else {
            // Add a new entry with only the starred field (no review metrics)
            store.put({
                id: flashcardId,
                starred: isStarred // Only starred field
            });
        }
    };

    request.onerror = (event) => {
        console.error('Error updating star status:', event.target.errorCode);
    };
}



function openDatabase() {
    const request = indexedDB.open(dbName, 1); // Ensure the version is correct

    request.onupgradeneeded = (event) => {
        db = event.target.result;
        if (!db.objectStoreNames.contains(storeName)) {
            const store = db.createObjectStore(storeName, { keyPath: 'id' });
            store.createIndex('reviewStage', 'reviewStage', { unique: false });
            store.createIndex('dueDate', 'dueDate', { unique: false });
            store.createIndex('starred', 'starred', { unique: false }); // Ensure 'starred' is defined
        }
    };

    request.onsuccess = (event) => {
        db = event.target.result;
        loadProgress(() => {
            updateTopicProgress();
            updateStarredCount();
            renderFlashcards();
        });
    };

    request.onerror = (event) => {
        console.error('Database error:', event.target.errorCode);
    };
}


function saveProgress(id, reviewStage = 0, dueDate = null, revealedTimestamp = null, starred = false) {
    const transaction = db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);

    const data = {
        id,
        reviewStage,
        dueDate,
        revealedTimestamp,
        starred // Include starred in the saved data
    };

    store.put(data); // Save both review metrics and starred status together
}



function loadProgress(callback) {
    const transaction = db.transaction([storeName], 'readonly');
    const store = transaction.objectStore(storeName);
    const request = store.getAll();

    request.onsuccess = (event) => {
        const progressData = event.target.result;

        progressData.forEach(progress => {
            if (progress.reviewStage !== undefined && progress.dueDate !== undefined) {
                // Only initialize reviewStages for flashcards with valid review metrics
                reviewStages[progress.id] = {
                    reviewStage: progress.reviewStage,
                    dueDate: progress.dueDate,
                    revealedTimestamp: progress.revealedTimestamp || null
                };
            }
            starMarked[progress.id] = progress.starred ?? false; // Initialize starred state
        });

        console.log('Progress loaded:', progressData);
        if (callback) callback();
    };

    request.onerror = (event) => {
        console.error('Load error:', event.target.errorCode);
    };
}




// Flashcard functions
function selectLayout(value) {
    if (value === 'horizontal') {
        switchToHorizontalLayout();
    } else {
        switchToVerticalLayout();
    }
    applyCurrentFilters();
}

function switchToHorizontalLayout() {
    isHorizontal = true;
    document.body.classList.add('horizontal-layout');
    document.body.classList.remove('vertical-layout');
    currentFlashcardIndex = 0;
    document.getElementById('horizontal-info').style.display = 'block';
    document.querySelector('.navigation-buttons').style.display = 'flex';
    applyCurrentFilters();
}

function switchToVerticalLayout() {
    isHorizontal = false;
    document.body.classList.add('vertical-layout');
    document.body.classList.remove('horizontal-layout');
    document.getElementById('horizontal-info').style.display = 'none';
    document.querySelector('.navigation-buttons').style.display = 'none';
    applyCurrentFilters();
}

function showFlashcard(index) {
    const flashcards = document.querySelectorAll('.modern-card');
    if (index < 0 || index >= flashcards.length) return;

    flashcards.forEach(flashcard => flashcard.style.display = 'none');

    const currentFlashcard = flashcards[index];
    const topic = currentFlashcard.dataset.topic;
    const topicFlashcards = Array.from(flashcards).filter(f => f.dataset.topic === topic);
    const currentPosition = topicFlashcards.indexOf(currentFlashcard) + 1;
    const totalInTopic = topicFlashcards.length;

    document.getElementById('horizontal-topic').textContent = topics[topic];
    document.getElementById('horizontal-position').textContent = `Flashcard ${currentPosition} of ${totalInTopic}`;

    currentFlashcard.style.display = 'block';

    document.getElementById('prev-btn').disabled = index === 0;
    document.getElementById('next-btn').disabled = index === flashcards.length - 1;
}

function navigateFlashcards(direction) {
    const flashcards = document.querySelectorAll('.modern-card');
    if (direction === 'next' && currentFlashcardIndex < flashcards.length - 1) {
        currentFlashcardIndex++;
    } else if (direction === 'prev' && currentFlashcardIndex > 0) {
        currentFlashcardIndex--;
    }
    showFlashcard(currentFlashcardIndex);
}

function updateTopicProgress() {
    const topicSelect = document.getElementById('topic-filter');
    topicSelect.innerHTML = '';

    const allOption = document.createElement('option');
    allOption.value = 'all';
    allOption.textContent = 'All Topics';
    topicSelect.appendChild(allOption);

    Object.keys(topics).forEach(topicKey => {
        const topicName = topics[topicKey];
        const totalFlashcards = flashcards.filter(card => card.topic === topicKey).length;
        const reviewedFlashcards = flashcards.filter(card => card.topic === topicKey && reviewStages[card.id]).length;

        const option = document.createElement('option');
        option.value = topicKey;

        if (reviewedFlashcards === totalFlashcards && totalFlashcards > 0) {
            option.textContent = `${topicName} 🔹(${reviewedFlashcards}/${totalFlashcards}) ✔️`;
        } else {
            option.textContent = `${topicName} 🔹(${reviewedFlashcards}/${totalFlashcards})`;
        }

        topicSelect.appendChild(option);
    });
}

function applySelectedTopics() {
    const topicSelect = document.getElementById('topic-filter');
    const selectedOptions = Array.from(topicSelect.selectedOptions);
    const selectedTopicValues = selectedOptions.map(option => option.value);

    if (selectedTopicValues.includes('all')) {
        filteredTopics = [];
    } else {
        filteredTopics = selectedTopicValues.filter(value => value !== 'all');
    }

    currentFlashcardIndex = 0;
    renderFlashcards();
}

function renderInitialFlashcards() {
    renderFlashcards(true); // Render only the first 50 cards initially
}


function loadRestOfFlashcardsInBackground() {
  // Use a timeout to defer the loading, ensuring the UI thread doesn't get blocked
  setTimeout(() => {
        renderFlashcards(false, true); // Load the rest of the flashcards in the background
  }, 0);
}



    function renderFlashcards(initialLoad = false, appendOnly = false) {
        const flashcardsContainer = document.getElementById('flashcards-container');
        const filterInfoContainer = document.getElementById('filter-info-container');

        if (appendOnly === false) {
            flashcardsContainer.innerHTML = '';
        }
        if (appendOnly === false) {
            filterInfoContainer.innerHTML = '';
        }
        const allTopicsSelected = filteredTopics.length === 0 || filteredTopics.length === Object.keys(topics).length;

        // Update topics and review stage info dynamically
        const selectedTopicsText = allTopicsSelected
            ? 'All Topics'
            : filteredTopics.slice(0, 2).map(topic => topics[topic] || 'All Topics').join(', ') +
            (filteredTopics.length > 2 ? ', <button id="showMoreBtn" onclick="showAllTopics()">More</button>' : '');

        let selectedFilterText = ''; // Dynamic filter text based on active filters

        if (isStarFilterActive) {
            selectedFilterText = `⭐ Showing: Star-marked flashcards of selected topics <br>
                <span style="font-size: 0.9em; color: gray;">(To Exit the Review stage, Click "Show All Flashcards" Button)</span>`;
        } else if (isStarReadyFilterActive) {
            selectedFilterText = `🌟 Showing: Star-marked Ready-for-review flashcards of selected topics <br>
                <span style="font-size: 0.9em; color: gray;">(To Exit the Review stage, Click "Show All Flashcards" Button)</span>`;
        } else if (filterStage !== null) {
            selectedFilterText = `
                Review Stage: ${getReviewStageLabel(filterStage)} <br>
                <span style="font-size: 0.9em; color: gray;">(To Exit the Review stage, Click "Show All Flashcards" Button)</span>`;
        } else {
            selectedFilterText = `Showing all flashcards of selected topics`;
        }

        // Create and display filter info only once for initial load or for all load
        if (appendOnly === false) {
            const filterInfo = document.createElement('div');
            filterInfo.className = 'filter-info';

            // Topics selected line
            const topicsLine = document.createElement('div');
            topicsLine.innerHTML = `<strong style="color: black;">Topics selected:</strong>  ${selectedTopicsText}`;
            filterInfo.appendChild(topicsLine);

            // Add an <hr> for separation
            const separator = document.createElement('hr');
            separator.style.border = '1px solid #ccc';
            separator.style.margin = '10px 0';
            filterInfo.appendChild(separator);

            // Review stage or filter line
            const filterLine = document.createElement('div');
            filterLine.innerHTML = selectedFilterText; // Use innerHTML to support HTML rendering
            filterInfo.appendChild(filterLine);

            filterInfoContainer.appendChild(filterInfo);
        }

        let currentTopic = null;
        let cardsLoaded = 0;
    const limit = initialLoad ? 50 : flashcards.length; // set a limit if its a initial load
        for (let i = 0; i < flashcards.length; i++) {
            if (cardsLoaded >= limit) break; // break out of the loop if the limit is reached

            const flashcard = flashcards[i];
             const reviewStageData = reviewStages[flashcard.id];
              const isStarred = starMarked[flashcard.id];
            const isDue = reviewStageData && new Date(reviewStageData.dueDate) <= currentDate;
            const isTopicMatch = filteredTopics.length === 0 || filteredTopics.includes(flashcard.topic);

            // Match against the "Starred" filter
            let isStarredMatch = isStarFilterActive ? isStarred : true;
           // Match against the "Starred Ready Review" filter
            let isReadyMatch = isStarReadyFilterActive ? (isStarred && isDue) : true;

            // Match against the stage filter
            let isStageMatch = filterStage === null || (reviewStageData?.reviewStage === filterStage && isDue);
             if (filterStage === 4) {
               isStageMatch = reviewStageData?.reviewStage === 4;
            }

            if (isTopicMatch && isStarredMatch && isStageMatch && isReadyMatch) {
                if (!isHorizontal && currentTopic !== flashcard.topic) {
                    currentTopic = flashcard.topic;
                    const topicHeader = document.createElement('div');
                    topicHeader.className = 'topic-header';
                    topicHeader.textContent = topics[flashcard.topic];
                   flashcardsContainer.appendChild(topicHeader);
                }
                 const isAnswerVisible = reviewStageData?.revealedTimestamp &&
                (new Date() - new Date(reviewStageData.revealedTimestamp)) < 24 * 60 * 60 * 1000;

                const memoryTip = flashcard.memoryTip || '';
                const emojiSymbol = flashcard.emoji || '✨';
                const emojiExplanation = flashcard.emojiExplanation || '';

                const card = document.createElement('div');
                card.className = 'modern-card';
                card.dataset.flashcardId = flashcard.id;
                card.dataset.topic = flashcard.topic;
                card.innerHTML = `
                    <div class="question">${flashcard.question}</div>
                    <div class="answer" style="display: ${isAnswerVisible ? 'block' : 'none'}">
                        ${flashcard.answer}
                        <br>
                        <hr style="border: 1px solid black; margin: 10px 0;">
                        <em><strong>Memory Tip:</strong> ${memoryTip}</em>
                         <br><br>
                        <span class="emoji">${emojiSymbol}</span>
                    </div>
                    <div class="review-metric"></div>
                    <div class="buttons">
                       <button class="dont-know-btn" onclick="handleReviewClick(${flashcard.id}, false)">Don't Know</button>
                     <i class="${isStarred ? 'fas' : 'far'} fa-star star-btn"
                            style="color: ${isStarred ? 'gold' : 'lightgray'};"
                             onclick="toggleStar(this, ${flashcard.id})"></i>
                       <button class="know-btn" onclick="handleReviewClick(${flashcard.id}, true)" ondblclick="handleInactiveKnowClick(event)">Know</button>
                     </div>
                    <i class="fas fa-bookmark bookmark" onclick="toggleDropdown(event, 'bookmarkDropdown')"></i>
                    `;
                flashcardsContainer.appendChild(card);
                cardsLoaded++;
           }
       }
        applyReviewMetrics();
        updatePendingCounts();

        if (isHorizontal) {
             showFlashcard(currentFlashcardIndex);
         }
        attachBookmarkListeners();
     }


function showAllTopics() {
    const showMoreBtn = document.getElementById('showMoreBtn');
    const topicsLine = showMoreBtn.parentElement;
    const allTopicsText = filteredTopics.map(topic => topics[topic] || 'All Topics').join(', ');
    topicsLine.innerHTML = `<strong style="color: black;">Topics selected:</strong>  ${allTopicsText} <button id="hideMoreBtn" onclick="hideAllTopics()">Hide</button>`;
}

function hideAllTopics() {
    const hideMoreBtn = document.getElementById('hideMoreBtn');
    const topicsLine = hideMoreBtn.parentElement;
    const selectedTopicsText = filteredTopics.slice(0, 2).map(topic => topics[topic] || 'All Topics').join(', ') +
          (filteredTopics.length > 2 ? ', <button id="showMoreBtn" onclick="showAllTopics()">More</button>' : '');
    topicsLine.innerHTML = `<strong style="color: black;">Topics selected:</strong>  ${selectedTopicsText}`;
}



function showStarredFlashcards() {
    // Set the filter for starred flashcards to active and reset others
    isStarFilterActive = true;
    isStarReadyFilterActive = false; // Disable "Ready for Review" filter
    filterStage = null; // Reset the review stage filter

    renderFlashcards(); // Re-render flashcards based on updated filters
    updateStarredCount(); // Update the count of starred flashcards
}



function showStarredReadyFlashcards() {
    // Set the filter for starred and ready-to-review flashcards to active and reset others
    isStarReadyFilterActive = true;
    isStarFilterActive = false; // Disable the "Starred" filter
    filterStage = null; // Reset the review stage filter

    renderFlashcards(); // Re-render flashcards based on updated filters
    updateStarredCount(); // Update the count of starred ready-to-review flashcards
}



function attachBookmarkListeners() {
    const bookmarks = document.querySelectorAll('.bookmark');
    bookmarks.forEach(bookmark => {
        bookmark.addEventListener('click', (event) => {
            toggleDropdown(event, 'bookmarkDropdown');
        });
    });
}

function filterFlashcards(stage) {
    filterStage = stage;
    isStarFilterActive = false;
    isStarReadyFilterActive = false;
    currentFlashcardIndex = 0;
    renderFlashcards();
}

function showAllFlashcards() {
    if (filteredTopics.length === 0) {
        const topicSelect = document.getElementById('topic-filter');
        const selectedOptions = Array.from(topicSelect.selectedOptions);
        filteredTopics = selectedOptions.map(option => option.value).filter(value => value !== 'all');
    }
    filterStage = null;
    isStarFilterActive = false;
    isStarReadyFilterActive = false;
    currentFlashcardIndex = 0;
    renderFlashcards();
}

function applyReviewMetrics() {
    document.querySelectorAll('.modern-card').forEach(card => {
        const flashcardId = parseInt(card.dataset.flashcardId);
        const reviewMetric = card.querySelector('.review-metric');
        const bookmark = card.querySelector('.bookmark');
        const knowButton = card.querySelector('.know-btn');

        if (reviewStages[flashcardId]) {
            const { reviewStage, dueDate } = reviewStages[flashcardId];
            reviewMetric.dataset.reviewStage = reviewStage;
            reviewMetric.dataset.dueDate = dueDate;

            const timeRemaining = (new Date(dueDate).getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24);

            if (reviewStage === 4) {
                reviewMetric.textContent = '🏆 Final Review: Completed';
                reviewMetric.style.color = 'gold';
                bookmark.style.color = 'gold';
                card.style.borderColor = 'gold';
                knowButton.disabled = true;
                knowButton.style.backgroundColor = 'gray';
            } else if (timeRemaining <= 0) {
                reviewMetric.textContent = '🔔 Ready for Review';
                reviewMetric.style.color = '#388e3c';
                knowButton.disabled = false;
                knowButton.style.backgroundColor = '#388e3c';
                bookmark.style.color = reviewStageColors[reviewStage];
                card.style.borderColor = reviewStageColors[reviewStage];
            } else {
                const stageColor = reviewStageColors[reviewStage];
                reviewMetric.textContent = `${getReviewText(reviewStage, dueDate)}`;
                reviewMetric.style.color = stageColor;
                bookmark.style.color = stageColor;
                card.style.borderColor = stageColor;
                knowButton.disabled = true;
                knowButton.style.backgroundColor = 'gray';
            }
        } else {
            bookmark.style.color = '';
            card.style.borderColor = '';
            reviewMetric.textContent = '';
        }
    });
}


  function handleReviewClick(flashcardId, isKnow) {
    const flashcard = document.querySelector(`[data-flashcard-id="${flashcardId}"]`);
    const answer = flashcard.querySelector('.answer');
        answer.style.display = 'block';


    let reviewStage = reviewStages[flashcardId]?.reviewStage || 0;
    const dueDate = new Date(currentDate);
          const revealedTimestamp = new Date().toISOString();
        const isStarred = starMarked[flashcardId] || false;

         if (isKnow) {
        reviewStage = getNextStage(reviewStage, dueDate); // Move to next stage
    } else {
        reviewStage = 0;
            dueDate.setDate(dueDate.getDate() + 3); // Set the review in 3 days
        }
        reviewStages[flashcardId] = { reviewStage, dueDate: dueDate.toISOString(), revealedTimestamp };
         saveProgress(flashcardId, reviewStage, dueDate.toISOString(), revealedTimestamp, isStarred); // Save starred state with review metrics

          applyReviewMetrics();
        updatePendingCounts();
        updateTopicProgress();
       }


function getNextStage(reviewStage, dueDate) {
    if (reviewStage === 0) {
        dueDate.setDate(dueDate.getDate() + 7);
        return 1;
    } else if (reviewStage === 1) {
        dueDate.setDate(dueDate.getDate() + 14);
        return 2;
    } else if (reviewStage === 2) {
        dueDate.setDate(dueDate.getDate() + 28);
        return 3;
    }
    return 4;
}

function getReviewText(reviewStage, dueDate) {
    const timeRemaining = (new Date(dueDate) - currentDate) / (1000 * 60 * 60 * 24);
    return `${["First Review", "Second Review", "Third Review", "Final Review"][reviewStage]} in ${Math.ceil(timeRemaining)} days`;
}

function getReviewStageLabel(stage) {
    const labels = ["First Review", "Second Review", "Third Review", "Final Review"];
    return labels[stage] || " 🏆 Completed Flashcards List";
}

function updatePendingCounts() {
    const counts = [0, 0, 0, 0, 0];
    flashcards.forEach(flashcard => {
        const flashcardData = reviewStages[flashcard.id];
        if (flashcardData) {
            if (flashcardData.reviewStage < 4 && new Date(flashcardData.dueDate) <= currentDate) {
                counts[flashcardData.reviewStage]++;
            } else if (flashcardData.reviewStage === 4) {
                counts[4]++;
            }
        }
    });
    counts.forEach((count, index) => {
        if (index < 4) {
            document.getElementById(`count-stage-${index}`).textContent = `${count} pending`;
        } else {
            document.getElementById('count-completed').textContent = `${count} completed`;
        }
    });
}

function simulateDateTimeChange() {
    const dateInput = document.getElementById('current-date').value;
    const timeInput = document.getElementById('current-time').value;

    if (dateInput && timeInput) {
        currentDate = new Date(`${dateInput}T${timeInput}:00`);
    } else {
        currentDate = new Date();
    }
    refreshFlashcards();
}

function refreshFlashcards() {
    applyReviewMetrics();
    updatePendingCounts();
}

function applyCurrentFilters() {
    if (filterStage !== null) {
        filterFlashcards(filterStage);
    } else {
        renderFlashcards();
    }

    if (isHorizontal) {
        currentFlashcardIndex = 0;
        showFlashcard(currentFlashcardIndex);
    }
}


// Handle inactive "Know" button click to show dropdown
function handleInactiveKnowClick(event) {
    if (event.target.disabled) {
        toggleDropdownBelowButton(event, 'inactiveKnowDropdown');
    }
}

// Function to toggle dropdown visibility below the button
function toggleDropdownBelowButton(event, dropdownId) {
    event.stopPropagation();

    const dropdown = document.getElementById(dropdownId);
    const isVisible = dropdown.style.display === "block";

    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(d => {
        d.style.display = 'none';
    });

    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();
    dropdown.style.top = `${rect.bottom + window.scrollY}px`;
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";
    dropdown.style.maxWidth = "90vw";
}

// Close dropdown when clicking outside of it
window.addEventListener('click', function (event) {
    const dropdown = document.getElementById('inactiveKnowDropdown');
    if (dropdown && dropdown.style.display === "block" && !dropdown.contains(event.target)) {
        dropdown.style.display = "none";
    }
});

// Optional: Close dropdown function for specific dropdowns
function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}


function updateStarredCount() {

    const totalStarredCount = flashcards.filter(flashcard => starMarked[flashcard.id]).length;
    const totalStarredReadyCount = flashcards.filter(flashcard => {
          const reviewStageData = reviewStages[flashcard.id];
          const isDue = reviewStageData && new Date(reviewStageData.dueDate) <= currentDate;
        return starMarked[flashcard.id] && isDue;
        }).length;
        const count = flashcards.filter(flashcard => {
             const isTopicMatch = filteredTopics.length === 0 || filteredTopics.includes(flashcard.topic);
             return isTopicMatch && starMarked[flashcard.id]
         }).length;

        const countReady = flashcards.filter(flashcard => {
             const isTopicMatch = filteredTopics.length === 0 || filteredTopics.includes(flashcard.topic);
                const reviewStageData = reviewStages[flashcard.id];
                const isDue = reviewStageData && new Date(reviewStageData.dueDate) <= currentDate;
                return isTopicMatch &&  starMarked[flashcard.id] && isDue;
           }).length;
    const starFilterBtn = document.querySelector('.filter-btn[onclick="showStarredFlashcards()"]');
    if (starFilterBtn) {
        starFilterBtn.innerHTML = `Starred Flashcards <br> ⭐  <span id="count-starred" class="badge">${totalStarredCount} marked</span>`;
    }
    const starReadyFilterBtn = document.querySelector('.filter-btn[onclick="showStarredReadyFlashcards()"]');
    if (starReadyFilterBtn) {
        starReadyFilterBtn.innerHTML = ` Starred Ready for Review <br> 🌟 <span id="count-starred-ready" class="badge">${totalStarredReadyCount} pending</span>`
      }
}


function attachBookmarkListeners() {
    const cards = document.querySelectorAll('.modern-card');
       cards.forEach(card =>{
         card.addEventListener('click', function(event){
            const bookmark = event.target.closest('.bookmark');
             if(bookmark){
                toggleDropdown1(event, 'bookmarkDropdown1')
              }

        });
    });

}


// Toggle dropdown near the clicked bookmark icon, centered horizontally in the viewport
function toggleDropdown1(event, dropdownId) {
    event.stopPropagation();

    const dropdown = document.getElementById(dropdownId);
  const computedStyle = window.getComputedStyle(dropdown);
    const isVisible = computedStyle.display === "block";


    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();

    dropdown.style.top = `${rect.bottom + window.scrollY}px`;
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";
    dropdown.style.maxWidth = "90vw";
}


// Close dropdown when clicking outside of it
window.addEventListener('click', function (event) {
    const dropdown = document.getElementById('bookmarkDropdown1');
   const bookmark = event.target.closest('.bookmark');
   if (dropdown && dropdown.style.display === "block" && !bookmark && !dropdown.contains(event.target)) {
        dropdown.style.display = "none";
    }
});

// Close dropdown manually
function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}


</script>



<script>
// Function to Toggle the Dropdown Below the Button
function toggleDropdownContent(event) {
    event.stopPropagation();  // Prevent immediate closing due to outside click listener

    const dropdown = document.getElementById('dropdownContent');
    const isVisible = dropdown.style.display === "block";

    // Hide dropdown if already visible
    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    // Hide any other open dropdowns
    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(d => {
        d.style.display = 'none';
    });

       // Show and position dropdown
    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();

    // Set top position just below the clicked bookmark icon
    dropdown.style.top = `${rect.bottom + window.scrollY}px`;

    // Center horizontally in the viewport, using transform for responsive centering
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";  // Center align horizontally

    // Optional: Set max width for small screens
    dropdown.style.maxWidth = "90vw";  // Allow dropdown to adjust within viewport
}

// Close dropdown when clicking outside of it
window.addEventListener('click', function(event) {
    const dropdown = document.getElementById('dropdownContent');
    const toggleButton = document.getElementById('toggleButton'); // Assuming the button to open dropdown has ID "toggleButton"

    // Close dropdown if clicked outside of it and not on the toggle button
    if (dropdown && dropdown.style.display === "block" &&
        !dropdown.contains(event.target) &&
        event.target !== toggleButton) {
        dropdown.style.display = "none";
    }
});

// Function to Close Dropdown Explicitly
function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}


</script>

 <script>
         function openModal(modalId) {
            document.getElementById(modalId).style.display = "block";
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = "none";
        }

         function zoomImage(modalId, zoomFactor) {
             var image = document.getElementById(modalId).querySelector('.modal-content97');
            if (image) {
                var currentWidth = image.clientWidth;
                image.style.width = (currentWidth * zoomFactor) + 'px';
            } else {
                console.error('Zoom image not found for modal:', modalId);
             }
         }


        function openPopup(popupId) {
             document.getElementById(popupId).style.display = "block";
         }

         function closePopup(popupId) {
            document.getElementById(popupId).style.display = "none";
         }

    </script>



<!-- Include the rest of your JavaScript here -->

</body>
</html>