Make interactive quiz of 10q

analyse_media

Running Command

ls /home/daytona/workspace/attachments/675a5e0b-75ee-42fa-bd70-501aab642a98/ && …

Running Command

convert /home/daytona/workspace/attachments/675a5e0b-75ee-42fa-bd70-501aab642a98…

Running Command

python3 -c " from PIL import Image img = Image.open('/home/daytona/workspace/att…

Running Command

python3 -c " import pillow_heif from PIL import Image pillow_heif.register_heif_…

Running Command

pip install --user pillow-heif -q 2>&1 | tail -3

Running Command

python3 -c " import pillow_heif from PIL import Image pillow_heif.register_heif_…

Loading Image

Running Command

python3 -c " # Try OCR on the image import subprocess result = subprocess.run(['…

Writing File

~/endocrine-quiz/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Endocrine System Quiz – Types of Hormones</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .quiz-card {
      background: #fff;
      border-radius: 18px;
      max-width: 680px;
      width: 100%;
      padding: 36px 40px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }

    .quiz-header {
      text-align: center;
      margin-bottom: 28px;
    }

    .quiz-header h1 {
      font-size: 1.55rem;
      color: #1a1a2e;
      font-weight: 700;
    }

    .quiz-header p {
      color: #666;
      font-size: 0.9rem;
      margin-top: 6px;
    }

    /* Progress */
    .progress-bar-wrap {
      background: #e9ecef;
      border-radius: 50px;
      height: 10px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #4e54c8, #8f94fb);
      border-radius: 50px;
      transition: width 0.4s ease;
    }

    .progress-label {
      font-size: 0.82rem;
      color: #888;
      text-align: right;
      margin-bottom: 22px;
    }

    /* Question */
    .question-block { display: none; }
    .question-block.active { display: block; }

    .question-number {
      display: inline-block;
      background: linear-gradient(135deg, #4e54c8, #8f94fb);
      color: #fff;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 14px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .question-text {
      font-size: 1.12rem;
      color: #1a1a2e;
      font-weight: 600;
      line-height: 1.55;
      margin-bottom: 24px;
    }

    .options-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .option-btn {
      background: #f5f6ff;
      border: 2px solid #dde0ff;
      border-radius: 12px;
      padding: 13px 18px;
      font-size: 0.98rem;
      color: #333;
      cursor: pointer;
      text-align: left;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .option-btn:hover:not(:disabled) {
      background: #eceeff;
      border-color: #8f94fb;
      transform: translateX(4px);
    }

    .option-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #dde0ff;
      color: #4e54c8;
      font-weight: 700;
      font-size: 0.82rem;
    }

    .option-btn.correct {
      background: #d4edda;
      border-color: #28a745;
      color: #155724;
    }

    .option-btn.correct .option-label { background: #28a745; color: #fff; }

    .option-btn.wrong {
      background: #f8d7da;
      border-color: #dc3545;
      color: #721c24;
    }

    .option-btn.wrong .option-label { background: #dc3545; color: #fff; }

    .option-btn:disabled { cursor: not-allowed; }

    /* Explanation */
    .explanation {
      display: none;
      margin-top: 18px;
      background: #fffbea;
      border-left: 4px solid #ffc107;
      border-radius: 8px;
      padding: 14px 16px;
      font-size: 0.9rem;
      color: #555;
      line-height: 1.6;
    }

    .explanation.show { display: block; }

    .explanation strong { color: #333; }

    /* Next button */
    .btn-next {
      display: none;
      margin-top: 22px;
      background: linear-gradient(135deg, #4e54c8, #8f94fb);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 13px 30px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
      float: right;
    }

    .btn-next:hover { opacity: 0.88; }
    .btn-next.show { display: inline-block; }

    /* Results */
    #results-screen {
      display: none;
      text-align: center;
    }

    .score-circle {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4e54c8, #8f94fb);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      box-shadow: 0 8px 30px rgba(78,84,200,0.4);
    }

    .score-circle .score-num {
      font-size: 2.4rem;
      font-weight: 800;
      color: #fff;
      line-height: 1;
    }

    .score-circle .score-total {
      font-size: 1rem;
      color: rgba(255,255,255,0.8);
    }

    #results-screen h2 {
      font-size: 1.5rem;
      color: #1a1a2e;
      margin-bottom: 10px;
    }

    #results-screen p {
      color: #666;
      font-size: 0.95rem;
      margin-bottom: 28px;
    }

    .btn-restart {
      background: linear-gradient(135deg, #4e54c8, #8f94fb);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 13px 36px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .btn-restart:hover { opacity: 0.88; }

    /* Clearfix */
    .clearfix::after { content: ''; display: table; clear: both; }
  </style>
</head>
<body>
<div class="quiz-card">
  <div class="quiz-header">
    <h1>🧬 Endocrine System Quiz</h1>
    <p>Types of Hormones &mdash; Steroid, Peptide &amp; Amines</p>
  </div>

  <div class="progress-bar-wrap">
    <div class="progress-bar-fill" id="progressFill" style="width:0%"></div>
  </div>
  <div class="progress-label" id="progressLabel">Question 1 of 10</div>

  <div id="quiz-area"></div>

  <div id="results-screen">
    <div class="score-circle">
      <span class="score-num" id="scoreNum">0</span>
      <span class="score-total">/ 10</span>
    </div>
    <h2 id="resultsTitle">Quiz Complete!</h2>
    <p id="resultsMsg"></p>
    <button class="btn-restart" onclick="restartQuiz()">&#8635; Restart Quiz</button>
  </div>
</div>

<script>
const questions = [
  {
    q: "Which type of hormone is synthesised from cholesterol?",
    options: ["Peptide hormones", "Steroid hormones", "Catecholamines", "Protein hormones"],
    answer: 1,
    explanation: "Steroid hormones are synthesised from cholesterol. Examples include cortisol, aldosterone, estrogen, progesterone, and testosterone."
  },
  {
    q: "Steroid hormones are NOT stored in vesicles. What is the main reason for this?",
    options: [
      "They are too large to fit in vesicles",
      "They are synthesised on demand (when needed), not stored",
      "They are bound to plasma proteins and cannot be stored",
      "They dissolve vesicle membranes due to their lipid nature"
    ],
    answer: 1,
    explanation: "Steroid hormones are synthesised when needed. Because they are lipid-soluble they can diffuse freely through membranes, so the cell synthesises and releases them directly rather than storing them."
  },
  {
    q: "Which of the following is a notable EXCEPTION to the rule that steroid hormones are not stored?",
    options: ["Cortisol", "Aldosterone", "Vitamin D", "Estrogen"],
    answer: 2,
    explanation: "Vitamin D (and similarly T3/T4 thyroid hormones) are exceptions — they behave like steroid hormones in many ways but are stored. Thyroid hormones are stored in the follicular colloid for 2-3 months."
  },
  {
    q: "Steroid hormones have a longer half-life (T½) because they are:",
    options: [
      "Stored in vesicles",
      "Bound to plasma proteins",
      "Water-soluble",
      "Released in large pulses"
    ],
    answer: 1,
    explanation: "Steroid hormones are bound to plasma carrier proteins (e.g., CBG, SHBG). This binding protects them from degradation and renal excretion, significantly extending their half-life."
  },
  {
    q: "What is the mechanism of action (MOA) of steroid hormones?",
    options: [
      "Activate cell-surface G-protein coupled receptors",
      "Use second messengers like cAMP",
      "Diffuse into the cell and promote synthesis of new proteins and enzymes",
      "Open ion channels on the plasma membrane"
    ],
    answer: 2,
    explanation: "Steroid hormones are lipid-soluble. They cross the cell membrane, bind intracellular (nuclear) receptors, and act on DNA to stimulate the synthesis of new proteins and enzymes (genomic action)."
  },
  {
    q: "Peptide hormones are stored in vesicles because:",
    options: [
      "They are water-soluble and cannot cross cell membranes freely",
      "They are synthesised from cholesterol",
      "They are bound to plasma proteins",
      "They need to be converted to active form inside vesicles"
    ],
    answer: 0,
    explanation: "Peptide hormones are hydrophilic (water-soluble) and cannot diffuse across the lipid cell membrane. They are therefore pre-made, packaged into secretory vesicles, and released by exocytosis on demand."
  },
  {
    q: "Which of the following is NOT a feature of peptide / amine hormones compared to steroid hormones?",
    options: [
      "Stored in vesicles",
      "Shorter half-life",
      "Bound to plasma proteins",
      "Act via cell-surface receptors"
    ],
    answer: 2,
    explanation: "Peptide and amine hormones are generally NOT bound to plasma proteins (they circulate freely in the blood). Being unbound means they are cleared faster, giving them a shorter half-life. Steroid and thyroid hormones are the ones extensively bound to plasma proteins."
  },
  {
    q: "The mechanism of action of peptide hormones primarily involves:",
    options: [
      "Entering the nucleus and binding to DNA directly",
      "Modifying the action of enzymes already present in the cell",
      "Synthesising new structural proteins",
      "Inhibiting mitochondrial respiration"
    ],
    answer: 1,
    explanation: "Peptide hormones act on cell-surface receptors and trigger second-messenger cascades (e.g., cAMP, IP3/DAG). These cascades rapidly modify (activate or inhibit) enzymes already present inside the cell — a rapid, non-genomic effect."
  },
  {
    q: "Thyroid hormones (T3 and T4) are stored for approximately how long in the thyroid follicular colloid?",
    options: ["12 hours", "1 week", "2-3 months", "6 months"],
    answer: 2,
    explanation: "T3 and T4 are exceptions among peptide/amine-like hormones — they are stored as thyroglobulin in the follicular colloid for about 2-3 months, providing a large reserve."
  },
  {
    q: "A hormone that is lipid-soluble, synthesised from cholesterol, bound to a carrier protein in plasma, and acts by promoting new protein synthesis is BEST classified as a:",
    options: ["Catecholamine", "Peptide hormone", "Steroid hormone", "Eicosanoid"],
    answer: 2,
    explanation: "All four features — lipid solubility, cholesterol precursor, plasma protein binding, and genomic (new protein synthesis) mechanism — define steroid hormones. Examples include glucocorticoids, mineralocorticoids, and sex steroids."
  }
];

let current = 0;
let score = 0;
let answered = false;

function buildQuestion(index) {
  const q = questions[index];
  const labels = ['A', 'B', 'C', 'D'];

  let optionsHTML = q.options.map((opt, i) => `
    <button class="option-btn" id="opt-${i}" onclick="selectAnswer(${i})">
      <span class="option-label">${labels[i]}</span>
      ${opt}
    </button>
  `).join('');

  return `
    <div class="question-block active" id="q-block-${index}">
      <span class="question-number">Question ${index + 1} of ${questions.length}</span>
      <p class="question-text">${q.q}</p>
      <ul class="options-list">${optionsHTML}</ul>
      <div class="explanation" id="explanation-${index}">
        <strong>Explanation:</strong> ${q.explanation}
      </div>
      <div class="clearfix">
        <button class="btn-next" id="btn-next" onclick="nextQuestion()">
          ${index < questions.length - 1 ? 'Next Question &#8594;' : 'See Results &#10003;'}
        </button>
      </div>
    </div>
  `;
}

function renderQuestion() {
  answered = false;
  const area = document.getElementById('quiz-area');
  area.innerHTML = buildQuestion(current);
  updateProgress();
}

function updateProgress() {
  const pct = (current / questions.length) * 100;
  document.getElementById('progressFill').style.width = pct + '%';
  document.getElementById('progressLabel').textContent = `Question ${current + 1} of ${questions.length}`;
}

function selectAnswer(selectedIndex) {
  if (answered) return;
  answered = true;

  const q = questions[current];
  const allBtns = document.querySelectorAll('.option-btn');
  allBtns.forEach(btn => btn.disabled = true);

  const selectedBtn = document.getElementById(`opt-${selectedIndex}`);
  const correctBtn = document.getElementById(`opt-${q.answer}`);

  if (selectedIndex === q.answer) {
    selectedBtn.classList.add('correct');
    score++;
  } else {
    selectedBtn.classList.add('wrong');
    correctBtn.classList.add('correct');
  }

  document.getElementById(`explanation-${current}`).classList.add('show');
  document.getElementById('btn-next').classList.add('show');
}

function nextQuestion() {
  current++;
  if (current >= questions.length) {
    showResults();
  } else {
    renderQuestion();
  }
}

function showResults() {
  document.getElementById('quiz-area').innerHTML = '';
  document.getElementById('progressFill').style.width = '100%';
  document.getElementById('progressLabel').textContent = 'Quiz Complete!';

  const pct = (score / questions.length) * 100;
  let title, msg;

  if (pct === 100) {
    title = '🏆 Perfect Score!';
    msg = 'Outstanding! You have mastered the Types of Hormones. Full marks!';
  } else if (pct >= 80) {
    title = '🎉 Excellent Work!';
    msg = `You scored ${score}/10. Great understanding of the endocrine system!`;
  } else if (pct >= 60) {
    title = '👍 Good Effort!';
    msg = `You scored ${score}/10. Review the mechanisms of action and storage rules to improve.`;
  } else {
    title = '📚 Keep Studying!';
    msg = `You scored ${score}/10. Revisit the steroid vs peptide hormone comparison — focus on synthesis, storage, binding, and MOA.`;
  }

  document.getElementById('scoreNum').textContent = score;
  document.getElementById('resultsTitle').textContent = title;
  document.getElementById('resultsMsg').textContent = msg;
  document.getElementById('results-screen').style.display = 'block';
}

function restartQuiz() {
  current = 0;
  score = 0;
  answered = false;
  document.getElementById('results-screen').style.display = 'none';
  renderQuestion();
}

// Init
renderQuestion();
</script>
</body>
</html>

Your interactive quiz is ready! 🎉

index

HTML File · HTML

What's inside the quiz:

Based on your notes on Types of Hormones (Endocrine System), the 10 questions cover:

#	Topic
1	Precursor of steroid hormones (cholesterol)
2	Why steroid hormones are not stored
3	Exception to the "not stored" rule (Vitamin D / T3/T4)
4	Why steroid hormones have a longer half-life (plasma protein binding)
5	Mechanism of action of steroid hormones (genomic - new protein synthesis)
6	Why peptide hormones ARE stored in vesicles
7	Plasma protein binding - steroid vs peptide
8	MOA of peptide hormones (modify existing enzymes)
9	Thyroid hormone storage duration (2-3 months)
10	Clinical integration - identify hormone class from features

Interactive features:

Color-coded feedback (green = correct, red = wrong)
Correct answer revealed if you pick wrong
Explanation shown after every answer
Progress bar across all 10 questions
Score screen with personalized feedback at the end
Restart button to retake the quiz

This is a shared conversation. Sign in to Orris to start your own chat.