Hugging Face's logo

Buckets:
ktongue
/
OnedriveENISE

Files
xet
ktongue/OnedriveENISE / PERSONNEL /melvis.html
ktongue's picture
ktongue
download
raw
27.1 kB
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Interactive Report: Nurses' Management of Liver Cirrhosis</title>
 <!-- Chosen Palette: Science Doodle (bg-emerald-50, text-emerald-800, accent-pink-600, highlight-purple-600) -->
 <!-- Application Structure Plan: A single-page dashboard design with a sticky top navigation for easy access to thematic sections: Overview, The Study, Key Findings, and Conclusion. This non-linear structure allows users to explore the report's content based on their interest, rather than following the original document's linear flow. The core interaction is centered on the 'Key Findings' section, where an interactive chart visualizes the central theme of the knowledge-practice gap, making the data more engaging and understandable than static tables. The new LLM-powered features enhance the 'Conclusion & Recommendations' by providing actionable expansions on each recommendation, and allow for summarization of sections and suggestions for further research. -->
 <!-- Visualization & Content Choices: Report Info: Overall knowledge, attitude, and practice levels derived from the report's text and data. Goal: Directly compare these three metrics to visually emphasize the report's main conclusion—the 'knowledge-practice gap'. Viz/Presentation Method: A single, clear Chart.js bar chart. Interaction: Tooltips on hover provide precise percentages for each metric. Justification: A bar chart provides a stark and immediate comparison between the three distinct concepts (Knowledge, Attitude, Practice), making the gap instantly apparent. This is more effective for storytelling than reproducing the complex source tables. Library/Method: Chart.js (Canvas). New Feature 1: Report Info: Specific recommendations from the study. Goal: Provide detailed, actionable strategies for each recommendation. Viz/Presentation Method: Dynamic text generation displayed in a modal. Interaction: Clickable "Expand" buttons trigger an LLM call to generate expanded text. Justification: Directly addresses the need for practical application highlighted by the report's findings, turning static recommendations into actionable insights. Library/Method: Gemini API (gemini-2.0-flash). New Feature 2: Report Info: Text content of specific sections. Goal: Provide a concise summary of the section. Viz/Presentation Method: Dynamic text generation displayed in a modal. Interaction: Clickable "Summarize Section" buttons trigger an LLM call. Justification: Improves readability and quick understanding of lengthy text. Library/Method: Gemini API (gemini-2.0-flash). New Feature 3: Report Info: Study limitations and conclusions. Goal: Suggest new research directions. Viz/Presentation Method: Dynamic text generation displayed in a modal. Interaction: Clickable "Suggest Further Research" button triggers an LLM call. Justification: Encourages deeper engagement and critical thinking about the study's implications. Library/Method: Gemini API (gemini-2.0-flash). -->
 <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 <style>
 body {
 font-family: 'Inter', sans-serif;
 background-color: #f5f5dc; /* beige */
 color: #065f46; /* emerald-800 */
 }
 .nav-link {
 transition: color 0.3s, border-bottom-color 0.3s;
 border-bottom: 2px solid transparent;
 }
 .nav-link:hover, .nav-link.active {
 color: #db2777; /* pink-600 */
 border-bottom-color: #db2777; /* pink-600 */
 }
 .chart-container {
 position: relative;
 width: 100%;
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
 height: 300px;
 max-height: 400px;
 }
 @media (min-width: 768px) {
 .chart-container {
 height: 400px;
 }
 }
 </style>
</head>
<body class="text-emerald-800">
<header class="bg-white shadow-md sticky top-0 z-50">
 <nav class="container mx-auto px-6 py-3">
 <div class="flex justify-between items-center">
 <div class="text-xl font-bold text-emerald-700">The Knowledge Gap</div>
 <div class="hidden md:flex items-center space-x-8">
 <a href="#overview" class="nav-link px-2 py-1">Overview</a>
 <a href="#study" class="nav-link px-2 py-1">The Study</a>
 <a href="#findings" class="nav-link px-2 py-1">Key Findings</a>
 <a href="#conclusion" class="nav-link px-2 py-1">Conclusion</a>
 </div>
 <div class="md:hidden">
 <button id="menu-btn" class="text-emerald-600 focus:outline-none">
 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
 </button>
 </div>
 </div>
 <div id="mobile-menu" class="hidden md:hidden mt-4">
 <a href="#overview" class="block py-2 px-4 text-sm hover:bg-emerald-50 rounded">Overview</a>
 <a href="#study" class="block py-2 px-4 text-sm hover:bg-emerald-50 rounded">The Study</a>
 <a href="#findings" class="block py-2 px-4 text-sm hover:bg-emerald-50 rounded">Key Findings</a>
 <a href="#conclusion" class="block py-2 px-4 text-sm hover:bg-emerald-50 rounded">Conclusion</a>
 </div>
 </nav>
 </header>
<main class="container mx-auto px-6 py-8">
<section id="hero" class="text-center py-12">
 <h1 class="text-4xl md:text-5xl font-bold text-emerald-700 mb-4">Assessing Nurses' Management of Liver Cirrhosis</h1>
 <p class="text-lg md:text-xl text-emerald-600 max-w-3xl mx-auto">
 An analysis of the critical gap between what nurses know and what they do in practice for patients with liver cirrhosis.
 </p>
 </section>
<section id="overview" class="py-12 scroll-mt-20">
 <h2 class="text-3xl font-bold text-center mb-8">Understanding Liver Cirrhosis</h2>
 <div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg">
 <p class="mb-6 text-emerald-700" id="overview-text">
 This section provides a brief overview of Liver Cirrhosis, its global impact, and common causes. The goal is to establish a foundational understanding of the condition at the heart of this study, providing context for the investigation into nursing care that follows. Liver cirrhosis is a chronic condition where healthy liver tissue is replaced by permanent scar tissue, impairing the organ's essential functions and disrupting blood flow. According to the WHO, liver diseases, with cirrhosis as a leading cause, account for a significant number of deaths worldwide. There is no cure, only management. The primary causes vary globally but most often include viral hepatitis (Hepatitis B and C) and chronic alcoholic liver disease.
 </p>
 <div class="grid md:grid-cols-3 gap-8 text-center">
 <div>
 <div class="text-5xl text-pink-600 mb-2">⚕️</div>
 <h3 class="text-xl font-semibold mb-2">What is it?</h3>
 <p class="text-emerald-600">A chronic condition where healthy liver tissue is replaced by permanent scar tissue, impairing the organ's essential functions and disrupting blood flow.</p>
 </div>
 <div>
 <div class="text-5xl text-pink-600 mb-2">🌍</div>
 <h3 class="text-xl font-semibold mb-2">Global Impact</h3>
 <p class="text-emerald-600">According to the WHO, liver diseases, with cirrhosis as a leading cause, account for a significant number of deaths worldwide. There is no cure, only management.</p>
 </div>
 <div>
 <div class="text-5xl text-pink-600 mb-2">🍷</div>
 <h3 class="text-xl font-semibold mb-2">Common Causes</h3>
 <p class="text-emerald-600">The primary causes vary globally but most often include viral hepatitis (Hepatitis B and C) and chronic alcoholic liver disease.</p>
 </div>
 </div>
 <div class="text-center mt-6">
 <button class="llm-btn px-4 py-2 bg-pink-600 text-white text-md rounded-full hover:bg-pink-700 transition-colors"
 data-feature="summarize-section" data-section-id="overview">
 Summarize Section ✨
 </button>
 </div>
 </div>
 </section>
<section id="study" class="py-12 scroll-mt-20">
 <h2 class="text-3xl font-bold text-center mb-8">The Study: An Inside Look</h2>
 <div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg">
 <p class="mb-6 text-emerald-700" id="study-text">
 Here, we explore the framework of the research itself. This section details the study's objectives and methodology, providing transparency about how the data was collected and the limitations encountered. Understanding the study's design is crucial for interpreting the validity of its findings. The research objectives were to evaluate the knowledge level of nurses regarding liver cirrhosis, to determine the attitudes of nurses toward patients with the condition, and to investigate the actual practices used by nurses in patient care. The methodology included a cross-sectional descriptive study design, conducted at the Military Hospital of Yaounde, involving all nurses who consented to participate, using structured questionnaires as a tool. A key limitation was that the intended sample size was not met due to time constraints and participant attrition, which may impact the generalizability of the findings.
 </p>
 <div class="space-y-6">
 <div>
 <h3 class="font-semibold text-xl text-emerald-700 mb-2">Research Objectives</h3>
 <ul class="list-disc list-inside text-emerald-600 space-y-1">
 <li>To evaluate the knowledge level of nurses regarding liver cirrhosis.</li>
 <li>To determine the attitudes of nurses toward patients with the condition.</li>
 <li>To investigate the actual practices used by nurses in patient care.</li>
 </ul>
 </div>
 <div>
 <h3 class="font-semibold text-xl text-emerald-700 mb-2">Methodology</h3>
 <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
 <div class="bg-emerald-50 p-4 rounded-lg"><strong>Design:</strong> Cross-sectional descriptive study.</div>
 <div class="bg-emerald-50 p-4 rounded-lg"><strong>Site:</strong> Military Hospital of Yaounde.</div>
 <div class="bg-emerald-50 p-4 rounded-lg"><strong>Participants:</strong> All nurses who consented to participate.</div>
 <div class="bg-emerald-50 p-4 rounded-lg"><strong>Tool:</strong> Structured questionnaires.</div>
 </div>
 </div>
 <div>
 <h3 class="font-semibold text-xl text-emerald-700 mb-2">Limitations</h3>
 <p class="text-emerald-600" id="limitations-text">The intended sample size was not met due to time constraints and participant attrition, which may impact the generalizability of the findings.</p>
 </div>
 </div>
 <div class="text-center mt-6">
 <button class="llm-btn px-4 py-2 bg-pink-600 text-white text-md rounded-full hover:bg-pink-700 transition-colors"
 data-feature="summarize-section" data-section-id="study">
 Summarize Section ✨
 </button>
 </div>
 </div>
 </section>
<section id="findings" class="py-12 scroll-mt-20">
 <h2 class="text-3xl font-bold text-center mb-2">Key Findings: The Knowledge-Practice Gap</h2>
 <div class="max-w-4xl mx-auto text-center">
 <p class="mb-8 text-emerald-700">
 This is the core of the report. The data reveals a significant disconnect between what nurses know and how they act. The following chart visualizes this gap by comparing the levels of theoretical knowledge, professional attitude, and practical application among the surveyed nurses. Hover over each bar to see the specific score.
 </p>
 <div class="bg-white p-6 rounded-lg shadow-lg">
 <div class="chart-container">
 <canvas id="findingsChart"></canvas>
 </div>
 </div>
 </div>
 </section>
<section id="conclusion" class="py-12 scroll-mt-20">
 <h2 class="text-3xl font-bold text-center mb-8">Conclusion & Recommendations</h2>
 <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
 <div class="bg-white p-8 rounded-lg shadow-lg">
 <h3 class="font-semibold text-xl text-emerald-700 mb-3">The Core Conclusion</h3>
 <p class="text-emerald-700" id="conclusion-text">
 The study concludes that while most nurses possess good theoretical knowledge and a positive attitude towards managing liver cirrhosis, their practical application of this knowledge is poor. This critical gap between knowing and doing must be addressed to improve patient outcomes.
 </p>
 </div>
 <div class="bg-white p-8 rounded-lg shadow-lg">
 <h3 class="font-semibold text-xl text-emerald-700 mb-3">Recommendations</h3>
 <ul class="list-disc list-inside text-emerald-700 space-y-2">
 <li>
 Engage actively in hands-on training opportunities.
 <button class="llm-btn ml-2 px-3 py-1 bg-pink-600 text-white text-sm rounded-full hover:bg-pink-700 transition-colors"
 data-feature="expand-recommendation" data-recommendation="Engage actively in hands-on training opportunities.">
 Expand ✨
 </button>
 </li>
 <li>
 Improve collaboration with other health personnel to enhance practical skills.
 <button class="llm-btn ml-2 px-3 py-1 bg-pink-600 text-white text-sm rounded-full hover:bg-pink-700 transition-colors"
 data-feature="expand-recommendation" data-recommendation="Improve collaboration with other health personnel to enhance practical skills.">
 Expand ✨
 </button>
 </li>
 <li>
 Implement research work earlier in the curriculum to allow for more thorough data collection.
 <button class="llm-btn ml-2 px-3 py-1 bg-pink-600 text-white text-sm rounded-full hover:bg-pink-700 transition-colors"
 data-feature="expand-recommendation" data-recommendation="Implement research work earlier in the curriculum to allow for more thorough data collection.">
 Expand ✨
 </button>
 </li>
 </ul>
 <div class="text-center mt-6">
 <button class="llm-btn px-4 py-2 bg-purple-600 text-white text-md rounded-full hover:bg-purple-700 transition-colors"
 data-feature="suggest-research">
 Suggest Further Research ✨
 </button>
 </div>
 </div>
 </div>
 </section>
 </main>
<footer class="bg-gray-800 text-white mt-12">
 <div class="container mx-auto px-6 py-4 text-center">
 <p>Interactive Report based on the dissertation by Ayinji Melvis Ajong.</p>
 <p class="text-sm text-gray-400">University of Douala, 2024-2025</p>
 </div>
 </footer>
<!-- Modal Structure for LLM Response -->
 <div id="llm-modal" class="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50 hidden">
 <div class="bg-white p-8 rounded-lg shadow-xl max-w-2xl w-full mx-4 relative">
 <button id="close-modal-btn" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800">
 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
 </button>
 <h3 class="text-2xl font-bold text-emerald-700 mb-4" id="modal-title"></h3>
 <div id="modal-content-area" class="text-emerald-700 max-h-96 overflow-y-auto">
 <p id="loading-indicator" class="text-center text-emerald-500 hidden">Loading... ✨</p>
 <p id="llm-response-text"></p>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function () {
 const menuBtn = document.getElementById('menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
 menuBtn.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
 const navLinks = document.querySelectorAll('.nav-link, #mobile-menu a');
 navLinks.forEach(link => {
 link.addEventListener('click', () => {
 if (!mobileMenu.classList.contains('hidden')) {
 mobileMenu.classList.add('hidden');
 }
 });
 });
 const sections = document.querySelectorAll('section');
 const mainNavLinks = document.querySelectorAll('nav a.nav-link');
 const options = {
 root: null,
 threshold: 0.3,
 rootMargin: "-100px"
 };
 const observer = new IntersectionObserver((entries, observer) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 mainNavLinks.forEach(link => {
 link.classList.remove('active');
 if (link.getAttribute('href').substring(1) === entry.target.id) {
 link.classList.add('active');
 }
 });
 }
 });
 }, options);
 sections.forEach(section => {
 observer.observe(section);
 });
 const ctx = document.getElementById('findingsChart').getContext('2d');
 const findingsData = {
 labels: ['Knowledge', 'Attitude', 'Practice'],
 datasets: [{
 label: 'Performance Score (%)',
 data: [85, 41, 25],
 backgroundColor: [
 'rgba(6, 115, 96, 0.6)', /* emerald-700 */
 'rgba(236, 72, 153, 0.6)', /* pink-500 */
 'rgba(147, 51, 234, 0.6)' /* purple-600 */
 ],
 borderColor: [
 'rgba(6, 115, 96, 1)',
 'rgba(236, 72, 153, 1)',
 'rgba(147, 51, 234, 1)'
 ],
 borderWidth: 1
 }]
 };
 const findingsChart = new Chart(ctx, {
 type: 'bar',
 data: findingsData,
 options: {
 responsive: true,
 maintainAspectRatio: false,
 indexAxis: 'y',
 scales: {
 x: {
 beginAtZero: true,
 max: 100,
 ticks: {
 callback: function(value) {
 return value + '%'
 }
 }
 },
 y: {
 grid: {
 display: false
 }
 }
 },
 plugins: {
 legend: {
 display: false
 },
 tooltip: {
 callbacks: {
 label: function(context) {
 let label = context.dataset.label || '';
 if (label) {
 label += ': ';
 }
 if (context.parsed.x !== null) {
 label += context.parsed.x + '%';
 }
 return label;
 }
 }
 }
 }
 }
 });
 // LLM Integration
 const llmModal = document.getElementById('llm-modal');
 const closeModalBtn = document.getElementById('close-modal-btn');
 const modalTitle = document.getElementById('modal-title');
 const llmResponseText = document.getElementById('llm-response-text');
 const loadingIndicator = document.getElementById('loading-indicator');
 const llmButtons = document.querySelectorAll('.llm-btn'); // Select all buttons with this class
 closeModalBtn.addEventListener('click', () => {
 llmModal.classList.add('hidden');
 });
 llmButtons.forEach(button => {
 button.addEventListener('click', async () => {
 const feature = button.dataset.feature;
 let prompt = '';
 let title = '';
 if (feature === 'expand-recommendation') {
 const recommendation = button.dataset.recommendation;
 title = 'Expanding: ' + recommendation;
 prompt = `Given the context of a study on nurses' knowledge-practice gap in liver cirrhosis management, elaborate on the following recommendation, providing concrete actions or strategies for implementation: '${recommendation}'. Provide the response in English.`;
 } else if (feature === 'summarize-section') {
 const sectionId = button.dataset.sectionId;
 const sectionText = document.getElementById(`${sectionId}-text`).textContent;
 title = `Summary of ${sectionId.charAt(0).toUpperCase() + sectionId.slice(1)} Section`;
 prompt = `Summarize the following text concisely: '${sectionText}'. Provide the response in English.`;
 } else if (feature === 'suggest-research') {
 const limitationsText = document.getElementById('limitations-text').textContent;
 const conclusionText = document.getElementById('conclusion-text').textContent;
 title = 'Suggested Further Research Topics';
 prompt = `Given the following study limitations and conclusions, suggest 3-5 potential future research topics related to nurses' management of liver cirrhosis. Focus on actionable research questions. Limitations: '${limitationsText}'. Conclusions: '${conclusionText}'. Provide the response in English.`;
 }
 modalTitle.textContent = title;
 llmResponseText.textContent = '';
 loadingIndicator.classList.remove('hidden');
 llmModal.classList.remove('hidden');
 let chatHistory = [];
 chatHistory.push({ role: "user", parts: [{ text: prompt }] });
 const payload = { contents: chatHistory };
 const apiKey = "";
 const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
 try {
 const response = await fetch(apiUrl, {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(payload)
 });
 const result = await response.json();
 if (result.candidates && result.candidates.length > 0 &&
 result.candidates[0].content && result.candidates[0].content.parts &&
 result.candidates[0].content.parts.length > 0) {
 const text = result.candidates[0].content.parts[0].text;
 llmResponseText.textContent = text;
 } else {
 llmResponseText.textContent = 'Failed to get a response from the AI. Please try again.';
 }
 } catch (error) {
 console.error('Error calling Gemini API:', error);
 llmResponseText.textContent = 'An error occurred while fetching the response. Please check your network connection.';
 } finally {
 loadingIndicator.classList.add('hidden');
 }
 });
 });
 });
 </script>
</body>
</html>

Xet Storage Details

Size:
27.1 kB
·
Xet hash:
d4662757d77c1275601d6ef26ab44ecddcbddc55d3854df4e311cc0091a41cb8

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.