/* @component-map
* App — Main container, manages quiz phases and routing
* StartScreen — Landing page with quiz info and begin button
* QuizScreen — Active quiz with questions, options, and explanations
* ResultsScreen — Final score, grade, and answer review
* @end-component-map */
import { StartScreen } from './components/StartScreen.jsx';
import { QuizScreen } from './components/QuizScreen.jsx';
import { ResultsScreen } from './components/ResultsScreen.jsx';
import { useCollection } from '@deplixo/sdk';
const { useState, useEffect, useRef } = React;
const SEED_QUESTIONS = [
{ topic: "Cell Membrane", question: "Which model best describes the current understanding of cell membrane structure?", options: ["Lock and Key Model", "Fluid Mosaic Model", "Unit Membrane Model", "Lipid Bilayer Model"], correct: 1, explanation: "The Fluid Mosaic Model, proposed by Singer and Nicolson in 1972, describes the membrane as a dynamic structure with proteins embedded in a fluid lipid bilayer." },
{ topic: "Mitochondria", question: "What is the primary function of the inner mitochondrial membrane's cristae?", options: ["Store mitochondrial DNA", "Increase surface area for oxidative phosphorylation", "Separate the matrix from the cytoplasm", "Facilitate protein synthesis"], correct: 1, explanation: "Cristae are folds of the inner membrane that dramatically increase the surface area available for ATP synthase and electron transport chain complexes." },
{ topic: "Cell Cycle", question: "During which phase of mitosis do chromosomes align along the metaphase plate?", options: ["Prophase", "Prometaphase", "Metaphase", "Anaphase"], correct: 2, explanation: "During metaphase, spindle fibers attach to kinetochores and chromosomes line up along the cell's equator, called the metaphase plate." },
{ topic: "Organelles", question: "Which organelle is responsible for modifying, sorting, and packaging proteins for secretion?", options: ["Rough ER", "Smooth ER", "Golgi Apparatus", "Lysosome"], correct: 2, explanation: "The Golgi apparatus receives proteins from the rough ER, modifies them (glycosylation, phosphorylation), sorts them, and packages them into vesicles for transport." },
{ topic: "DNA Replication", question: "What enzyme unwinds the double helix at the replication fork?", options: ["DNA Polymerase III", "Primase", "Helicase", "Topoisomerase"], correct: 2, explanation: "Helicase breaks the hydrogen bonds between complementary base pairs, unwinding and separating the two strands of DNA at the replication fork." },
{ topic: "Transport", question: "Which type of transport moves molecules against their concentration gradient using ATP?", options: ["Osmosis", "Facilitated diffusion", "Active transport", "Simple diffusion"], correct: 2, explanation: "Active transport requires energy (ATP) to move substances from low to high concentration, against the natural concentration gradient." },
{ topic: "Photosynthesis", question: "In which structure of the chloroplast do the light-dependent reactions occur?", options: ["Stroma", "Thylakoid membrane", "Outer membrane", "Inner membrane"], correct: 1, explanation: "Light-dependent reactions take place in/on the thylakoid membranes, where photosystems I and II capture light energy and generate ATP and NADPH." },
{ topic: "Cell Signaling", question: "What is the role of a second messenger like cyclic AMP (cAMP) in signal transduction?", options: ["It binds directly to DNA to activate genes", "It amplifies the signal inside the cell", "It transports the hormone across the membrane", "It deactivates the receptor protein"], correct: 1, explanation: "Second messengers like cAMP relay and amplify intracellular signals from surface receptors, activating cascades of protein kinases that produce a cellular response." },
{ topic: "Endosymbiosis", question: "Which evidence best supports the endosymbiotic theory for the origin of mitochondria?", options: ["Mitochondria have a single membrane", "Mitochondria contain their own circular DNA and ribosomes", "Mitochondria are found in all eukaryotic cells", "Mitochondria can perform glycolysis"], correct: 1, explanation: "Mitochondria have their own circular DNA (similar to bacteria), 70S ribosomes, and a double membrane — all evidence supporting that they were once free-living prokaryotes engulfed by ancestral eukaryotic cells." },
{ topic: "Cellular Respiration", question: "Where does the Krebs cycle (citric acid cycle) take place?", options: ["Cytoplasm", "Mitochondrial matrix", "Inner mitochondrial membrane", "Intermembrane space"], correct: 1, explanation: "The Krebs cycle occurs in the mitochondrial matrix, where acetyl-CoA is oxidized to produce CO₂, NADH, FADH₂, and a small amount of ATP (GTP)." },
{ topic: "Enzymes", question: "How does a competitive inhibitor reduce enzyme activity?", options: ["It changes the enzyme's shape permanently", "It binds to the active site, blocking substrate access", "It binds to an allosteric site, changing the active site shape", "It increases the activation energy of the reaction"], correct: 1, explanation: "A competitive inhibitor has a shape similar to the substrate and competes for binding at the active site, preventing the substrate from entering." },
{ topic: "Protein Synthesis", question: "What is the role of tRNA during translation?", options: ["Carry the genetic code from nucleus to ribosome", "Catalyze peptide bond formation", "Deliver specific amino acids to the ribosome based on codon-anticodon pairing", "Unwind the mRNA strand for reading"], correct: 2, explanation: "Transfer RNA (tRNA) molecules carry specific amino acids to the ribosome and match them to mRNA codons via their complementary anticodon sequences." }
];
function shuffle(arr) {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function App() {
const { items, loading, collection } = useCollection("cell_biology_questions", { personal: true });
const [seeded, setSeeded] = useState(false);
const [phase, setPhase] = useState("start");
const [questions, setQuestions] = useState([]);
const [score, setScore] = useState(0);
const [answers, setAnswers] = useState([]);
useEffect(() => {
if (!loading && collection && !seeded) {
(async () => {
for (const q of SEED_QUESTIONS) {
await collection.addIfEmpty(q);
}
setSeeded(true);
})();
}
}, [loading, collection, seeded]);
const allQuestions = items.length > 0 ? items.map(e => e.value) : SEED_QUESTIONS;
const startQuiz = () => {
const shuffled = shuffle(allQuestions).slice(0, 10);
setQuestions(shuffled);
setScore(0);
setAnswers([]);
setPhase("quiz");
};
const onQuizComplete = (finalScore, finalAnswers) => {
setScore(finalScore);
setAnswers(finalAnswers);
setPhase("results");
};
const poolSize = allQuestions.length;
return (
