|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Cancer Genetics Explorer</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
|
|
@keyframes pulse { |
|
0%, 100% { transform: scale(1); } |
|
50% { transform: scale(1.05); } |
|
} |
|
|
|
@keyframes float { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-10px); } |
|
} |
|
|
|
.dna-visualization { |
|
position: relative; |
|
height: 200px; |
|
overflow: hidden; |
|
} |
|
|
|
.dna-strand { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: repeating-linear-gradient( |
|
45deg, |
|
#3b82f6, |
|
#3b82f6 10px, |
|
#93c5fd 10px, |
|
#93c5fd 20px |
|
); |
|
animation: scroll 20s linear infinite; |
|
} |
|
|
|
@keyframes scroll { |
|
0% { background-position: 0 0; } |
|
100% { background-position: 200px 200px; } |
|
} |
|
|
|
.gene-card { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.gene-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
} |
|
|
|
.mutation-dot { |
|
width: 12px; |
|
height: 12px; |
|
border-radius: 50%; |
|
position: absolute; |
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: #f1f1f1; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: #888; |
|
border-radius: 4px; |
|
} |
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
background: #555; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 font-sans"> |
|
<header class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white shadow-lg"> |
|
<div class="container mx-auto px-4 py-8"> |
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
<div class="w-full md:w-1/2 mb-6 md:mb-0"> |
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Cancer Genetics Explorer</h1> |
|
<p class="text-xl text-blue-100">Understanding how cancer develops at the genetic level</p> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="dna-visualization rounded-lg overflow-hidden shadow-xl"> |
|
<div class="dna-strand"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
<section class="mb-16"> |
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-4">Cancer: A Genetic Disease</h2> |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<p class="text-gray-700 mb-6 leading-relaxed"> |
|
Cancer is fundamentally a disease of the genes. It occurs when changes (mutations) in genes that control cell growth and division lead to uncontrolled cell proliferation. These genetic changes can be inherited or acquired during a person's lifetime. |
|
</p> |
|
<p class="text-gray-700 mb-6 leading-relaxed"> |
|
Our cells have sophisticated mechanisms to repair DNA damage and prevent cancer. However, when multiple mutations accumulate in critical genes, these safety mechanisms can fail, allowing cancer to develop. |
|
</p> |
|
<button onclick="showVideoModal()" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 flex items-center"> |
|
<i class="fas fa-play-circle mr-2"></i> Watch Introduction Video |
|
</button> |
|
</div> |
|
<div class="w-full md:w-1/2 flex items-center justify-center"> |
|
<div class="relative w-full max-w-md h-64"> |
|
<div class="absolute inset-0 bg-blue-100 rounded-lg flex items-center justify-center p-4 shadow-inner"> |
|
<div class="text-center"> |
|
<i class="fas fa-dna text-6xl text-blue-600 mb-4"></i> |
|
<h3 class="text-xl font-semibold text-blue-800">Genes → Proteins → Cell Behavior</h3> |
|
</div> |
|
</div> |
|
<div class="absolute -bottom-2 -right-2 w-20 h-20 bg-indigo-300 rounded-full opacity-30"></div> |
|
<div class="absolute -top-2 -left-2 w-16 h-16 bg-blue-300 rounded-full opacity-20"></div> |
|
<div class="absolute bottom-4 left-8 w-12 h-12 bg-purple-300 rounded-full opacity-25"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">How Cancer Develops Genetically</h2> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
|
<div class="p-8"> |
|
<h3 class="text-2xl font-semibold text-blue-700 mb-6">The Multi-Step Process of Carcinogenesis</h3> |
|
|
|
<div class="relative"> |
|
|
|
<div class="flex flex-col md:flex-row gap-4 mb-8"> |
|
|
|
<div class="flex-1 flex flex-col items-center text-center"> |
|
<div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center text-white font-bold mb-2 shadow-md">1</div> |
|
<h4 class="font-semibold text-gray-800">Initial Mutation</h4> |
|
<p class="text-sm text-gray-600">DNA damage in proto-oncogenes or tumor suppressor genes</p> |
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col items-center text-center"> |
|
<div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold mb-2 shadow-md">2</div> |
|
<h4 class="font-semibold text-gray-800">Clonal Expansion</h4> |
|
<p class="text-sm text-gray-600">One cell with advantage replicates more</p> |
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col items-center text-center"> |
|
<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold mb-2 shadow-md">3</div> |
|
<h4 class="font-semibold text-gray-800">Additional Mutations</h4> |
|
<p class="text-sm text-gray-600">Accumulation of more genetic changes</p> |
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col items-center text-center"> |
|
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white font-bold mb-2 shadow-md">4</div> |
|
<h4 class="font-semibold text-gray-800">Invasion</h4> |
|
<p class="text-sm text-gray-600">Cells break through tissue barriers</p> |
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col items-center text-center"> |
|
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mb-2 shadow-md">5</div> |
|
<h4 class="font-semibold text-gray-800">Metastasis</h4> |
|
<p class="text-sm text-gray-600">Spread to distant organs</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
<div class="bg-blue-50 rounded-lg p-6 border-l-4 border-blue-500"> |
|
<h4 class="font-bold text-blue-800 mb-2">Key Concepts:</h4> |
|
<ul class="list-disc pl-5 text-gray-700 space-y-2"> |
|
<li>Cancer requires multiple mutations (typically 5-10)</li> |
|
<li>These mutations affect different cellular pathways</li> |
|
<li>The process can take years or decades to complete</li> |
|
<li>Not all mutations lead to cancer - some are neutral</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="bg-purple-50 rounded-lg p-6 border-l-4 border-purple-500"> |
|
<h4 class="font-bold text-purple-800 mb-2">Why Understanding Matters:</h4> |
|
<ul class="list-disc pl-5 text-gray-700 space-y-2"> |
|
<li>Helps in early detection and prevention</li> |
|
<li>Guides development of targeted therapies</li> |
|
<li>Enables personalized medicine approaches</li> |
|
<li>Informs about inherited cancer risks</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">Key Categories of Cancer Genes</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
<div class="gene-card bg-gradient-to-br from-red-50 to-red-100 rounded-xl shadow-md overflow-hidden border-t-4 border-red-500"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-bolt"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-red-800">Proto-oncogenes</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Normal genes that promote cell growth and division. When mutated, they become oncogenes that drive uncontrolled cell proliferation. |
|
</p> |
|
<div class="mt-4"> |
|
<span class="inline-block bg-red-200 text-red-800 text-xs px-2 py-1 rounded mr-2">Examples:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">MYC</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">RAS</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">HER2</span> |
|
</div> |
|
<button onclick="showGeneDetail('proto-oncogenes')" class="mt-4 text-red-600 hover:text-red-800 font-medium flex items-center"> |
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gene-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-md overflow-hidden border-t-4 border-blue-500"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-shield-alt"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-blue-800">Tumor Suppressors</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Genes that slow down cell division, repair DNA mistakes, or tell cells when to die. When inactivated, cells grow uncontrollably. |
|
</p> |
|
<div class="mt-4"> |
|
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded mr-2">Examples:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">TP53</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">RB1</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">BRCA1/2</span> |
|
</div> |
|
<button onclick="showGeneDetail('tumor-suppressors')" class="mt-4 text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gene-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl shadow-md overflow-hidden border-t-4 border-green-500"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-tools"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-green-800">DNA Repair Genes</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Genes that fix mistakes made when DNA is copied. When these don't work, mutations accumulate in other genes faster. |
|
</p> |
|
<div class="mt-4"> |
|
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded mr-2">Examples:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">MLH1</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">MSH2</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">ATM</span> |
|
</div> |
|
<button onclick="showGeneDetail('dna-repair')" class="mt-4 text-green-600 hover:text-green-800 font-medium flex items-center"> |
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">Important Cancer Genes in Detail</h2> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
|
|
<div class="flex overflow-x-auto pb-2 mb-6"> |
|
<button onclick="showGeneInfo('TP53')" class="gene-tab-btn flex-shrink-0 px-4 py-2 mr-2 font-medium rounded-lg bg-gray-200 text-gray-800 hover:bg-blue-200"> |
|
TP53 |
|
</button> |
|
<button onclick="showGeneInfo('BRCA1')" class="gene-tab-btn flex-shrink-0 px-4 py-2 mr-2 font-medium rounded-lg bg-gray-200 text-gray-800 hover:bg-blue-200"> |
|
BRCA1/2 |
|
</button> |
|
<button onclick="showGeneInfo('RAS')" class="gene-tab-btn flex-shrink-0 px-4 py-2 mr-2 font-medium rounded-lg bg-gray-200 text-gray-800 hover:bg-blue-200"> |
|
RAS Family |
|
</button> |
|
<button onclick="showGeneInfo('MYC')" class="gene-tab-btn flex-shrink-0 px-4 py-2 mr-2 font-medium rounded-lg bg-gray-200 text-gray-800 hover:bg-blue-200"> |
|
MYC |
|
</button> |
|
<button onclick="showGeneInfo('EGFR')" class="gene-tab-btn flex-shrink-0 px-4 py-2 mr-2 font-medium rounded-lg bg-gray-200 text-gray-800 hover:bg-blue-200"> |
|
EGFR |
|
</button> |
|
</div> |
|
|
|
|
|
<div id="gene-info-display"> |
|
<div class="text-center py-10"> |
|
<i class="fas fa-dna text-4xl text-gray-400 mb-4"></i> |
|
<h3 class="text-xl font-semibold text-gray-600">Select a gene to learn more</h3> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">How Cancer-Causing Mutations Occur</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
<h3 class="text-2xl font-semibold text-blue-700 mb-6">Sources of Mutations</h3> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white mr-4 mt-1"> |
|
<i class="fas fa-venus-mars"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-purple-800 mb-2">Inherited Mutations</h4> |
|
<p class="text-gray-700"> |
|
About 5-10% of cancers are caused by inherited mutations passed down in families. These are present in all cells from birth. Examples include BRCA1/2 mutations that increase breast cancer risk. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white mr-4 mt-1"> |
|
<i class="fas fa-smog"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-green-800 mb-2">Environmental Factors</h4> |
|
<p class="text-gray-700"> |
|
Carcinogens like tobacco smoke, UV radiation, certain chemicals, and viruses can damage DNA. These cause acquired mutations in affected cells only. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 w-10 h-10 bg-red-500 rounded-full flex items-center justify-center text-white mr-4 mt-1"> |
|
<i class="fas fa-random"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-red-800 mb-2">Replication Errors</h4> |
|
<p class="text-gray-700"> |
|
Each time a cell divides, it copies its DNA. Random mistakes happen in about 1 in 1,000,000 bases. Normally repaired, but occasional errors persist. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
<h3 class="text-2xl font-semibold text-blue-700 mb-6">Types of Genetic Changes</h3> |
|
|
|
<div class="space-y-6"> |
|
|
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-4 mt-1"> |
|
<i class="fas fa-circle"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-blue-800 mb-2">Point Mutations</h4> |
|
<p class="text-gray-700"> |
|
Single base changes that can alter protein function. Example: The RAS oncogene commonly has point mutations at codon 12. |
|
</p> |
|
<div class="bg-gray-100 p-3 rounded mt-2 font-mono text-sm"> |
|
<span class="text-green-600">Normal:</span> GGT (Glycine)<br> |
|
<span class="text-red-600">Mutant:</span> GAT (Aspartic acid) |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-4 mt-1"> |
|
<i class="fas fa-copy"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-yellow-800 mb-2">Gene Amplifications</h4> |
|
<p class="text-gray-700"> |
|
Extra copies of a gene lead to overproduction of its protein. Example: HER2 is amplified in 20-30% of breast cancers. |
|
</p> |
|
<div class="bg-gray-100 p-3 rounded mt-2 font-mono text-sm"> |
|
<span class="text-purple-600">Normal cell:</span> 2 copies of HER2<br> |
|
<span class="text-red-600">Cancer cell:</span> 50+ copies of HER2 |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 w-10 h-10 bg-indigo-500 rounded-full flex items-center justify-center text-white mr-4 mt-1"> |
|
<i class="fas fa-exchange-alt"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold text-indigo-800 mb-2">Chromosomal Translocations</h4> |
|
<p class="text-gray-700"> |
|
Parts of chromosomes swap places, creating fusion genes. Example: BCR-ABL in chronic myeloid leukemia. |
|
</p> |
|
<div class="bg-gray-100 p-3 rounded mt-2 font-mono text-sm"> |
|
<span class="text-blue-600">Translocation between</span><br> |
|
Chromosome 9 (ABL) and 22 (BCR) |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">Applying Genetic Knowledge in Cancer Care</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
<div class="bg-gradient-to-br from-purple-50 to-white rounded-xl shadow-md overflow-hidden border border-purple-100"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-vial"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-purple-800">Genetic Testing</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Identifies inherited cancer risk mutations (like BRCA) to guide prevention and screening strategies for patients and their families. |
|
</p> |
|
<div class="mt-4"> |
|
<span class="inline-block bg-purple-200 text-purple-800 text-xs px-2 py-1 rounded mr-2">Benefits:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">Early detection</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">Preventive options</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">Family planning</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-blue-50 to-white rounded-xl shadow-md overflow-hidden border border-blue-100"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-microscope"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-blue-800">Tumor Profiling</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Sequencing tumor DNA to identify mutations that can guide treatment selection (like EGFR inhibitors for EGFR-mutated lung cancer). |
|
</p> |
|
<div class="mt-4"> |
|
<span class="inline-block bg-blue-200 text-blue-800 text-xs px-2 py-1 rounded mr-2">Examples:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">KRAS testing</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">BRAF inhibitors</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">PD-L1 status</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-green-50 to-white rounded-xl shadow-md overflow-hidden border border-green-100"> |
|
<div class="p-6"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-bullseye"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-green-800">Targeted Therapies</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Drugs designed to specifically block the effects of cancer-causing mutations while sparing normal cells. |
|
</p> |
|
<div class="mt-4"> |
|
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded mr-2">Examples:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">Trastuzumab</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">Imatinib</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2 mb-1">Olaparib</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">Test Your Knowledge</h2> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
<div id="quiz-container"> |
|
<h3 class="text-2xl font-semibold text-blue-700 mb-6">Cancer Genetics Quiz</h3> |
|
<p class="text-gray-700 mb-8">Answer these questions to check your understanding of cancer genetics concepts.</p> |
|
|
|
<div id="quiz-questions"> |
|
|
|
<div class="mb-8"> |
|
<h4 class="font-bold text-gray-800 mb-3">1. Which type of genes normally slow down cell division or promote cell death?</h4> |
|
<div class="space-y-2"> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q1" value="a" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>Proto-oncogenes</span> |
|
</label> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q1" value="b" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>Tumor suppressor genes</span> |
|
</label> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q1" value="c" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>DNA repair genes</span> |
|
</label> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
<h4 class="font-bold text-gray-800 mb-3">2. The "guardian of the genome" that detects DNA damage and can trigger cell death is:</h4> |
|
<div class="space-y-2"> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q2" value="a" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>MYC</span> |
|
</label> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q2" value="b" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>TP53</span> |
|
</label> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q2" value="c" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>BRCA1</span> |
|
</label> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
<h4 class="font-bold text-gray-800 mb-3">3. Which is NOT a way that proto-oncogenes can become cancer-causing oncogenes?</h4> |
|
<div class="space-y-2"> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q3" value="a" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>Point mutation changing protein function</span> |
|
</label> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q3" value="b" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>Gene amplification creating extra copies</span> |
|
</label> |
|
<label class="flex items-center space-x-3"> |
|
<input type="radio" name="q3" value="c" class="form-radio h-4 w-4 text-blue-600"> |
|
<span>Complete deletion of the gene</span> |
|
</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<button onclick="checkQuizAnswers()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300"> |
|
Submit Answers |
|
</button> |
|
|
|
<div id="quiz-results" class="mt-6 hidden"> |
|
<div class="p-4 rounded-lg bg-blue-50 border border-blue-200"> |
|
<h4 class="font-bold text-blue-800 mb-2">Results:</h4> |
|
<p id="quiz-score" class="text-gray-700"></p> |
|
<div id="quiz-feedback" class="mt-2 text-sm text-gray-700"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="mb-16"> |
|
<h2 class="text-3xl font-bold text-indigo-800 mb-8 text-center">Additional Resources</h2> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-4">Further Reading</h3> |
|
<ul class="space-y-3"> |
|
<li> |
|
<a href="https://www.cancer.gov/about-cancer/understanding/what-is-cancer" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center"> |
|
<i class="fas fa-external-link-alt mr-2"></i> NCI: What Is Cancer? |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://www.ncbi.nlm.nih.gov/books/NBK26816/" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center"> |
|
<i class="fas fa-external-link-alt mr-2"></i> Molecular Biology of the Cell: Cancer |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://www.cancerquest.org/patients/cancer-biology" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center"> |
|
<i class="fas fa-external-link-alt mr-2"></i> CancerQuest: Cancer Biology |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
<div class="p-8"> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-4">Visual Learning</h3> |
|
<ul class="space-y-3"> |
|
<li> |
|
<a href="https://www.youtube.com/watch?v=46Xh7OFkkCE" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center"> |
|
<i class="fab fa-youtube mr-2"></i> How Cancer Develops (MIT) |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://www.youtube.com/watch?v=8BJ8_5Gyhg8" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center"> |
|
<i class="fab fa-youtube mr-2"></i> Oncogenes and Tumor Suppressors |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://www.youtube.com/watch?v=tMRwXiGJ9-w" class="text-blue-600 hover:text-blue-800 hover:underline flex items-center"> |
|
<i class="fab fa-youtube mr-2"></i> Targeted Cancer Therapies |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
</main> |
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
<div class="container mx-auto px-4"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="mb-6 md:mb-0"> |
|
<h2 class="text-xl font-bold mb-2">Cancer Genetics Explorer</h2> |
|
<p class="text-gray-400">Educational resource about the genetic basis of cancer</p> |
|
</div> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-twitter text-xl"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-facebook text-xl"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-instagram text-xl"></i> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm"> |
|
<p>This educational content is for informational purposes only and not a substitute for professional medical advice.</p> |
|
<p class="mt-2">© 2023 Cancer Genetics Explorer. All rights reserved.</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
<div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg w-full max-w-4xl relative"> |
|
<button onclick="hideVideoModal()" class="absolute -top-10 right-0 text-white hover:text-gray-300"> |
|
<i class="fas fa-times text-2xl"></i> |
|
</button> |
|
<div class="aspect-w-16 aspect-h-9"> |
|
<iframe id="video-iframe" class="w-full h-96 rounded-t-lg" src="https://www.youtube.com/embed/46Xh7OFkkCE?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
</div> |
|
<div class="p-6"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Cancer Genetics Explained</h3> |
|
<p class="text-gray-700">Learn how mutations in genes lead to uncontrolled cell growth and cancer development.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="gene-detail-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg w-full max-w-4xl relative max-h-screen overflow-y-auto" style="max-height: 90vh;"> |
|
<button onclick="hideGeneDetailModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times text-2xl"></i> |
|
</button> |
|
<div id="gene-detail-content" class="p-8"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
// Video Modal Functions |
|
function showVideoModal() { |
|
document.getElementById('video-modal').classList.remove('hidden'); |
|
document.body.style.overflow = 'hidden'; |
|
} |
|
|
|
function hideVideoModal() { |
|
document.getElementById('video-modal').classList.add('hidden'); |
|
document.body.style.overflow = 'auto'; |
|
// Stop the video when modal is closed |
|
const iframe = document.getElementById('video-iframe'); |
|
iframe.src = iframe.src; |
|
} |
|
|
|
// Gene Detail Modal |
|
function showGeneDetail(geneType) { |
|
let content = ''; |
|
|
|
if (geneType === 'proto-oncogenes') { |
|
content = ` |
|
<h2 class="text-2xl font-bold text-indigo-800 mb-6">Proto-oncogenes and Oncogenes</h2> |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-3">What They Are</h3> |
|
<p class="text-gray-700 mb-4"> |
|
Proto-oncogenes are normal genes involved in cell growth and division. When mutated, they become oncogenes that can cause cells to grow uncontrollably. |
|
</p> |
|
<div class="bg-blue-50 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-blue-800 mb-2">Mechanism of Action:</h4> |
|
<p class="text-gray-700"> |
|
Proto-oncogenes encode proteins that help regulate cell growth (growth factors, receptors, signal transducers, transcription factors). Mutations typically make them <span class="font-semibold">overactive</span>. |
|
</p> |
|
</div> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-3">How They Become Oncogenic</h3> |
|
<ul class="list-disc pl-5 space-y-2 text-gray-700"> |
|
<li>Point mutations (e.g., RAS family)</li> |
|
<li>Gene amplifications (e.g., MYC)</li> |
|
<li>Chromosomal translocations (e.g., BCR-ABL)</li> |
|
<li>Retroviral insertion (activates nearby genes)</li> |
|
</ul> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-blue-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-blue-800 mb-2">Common Proto-oncogenes:</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-blue-100"> |
|
<th class="text-left py-2 px-4">Gene</th> |
|
<th class="text-left py-2 px-4">Cancer Association</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-blue-100"> |
|
<tr> |
|
<td class="py-2 px-4">RAS family (HRAS, KRAS, NRAS)</td> |
|
<td class="py-2 px-4">Pancreatic, colorectal, lung cancers</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">MYC</td> |
|
<td class="py-2 px-4">Burkitt lymphoma, breast cancer</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">EGFR</td> |
|
<td class="py-2 px-4">Lung cancer, glioblastoma</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">BRAF</td> |
|
<td class="py-2 px-4">Melanoma, colorectal cancer</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-yellow-800 mb-2">Example: KRAS Mutation</h4> |
|
<p class="text-gray-700 mb-2"> |
|
KRAS is mutated in ~30% of cancers. A single base change (G→T) at codon 12 changes glycine to valine, making the protein always "on". |
|
</p> |
|
<div class="bg-gray-100 p-3 rounded font-mono text-sm"> |
|
<span class="text-green-600">Normal:</span> GGT → Gly<br> |
|
<span class="text-red-600">Mutant:</span> GTT → Val |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} else if (geneType === 'tumor-suppressors') { |
|
content = ` |
|
<h2 class="text-2xl font-bold text-indigo-800 mb-6">Tumor Suppressor Genes</h2> |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-3">What They Are</h3> |
|
<p class="text-gray-700 mb-4"> |
|
Tumor suppressor genes are safeguards that prevent uncontrolled cell growth. They act as "brakes" on cellular proliferation. |
|
</p> |
|
<div class="bg-blue-50 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-blue-800 mb-2">Key Functions:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Inhibit cell cycle progression</li> |
|
<li>Promote DNA repair</li> |
|
<li>Trigger apoptosis (programmed cell death)</li> |
|
<li>Maintain genomic stability</li> |
|
</ul> |
|
</div> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-3">Knockout Mutation Mechanism</h3> |
|
<p class="text-gray-700 mb-2"> |
|
Unlike proto-oncogenes that become overactive when mutated, tumor suppressors become inactivated. Both copies must typically be lost (two-hit hypothesis). |
|
</p> |
|
<div class="bg-purple-50 rounded-lg p-4"> |
|
<h4 class="font-semibold text-purple-800 mb-2">Inheritance Patterns</h4> |
|
<p class="text-gray-700"> |
|
Inherited mutations in one copy (like BRCA1/2) predispose to cancer because only one additional mutation is needed to lose function completely. |
|
</p> |
|
</div> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-blue-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-blue-800 mb-2">Important Tumor Suppressors:</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-blue-100"> |
|
<th class="text-left py-2 px-4">Gene</th> |
|
<th class="text-left py-2 px-4">Cancer Association</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-blue-100"> |
|
<tr> |
|
<td class="py-2 px-4">TP53 (p53)</td> |
|
<td class="py-2 px-4">>50% of all cancers</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">RB1</td> |
|
<td class="py-2 px-4">Retinoblastoma, osteosarcoma</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">BRCA1/BRCA2</td> |
|
<td class="py-2 px-4">Breast, ovarian cancers</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">APC</td> |
|
<td class="py-2 px-4">Colorectal cancer</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-800 mb-2">Example: TP53 Function</h4> |
|
<p class="text-gray-700 mb-2"> |
|
p53 protein responds to DNA damage by: |
|
</p> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Activating DNA repair</li> |
|
<li>Stopping cell cycle (G1 arrest)</li> |
|
<li>Triggering apoptosis if damage is severe</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} else if (geneType === 'dna-repair') { |
|
content = ` |
|
<h2 class="text-2xl font-bold text-indigo-800 mb-6">DNA Repair Genes</h2> |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-3">What They Are</h3> |
|
<p class="text-gray-700 mb-4"> |
|
DNA repair genes maintain genomic integrity by correcting errors that occur during DNA replication or are caused by environmental damage. |
|
</p> |
|
<h3 class="text-xl font-semibold text-blue-700 mb-3">Consequences of Defects</h3> |
|
<p class="text-gray-700 mb-4"> |
|
When these genes are mutated, mutations accumulate in other genes (including proto-oncogenes and tumor suppressors) at a much higher rate. |
|
</p> |
|
<div class="bg-blue-50 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-blue-800 mb-2">Repair Pathways:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Mismatch repair (MMR)</li> |
|
<li>Base excision repair (BER)</li> |
|
<li>Nucleotide excision repair (NER)</li> |
|
<li>Double-strand break repair</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-blue-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-blue-800 mb-2">Important DNA Repair Genes:</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-blue-100"> |
|
<th class="text-left py-2 px-4">Gene</th> |
|
<th class="text-left py-2 px-4">Pathway</th> |
|
<th class="text-left py-2 px-4">Cancer Association</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-blue-100"> |
|
<tr> |
|
<td class="py-2 px-4">BRCA1/BRCA2</td> |
|
<td class="py-2 px-4">Homologous recombination</td> |
|
<td class="py-2 px-4">Breast, ovarian cancers</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">MLH1, MSH2</td> |
|
<td class="py-2 px-4">Mismatch repair</td> |
|
<td class="py-2 px-4">Lynch syndrome</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">ATM</td> |
|
<td class="py-2 px-4">Double-strand break sensing</td> |
|
<td class="py-2 px-4">Ataxia-telangiectasia</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">XPA-XPG</td> |
|
<td class="py-2 px-4">Nucleotide excision repair</td> |
|
<td class="py-2 px-4">Xeroderma pigmentosum</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-pink-50 border border-pink-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-pink-800 mb-2">Example: MMR Deficiency</h4> |
|
<p class="text-gray-700 mb-2"> |
|
Mismatch repair (MMR) genes fix base mismatches during replication. Defects cause microsatellite instability (MSI), seen in Lynch syndrome. |
|
</p> |
|
<div class="bg-gray-100 p-2 rounded font-mono text-xs"> |
|
Normal: CA<strong>A</strong>CA → CA<strong>T</strong>CA (repaired)<br> |
|
MMR-defective: CA<strong>A</strong>CA → CA<strong>T</strong>CA (persists) |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} |
|
|
|
document.getElementById('gene-detail-content').innerHTML = content; |
|
document.getElementById('gene-detail-modal').classList.remove('hidden'); |
|
document.body.style.overflow = 'hidden'; |
|
} |
|
|
|
function hideGeneDetailModal() { |
|
document.getElementById('gene-detail-modal').classList.add('hidden'); |
|
document.body.style.overflow = 'auto'; |
|
} |
|
|
|
// Gene Info Display |
|
function showGeneInfo(gene) { |
|
let content = ''; |
|
|
|
if (gene === 'TP53') { |
|
content = ` |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-shield-alt text-2xl"></i> |
|
</div> |
|
<h3 class="text-2xl font-bold text-blue-800">TP53 (p53) Gene</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Often called the "guardian of the genome," TP53 is the most commonly mutated gene in human cancers (>50%). It encodes the p53 protein that plays a crucial role in preventing cancer formation. |
|
</p> |
|
<div class="bg-blue-50 rounded-lg p-4 mb-4 border-l-4 border-blue-500"> |
|
<h4 class="font-semibold text-blue-800 mb-2">Key Functions:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Stops cell cycle to allow DNA repair</li> |
|
<li>Activates DNA repair proteins</li> |
|
<li>Triggers apoptosis if damage is irreparable</li> |
|
<li>Prevents genomic instability</li> |
|
</ul> |
|
</div> |
|
<h4 class="font-semibold text-gray-800 mb-2">Cancer Association:</h4> |
|
<p class="text-gray-700 mb-4"> |
|
Mutated in >50% of all cancers, including lung, breast, colorectal, liver, and many others. Li-Fraumeni syndrome (inherited TP53 mutations) causes early-onset multiple cancers. |
|
</p> |
|
<h4 class="font-semibold text-gray-800 mb-2">Mutation Effects:</h4> |
|
<p class="text-gray-700"> |
|
Most mutations are missense (>80%) that disrupt p53's DNA binding ability. Results in loss of cell cycle control and accumulation of genetic damage. |
|
</p> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-blue-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<h4 class="font-bold text-blue-800">p53 Protein Structure</h4> |
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">DNA binding domain most commonly mutated</span> |
|
</div> |
|
<div class="bg-gray-100 rounded-lg p-4 flex justify-center"> |
|
<div class="w-full max-w-xs text-center"> |
|
<div class="h-4 bg-blue-400 rounded-t-lg mb-1"></div> |
|
<div class="h-4 bg-blue-500 mb-1"></div> |
|
<div class="h-8 bg-red-500 mb-1"> |
|
<div class="text-center text-xs text-white pt-2">Mutation Hotspot<br>(R175H, R248Q, R273H)</div> |
|
</div> |
|
<div class="h-4 bg-blue-600 mb-1"></div> |
|
<div class="h-4 bg-blue-700 rounded-b-lg"></div> |
|
<div class="text-xs mt-2 text-gray-700"> |
|
<span class="inline-block w-24">Transactivation</span> |
|
<span class="inline-block w-24">DNA Binding</span> |
|
<span class="inline-block w-24">Oligomerization</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-yellow-800 mb-2">Example Mutation: R175H</h4> |
|
<p class="text-gray-700 mb-2"> |
|
Arginine to Histidine at position 175 disrupts zinc binding needed for proper protein folding. |
|
</p> |
|
<div class="bg-gray-100 p-2 rounded font-mono text-sm mb-2"> |
|
<span class="text-green-600">Normal:</span> CGC (Arg)<br> |
|
<span class="text-red-600">Mutant:</span> CAC (His) |
|
</div> |
|
<p class="text-gray-700"> |
|
Present in ~5% of all tumors. Associated with poorer prognosis. |
|
</p> |
|
</div> |
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-800 mb-2">Therapeutic Strategies</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>MDM2 inhibitors (activate wild-type p53)</li> |
|
<li>p53 gene therapy (restore function)</li> |
|
<li>Targeting mutant p53 for degradation</li> |
|
<li>Combination with DNA-damaging agents</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} else if (gene === 'BRCA1') { |
|
content = ` |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-female text-2xl"></i> |
|
</div> |
|
<h3 class="text-2xl font-bold text-pink-800">BRCA1 Gene</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
BRCA1 (BReast CAncer gene 1) is a tumor suppressor involved in DNA double-strand break repair, particularly through homologous recombination. |
|
</p> |
|
<div class="bg-pink-50 rounded-lg p-4 mb-4 border-l-4 border-pink-500"> |
|
<h4 class="font-semibold text-pink-800 mb-2">Key Functions:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Repair DNA double-strand breaks</li> |
|
<li>Maintain genomic stability</li> |
|
<li>Regulate cell cycle checkpoints</li> |
|
<li>Participate in chromatin remodeling</li> |
|
</ul> |
|
</div> |
|
<h4 class="font-semibold text-gray-800 mb-2">Cancer Association:</h4> |
|
<p class="text-gray-700 mb-4"> |
|
Germline mutations dramatically increase risk of breast (45-85% lifetime risk), ovarian (15-40%), prostate, and pancreatic cancers. Also associated with basal-like breast cancers. |
|
</p> |
|
<h4 class="font-semibold text-gray-800 mb-2">Mutation Effects:</h4> |
|
<p class="text-gray-700"> |
|
Most mutations are truncating (nonsense or frameshift). Cells become deficient in homologous recombination repair, leading to reliance on error-prone repair mechanisms. |
|
</p> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-pink-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-pink-800 mb-3">BRCA1 vs. BRCA2</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-pink-100"> |
|
<th class="text-left py-2 px-4">Feature</th> |
|
<th class="text-left py-2 px-4">BRCA1</th> |
|
<th class="text-left py-2 px-4">BRCA2</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-pink-100"> |
|
<tr> |
|
<td class="py-2 px-4">Protein Size</td> |
|
<td class="py-2 px-4">1,863 aa</td> |
|
<td class="py-2 px-4">3,418 aa</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Breast Cancer Risk</td> |
|
<td class="py-2 px-4">45-85%</td> |
|
<td class="py-2 px-4">45-85%</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Ovarian Cancer Risk</td> |
|
<td class="py-2 px-4">15-40%</td> |
|
<td class="py-2 px-4">10-20%</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Tumor Characteristics</td> |
|
<td class="py-2 px-4">Triple-negative</td> |
|
<td class="py-2 px-4">ER/PR+ more common</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-purple-800 mb-2">Founder Mutations</h4> |
|
<p class="text-gray-700 mb-2"> |
|
Certain populations have specific common mutations: |
|
</p> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Ashkenazi Jews: 185delAG, 5382insC</li> |
|
<li>Icelandic: 2509T>A</li> |
|
<li>Dutch: Exon 13 4-bp deletion</li> |
|
</ul> |
|
</div> |
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-800 mb-2">PARP Inhibitor Therapy</h4> |
|
<p class="text-gray-700 mb-2"> |
|
Synthetic lethality - combination that kills cancer cells but spares normal cells: |
|
</p> |
|
<ol class="list-decimal pl-5 space-y-1 text-gray-700"> |
|
<li>BRCA deficiency impairs homologous recombination</li> |
|
<li>PARP inhibition blocks base excision repair</li> |
|
<li>Accumulation of DNA damage → cell death</li> |
|
</ol> |
|
<div class="mt-3"> |
|
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded">Drugs:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">Olaparib</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">Talazoparib</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} else if (gene === 'RAS') { |
|
content = ` |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-bolt text-2xl"></i> |
|
</div> |
|
<h3 class="text-2xl font-bold text-red-800">RAS Family Oncogenes</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
The RAS family (HRAS, KRAS, NRAS) are among the most frequently mutated oncogenes in human cancers (~30%). They encode small GTPases that regulate cell growth signals. |
|
</p> |
|
<div class="bg-red-50 rounded-lg p-4 mb-4 border-l-4 border-red-500"> |
|
<h4 class="font-semibold text-red-800 mb-2">Key Features:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Molecular switch (GTP/GDP-bound states)</li> |
|
<li>Downstream of receptor tyrosine kinases</li> |
|
<li>Activates MAPK and PI3K pathways</li> |
|
<li>20-30% of all human tumors have RAS mutations</li> |
|
</ul> |
|
</div> |
|
<h4 class="font-semibold text-gray-800 mb-2">Mutation Effects:</h4> |
|
<p class="text-gray-700"> |
|
Mutations (especially at codons 12, 13, 61) lock RAS in the active GTP-bound state, causing constant growth signaling regardless of external stimuli. |
|
</p> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-red-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-red-800 mb-3">RAS Isoform Distribution in Cancer</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-red-100"> |
|
<th class="text-left py-2 px-4">Isoform</th> |
|
<th class="text-left py-2 px-4">Main Cancer Types</th> |
|
<th class="text-left py-2 px-4">Prevalence</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-red-100"> |
|
<tr> |
|
<td class="py-2 px-4">KRAS</td> |
|
<td class="py-2 px-4">Pancreatic (90%), colorectal (30-50%), lung (15-25%)</td> |
|
<td class="py-2 px-4">~85% of RAS mutations</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">NRAS</td> |
|
<td class="py-2 px-4">Melanoma (15-20%), leukemia</td> |
|
<td class="py-2 px-4">~12% of RAS mutations</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">HRAS</td> |
|
<td class="py-2 px-4">Bladder, head and neck, thyroid</td> |
|
<td class="py-2 px-4">~3% of RAS mutations</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-blue-800 mb-2">RAS Signaling</h4> |
|
<div class="text-center bg-gray-100 p-3 rounded"> |
|
Growth Factor → RTK → <span class="font-bold text-red-600">RAS</span> → RAF → MEK → ERK → Cell Proliferation |
|
</div> |
|
<p class="text-gray-700 mt-3"> |
|
Activated RAS binds and activates RAF kinase, initiating the MAPK cascade that promotes cell growth and survival. |
|
</p> |
|
</div> |
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-800 mb-2">Therapeutic Approaches</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Direct RAS inhibitors (KRAS G12C covalent inhibitors)</li> |
|
<li>Targeting downstream effectors (MEK inhibitors)</li> |
|
<li>Combination therapies with immunotherapy</li> |
|
<li>Synthetic lethality approaches</li> |
|
</ul> |
|
<div class="mt-3"> |
|
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded">Drugs:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">Sotorasib</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">Adagrasib</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">Trametinib</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} else if (gene === 'MYC') { |
|
content = ` |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-fire text-2xl"></i> |
|
</div> |
|
<h3 class="text-2xl font-bold text-yellow-800">MYC Oncogene</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
MYC is a master transcription factor that regulates expression of ~15% of all genes, coordinating cell growth, proliferation, metabolism, and apoptosis. |
|
</p> |
|
<div class="bg-yellow-50 rounded-lg p-4 mb-4 border-l-4 border-yellow-500"> |
|
<h4 class="font-semibold text-yellow-800 mb-2">Key Features:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Basic helix-loop-helix leucine zipper protein</li> |
|
<li>Forms heterodimers with MAX to bind DNA</li> |
|
<li>Amplified in many cancers (not point mutations)</li> |
|
<li>Regulates ribosome biogenesis, metabolism</li> |
|
</ul> |
|
</div> |
|
<h4 class="font-semibold text-gray-800 mb-2">Cancer Association:</h4> |
|
<p class="text-gray-700"> |
|
Deregulated in ~70% of cancers, including Burkitt lymphoma (translocation), breast, lung, colorectal cancers, and neuroblastoma (amplification). |
|
</p> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-yellow-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-yellow-800 mb-3">Common MYC Deregulation Mechanisms</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-yellow-100"> |
|
<th class="text-left py-2 px-4">Mechanism</th> |
|
<th class="text-left py-2 px-4">Example Cancers</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-yellow-100"> |
|
<tr> |
|
<td class="py-2 px-4">Chromosomal translocations</td> |
|
<td class="py-2 px-4">Burkitt lymphoma (t(8;14)), others</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Gene amplification</td> |
|
<td class="py-2 px-4">Neuroblastoma (N-MYC), breast, lung cancers</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Increased mRNA stability</td> |
|
<td class="py-2 px-4">Colorectal cancer</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Increased protein stability</td> |
|
<td class="py-2 px-4">Many cancers via altered ubiquitination</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-purple-800 mb-2">Burkitt Lymphoma Translocation</h4> |
|
<p class="text-gray-700 mb-2"> |
|
t(8;14) places MYC under control of immunoglobulin heavy chain enhancer (14q32), causing constitutive overexpression. |
|
</p> |
|
<div class="bg-gray-100 p-2 rounded font-mono text-xs"> |
|
MYC (8q24) → <span class="text-purple-600">IGH enhancer</span> → MYC overexpression |
|
</div> |
|
</div> |
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-800 mb-2">Therapeutic Challenges</h4> |
|
<p class="text-gray-700 mb-2"> |
|
MYC has been difficult to target directly due to: |
|
</p> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Lack of catalytic domain</li> |
|
<li>Amplified expression in normal proliferative tissues</li> |
|
<li>Essential role in normal physiology</li> |
|
</ul> |
|
<div class="mt-3"> |
|
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded">Emerging Approaches:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">BET inhibitors</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">MYC-MAX disruptors</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} else if (gene === 'EGFR') { |
|
content = ` |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="w-full md:w-1/2"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center text-white mr-4 shadow-lg"> |
|
<i class="fas fa-satellite-dish text-2xl"></i> |
|
</div> |
|
<h3 class="text-2xl font-bold text-indigo-800">EGFR Gene</h3> |
|
</div> |
|
<p class="text-gray-700 mb-4"> |
|
Epidermal Growth Factor Receptor (EGFR/HER1/ERBB1) is a receptor tyrosine kinase that activates intracellular signaling pathways controlling cell proliferation. |
|
</p> |
|
<div class="bg-indigo-50 rounded-lg p-4 mb-4 border-l-4 border-indigo-500"> |
|
<h4 class="font-semibold text-indigo-800 mb-2">Key Features:</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>Member of the ERBB family (HER1-4)</li> |
|
<li>Extracellular ligand binding domain</li> |
|
<li>Intracellular tyrosine kinase domain</li> |
|
<li>Activates RAS/MAPK, PI3K/AKT pathways</li> |
|
</ul> |
|
</div> |
|
<h4 class="font-semibold text-gray-800 mb-2">Activation Mechanisms in Cancer:</h4> |
|
<p class="text-gray-700"> |
|
Overexpressed in many cancers (head/neck, colon). Mutations (especially in lung cancer) cause constitutive activation independent of ligand binding. |
|
</p> |
|
</div> |
|
<div class="w-full md:w-1/2"> |
|
<div class="bg-white border border-indigo-200 rounded-lg p-4 mb-4 shadow-sm"> |
|
<h4 class="font-bold text-indigo-800 mb-3">Common EGFR Mutations in Lung Cancer</h4> |
|
<table class="w-full"> |
|
<thead> |
|
<tr class="bg-indigo-100"> |
|
<th class="text-left py-2 px-4">Mutation</th> |
|
<th class="text-left py-2 px-4">Frequency</th> |
|
<th class="text-left py-2 px-4">Affected Domain</th> |
|
<th class="text-left py-2 px-4">Drug Sensitivity</th> |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-indigo-100"> |
|
<tr> |
|
<td class="py-2 px-4">Ex19del</td> |
|
<td class="py-2 px-4">~45%</td> |
|
<td class="py-2 px-4">Exon 19 (TK)</td> |
|
<td class="py-2 px-4">Gefitinib, erlotinib, osimertinib</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">L858R</td> |
|
<td class="py-2 px-4">~40%</td> |
|
<td class="py-2 px-4">Exon 21 (TK)</td> |
|
<td class="py-2 px-4">Gefitinib, erlotinib, osimertinib</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">T790M</td> |
|
<td class="py-2 px-4">Resistance</td> |
|
<td class="py-2 px-4">Exon 20 (TK)</td> |
|
<td class="py-2 px-4">Osimertinib</td> |
|
</tr> |
|
<tr> |
|
<td class="py-2 px-4">Ex20ins</td> |
|
<td class="py-2 px-4">~10%</td> |
|
<td class="py-2 px-4">Exon 20 (TK)</td> |
|
<td class="py-2 px-4">Newer agents (amivantamab)</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4"> |
|
<h4 class="font-semibold text-blue-800 mb-2">Example: L858R Mutation</h4> |
|
<p class="text-gray-700 mb-2"> |
|
Leucine to arginine at position 858 stabilizes the active kinase conformation, increasing catalytic activity. |
|
</p> |
|
<div class="bg-gray-100 p-2 rounded font-mono text-sm"> |
|
<span class="text-green-600">Normal:</span> TTG → Leu<br> |
|
<span class="text-red-600">Mutant:</span> TTC → Arg |
|
</div> |
|
</div> |
|
<div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
|
<h4 class="font-semibold text-green-800 mb-2">Targeted Therapies</h4> |
|
<ul class="list-disc pl-5 space-y-1 text-gray-700"> |
|
<li>1st gen TKIs (gefitinib, erlotinib)</li> |
|
<li>2nd gen TKIs (afatinib, dacomitinib)</li> |
|
<li>3rd gen T790M-sparing (osimertinib)</li> |
|
<li>Monoclonal antibodies (cetuximab, panitumumab)</li> |
|
<li>BiTE antibodies (amivantamab)</li> |
|
</ul> |
|
<div class="mt-3"> |
|
<span class="inline-block bg-green-200 text-green-800 text-xs px-2 py-1 rounded">Responses:</span> |
|
<span class="inline-block bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded mr-2">60-80% response in mutation+ NSCLC</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} |
|
|
|
document.getElementById('gene-info-display').innerHTML = content; |
|
|
|
// Highlight the selected tab button |
|
const geneTabButtons = document.querySelectorAll('.gene-tab-btn'); |
|
geneTabButtons.forEach(btn => { |
|
btn.classList.remove('bg-blue-500', 'text-white'); |
|
btn.classList.add('bg-gray-200', 'text-gray-800', 'hover:bg-blue-200'); |
|
if (btn.textContent.trim().includes(gene)) { |
|
btn.classList.remove('bg-gray-200', 'text-gray-800', 'hover:bg-blue-200'); |
|
btn.classList.add('bg-blue-500', 'text-white'); |
|
} |
|
}); |
|
} |
|
|
|
// Quiz Checker |
|
function checkQuizAnswers() { |
|
const answers = { |
|
q1: 'b', |
|
q2: 'b', |
|
q3: 'c' |
|
}; |
|
|
|
let score = 0; |
|
let feedback = ''; |
|
|
|
// Check Q1 |
|
const q1Selected = document.querySelector('input[name="q1"]:checked'); |
|
if (q1Selected && q1Selected.value === answers.q1) { |
|
score++; |
|
feedback += '<p class="text-green-600">✓ Question 1 correct: Tumor suppressor genes slow down cell division.</p>'; |
|
} else { |
|
feedback += '<p class="text-red-600">✗ Question 1: The correct answer is "Tumor suppressor genes".</p>'; |
|
} |
|
|
|
// Check Q2 |
|
const q2Selected = document.querySelector('input[name="q2"]:checked'); |
|
if (q2Selected && q2Selected.value === answers.q2) { |
|
score++; |
|
feedback += '<p class="text-green-600">✓ Question 2 correct: TP53 is known as the "guardian of the genome".</p>'; |
|
} else { |
|
feedback += '<p class="text-red-600">✗ Question 2: The correct answer is "TP53".</p>'; |
|
} |
|
|
|
// Check Q3 |
|
const q3Selected = document.querySelector('input[name="q3"]:checked'); |
|
if (q3Selected && q3Selected.value === answers.q3) { |
|
score++; |
|
feedback += '<p class="text-green-600">✓ Question 3 correct: Complete deletion would inactivate a proto-oncogene, not make it oncogenic.</p>'; |
|
} else { |
|
feedback += '<p class="text-red-600">✗ Question 3: Proto-oncogenes become cancer-causing when activated, not deleted.</p>'; |
|
} |
|
|
|
// Display results |
|
document.getElementById('quiz-score').textContent = `You scored ${score} out of 3.`; |
|
document.getElementById('quiz-feedback').innerHTML = feedback; |
|
document.getElementById('quiz-results').classList.remove('hidden'); |
|
|
|
// Scroll to results |
|
document.getElementById('quiz-results').scrollIntoView({ behavior: 'smooth' }); |
|
} |
|
|
|
// Initialize with first gene |
|
window.onload = function() { |
|
showGeneInfo('TP53'); |
|
}; |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=smjain/cancer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
