{"id":13091,"date":"2026-08-13T19:01:39","date_gmt":"2026-08-13T16:01:39","guid":{"rendered":"https:\/\/research-says.com\/?page_id=13091"},"modified":"2026-09-13T17:09:40","modified_gmt":"2026-09-13T14:09:40","slug":"grade-5-6-sleep-deprivation","status":"publish","type":"page","link":"https:\/\/research-says.com\/tr\/grade-5-6-sleep-deprivation\/","title":{"rendered":"Grade 5\u20136: Sleep Deprivation"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Sleep Deprivation Vocabulary Challenge<\/title>\n\n<style>\n\n:root{\n  --text:#1f2937;\n  --muted:#64748b;\n  --line:#dbe3ef;\n  --accent:#315efb;\n  --accent2:#7c3aed;\n  --good:#159447;\n  --bad:#d43f3a;\n  --softgood:#e9f8ef;\n  --softbad:#fdecec;\n  --softblue:#eef3ff;\n  --shadow:0 7px 24px rgba(25,45,85,.10);\n}\n\n*{\n  box-sizing:border-box;\n}\n\nbody{\n  margin:0;\n  min-height:100vh;\n\n  font-family:Arial, Helvetica, sans-serif;\n  color:var(--text);\n\n  background:linear-gradient(\n    135deg,\n    #edf3ff 0%,\n    #f8fbff 55%,\n    #f7f3ff 100%\n  );\n}\n\n\n\/* MAIN CONTAINER *\/\n\n.app{\n  width:100%;\n  max-width:1800px;\n\n  margin:0 auto;\n\n  padding:24px;\n}\n\n\n\/* HEADER *\/\n\n.topbar{\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    auto\n    auto\n    auto;\n\n  gap:16px;\n\n  align-items:center;\n\n  padding:18px 20px;\n\n  background:rgba(255,255,255,.94);\n\n  border:1px solid var(--line);\n  border-radius:20px;\n\n  box-shadow:var(--shadow);\n}\n\n\n.title-wrap h1{\n  margin:0 0 6px;\n\n  font-size:clamp(\n    23px,\n    2vw,\n    34px\n  );\n}\n\n\n.title-wrap p{\n  margin:0;\n\n  color:var(--muted);\n\n  font-size:15px;\n  line-height:1.4;\n}\n\n\n\/* SCORE *\/\n\n.stat{\n  min-width:110px;\n\n  padding:10px 12px;\n\n  text-align:center;\n\n  background:#f8faff;\n\n  border:1px solid var(--line);\n  border-radius:14px;\n}\n\n\n.stat .big{\n  font-size:21px;\n  font-weight:800;\n}\n\n\nbutton{\n  font:inherit;\n}\n\n\n\/* RESET *\/\n\n.reset{\n  padding:12px 17px;\n\n  border:0;\n  border-radius:13px;\n\n  color:white;\n\n  background:linear-gradient(\n    135deg,\n    var(--accent),\n    var(--accent2)\n  );\n\n  font-weight:800;\n\n  cursor:pointer;\n\n  box-shadow:\n    0 4px 12px\n    rgba(49,94,251,.22);\n}\n\n\n.reset:hover{\n  transform:translateY(-1px);\n}\n\n\n\/* INSTRUCTIONS *\/\n\n.instructions{\n  display:flex;\n\n  justify-content:space-between;\n  align-items:center;\n\n  gap:25px;\n\n  margin:15px 0;\n\n  padding:14px 18px;\n\n  background:var(--softblue);\n\n  border:1px solid #cfdafe;\n  border-radius:16px;\n\n  font-size:15px;\n  line-height:1.4;\n}\n\n\n.instructions strong{\n  color:#2546bd;\n}\n\n\n.feedback{\n  min-width:310px;\n\n  text-align:right;\n\n  font-weight:800;\n}\n\n\n\/* TWO EQUAL SIDES *\/\n\n.game{\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(0,1fr);\n\n  gap:20px;\n\n  align-items:stretch;\n}\n\n\n\/* LEFT AND RIGHT CONTAINERS *\/\n\n.column{\n  min-width:0;\n\n  padding:20px;\n\n  background:rgba(255,255,255,.90);\n\n  border:1px solid var(--line);\n  border-radius:20px;\n\n  box-shadow:var(--shadow);\n}\n\n\n.column h2{\n  display:flex;\n\n  justify-content:space-between;\n  align-items:center;\n\n  gap:15px;\n\n  margin:0 0 16px;\n\n  color:#334155;\n\n  font-size:17px;\n}\n\n\n\/* \n   IMPORTANT:\n   BOTH SIDES USE TWO CARDS PER ROW\n*\/\n\n.cards{\n  display:grid;\n  grid-template-columns:\n    repeat(3,minmax(0,1fr));\n  gap:14px;\n}\n\n#meaningCards{\n  display:grid;\n  grid-template-columns:\n    repeat(2,minmax(0,1fr));\n  gap:14px;\n}\n\n\/* ALL CARDS *\/\n\n.card{\n  width:100%;\n  min-width:0;\n  min-height:88px;\n\n  padding:18px 18px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  text-align:center;\n\n  line-height:1.4;\n\n  color:#374151;\n\n  background:#ffffff;\n\n  border:1px solid var(--line);\n  border-radius:15px;\n\n  box-shadow:\n    0 3px 11px\n    rgba(24,39,75,.07);\n\n  cursor:pointer;\n\n  user-select:none;\n\n  transition:\n    transform .15s ease,\n    border-color .15s ease,\n    box-shadow .15s ease,\n    background .15s ease;\n}\n\n\n.card:hover{\n  transform:translateY(-2px);\n\n  border-color:#b9c8ef;\n\n  box-shadow:\n    0 6px 16px\n    rgba(24,39,75,.11);\n}\n\n\n\/* WORDS *\/\n\n.term{\n  font-size:16px;\n  font-weight:800;\n\n  background:linear-gradient(\n    180deg,\n    #ffffff,\n    #f7f9ff\n  );\n}\n\n\n\/* DEFINITIONS *\/\n\n.meaning{\n  font-size:14px;\n  font-weight:500;\n\n  color:#374151;\n}\n\n\n\/* SELECTED *\/\n\n.selected{\n  border-color:var(--accent) !important;\n\n  background:#edf2ff !important;\n\n  box-shadow:\n    0 0 0 3px\n    rgba(49,94,251,.12);\n}\n\n\n\/* CORRECT *\/\n\n.correct{\n  border-color:var(--good) !important;\n\n  background:var(--softgood) !important;\n\n  color:#0f6d36;\n\n  cursor:default;\n\n  opacity:.90;\n}\n\n\n\/* WRONG *\/\n\n.wrong{\n  border-color:var(--bad) !important;\n\n  background:var(--softbad) !important;\n\n  animation:shake .25s linear 1;\n}\n\n\n@keyframes shake{\n\n  0%,100%{\n    transform:translateX(0);\n  }\n\n  25%{\n    transform:translateX(-5px);\n  }\n\n  75%{\n    transform:translateX(5px);\n  }\n\n}\n\n\n\/* PROGRESS *\/\n\n.progress{\n  height:10px;\n\n  margin-top:15px;\n\n  overflow:hidden;\n\n  background:#e9eef8;\n\n  border-radius:999px;\n}\n\n\n.bar{\n  width:0%;\n  height:100%;\n\n  background:linear-gradient(\n    90deg,\n    var(--accent),\n    var(--accent2)\n  );\n\n  transition:width .25s;\n}\n\n\n\/* FOOTER *\/\n\n.footer-note{\n  margin-top:10px;\n\n  text-align:center;\n\n  color:var(--muted);\n\n  font-size:13px;\n}\n\n\n\/* CONFETTI *\/\n\n.celebrate{\n  position:fixed;\n\n  inset:0;\n\n  overflow:hidden;\n\n  pointer-events:none;\n\n  z-index:99;\n}\n\n\n.confetti{\n  position:absolute;\n\n  width:10px;\n  height:14px;\n\n  border-radius:2px;\n\n  animation:\n    fall\n    1.5s\n    ease-in\n    forwards;\n}\n\n\n@keyframes fall{\n\n  from{\n    transform:\n      translateY(-30px)\n      rotate(0deg);\n\n    opacity:1;\n  }\n\n  to{\n    transform:\n      translateY(105vh)\n      rotate(720deg);\n\n    opacity:0;\n  }\n\n}\n\n\n\/* MEDIUM SCREENS *\/\n\n@media(max-width:1000px){\n\n  .app{\n    padding:16px;\n  }\n\n  .topbar{\n    grid-template-columns:\n      1fr\n      auto\n      auto;\n  }\n\n  .title-wrap{\n    grid-column:1 \/ -1;\n  }\n\n  .column{\n    padding:16px;\n  }\n\n  .game{\n    gap:14px;\n  }\n\n  .cards,\n  #meaningCards{\n    gap:11px;\n  }\n\n  .card{\n    min-height:92px;\n\n    padding:15px 12px;\n  }\n\n}\n\n\n\/* SMALL SCREENS *\/\n\n@media(max-width:720px){\n\n  .app{\n    padding:12px;\n  }\n\n  .game{\n    grid-template-columns:1fr;\n  }\n\n  .instructions{\n    display:block;\n  }\n\n  .feedback{\n    min-width:0;\n\n    margin-top:8px;\n\n    text-align:left;\n  }\n\n  .cards,\n  #meaningCards{\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n  }\n\n}\n\n\n\/* VERY SMALL SCREENS *\/\n\n@media(max-width:480px){\n\n  .cards,\n  #meaningCards{\n    grid-template-columns:1fr;\n  }\n\n}\n#termCards{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr)) !important;\n  gap:14px;\n}\n\n#meaningCards{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr)) !important;\n  gap:14px;\n}\n<\/style>\n<\/head>\n\n\n<body>\n\n<div class=\"app\">\n\n\n  <div class=\"topbar\">\n\n    <div class=\"title-wrap\">\n\n      <h1>\n        \ud83c\udf19 Sleep Deprivation Vocabulary Challenge\n      <\/h1>\n\n      <p>\n        Match each word or phrase with its meaning.\n        Try to finish with as few mistakes as possible.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"stat\">\n\n      <div\n        class=\"big\"\n        id=\"score\"\n      >\n        0 \/ 20\n      <\/div>\n\n      <div>\n        Matched\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"stat\">\n\n      <div\n        class=\"big\"\n        id=\"mistakes\"\n      >\n        0\n      <\/div>\n\n      <div>\n        Mistakes\n      <\/div>\n\n    <\/div>\n\n\n    <button\n      class=\"reset\"\n      id=\"resetBtn\"\n    >\n      \u21bb Reset Game\n    <\/button>\n\n  <\/div>\n\n\n\n  <div class=\"instructions\">\n\n    <div>\n\n      <strong>\n        How to play:\n      <\/strong>\n\n      Click a word on the left,\n      then click its meaning on the right.\n      You get feedback immediately.\n\n    <\/div>\n\n\n    <div\n      class=\"feedback\"\n      id=\"feedback\"\n    >\n      Choose a word to begin.\n    <\/div>\n\n  <\/div>\n\n\n\n  <div class=\"game\">\n\n\n    <section class=\"column\">\n\n      <h2>\n\n        <span>\n          \ud83e\udde0 Words &amp; Phrases\n        <\/span>\n\n        <span id=\"termCount\">\n          20 left\n        <\/span>\n\n      <\/h2>\n\n\n      <div\n        class=\"cards\"\n        id=\"termCards\"\n      ><\/div>\n\n    <\/section>\n\n\n\n    <section class=\"column\">\n\n      <h2>\n\n        <span>\n          \ud83d\udcac Meanings\n        <\/span>\n\n        <span>\n          Find the match\n        <\/span>\n\n      <\/h2>\n\n\n      <div\n        class=\"cards\"\n        id=\"meaningCards\"\n      ><\/div>\n\n    <\/section>\n\n\n  <\/div>\n\n\n\n  <div class=\"progress\">\n\n    <div\n      class=\"bar\"\n      id=\"bar\"\n    ><\/div>\n\n  <\/div>\n\n\n\n  <div class=\"footer-note\">\n    After the game, choose five words and use them in sentences about sleep.\n  <\/div>\n\n\n<\/div>\n\n\n\n<div\n  class=\"celebrate\"\n  id=\"celebrate\"\n><\/div>\n\n\n\n<script>\n\nconst vocab = [\n\n  {\n    term:\"sleep deprivation\",\n    meaning:\"not getting enough sleep\"\n  },\n\n  {\n    term:\"survival\",\n    meaning:\"staying alive or continuing to exist\"\n  },\n\n  {\n    term:\"recharge\",\n    meaning:\"to rest so your body or mind gets energy again\"\n  },\n\n  {\n    term:\"cranky\",\n    meaning:\"easily annoyed or in a bad mood\"\n  },\n\n  {\n    term:\"cortisol\",\n    meaning:\"a hormone the body releases especially during stress\"\n  },\n\n  {\n    term:\"sleepless\",\n    meaning:\"unable to sleep or having no sleep\"\n  },\n\n  {\n    term:\"burst of energy\",\n    meaning:\"a sudden short period when you feel very energetic\"\n  },\n\n  {\n    term:\"pleasant\",\n    meaning:\"nice, enjoyable, or comfortable\"\n  },\n\n  {\n    term:\"animated\",\n    meaning:\"full of energy, excitement, or lively movement\"\n  },\n\n  {\n    term:\"exhaustion\",\n    meaning:\"a state of being extremely tired\"\n  },\n\n  {\n    term:\"exhausted\",\n    meaning:\"very tired and with almost no energy left\"\n  },\n\n  {\n    term:\"extremely fatigued\",\n    meaning:\"very, very tired\"\n  },\n\n  {\n    term:\"metabolise\",\n    meaning:\"for the body to process food or substances and use them\"\n  },\n\n  {\n    term:\"day-to-day function\",\n    meaning:\"the ability to do normal everyday activities\"\n  },\n\n  {\n    term:\"set in\",\n    meaning:\"to begin and become noticeable\"\n  },\n\n  {\n    term:\"reaction time\",\n    meaning:\"how quickly you respond after something happens\"\n  },\n\n  {\n    term:\"nutrients\",\n    meaning:\"useful substances in food that help the body grow and stay healthy\"\n  },\n\n  {\n    term:\"hallucinate\",\n    meaning:\"to see or hear something that is not really there\"\n  },\n\n  {\n    term:\"take a turn for the worse\",\n    meaning:\"to suddenly become worse\"\n  },\n\n  {\n    term:\"physical functions\",\n    meaning:\"the normal jobs and processes carried out by the body\"\n  }\n\n];\n\n\nconst items = vocab;\n\nlet selectedTerm = null;\nlet matched = new Set();\nlet mistakes = 0;\n\n\n\nfunction shuffle(array){\n\n  return [...array].sort(\n    () => Math.random() - 0.5\n  );\n\n}\n\n\n\nfunction render(){\n\n  selectedTerm = null;\n  matched = new Set();\n  mistakes = 0;\n\n\n  const termContainer =\n    document.getElementById(\"termCards\");\n\n\n  const meaningContainer =\n    document.getElementById(\"meaningCards\");\n\n\n  termContainer.innerHTML = \"\";\n  meaningContainer.innerHTML = \"\";\n\n\n  shuffle(items).forEach(item => {\n\n    const button =\n      document.createElement(\"button\");\n\n\n    button.className =\n      \"card term\";\n\n\n    button.textContent =\n      item.term;\n\n\n    button.dataset.term =\n      item.term;\n\n\n    button.onclick =\n      () =>\n        selectTerm(\n          button,\n          item.term\n        );\n\n\n    termContainer.appendChild(\n      button\n    );\n\n  });\n\n\n\n  shuffle(items).forEach(item => {\n\n    const button =\n      document.createElement(\"button\");\n\n\n    button.className =\n      \"card meaning\";\n\n\n    button.textContent =\n      item.meaning;\n\n\n    button.dataset.answer =\n      item.term;\n\n\n    button.onclick =\n      () =>\n        chooseMeaning(\n          button,\n          item.term\n        );\n\n\n    meaningContainer.appendChild(\n      button\n    );\n\n  });\n\n\n  updateStats();\n\n\n  setFeedback(\n    \"Choose a word to begin.\",\n    \"\"\n  );\n\n}\n\n\n\nfunction selectTerm(button,term){\n\n  if(matched.has(term)){\n    return;\n  }\n\n\n  document\n    .querySelectorAll(\".term\")\n    .forEach(card =>\n      card.classList.remove(\n        \"selected\"\n      )\n    );\n\n\n  button.classList.add(\n    \"selected\"\n  );\n\n\n  selectedTerm =\n    term;\n\n\n  setFeedback(\n    `Now find the meaning of \u201c${term}\u201d.`,\n    \"\"\n  );\n\n}\n\n\n\nfunction chooseMeaning(button,answer){\n\n  if(matched.has(answer)){\n    return;\n  }\n\n\n  if(!selectedTerm){\n\n    setFeedback(\n      \"Choose a word first.\",\n      \"bad\"\n    );\n\n\n    flash(\n      button,\n      \"wrong\"\n    );\n\n\n    return;\n\n  }\n\n\n  if(answer === selectedTerm){\n\n    matched.add(\n      answer\n    );\n\n\n    button.classList.add(\n      \"correct\"\n    );\n\n\n    button.disabled =\n      true;\n\n\n    const termButton =\n      [...document.querySelectorAll(\".term\")]\n      .find(\n        card =>\n          card.dataset.term === answer\n      );\n\n\n    if(termButton){\n\n      termButton.classList.remove(\n        \"selected\"\n      );\n\n\n      termButton.classList.add(\n        \"correct\"\n      );\n\n\n      termButton.disabled =\n        true;\n\n    }\n\n\n    setFeedback(\n      `\u2713 Correct! \u201c${answer}\u201d matched.`,\n      \"good\"\n    );\n\n\n    selectedTerm =\n      null;\n\n\n    updateStats();\n\n\n    if(matched.size === items.length){\n\n      setFeedback(\n        `\ud83c\udfc6 Finished! ${items.length} matches with ${mistakes} mistake${mistakes === 1 ? \"\" : \"s\"}.`,\n        \"good\"\n      );\n\n\n      confetti();\n\n    }\n\n  }\n\n\n  else{\n\n    mistakes++;\n\n\n    updateStats();\n\n\n    flash(\n      button,\n      \"wrong\"\n    );\n\n\n    setFeedback(\n      `\u2717 Not quite. Try another meaning for \u201c${selectedTerm}\u201d.`,\n      \"bad\"\n    );\n\n  }\n\n}\n\n\n\nfunction flash(element,className){\n\n  element.classList.add(\n    className\n  );\n\n\n  setTimeout(\n    () =>\n      element.classList.remove(\n        className\n      ),\n    420\n  );\n\n}\n\n\n\nfunction setFeedback(text,type){\n\n  const feedback =\n    document.getElementById(\n      \"feedback\"\n    );\n\n\n  feedback.textContent =\n    text;\n\n\n  if(type === \"good\"){\n\n    feedback.style.color =\n      \"var(--good)\";\n\n  }\n\n\n  else if(type === \"bad\"){\n\n    feedback.style.color =\n      \"var(--bad)\";\n\n  }\n\n\n  else{\n\n    feedback.style.color =\n      \"var(--text)\";\n\n  }\n\n}\n\n\n\nfunction updateStats(){\n\n  document\n    .getElementById(\"score\")\n    .textContent =\n      `${matched.size} \/ ${items.length}`;\n\n\n  document\n    .getElementById(\"mistakes\")\n    .textContent =\n      mistakes;\n\n\n  document\n    .getElementById(\"termCount\")\n    .textContent =\n      `${items.length - matched.size} left`;\n\n\n  document\n    .getElementById(\"bar\")\n    .style.width =\n      `${(matched.size \/ items.length) * 100}%`;\n\n}\n\n\n\nfunction confetti(){\n\n  const box =\n    document.getElementById(\n      \"celebrate\"\n    );\n\n\n  box.innerHTML =\n    \"\";\n\n\n  const colors = [\n\n    \"#315efb\",\n    \"#7c3aed\",\n    \"#16a34a\",\n    \"#eab308\",\n    \"#ef4444\",\n    \"#06b6d4\"\n\n  ];\n\n\n  for(\n    let i = 0;\n    i < 70;\n    i++\n  ){\n\n    const piece =\n      document.createElement(\n        \"div\"\n      );\n\n\n    piece.className =\n      \"confetti\";\n\n\n    piece.style.left =\n      Math.random() * 100 + \"vw\";\n\n\n    piece.style.background =\n      colors[\n        Math.floor(\n          Math.random() * colors.length\n        )\n      ];\n\n\n    piece.style.animationDelay =\n      Math.random() * .45 + \"s\";\n\n\n    box.appendChild(\n      piece\n    );\n\n  }\n\n\n  setTimeout(\n    () =>\n      box.innerHTML = \"\",\n    2200\n  );\n\n}\n\n\n\ndocument\n  .getElementById(\"resetBtn\")\n  .onclick =\n    render;\n\n\nrender();\n\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83c\udf19 Mission: What\u2019s Happening to Alex?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The situation:<\/strong> Alex has decided to stay awake for as long as possible. Your team is the <strong>Sleep Investigation Squad<\/strong>. As Alex gets less and less sleep, strange things start happening.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vocabulary bank:<\/strong><br><em>sleep deprivation \u2022 survival \u2022 recharge \u2022 cranky \u2022 cortisol \u2022 sleepless \u2022 burst of energy \u2022 pleasant \u2022 animated \u2022 exhaustion \u2022 exhausted \u2022 extremely fatigued \u2022 metabolise \u2022 day-to-day function \u2022 set in \u2022 reaction time \u2022 nutrients \u2022 hallucinate \u2022 take a turn for the worse \u2022 physical functions<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83d\ude20 Alex becomes irritated by tiny things and snaps at his friends.<\/td><td>__________<\/td><td>Alex is ______ because he is exhausted.<\/td><\/tr><tr><td>\u26a1 Suddenly, Alex feels surprisingly energetic and starts talking very quickly.<\/td><td>__________<\/td><td>Alex is experiencing\u2026<\/td><\/tr><tr><td>\ud83d\udc0c Someone throws Alex a ball, but Alex responds much more slowly than usual.<\/td><td>__________<\/td><td>Alex\u2019s ______ is slower than usual.<\/td><\/tr><tr><td>\ud83e\udd71 Alex can hardly keep their eyes open and has almost no energy.<\/td><td>__________<\/td><td>Alex is\u2026<\/td><\/tr><tr><td>\ud83c\udf55 Alex\u2019s body is no longer processing food as effectively as usual.<\/td><td>__________<\/td><td>Alex\u2019s ability to ______ food has been affected.<\/td><\/tr><tr><td>\ud83e\udde0 Ordinary schoolwork and everyday tasks become increasingly difficult.<\/td><td>__________<\/td><td>Alex\u2019s ______ is affected because he hasn&#8217;t had enough sleep.<\/td><\/tr><tr><td>\ud83d\udc40 Alex thinks there is a cat walking across the classroom\u2014but there isn\u2019t one.<\/td><td>__________<\/td><td>Alex has begun to\u2026<\/td><\/tr><tr><td>\ud83d\udcc9 Alex was doing badly before, but now the situation becomes much more serious.<\/td><td>__________<\/td><td>Things have\u2026<\/td><\/tr><tr><td>\ud83d\udd0b After finally sleeping, Alex\u2019s body and brain begin recovering their energy.<\/td><td>__________<\/td><td>Sleep allows Alex to\u2026<\/td><\/tr><tr><td>\ud83d\ude34 At first Alex feels okay, but after many hours, severe tiredness gradually begins.<\/td><td>__________<\/td><td>Exhaustion begins to\u2026<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Sleep Vocabulary Bank<\/title>\n\n<style>\n\n  *{\n    box-sizing:border-box;\n  }\n\n  body{\n    margin:0;\n    font-family:Arial, Helvetica, sans-serif;\n    background:linear-gradient(\n      135deg,\n      #edf3ff 0%,\n      #f8fbff 55%,\n      #f7f3ff 100%\n    );\n    color:#1f2937;\n    min-height:100vh;\n  }\n\n  .app{\n    width:min(1500px, 96%);\n    margin:0 auto;\n    padding:30px 20px;\n  }\n\n  h1{\n    text-align:center;\n    margin:0 0 8px;\n    font-size:32px;\n  }\n\n  .instructions{\n    text-align:center;\n    color:#64748b;\n    font-size:16px;\n    margin-bottom:25px;\n  }\n\n  .vocab-bank{\n    background:rgba(255,255,255,.88);\n    border:1px solid #dbe3ef;\n    border-radius:20px;\n    padding:24px;\n    box-shadow:0 7px 24px rgba(25,45,85,.10);\n  }\n\n  .cards{\n    display:grid;\n    grid-template-columns:repeat(5,minmax(0,1fr));\n    gap:14px;\n  }\n\n  .word-card{\n    min-height:85px;\n    border:2px solid #dbe3ef;\n    border-radius:14px;\n    background:#ffffff;\n    padding:14px 10px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    text-align:center;\n    font-size:16px;\n    font-weight:700;\n    line-height:1.25;\n\n    cursor:pointer;\n    transition:\n      background .2s,\n      border-color .2s,\n      transform .15s,\n      box-shadow .2s;\n\n    user-select:none;\n  }\n\n  .word-card:hover{\n    transform:translateY(-2px);\n    border-color:#aebfe9;\n    box-shadow:0 5px 14px rgba(25,45,85,.10);\n  }\n\n  .word-card.used{\n  background:#ffe66d;\n  border-color:#e3b900;\n  color:#332b00;\n  }\n\n  .counter{\n    margin-top:20px;\n    text-align:center;\n    font-size:15px;\n    font-weight:700;\n    color:#475569;\n  }\n\n  .reset{\n    display:block;\n    margin:18px auto 0;\n    border:0;\n    border-radius:12px;\n    background:#315efb;\n    color:white;\n    padding:11px 18px;\n    font-weight:700;\n    font-size:15px;\n    cursor:pointer;\n  }\n\n  .reset:hover{\n    background:#244bd4;\n  }\n\n\n  @media (max-width:1100px){\n\n    .cards{\n      grid-template-columns:repeat(4,minmax(0,1fr));\n    }\n\n  }\n\n\n  @media (max-width:800px){\n\n    .cards{\n      grid-template-columns:repeat(3,minmax(0,1fr));\n    }\n\n  }\n\n\n  @media (max-width:550px){\n\n    .cards{\n      grid-template-columns:repeat(2,minmax(0,1fr));\n    }\n\n  }\n\n<\/style>\n\n<div class=\"app\">\n\n  <h1>\ud83c\udf19 Sleep Vocabulary Bank<\/h1>\n\n  <div class=\"instructions\">\n    Click a word when you use it. The card will turn yellow.\n  <\/div>\n\n  <div class=\"vocab-bank\">\n\n    <div class=\"cards\">\n\n      <div class=\"word-card\">sleep deprivation<\/div>\n\n      <div class=\"word-card\">survival<\/div>\n\n      <div class=\"word-card\">recharge<\/div>\n\n      <div class=\"word-card\">cranky<\/div>\n\n      <div class=\"word-card\">cortisol<\/div>\n\n      <div class=\"word-card\">sleepless<\/div>\n\n      <div class=\"word-card\">burst of energy<\/div>\n\n      <div class=\"word-card\">pleasant<\/div>\n\n      <div class=\"word-card\">animated<\/div>\n\n      <div class=\"word-card\">exhaustion<\/div>\n\n      <div class=\"word-card\">exhausted<\/div>\n\n      <div class=\"word-card\">extremely fatigued<\/div>\n\n      <div class=\"word-card\">metabolise<\/div>\n\n      <div class=\"word-card\">day-to-day function<\/div>\n\n      <div class=\"word-card\">set in<\/div>\n\n      <div class=\"word-card\">reaction time<\/div>\n\n      <div class=\"word-card\">nutrients<\/div>\n\n      <div class=\"word-card\">hallucinate<\/div>\n\n      <div class=\"word-card\">take a turn for the worse<\/div>\n\n      <div class=\"word-card\">physical functions<\/div>\n\n    <\/div>\n\n\n    <div class=\"counter\" id=\"counter\">\n      0 of 20 words used\n    <\/div>\n\n<button type=\"button\" class=\"reset\" id=\"resetBtn\">\n  \u21bb Reset\n<\/button>\n\n  <\/div>\n<\/div>\n\n<script>\n\nconst cards = document.querySelectorAll(\".word-card\");\nconst counter = document.getElementById(\"counter\");\n\nfunction updateCounter(){\n\n  const used =\n    document.querySelectorAll(\".word-card.used\").length;\n\n  counter.textContent =\n    `${used} of ${cards.length} words used`;\n\n}\n\ncards.forEach(card => {\n\n  card.onclick = function(){\n\n    card.classList.toggle(\"used\");\n\n    updateCounter();\n\n  };\n\n});\n\ndocument\n  .getElementById(\"resetBtn\")\n  .onclick = function(){\n\n    document\n      .querySelectorAll(\".word-card\")\n      .forEach(card => {\n\n        card.classList.remove(\"used\");\n\n      });\n\n    updateCounter();\n\n  };\n\nupdateCounter();\n\n<\/script>\n\n\n\n<div id=\"paragraph-connectors\">\n  <style>\n    #paragraph-connectors {\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 20px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      color: #24303f;\n      line-height: 1.7;\n    }\n\n    #paragraph-connectors * {\n      box-sizing: border-box;\n    }\n\n    #paragraph-connectors .activity {\n      width: 100%;\n      padding: 25px;\n      background: #f7f9fc;\n      border: 1px solid #d9e0e8;\n      border-radius: 12px;\n    }\n\n    #paragraph-connectors h2 {\n      margin-top: 0;\n      margin-bottom: 14px;\n      color: #173f5f;\n      font-size: 25px;\n      font-weight: 400;\n    }\n\n    #paragraph-connectors .instructions {\n      margin-bottom: 20px;\n      padding: 13px 16px;\n      background: #eaf2f8;\n      border-left: 5px solid #2874a6;\n      border-radius: 6px;\n    }\n\n    #paragraph-connectors .connector-box {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      margin: 20px 0 25px;\n      padding: 18px;\n      background: #fff8e6;\n      border: 1px solid #e6c96c;\n      border-radius: 9px;\n    }\n\n    #paragraph-connectors .connector-box-title {\n      width: 100%;\n      margin-bottom: 4px;\n      font-weight: 600;\n      color: #6d5200;\n    }\n\n    #paragraph-connectors .connector {\n      padding: 9px 14px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      color: #173f5f;\n      background: #ffffff;\n      border: 2px solid #78a6c3;\n      border-radius: 20px;\n      cursor: pointer;\n      transition:\n        background 0.2s ease,\n        border-color 0.2s ease,\n        transform 0.15s ease;\n    }\n\n    #paragraph-connectors .connector:hover {\n      background: #eaf5fb;\n      transform: translateY(-1px);\n    }\n\n    #paragraph-connectors .connector.selected {\n      background: #d5ebf7;\n      border-color: #2874a6;\n      outline: 3px solid rgba(40, 116, 166, 0.18);\n    }\n\n    #paragraph-connectors .connector.used {\n      opacity: 0.35;\n      cursor: default;\n      transform: none;\n    }\n\n    #paragraph-connectors .paragraph-box {\n      padding: 22px;\n      background: #ffffff;\n      border: 1px solid #d9e0e8;\n      border-radius: 9px;\n    }\n\n    #paragraph-connectors .paragraph-box p {\n      margin: 0 0 18px;\n      font-size: 17px;\n    }\n\n    #paragraph-connectors .paragraph-box p:last-child {\n      margin-bottom: 0;\n    }\n\n    #paragraph-connectors .blank {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 145px;\n      min-height: 38px;\n      margin: 2px 4px;\n      padding: 5px 12px;\n      vertical-align: middle;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      font-weight: 600;\n      color: #173f5f;\n      background: #f8fafc;\n      border: 2px dashed #9db0c1;\n      border-radius: 7px;\n      cursor: pointer;\n      transition:\n        background 0.2s ease,\n        border-color 0.2s ease;\n    }\n\n    #paragraph-connectors .blank:hover {\n      background: #eaf5fb;\n      border-color: #2874a6;\n    }\n\n    #paragraph-connectors .blank.empty::before {\n      content: \"click here\";\n      font-size: 13px;\n      font-weight: normal;\n      color: #81909d;\n    }\n\n    #paragraph-connectors .blank.correct {\n      color: #236b39;\n      background: #edf8f0;\n      border: 2px solid #2d7d46;\n    }\n\n    #paragraph-connectors .blank.incorrect {\n      color: #a22d2d;\n      background: #fff0f0;\n      border: 2px solid #b33a3a;\n    }\n\n    #paragraph-connectors .actions {\n      margin-top: 22px;\n    }\n\n    #paragraph-connectors button {\n      margin: 0 8px 0 0;\n      padding: 11px 18px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      font-weight: 600;\n      color: #ffffff;\n      background: #2874a6;\n      border: none;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-connectors button:hover {\n      background: #1f5d85;\n    }\n\n    #paragraph-connectors .reset-button {\n      color: #24303f;\n      background: #dfe6ec;\n    }\n\n    #paragraph-connectors .reset-button:hover {\n      background: #cad4dd;\n    }\n\n    #paragraph-connectors .feedback {\n      display: none;\n      margin-top: 20px;\n      padding: 15px;\n      font-size: 17px;\n      font-weight: 600;\n      background: #ffffff;\n      border-radius: 8px;\n    }\n\n    #paragraph-connectors .feedback.good {\n      display: block;\n      color: #236b39;\n      border: 2px solid #2d7d46;\n    }\n\n    #paragraph-connectors .feedback.try-again {\n      display: block;\n      color: #9c2f2f;\n      border: 2px solid #b33a3a;\n    }\n\n    #paragraph-connectors .small-note {\n      margin-top: 10px;\n      font-size: 14px;\n      color: #647382;\n    }\n\n    @media (max-width: 900px) {\n      #paragraph-connectors {\n        max-width: 760px;\n      }\n    }\n\n    @media (max-width: 650px) {\n      #paragraph-connectors {\n        padding: 12px;\n      }\n\n      #paragraph-connectors .activity {\n        padding: 18px;\n      }\n\n      #paragraph-connectors .paragraph-box {\n        padding: 16px;\n      }\n\n      #paragraph-connectors .blank {\n        min-width: 125px;\n      }\n\n      #paragraph-connectors button {\n        margin-bottom: 8px;\n      }\n    }\n  <\/style>\n\n  <section class=\"activity\">\n    <h2>Complete the Paragraph<\/h2>\n\n    <div class=\"instructions\">\n      Complete the paragraph by choosing the correct connecting words from\n      the box below. Use each connector once. Click a connector and then click\n      the blank where you want to place it.\n    <\/div>\n\n    <div class=\"connector-box\" id=\"sleepConnectorBank\">\n      <div class=\"connector-box-title\">Connector Box<\/div>\n\n      <button type=\"button\" class=\"connector\" data-word=\"Although\">\n        Although\n      <\/button>\n\n      <button type=\"button\" class=\"connector\" data-word=\"As a result\">\n        As a result\n      <\/button>\n\n      <button type=\"button\" class=\"connector\" data-word=\"because\">\n        because\n      <\/button>\n\n      <button type=\"button\" class=\"connector\" data-word=\"In conclusion\">\n        In conclusion\n      <\/button>\n\n      <button type=\"button\" class=\"connector\" data-word=\"Similarly\">\n        Similarly\n      <\/button>\n    <\/div>\n\n    <div class=\"paragraph-box\">\n      <p>\n        Sleep is vital for our brains and bodies, and sleep deprivation can\n        have three serious effects: it can harm our memory, make day-to-day\n        activities harder, and even change what we see and hear.\n      <\/p>\n\n      <p>\n        First, sleep helps us create long-term memories\n        <span class=\"blank empty\" data-answer=\"because\" tabindex=\"0\" role=\"button\" aria-label=\"Blank 1\"><\/span>\n        memories created during the day are consolidated during sleep.\n        <span class=\"blank empty\" data-answer=\"Although\" tabindex=\"0\" role=\"button\" aria-label=\"Blank 2\"><\/span>\n        we may think our brain is resting when we sleep, it is actually doing\n        important work.\n      <\/p>\n\n      <p>\n        Second, not getting enough sleep can affect our day-to-day function.\n        An exhausted person may have a slower reaction time and find it\n        difficult to concentrate.\n        <span class=\"blank empty\" data-answer=\"As a result\" tabindex=\"0\" role=\"button\" aria-label=\"Blank 3\"><\/span>,\n        someone who is extremely fatigued may make more mistakes at school or\n        while doing simple tasks.\n      <\/p>\n\n      <p>\n        Finally, severe sleep deprivation can affect the way the brain\n        understands the world. A person who has gone without sleep for a very\n        long time may even hallucinate.\n        <span class=\"blank empty\" data-answer=\"Similarly\" tabindex=\"0\" role=\"button\" aria-label=\"Blank 4\"><\/span>,\n        getting enough sleep gives our brain time to recharge and helps us\n        think clearly.\n      <\/p>\n\n      <p>\n        <span class=\"blank empty\" data-answer=\"In conclusion\" tabindex=\"0\" role=\"button\" aria-label=\"Blank 5\"><\/span>,\n        sleep is not simply a break from our daily activities; it is essential\n        for our memory, our everyday performance, and a healthy brain.\n      <\/p>\n    <\/div>\n\n    <div class=\"small-note\">\n      To change an answer, click the blank again and choose another connector.\n    <\/div>\n\n    <div class=\"actions\">\n      <button type=\"button\" onclick=\"checkSleepConnectors()\">\n        Check Answers\n      <\/button>\n\n      <button type=\"button\" class=\"reset-button\" onclick=\"resetSleepConnectors()\">\n        Reset\n      <\/button>\n    <\/div>\n\n    <div class=\"feedback\" id=\"sleepConnectorFeedback\" aria-live=\"polite\"><\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      const game = document.getElementById(\"paragraph-connectors\");\n      const connectors = game.querySelectorAll(\".connector\");\n      const blanks = game.querySelectorAll(\".blank\");\n      const feedback = game.querySelector(\"#sleepConnectorFeedback\");\n\n      let selectedConnector = null;\n\n      function updateConnectorStates() {\n        const usedWords = Array.from(blanks)\n          .map(function (blank) {\n            return blank.dataset.value || \"\";\n          })\n          .filter(Boolean);\n\n        connectors.forEach(function (connector) {\n          const word = connector.dataset.word;\n\n          connector.classList.remove(\"used\", \"selected\");\n\n          if (usedWords.includes(word)) {\n            connector.classList.add(\"used\");\n          }\n\n          if (selectedConnector === connector) {\n            connector.classList.add(\"selected\");\n          }\n        });\n      }\n\n      function clearCheckingStyles() {\n        blanks.forEach(function (blank) {\n          blank.classList.remove(\"correct\", \"incorrect\");\n        });\n\n        feedback.className = \"feedback\";\n        feedback.textContent = \"\";\n      }\n\n      function chooseConnector(connector) {\n        if (connector.classList.contains(\"used\")) {\n          return;\n        }\n\n        if (selectedConnector === connector) {\n          selectedConnector = null;\n        } else {\n          selectedConnector = connector;\n        }\n\n        updateConnectorStates();\n      }\n\n      function placeConnector(blank) {\n        clearCheckingStyles();\n\n        if (blank.dataset.value) {\n          blank.dataset.value = \"\";\n          blank.textContent = \"\";\n          blank.classList.add(\"empty\");\n\n          selectedConnector = null;\n          updateConnectorStates();\n          return;\n        }\n\n        if (!selectedConnector) {\n          return;\n        }\n\n        const word = selectedConnector.dataset.word;\n\n        blank.dataset.value = word;\n        blank.textContent = word;\n        blank.classList.remove(\"empty\");\n\n        selectedConnector = null;\n        updateConnectorStates();\n      }\n\n      connectors.forEach(function (connector) {\n        connector.addEventListener(\"click\", function () {\n          chooseConnector(connector);\n        });\n      });\n\n      blanks.forEach(function (blank) {\n        blank.addEventListener(\"click\", function () {\n          placeConnector(blank);\n        });\n\n        blank.addEventListener(\"keydown\", function (event) {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            placeConnector(blank);\n          }\n        });\n      });\n\n      window.checkSleepConnectors = function () {\n        let correct = 0;\n        let completed = 0;\n\n        blanks.forEach(function (blank) {\n          blank.classList.remove(\"correct\", \"incorrect\");\n\n          const answer = blank.dataset.answer;\n          const value = blank.dataset.value || \"\";\n\n          if (value) {\n            completed++;\n          }\n\n          if (value === answer) {\n            blank.classList.add(\"correct\");\n            correct++;\n          } else {\n            blank.classList.add(\"incorrect\");\n          }\n        });\n\n        feedback.className = \"feedback\";\n\n        if (correct === blanks.length) {\n          feedback.classList.add(\"good\");\n          feedback.textContent =\n            \"Excellent. All five connectors are in the correct places.\";\n        } else if (completed < blanks.length) {\n          feedback.classList.add(\"try-again\");\n          feedback.textContent =\n            \"Complete all five blanks before checking again. Green answers are correct; red blanks need another try.\";\n        } else {\n          feedback.classList.add(\"try-again\");\n          feedback.textContent =\n            \"You got \" +\n            correct +\n            \" out of \" +\n            blanks.length +\n            \" correct. Green answers are correct. Try the red ones again.\";\n        }\n      };\n\n      window.resetSleepConnectors = function () {\n        selectedConnector = null;\n\n        blanks.forEach(function (blank) {\n          blank.dataset.value = \"\";\n          blank.textContent = \"\";\n          blank.className = \"blank empty\";\n        });\n\n        connectors.forEach(function (connector) {\n          connector.classList.remove(\"selected\", \"used\");\n        });\n\n        feedback.textContent = \"\";\n        feedback.className = \"feedback\";\n      };\n    })();\n  <\/script>\n<\/div>\n\n\n\n<div id=\"paragraph-jobs-matching\">\n  <style>\n    #paragraph-jobs-matching {\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 20px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      color: #24303f;\n      line-height: 1.6;\n    }\n\n    #paragraph-jobs-matching * {\n      box-sizing: border-box;\n    }\n\n    #paragraph-jobs-matching .activity {\n      width: 100%;\n      padding: 25px;\n      background: #f7f9fc;\n      border: 1px solid #d9e0e8;\n      border-radius: 12px;\n    }\n\n    #paragraph-jobs-matching h2 {\n      margin-top: 0;\n      margin-bottom: 12px;\n      color: #173f5f;\n      font-size: 25px;\n      font-weight: 400;\n    }\n\n    #paragraph-jobs-matching .instructions {\n      margin-bottom: 22px;\n      padding: 13px 16px;\n      background: #eaf2f8;\n      border-left: 5px solid #2874a6;\n      border-radius: 6px;\n    }\n\n    #paragraph-jobs-matching .matching-header {\n      display: grid;\n      grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2fr);\n      gap: 18px;\n      margin-bottom: 8px;\n      padding: 0 15px;\n      font-weight: 600;\n      color: #173f5f;\n    }\n\n    #paragraph-jobs-matching .match-row {\n      display: grid;\n      grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2fr);\n      gap: 18px;\n      align-items: center;\n      margin-bottom: 12px;\n      padding: 15px;\n      background: #ffffff;\n      border: 1px solid #d9e0e8;\n      border-radius: 9px;\n    }\n\n    #paragraph-jobs-matching .paragraph-part {\n      padding: 12px 14px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #173f5f;\n      background: #eaf2f8;\n      border-radius: 7px;\n    }\n\n    #paragraph-jobs-matching .answer-area {\n      min-width: 0;\n    }\n\n    #paragraph-jobs-matching select {\n      width: 100%;\n      padding: 10px 12px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      color: #24303f;\n      background: #ffffff;\n      border: 2px solid #9aa9b8;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-jobs-matching select:focus {\n      outline: 3px solid rgba(40, 116, 166, 0.18);\n      border-color: #2874a6;\n    }\n\n    #paragraph-jobs-matching select.correct {\n      color: #236b39;\n      background: #edf8f0;\n      border-color: #2d7d46;\n    }\n\n    #paragraph-jobs-matching select.incorrect {\n      color: #9c2f2f;\n      background: #fff0f0;\n      border-color: #b33a3a;\n    }\n\n    #paragraph-jobs-matching .feedback {\n      min-height: 24px;\n      margin-top: 7px;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    #paragraph-jobs-matching .feedback.correct-text {\n      color: #236b39;\n    }\n\n    #paragraph-jobs-matching .feedback.incorrect-text {\n      color: #a22d2d;\n    }\n\n    #paragraph-jobs-matching .actions {\n      margin-top: 22px;\n    }\n\n    #paragraph-jobs-matching button {\n      margin: 0 8px 0 0;\n      padding: 11px 18px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      font-weight: 600;\n      color: #ffffff;\n      background: #2874a6;\n      border: none;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-jobs-matching button:hover {\n      background: #1f5d85;\n    }\n\n    #paragraph-jobs-matching .reset-button {\n      color: #24303f;\n      background: #dfe6ec;\n    }\n\n    #paragraph-jobs-matching .reset-button:hover {\n      background: #cad4dd;\n    }\n\n    #paragraph-jobs-matching .score-box {\n      display: none;\n      margin-top: 20px;\n      padding: 15px;\n      font-size: 17px;\n      font-weight: 600;\n      background: #ffffff;\n      border-radius: 8px;\n    }\n\n    #paragraph-jobs-matching .score-box.good {\n      display: block;\n      color: #236b39;\n      border: 2px solid #2d7d46;\n    }\n\n    #paragraph-jobs-matching .score-box.try-again {\n      display: block;\n      color: #9c2f2f;\n      border: 2px solid #b33a3a;\n    }\n\n    @media (max-width: 900px) {\n      #paragraph-jobs-matching {\n        max-width: 760px;\n      }\n\n      #paragraph-jobs-matching .matching-header {\n        display: none;\n      }\n\n      #paragraph-jobs-matching .match-row {\n        grid-template-columns: 1fr;\n        gap: 10px;\n      }\n    }\n\n    @media (max-width: 650px) {\n      #paragraph-jobs-matching {\n        padding: 12px;\n      }\n\n      #paragraph-jobs-matching .activity {\n        padding: 18px;\n      }\n\n      #paragraph-jobs-matching button {\n        margin-bottom: 8px;\n      }\n    }\n  <\/style>\n\n  <section class=\"activity\">\n    <h2>Part 1 \u2014 Find the Jobs<\/h2>\n\n    <div class=\"instructions\">\n      Match each part of the paragraph to its job. Choose the best description\n      for each paragraph part.\n    <\/div>\n\n    <div class=\"matching-header\">\n      <div>Paragraph part<\/div>\n      <div>What does it do?<\/div>\n    <\/div>\n\n    <!-- THESIS -->\n    <div class=\"match-row\">\n      <div class=\"paragraph-part\">\n        Thesis statement\n      <\/div>\n\n      <div class=\"answer-area\">\n        <select\n          id=\"job1\"\n          data-answer=\"topic\"\n          aria-label=\"Job of the thesis statement\"\n        >\n          <option value=\"\">Choose a job<\/option>\n          <option value=\"detail\">\n            Gives more information or an example\n          <\/option>\n          <option value=\"topic\">\n            Introduces the whole topic and tells us the three effects\n          <\/option>\n          <option value=\"first\">\n            Introduces the first effect\n          <\/option>\n          <option value=\"conclusion\">\n            Finishes the paragraph and reminds us of the main message\n          <\/option>\n          <option value=\"second\">\n            Introduces the second effect\n          <\/option>\n          <option value=\"third\">\n            Introduces the third effect\n          <\/option>\n        <\/select>\n\n        <div\n          class=\"feedback\"\n          id=\"jobFeedback1\"\n          aria-live=\"polite\"\n        ><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- MAIN IDEA 1 -->\n    <div class=\"match-row\">\n      <div class=\"paragraph-part\">\n        Main idea 1\n      <\/div>\n\n      <div class=\"answer-area\">\n        <select\n          id=\"job2\"\n          data-answer=\"first\"\n          aria-label=\"Job of main idea 1\"\n        >\n          <option value=\"\">Choose a job<\/option>\n          <option value=\"detail\">\n            Gives more information or an example\n          <\/option>\n          <option value=\"topic\">\n            Introduces the whole topic and tells us the three effects\n          <\/option>\n          <option value=\"first\">\n            Introduces the first effect\n          <\/option>\n          <option value=\"conclusion\">\n            Finishes the paragraph and reminds us of the main message\n          <\/option>\n          <option value=\"second\">\n            Introduces the second effect\n          <\/option>\n          <option value=\"third\">\n            Introduces the third effect\n          <\/option>\n        <\/select>\n\n        <div\n          class=\"feedback\"\n          id=\"jobFeedback2\"\n          aria-live=\"polite\"\n        ><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- SUPPORTING DETAIL -->\n    <div class=\"match-row\">\n      <div class=\"paragraph-part\">\n        Supporting detail\n      <\/div>\n\n      <div class=\"answer-area\">\n        <select\n          id=\"job3\"\n          data-answer=\"detail\"\n          aria-label=\"Job of supporting detail\"\n        >\n          <option value=\"\">Choose a job<\/option>\n          <option value=\"detail\">\n            Gives more information or an example\n          <\/option>\n          <option value=\"topic\">\n            Introduces the whole topic and tells us the three effects\n          <\/option>\n          <option value=\"first\">\n            Introduces the first effect\n          <\/option>\n          <option value=\"conclusion\">\n            Finishes the paragraph and reminds us of the main message\n          <\/option>\n          <option value=\"second\">\n            Introduces the second effect\n          <\/option>\n          <option value=\"third\">\n            Introduces the third effect\n          <\/option>\n        <\/select>\n\n        <div\n          class=\"feedback\"\n          id=\"jobFeedback3\"\n          aria-live=\"polite\"\n        ><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- MAIN IDEA 2 -->\n    <div class=\"match-row\">\n      <div class=\"paragraph-part\">\n        Main idea 2\n      <\/div>\n\n      <div class=\"answer-area\">\n        <select\n          id=\"job4\"\n          data-answer=\"second\"\n          aria-label=\"Job of main idea 2\"\n        >\n          <option value=\"\">Choose a job<\/option>\n          <option value=\"detail\">\n            Gives more information or an example\n          <\/option>\n          <option value=\"topic\">\n            Introduces the whole topic and tells us the three effects\n          <\/option>\n          <option value=\"first\">\n            Introduces the first effect\n          <\/option>\n          <option value=\"conclusion\">\n            Finishes the paragraph and reminds us of the main message\n          <\/option>\n          <option value=\"second\">\n            Introduces the second effect\n          <\/option>\n          <option value=\"third\">\n            Introduces the third effect\n          <\/option>\n        <\/select>\n\n        <div\n          class=\"feedback\"\n          id=\"jobFeedback4\"\n          aria-live=\"polite\"\n        ><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- MAIN IDEA 3 -->\n    <div class=\"match-row\">\n      <div class=\"paragraph-part\">\n        Main idea 3\n      <\/div>\n\n      <div class=\"answer-area\">\n        <select\n          id=\"job5\"\n          data-answer=\"third\"\n          aria-label=\"Job of main idea 3\"\n        >\n          <option value=\"\">Choose a job<\/option>\n          <option value=\"detail\">\n            Gives more information or an example\n          <\/option>\n          <option value=\"topic\">\n            Introduces the whole topic and tells us the three effects\n          <\/option>\n          <option value=\"first\">\n            Introduces the first effect\n          <\/option>\n          <option value=\"conclusion\">\n            Finishes the paragraph and reminds us of the main message\n          <\/option>\n          <option value=\"second\">\n            Introduces the second effect\n          <\/option>\n          <option value=\"third\">\n            Introduces the third effect\n          <\/option>\n        <\/select>\n\n        <div\n          class=\"feedback\"\n          id=\"jobFeedback5\"\n          aria-live=\"polite\"\n        ><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- CONCLUSION -->\n    <div class=\"match-row\">\n      <div class=\"paragraph-part\">\n        Conclusion\n      <\/div>\n\n      <div class=\"answer-area\">\n        <select\n          id=\"job6\"\n          data-answer=\"conclusion\"\n          aria-label=\"Job of the conclusion\"\n        >\n          <option value=\"\">Choose a job<\/option>\n          <option value=\"detail\">\n            Gives more information or an example\n          <\/option>\n          <option value=\"topic\">\n            Introduces the whole topic and tells us the three effects\n          <\/option>\n          <option value=\"first\">\n            Introduces the first effect\n          <\/option>\n          <option value=\"conclusion\">\n            Finishes the paragraph and reminds us of the main message\n          <\/option>\n          <option value=\"second\">\n            Introduces the second effect\n          <\/option>\n          <option value=\"third\">\n            Introduces the third effect\n          <\/option>\n        <\/select>\n\n        <div\n          class=\"feedback\"\n          id=\"jobFeedback6\"\n          aria-live=\"polite\"\n        ><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"actions\">\n      <button type=\"button\" onclick=\"checkParagraphJobs()\">\n        Check Answers\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"reset-button\"\n        onclick=\"resetParagraphJobs()\"\n      >\n        Reset\n      <\/button>\n    <\/div>\n\n    <div\n      class=\"score-box\"\n      id=\"paragraphJobsScore\"\n      aria-live=\"polite\"\n    ><\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      const activity = document.getElementById(\n        \"paragraph-jobs-matching\"\n      );\n\n      const totalQuestions = 6;\n\n      const explanations = [\n        \"Correct. A thesis statement introduces the topic and tells the reader the main points that the paragraph will discuss.\",\n\n        \"Correct. Main idea 1 introduces the first effect discussed in the paragraph.\",\n\n        \"Correct. A supporting detail explains a main idea by adding information, reasons, facts, or examples.\",\n\n        \"Correct. Main idea 2 introduces the second effect discussed in the paragraph.\",\n\n        \"Correct. Main idea 3 introduces the third effect discussed in the paragraph.\",\n\n        \"Correct. The conclusion finishes the paragraph and reminds the reader of the main message.\"\n      ];\n\n      window.checkParagraphJobs = function () {\n        let score = 0;\n\n        for (let i = 1; i <= totalQuestions; i++) {\n          const select = activity.querySelector(\"#job\" + i);\n          const feedback = activity.querySelector(\n            \"#jobFeedback\" + i\n          );\n\n          const correctAnswer = select.dataset.answer;\n\n          select.classList.remove(\"correct\", \"incorrect\");\n\n          feedback.classList.remove(\n            \"correct-text\",\n            \"incorrect-text\"\n          );\n\n          if (select.value === correctAnswer) {\n            score++;\n\n            select.classList.add(\"correct\");\n            feedback.classList.add(\"correct-text\");\n\n            feedback.textContent = explanations[i - 1];\n          } else if (select.value === \"\") {\n            select.classList.add(\"incorrect\");\n            feedback.classList.add(\"incorrect-text\");\n\n            feedback.textContent =\n              \"Choose an answer before checking.\";\n          } else {\n            select.classList.add(\"incorrect\");\n            feedback.classList.add(\"incorrect-text\");\n\n            feedback.textContent =\n              \"Not quite. Think again about the job this part does in the paragraph.\";\n          }\n        }\n\n        const scoreBox = activity.querySelector(\n          \"#paragraphJobsScore\"\n        );\n\n        scoreBox.className = \"score-box\";\n\n        if (score === totalQuestions) {\n          scoreBox.classList.add(\"good\");\n\n          scoreBox.textContent =\n            \"Excellent. You matched all \" +\n            totalQuestions +\n            \" paragraph parts correctly.\";\n        } else {\n          scoreBox.classList.add(\"try-again\");\n\n          scoreBox.textContent =\n            \"You matched \" +\n            score +\n            \" out of \" +\n            totalQuestions +\n            \" correctly. Check the red answers and try again.\";\n        }\n      };\n\n      window.resetParagraphJobs = function () {\n        for (let i = 1; i <= totalQuestions; i++) {\n          const select = activity.querySelector(\"#job\" + i);\n          const feedback = activity.querySelector(\n            \"#jobFeedback\" + i\n          );\n\n          select.value = \"\";\n          select.classList.remove(\"correct\", \"incorrect\");\n\n          feedback.textContent = \"\";\n          feedback.classList.remove(\n            \"correct-text\",\n            \"incorrect-text\"\n          );\n        }\n\n        const scoreBox = activity.querySelector(\n          \"#paragraphJobsScore\"\n        );\n\n        scoreBox.textContent = \"\";\n        scoreBox.className = \"score-box\";\n      };\n    })();\n  <\/script>\n<\/div>\n\n\n\n<div id=\"paragraph-ordering\">\n  <style>\n    #paragraph-ordering {\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 20px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      color: #24303f;\n      line-height: 1.6;\n    }\n\n    #paragraph-ordering * {\n      box-sizing: border-box;\n    }\n\n    #paragraph-ordering .activity {\n      width: 100%;\n      padding: 25px;\n      background: #f7f9fc;\n      border: 1px solid #d9e0e8;\n      border-radius: 12px;\n    }\n\n    #paragraph-ordering h2 {\n      margin-top: 0;\n      margin-bottom: 12px;\n      color: #173f5f;\n      font-size: 25px;\n      font-weight: 400;\n    }\n\n    #paragraph-ordering .instructions {\n      margin-bottom: 22px;\n      padding: 13px 16px;\n      background: #eaf2f8;\n      border-left: 5px solid #2874a6;\n      border-radius: 6px;\n    }\n\n    #paragraph-ordering .order-row {\n      display: grid;\n      grid-template-columns: 105px minmax(0, 1fr);\n      gap: 16px;\n      align-items: center;\n      margin-bottom: 12px;\n      padding: 15px;\n      background: #ffffff;\n      border: 1px solid #d9e0e8;\n      border-radius: 9px;\n    }\n\n    #paragraph-ordering .number-area {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    #paragraph-ordering select {\n      width: 82px;\n      padding: 9px 8px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      text-align: center;\n      color: #24303f;\n      background: #ffffff;\n      border: 2px solid #9aa9b8;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-ordering select:focus {\n      outline: 3px solid rgba(40, 116, 166, 0.18);\n      border-color: #2874a6;\n    }\n\n    #paragraph-ordering select.correct {\n      color: #236b39;\n      background: #edf8f0;\n      border-color: #2d7d46;\n    }\n\n    #paragraph-ordering select.incorrect {\n      color: #9c2f2f;\n      background: #fff0f0;\n      border-color: #b33a3a;\n    }\n\n    #paragraph-ordering .sentence {\n      font-size: 16px;\n    }\n\n    #paragraph-ordering .feedback {\n      grid-column: 2;\n      min-height: 22px;\n      margin-top: -4px;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    #paragraph-ordering .feedback.correct-text {\n      color: #236b39;\n    }\n\n    #paragraph-ordering .feedback.incorrect-text {\n      color: #a22d2d;\n    }\n\n    #paragraph-ordering .actions {\n      margin-top: 22px;\n    }\n\n    #paragraph-ordering button {\n      margin: 0 8px 0 0;\n      padding: 11px 18px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      font-weight: 600;\n      color: #ffffff;\n      background: #2874a6;\n      border: none;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-ordering button:hover {\n      background: #1f5d85;\n    }\n\n    #paragraph-ordering .reset-button {\n      color: #24303f;\n      background: #dfe6ec;\n    }\n\n    #paragraph-ordering .reset-button:hover {\n      background: #cad4dd;\n    }\n\n    #paragraph-ordering .score-box {\n      display: none;\n      margin-top: 20px;\n      padding: 15px;\n      font-size: 17px;\n      font-weight: 600;\n      background: #ffffff;\n      border-radius: 8px;\n    }\n\n    #paragraph-ordering .score-box.good {\n      display: block;\n      color: #236b39;\n      border: 2px solid #2d7d46;\n    }\n\n    #paragraph-ordering .score-box.try-again {\n      display: block;\n      color: #9c2f2f;\n      border: 2px solid #b33a3a;\n    }\n\n    @media (max-width: 900px) {\n      #paragraph-ordering {\n        max-width: 760px;\n      }\n    }\n\n    @media (max-width: 650px) {\n      #paragraph-ordering {\n        padding: 12px;\n      }\n\n      #paragraph-ordering .activity {\n        padding: 18px;\n      }\n\n      #paragraph-ordering .order-row {\n        grid-template-columns: 75px minmax(0, 1fr);\n        gap: 10px;\n        padding: 13px;\n      }\n\n      #paragraph-ordering select {\n        width: 68px;\n      }\n\n      #paragraph-ordering button {\n        margin-bottom: 8px;\n      }\n    }\n  <\/style>\n\n  <section class=\"activity\">\n    <h2>Part 2 \u2014 Build the Paragraph<\/h2>\n\n    <div class=\"instructions\">\n      The ideas below have become mixed up. Number them from\n      <strong>1 to 8<\/strong> to create a well-organized paragraph.\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order1\" data-answer=\"7\" aria-label=\"Order of sentence 1\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        A person who goes without sleep for a very long time may even hallucinate.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback1\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order2\" data-answer=\"1\" aria-label=\"Order of sentence 2\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        Sleep deprivation can cause problems with memory, day-to-day function,\n        and the way our brain understands the world.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback2\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order3\" data-answer=\"6\" aria-label=\"Order of sentence 3\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        Finally, severe sleep deprivation can affect what we see and hear.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback3\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order4\" data-answer=\"8\" aria-label=\"Order of sentence 4\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        In conclusion, getting enough sleep is vital for a healthy brain and body.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback4\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order5\" data-answer=\"2\" aria-label=\"Order of sentence 5\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        First, sleep deprivation can make it harder to create long-term memories.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback5\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order6\" data-answer=\"5\" aria-label=\"Order of sentence 6\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        An exhausted person may have a slower reaction time and find it difficult\n        to concentrate.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback6\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order7\" data-answer=\"4\" aria-label=\"Order of sentence 7\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        Second, a lack of sleep can make day-to-day activities more difficult.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback7\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"order-row\">\n      <div class=\"number-area\">\n        <select id=\"order8\" data-answer=\"3\" aria-label=\"Order of sentence 8\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"1\">1<\/option>\n          <option value=\"2\">2<\/option>\n          <option value=\"3\">3<\/option>\n          <option value=\"4\">4<\/option>\n          <option value=\"5\">5<\/option>\n          <option value=\"6\">6<\/option>\n          <option value=\"7\">7<\/option>\n          <option value=\"8\">8<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        This is because memories created during the day are consolidated while we sleep.\n      <\/div>\n\n      <div class=\"feedback\" id=\"orderFeedback8\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"actions\">\n      <button type=\"button\" onclick=\"checkParagraphOrder()\">\n        Check Answers\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"reset-button\"\n        onclick=\"resetParagraphOrder()\"\n      >\n        Reset\n      <\/button>\n    <\/div>\n\n    <div\n      class=\"score-box\"\n      id=\"paragraphOrderScore\"\n      aria-live=\"polite\"\n    ><\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      const activity = document.getElementById(\"paragraph-ordering\");\n      const totalQuestions = 8;\n\n      window.checkParagraphOrder = function () {\n        let score = 0;\n\n        for (let i = 1; i <= totalQuestions; i++) {\n          const select = activity.querySelector(\"#order\" + i);\n          const feedback = activity.querySelector(\n            \"#orderFeedback\" + i\n          );\n\n          const correctAnswer = select.dataset.answer;\n\n          select.classList.remove(\"correct\", \"incorrect\");\n          feedback.classList.remove(\n            \"correct-text\",\n            \"incorrect-text\"\n          );\n\n          if (select.value === correctAnswer) {\n            score++;\n            select.classList.add(\"correct\");\n            feedback.classList.add(\"correct-text\");\n            feedback.textContent =\n              \"Correct. This sentence is in the right position.\";\n          } else if (select.value === \"\") {\n            select.classList.add(\"incorrect\");\n            feedback.classList.add(\"incorrect-text\");\n            feedback.textContent =\n              \"Choose a number before checking.\";\n          } else {\n            select.classList.add(\"incorrect\");\n            feedback.classList.add(\"incorrect-text\");\n            feedback.textContent =\n              \"Not quite. Think about what should come before and after this sentence.\";\n          }\n        }\n\n        const scoreBox = activity.querySelector(\n          \"#paragraphOrderScore\"\n        );\n\n        scoreBox.className = \"score-box\";\n\n        if (score === totalQuestions) {\n          scoreBox.classList.add(\"good\");\n          scoreBox.textContent =\n            \"Excellent. You put all 8 sentences in the correct order.\";\n        } else {\n          scoreBox.classList.add(\"try-again\");\n          scoreBox.textContent =\n            \"You placed \" +\n            score +\n            \" out of \" +\n            totalQuestions +\n            \" sentences correctly. Review the red answers and try again.\";\n        }\n      };\n\n      window.resetParagraphOrder = function () {\n        for (let i = 1; i <= totalQuestions; i++) {\n          const select = activity.querySelector(\"#order\" + i);\n          const feedback = activity.querySelector(\n            \"#orderFeedback\" + i\n          );\n\n          select.value = \"\";\n          select.classList.remove(\"correct\", \"incorrect\");\n\n          feedback.textContent = \"\";\n          feedback.classList.remove(\n            \"correct-text\",\n            \"incorrect-text\"\n          );\n        }\n\n        const scoreBox = activity.querySelector(\n          \"#paragraphOrderScore\"\n        );\n\n        scoreBox.textContent = \"\";\n        scoreBox.className = \"score-box\";\n      };\n    })();\n  <\/script>\n<\/div>\n\n\n\n<div id=\"paragraph-pattern\">\n  <style>\n    #paragraph-pattern {\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 20px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      color: #24303f;\n      line-height: 1.6;\n    }\n\n    #paragraph-pattern * {\n      box-sizing: border-box;\n    }\n\n    #paragraph-pattern .activity {\n      width: 100%;\n      padding: 25px;\n      background: #f7f9fc;\n      border: 1px solid #d9e0e8;\n      border-radius: 12px;\n    }\n\n    #paragraph-pattern h2 {\n      margin-top: 0;\n      margin-bottom: 12px;\n      color: #173f5f;\n      font-size: 25px;\n      font-weight: 400;\n    }\n\n    #paragraph-pattern .instructions {\n      margin-bottom: 20px;\n      padding: 13px 16px;\n      background: #eaf2f8;\n      border-left: 5px solid #2874a6;\n      border-radius: 6px;\n    }\n\n    #paragraph-pattern .key-box {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      margin-bottom: 22px;\n      padding: 15px;\n      background: #fff8e6;\n      border: 1px solid #e6c96c;\n      border-radius: 8px;\n    }\n\n    #paragraph-pattern .key-item {\n      padding: 8px 12px;\n      background: #ffffff;\n      border: 1px solid #e0c76c;\n      border-radius: 6px;\n    }\n\n    #paragraph-pattern .key-item strong {\n      color: #173f5f;\n    }\n\n    #paragraph-pattern .sentence-row {\n      display: grid;\n      grid-template-columns: 90px minmax(0, 1fr);\n      gap: 16px;\n      align-items: center;\n      margin-bottom: 12px;\n      padding: 15px;\n      background: #ffffff;\n      border: 1px solid #d9e0e8;\n      border-radius: 9px;\n    }\n\n    #paragraph-pattern select {\n      width: 75px;\n      padding: 9px 8px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      text-align: center;\n      color: #24303f;\n      background: #ffffff;\n      border: 2px solid #9aa9b8;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-pattern select:focus {\n      outline: 3px solid rgba(40, 116, 166, 0.18);\n      border-color: #2874a6;\n    }\n\n    #paragraph-pattern select.correct {\n      color: #236b39;\n      background: #edf8f0;\n      border-color: #2d7d46;\n    }\n\n    #paragraph-pattern select.incorrect {\n      color: #9c2f2f;\n      background: #fff0f0;\n      border-color: #b33a3a;\n    }\n\n    #paragraph-pattern .sentence {\n      font-size: 16px;\n    }\n\n    #paragraph-pattern .feedback {\n      grid-column: 2;\n      min-height: 22px;\n      margin-top: -4px;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    #paragraph-pattern .correct-text {\n      color: #236b39;\n    }\n\n    #paragraph-pattern .incorrect-text {\n      color: #a22d2d;\n    }\n\n    #paragraph-pattern .pattern-box {\n      margin-top: 28px;\n      padding: 20px;\n      background: #eef5fa;\n      border: 1px solid #b9cfdf;\n      border-radius: 9px;\n    }\n\n    #paragraph-pattern .pattern-box h3 {\n      margin: 0 0 14px;\n      color: #173f5f;\n      font-size: 20px;\n      font-weight: 500;\n    }\n\n    #paragraph-pattern .pattern-line {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      font-size: 18px;\n      font-weight: 600;\n      color: #173f5f;\n    }\n\n    #paragraph-pattern .pattern-select {\n      width: 72px;\n      margin: 0;\n    }\n\n    #paragraph-pattern .pattern-feedback {\n      min-height: 24px;\n      margin-top: 12px;\n      font-size: 15px;\n      font-weight: 600;\n    }\n\n    #paragraph-pattern .actions {\n      margin-top: 22px;\n    }\n\n    #paragraph-pattern button {\n      margin: 0 8px 0 0;\n      padding: 11px 18px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      font-weight: 600;\n      color: #ffffff;\n      background: #2874a6;\n      border: none;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #paragraph-pattern button:hover {\n      background: #1f5d85;\n    }\n\n    #paragraph-pattern .reset-button {\n      color: #24303f;\n      background: #dfe6ec;\n    }\n\n    #paragraph-pattern .reset-button:hover {\n      background: #cad4dd;\n    }\n\n    #paragraph-pattern .score-box {\n      display: none;\n      margin-top: 20px;\n      padding: 15px;\n      font-size: 17px;\n      font-weight: 600;\n      background: #ffffff;\n      border-radius: 8px;\n    }\n\n    #paragraph-pattern .score-box.good {\n      display: block;\n      color: #236b39;\n      border: 2px solid #2d7d46;\n    }\n\n    #paragraph-pattern .score-box.try-again {\n      display: block;\n      color: #9c2f2f;\n      border: 2px solid #b33a3a;\n    }\n\n    @media (max-width: 900px) {\n      #paragraph-pattern {\n        max-width: 760px;\n      }\n    }\n\n    @media (max-width: 650px) {\n      #paragraph-pattern {\n        padding: 12px;\n      }\n\n      #paragraph-pattern .activity {\n        padding: 18px;\n      }\n\n      #paragraph-pattern .sentence-row {\n        grid-template-columns: 70px minmax(0, 1fr);\n        gap: 10px;\n        padding: 13px;\n      }\n\n      #paragraph-pattern select {\n        width: 62px;\n      }\n\n      #paragraph-pattern .pattern-line {\n        font-size: 16px;\n      }\n\n      #paragraph-pattern button {\n        margin-bottom: 8px;\n      }\n    }\n  <\/style>\n\n  <section class=\"activity\">\n    <h2>Part 3 \u2014 Discover the Pattern \ud83d\udd0d<\/h2>\n\n    <div class=\"instructions\">\n      Write the correct letter next to each sentence from Part 2. Then complete\n      the paragraph pattern at the bottom.\n    <\/div>\n\n    <div class=\"key-box\">\n      <div class=\"key-item\"><strong>T<\/strong> = Thesis statement<\/div>\n      <div class=\"key-item\"><strong>M<\/strong> = Main idea<\/div>\n      <div class=\"key-item\"><strong>D<\/strong> = Supporting detail<\/div>\n      <div class=\"key-item\"><strong>C<\/strong> = Conclusion<\/div>\n    <\/div>\n\n    <!-- 1 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern1\" data-answer=\"T\" aria-label=\"Sentence 1 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        Sleep deprivation can cause problems with memory, day-to-day function,\n        and the way our brain understands the world.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback1\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 2 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern2\" data-answer=\"M\" aria-label=\"Sentence 2 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        First, sleep deprivation can make it harder to create long-term memories.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback2\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 3 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern3\" data-answer=\"D\" aria-label=\"Sentence 3 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        This is because memories created during the day are consolidated while\n        we sleep.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback3\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 4 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern4\" data-answer=\"M\" aria-label=\"Sentence 4 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        Second, a lack of sleep can make day-to-day activities more difficult.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback4\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 5 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern5\" data-answer=\"D\" aria-label=\"Sentence 5 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        An exhausted person may have a slower reaction time and find it\n        difficult to concentrate.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback5\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 6 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern6\" data-answer=\"M\" aria-label=\"Sentence 6 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        Finally, severe sleep deprivation can affect what we see and hear.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback6\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 7 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern7\" data-answer=\"D\" aria-label=\"Sentence 7 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        A person who goes without sleep for a very long time may even hallucinate.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback7\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <!-- 8 -->\n    <div class=\"sentence-row\">\n      <div>\n        <select id=\"pattern8\" data-answer=\"C\" aria-label=\"Sentence 8 type\">\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"sentence\">\n        In conclusion, getting enough sleep is vital for a healthy brain and body.\n      <\/div>\n\n      <div class=\"feedback\" id=\"patternFeedback8\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <div class=\"pattern-box\">\n      <h3>Complete the pattern<\/h3>\n\n      <div class=\"pattern-line\">\n        <span>T \u2192 M +<\/span>\n\n        <select\n          class=\"pattern-select\"\n          id=\"finalPattern1\"\n          data-answer=\"D\"\n          aria-label=\"First missing letter in pattern\"\n        >\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n\n        <span>\u2192 M +<\/span>\n\n        <select\n          class=\"pattern-select\"\n          id=\"finalPattern2\"\n          data-answer=\"D\"\n          aria-label=\"Second missing letter in pattern\"\n        >\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n\n        <span>\u2192 M +<\/span>\n\n        <select\n          class=\"pattern-select\"\n          id=\"finalPattern3\"\n          data-answer=\"D\"\n          aria-label=\"Third missing letter in pattern\"\n        >\n          <option value=\"\">\u2014<\/option>\n          <option value=\"T\">T<\/option>\n          <option value=\"M\">M<\/option>\n          <option value=\"D\">D<\/option>\n          <option value=\"C\">C<\/option>\n        <\/select>\n\n        <span>\u2192 C<\/span>\n      <\/div>\n\n      <div\n        class=\"pattern-feedback\"\n        id=\"finalPatternFeedback\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <div class=\"actions\">\n      <button type=\"button\" onclick=\"checkParagraphPattern()\">\n        Check Answers\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"reset-button\"\n        onclick=\"resetParagraphPattern()\"\n      >\n        Reset\n      <\/button>\n    <\/div>\n\n    <div\n      class=\"score-box\"\n      id=\"paragraphPatternScore\"\n      aria-live=\"polite\"\n    ><\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      const activity = document.getElementById(\"paragraph-pattern\");\n      const totalSentences = 8;\n      const totalPatternBlanks = 3;\n\n      const explanations = [\n        \"Correct. This is the thesis statement because it introduces the three main effects.\",\n        \"Correct. This is a main idea because it introduces the first effect.\",\n        \"Correct. This is a supporting detail because it explains why sleep affects memory.\",\n        \"Correct. This is a main idea because it introduces the second effect.\",\n        \"Correct. This is a supporting detail because it gives more information about day-to-day function.\",\n        \"Correct. This is a main idea because it introduces the third effect.\",\n        \"Correct. This is a supporting detail because it gives an example of the third effect.\",\n        \"Correct. This is the conclusion because it finishes the paragraph and returns to the main message.\"\n      ];\n\n      window.checkParagraphPattern = function () {\n        let sentenceScore = 0;\n        let patternScore = 0;\n\n        for (let i = 1; i <= totalSentences; i++) {\n          const select = activity.querySelector(\"#pattern\" + i);\n          const feedback = activity.querySelector(\n            \"#patternFeedback\" + i\n          );\n\n          select.classList.remove(\"correct\", \"incorrect\");\n          feedback.classList.remove(\n            \"correct-text\",\n            \"incorrect-text\"\n          );\n\n          if (select.value === select.dataset.answer) {\n            sentenceScore++;\n            select.classList.add(\"correct\");\n            feedback.classList.add(\"correct-text\");\n            feedback.textContent = explanations[i - 1];\n          } else if (select.value === \"\") {\n            select.classList.add(\"incorrect\");\n            feedback.classList.add(\"incorrect-text\");\n            feedback.textContent =\n              \"Choose a letter before checking.\";\n          } else {\n            select.classList.add(\"incorrect\");\n            feedback.classList.add(\"incorrect-text\");\n            feedback.textContent =\n              \"Not quite. Think about the job this sentence does in the paragraph.\";\n          }\n        }\n\n        for (let i = 1; i <= totalPatternBlanks; i++) {\n          const select = activity.querySelector(\n            \"#finalPattern\" + i\n          );\n\n          select.classList.remove(\"correct\", \"incorrect\");\n\n          if (select.value === select.dataset.answer) {\n            patternScore++;\n            select.classList.add(\"correct\");\n          } else {\n            select.classList.add(\"incorrect\");\n          }\n        }\n\n        const patternFeedback = activity.querySelector(\n          \"#finalPatternFeedback\"\n        );\n\n        patternFeedback.classList.remove(\n          \"correct-text\",\n          \"incorrect-text\"\n        );\n\n        if (patternScore === totalPatternBlanks) {\n          patternFeedback.classList.add(\"correct-text\");\n          patternFeedback.textContent =\n            \"Correct. Each main idea is followed by a supporting detail.\";\n        } else {\n          patternFeedback.classList.add(\"incorrect-text\");\n          patternFeedback.textContent =\n            \"Not quite. Look at what normally comes after each main idea.\";\n        }\n\n        const totalCorrect = sentenceScore + patternScore;\n        const totalQuestions =\n          totalSentences + totalPatternBlanks;\n\n        const scoreBox = activity.querySelector(\n          \"#paragraphPatternScore\"\n        );\n\n        scoreBox.className = \"score-box\";\n\n        if (totalCorrect === totalQuestions) {\n          scoreBox.classList.add(\"good\");\n          scoreBox.textContent =\n            \"Excellent. You identified the paragraph structure and discovered the pattern.\";\n        } else {\n          scoreBox.classList.add(\"try-again\");\n          scoreBox.textContent =\n            \"You got \" +\n            totalCorrect +\n            \" out of \" +\n            totalQuestions +\n            \" correct. Review the red answers and try again.\";\n        }\n      };\n\n      window.resetParagraphPattern = function () {\n        for (let i = 1; i <= totalSentences; i++) {\n          const select = activity.querySelector(\"#pattern\" + i);\n          const feedback = activity.querySelector(\n            \"#patternFeedback\" + i\n          );\n\n          select.value = \"\";\n          select.classList.remove(\"correct\", \"incorrect\");\n\n          feedback.textContent = \"\";\n          feedback.classList.remove(\n            \"correct-text\",\n            \"incorrect-text\"\n          );\n        }\n\n        for (let i = 1; i <= totalPatternBlanks; i++) {\n          const select = activity.querySelector(\n            \"#finalPattern\" + i\n          );\n\n          select.value = \"\";\n          select.classList.remove(\"correct\", \"incorrect\");\n        }\n\n        const patternFeedback = activity.querySelector(\n          \"#finalPatternFeedback\"\n        );\n\n        patternFeedback.textContent = \"\";\n        patternFeedback.classList.remove(\n          \"correct-text\",\n          \"incorrect-text\"\n        );\n\n        const scoreBox = activity.querySelector(\n          \"#paragraphPatternScore\"\n        );\n\n        scoreBox.textContent = \"\";\n        scoreBox.className = \"score-box\";\n      };\n    })();\n  <\/script>\n<\/div>\n\n\n\n<div id=\"exercise-paragraph-plan\">\n  <style>\n    #exercise-paragraph-plan {\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 20px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      color: #24303f;\n      line-height: 1.6;\n    }\n\n    #exercise-paragraph-plan * {\n      box-sizing: border-box;\n    }\n\n    #exercise-paragraph-plan .activity {\n      width: 100%;\n      padding: 25px;\n      background: #f7f9fc;\n      border: 1px solid #d9e0e8;\n      border-radius: 12px;\n    }\n\n    #exercise-paragraph-plan h2 {\n      margin-top: 0;\n      margin-bottom: 12px;\n      color: #173f5f;\n      font-size: 25px;\n      font-weight: 400;\n    }\n\n    #exercise-paragraph-plan .instructions {\n      margin-bottom: 22px;\n      padding: 13px 16px;\n      background: #eaf2f8;\n      border-left: 5px solid #2874a6;\n      border-radius: 6px;\n    }\n\n    #exercise-paragraph-plan .topic-box {\n      margin-bottom: 22px;\n      padding: 16px 18px;\n      text-align: center;\n      background: #fff8e6;\n      border: 1px solid #e6c96c;\n      border-radius: 8px;\n    }\n\n    #exercise-paragraph-plan .topic-label {\n      margin-bottom: 3px;\n      font-size: 14px;\n      color: #6d5200;\n    }\n\n    #exercise-paragraph-plan .topic-title {\n      color: #173f5f;\n      font-size: 21px;\n      font-weight: 600;\n    }\n\n    #exercise-paragraph-plan .plan-row {\n      margin-bottom: 13px;\n      padding: 16px;\n      background: #ffffff;\n      border: 1px solid #d9e0e8;\n      border-radius: 9px;\n    }\n\n    #exercise-paragraph-plan .plan-row.main {\n      border-left: 5px solid #2874a6;\n    }\n\n    #exercise-paragraph-plan .plan-row.detail {\n      margin-left: 35px;\n      border-left: 5px solid #9db8ca;\n    }\n\n    #exercise-paragraph-plan .plan-row.conclusion {\n      border-left: 5px solid #6d8090;\n    }\n\n    #exercise-paragraph-plan .row-label {\n      display: block;\n      margin-bottom: 8px;\n      font-weight: 600;\n      color: #173f5f;\n    }\n\n    #exercise-paragraph-plan .sentence-builder {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 7px;\n      font-size: 16px;\n    }\n\n    #exercise-paragraph-plan .fixed-text {\n      white-space: normal;\n    }\n\n    #exercise-paragraph-plan input[type=\"text\"] {\n      flex: 1 1 420px;\n      min-width: 220px;\n      padding: 10px 12px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      color: #24303f;\n      background: #ffffff;\n      border: 2px solid #9aa9b8;\n      border-radius: 7px;\n    }\n\n    #exercise-paragraph-plan input[type=\"text\"]:focus {\n      outline: 3px solid rgba(40, 116, 166, 0.18);\n      border-color: #2874a6;\n    }\n\n    #exercise-paragraph-plan input.complete {\n      background: #edf8f0;\n      border-color: #2d7d46;\n    }\n\n    #exercise-paragraph-plan input.missing {\n      background: #fff0f0;\n      border-color: #b33a3a;\n    }\n\n    #exercise-paragraph-plan .feedback {\n      min-height: 22px;\n      margin-top: 8px;\n      font-size: 14px;\n      font-weight: 600;\n    }\n\n    #exercise-paragraph-plan .feedback.good {\n      color: #236b39;\n    }\n\n    #exercise-paragraph-plan .feedback.missing-text {\n      color: #a22d2d;\n    }\n\n    #exercise-paragraph-plan .pattern-reminder {\n      margin: 24px 0 4px;\n      padding: 18px;\n      text-align: center;\n      background: #eef5fa;\n      border: 1px solid #b9cfdf;\n      border-radius: 9px;\n    }\n\n    #exercise-paragraph-plan .pattern-reminder-title {\n      margin-bottom: 8px;\n      color: #173f5f;\n      font-size: 15px;\n    }\n\n    #exercise-paragraph-plan .pattern {\n      color: #173f5f;\n      font-size: 19px;\n      font-weight: 600;\n      letter-spacing: 1px;\n    }\n\n    #exercise-paragraph-plan .actions {\n      margin-top: 22px;\n    }\n\n    #exercise-paragraph-plan button {\n      margin: 0 8px 0 0;\n      padding: 11px 18px;\n      font-family: \"Ada Pear Light\", Arial, Helvetica, sans-serif;\n      font-size: 16px;\n      font-weight: 600;\n      color: #ffffff;\n      background: #2874a6;\n      border: none;\n      border-radius: 7px;\n      cursor: pointer;\n    }\n\n    #exercise-paragraph-plan button:hover {\n      background: #1f5d85;\n    }\n\n    #exercise-paragraph-plan .reset-button {\n      color: #24303f;\n      background: #dfe6ec;\n    }\n\n    #exercise-paragraph-plan .reset-button:hover {\n      background: #cad4dd;\n    }\n\n    #exercise-paragraph-plan .overall-feedback {\n      display: none;\n      margin-top: 20px;\n      padding: 15px;\n      font-size: 17px;\n      font-weight: 600;\n      background: #ffffff;\n      border-radius: 8px;\n    }\n\n    #exercise-paragraph-plan .overall-feedback.good {\n      display: block;\n      color: #236b39;\n      border: 2px solid #2d7d46;\n    }\n\n    #exercise-paragraph-plan .overall-feedback.try-again {\n      display: block;\n      color: #9c2f2f;\n      border: 2px solid #b33a3a;\n    }\n\n    @media (max-width: 900px) {\n      #exercise-paragraph-plan {\n        max-width: 760px;\n      }\n    }\n\n    @media (max-width: 650px) {\n      #exercise-paragraph-plan {\n        padding: 12px;\n      }\n\n      #exercise-paragraph-plan .activity {\n        padding: 18px;\n      }\n\n      #exercise-paragraph-plan .plan-row.detail {\n        margin-left: 18px;\n      }\n\n      #exercise-paragraph-plan input[type=\"text\"] {\n        flex-basis: 100%;\n        min-width: 100%;\n      }\n\n      #exercise-paragraph-plan button {\n        margin-bottom: 8px;\n      }\n    }\n  <\/style>\n\n  <section class=\"activity\">\n    <h2>Plan Your Paragraph<\/h2>\n\n    <div class=\"instructions\">\n      Imagine you are going to write a paragraph called\n      <strong>\u201cThree Benefits of Exercise.\u201d<\/strong>\n      You do not need to write the paragraph yet. Plan its structure first.\n      Write a short idea in each box.\n    <\/div>\n\n    <div class=\"topic-box\">\n      <div class=\"topic-label\">Paragraph topic<\/div>\n      <div class=\"topic-title\">Three Benefits of Exercise<\/div>\n    <\/div>\n\n    <!-- THESIS -->\n    <div class=\"plan-row main\">\n      <label class=\"row-label\" for=\"exercisePlan1\">\n        Thesis statement\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <span class=\"fixed-text\">\n          Exercise is good for us because it\n        <\/span>\n\n        <input\n          type=\"text\"\n          id=\"exercisePlan1\"\n          placeholder=\"introduce the three benefits...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback1\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- MAIN IDEA 1 -->\n    <div class=\"plan-row main\">\n      <label class=\"row-label\" for=\"exercisePlan2\">\n        Main idea 1\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <span class=\"fixed-text\">First,<\/span>\n\n        <input\n          type=\"text\"\n          id=\"exercisePlan2\"\n          placeholder=\"write your first benefit...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback2\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- DETAIL 1 -->\n    <div class=\"plan-row detail\">\n      <label class=\"row-label\" for=\"exercisePlan3\">\n        Supporting detail\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <input\n          type=\"text\"\n          id=\"exercisePlan3\"\n          placeholder=\"explain or give an example...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback3\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- MAIN IDEA 2 -->\n    <div class=\"plan-row main\">\n      <label class=\"row-label\" for=\"exercisePlan4\">\n        Main idea 2\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <span class=\"fixed-text\">Second,<\/span>\n\n        <input\n          type=\"text\"\n          id=\"exercisePlan4\"\n          placeholder=\"write your second benefit...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback4\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- DETAIL 2 -->\n    <div class=\"plan-row detail\">\n      <label class=\"row-label\" for=\"exercisePlan5\">\n        Supporting detail\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <input\n          type=\"text\"\n          id=\"exercisePlan5\"\n          placeholder=\"explain or give an example...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback5\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- MAIN IDEA 3 -->\n    <div class=\"plan-row main\">\n      <label class=\"row-label\" for=\"exercisePlan6\">\n        Main idea 3\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <span class=\"fixed-text\">Finally,<\/span>\n\n        <input\n          type=\"text\"\n          id=\"exercisePlan6\"\n          placeholder=\"write your third benefit...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback6\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- DETAIL 3 -->\n    <div class=\"plan-row detail\">\n      <label class=\"row-label\" for=\"exercisePlan7\">\n        Supporting detail\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <input\n          type=\"text\"\n          id=\"exercisePlan7\"\n          placeholder=\"explain or give an example...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback7\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <!-- CONCLUSION -->\n    <div class=\"plan-row conclusion\">\n      <label class=\"row-label\" for=\"exercisePlan8\">\n        Conclusion\n      <\/label>\n\n      <div class=\"sentence-builder\">\n        <span class=\"fixed-text\">In conclusion,<\/span>\n\n        <input\n          type=\"text\"\n          id=\"exercisePlan8\"\n          placeholder=\"return to the main message...\"\n          autocomplete=\"off\"\n        >\n\n        <span>.<\/span>\n      <\/div>\n\n      <div\n        class=\"feedback\"\n        id=\"exercisePlanFeedback8\"\n        aria-live=\"polite\"\n      ><\/div>\n    <\/div>\n\n    <div class=\"pattern-reminder\">\n      <div class=\"pattern-reminder-title\">\n        Your paragraph plan follows this structure:\n      <\/div>\n\n      <div class=\"pattern\">\n        T \u2192 M + D \u2192 M + D \u2192 M + D \u2192 C\n      <\/div>\n    <\/div>\n\n    <div class=\"actions\">\n      <button type=\"button\" onclick=\"checkExercisePlan()\">\n        Check My Plan\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"reset-button\"\n        onclick=\"resetExercisePlan()\"\n      >\n        Reset\n      <\/button>\n    <\/div>\n\n    <div\n      class=\"overall-feedback\"\n      id=\"exercisePlanOverall\"\n      aria-live=\"polite\"\n    ><\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      const activity = document.getElementById(\n        \"exercise-paragraph-plan\"\n      );\n\n      const feedbackMessages = [\n        \"Good. Your thesis has an idea. Make sure it previews the three benefits you will discuss.\",\n        \"Good. You have introduced your first benefit.\",\n        \"Good. You have added a supporting detail for the first benefit.\",\n        \"Good. You have introduced your second benefit.\",\n        \"Good. You have added a supporting detail for the second benefit.\",\n        \"Good. You have introduced your third benefit.\",\n        \"Good. You have added a supporting detail for the third benefit.\",\n        \"Good. You have included a conclusion. Make sure it returns to the paragraph's main message.\"\n      ];\n\n      window.checkExercisePlan = function () {\n        let completed = 0;\n\n        for (let i = 1; i <= 8; i++) {\n          const input = activity.querySelector(\n            \"#exercisePlan\" + i\n          );\n\n          const feedback = activity.querySelector(\n            \"#exercisePlanFeedback\" + i\n          );\n\n          input.classList.remove(\"complete\", \"missing\");\n          feedback.classList.remove(\"good\", \"missing-text\");\n\n          if (input.value.trim().length > 0) {\n            completed++;\n\n            input.classList.add(\"complete\");\n            feedback.classList.add(\"good\");\n            feedback.textContent = feedbackMessages[i - 1];\n          } else {\n            input.classList.add(\"missing\");\n            feedback.classList.add(\"missing-text\");\n            feedback.textContent =\n              \"Add an idea here before checking your plan.\";\n          }\n        }\n\n        const overall = activity.querySelector(\n          \"#exercisePlanOverall\"\n        );\n\n        overall.className = \"overall-feedback\";\n\n        if (completed === 8) {\n          overall.classList.add(\"good\");\n          overall.textContent =\n            \"Your plan is complete. You now have a thesis statement, three main ideas with supporting details, and a conclusion.\";\n        } else {\n          overall.classList.add(\"try-again\");\n          overall.textContent =\n            \"You have completed \" +\n            completed +\n            \" of the 8 parts. Add an idea to each red box to complete your paragraph plan.\";\n        }\n      };\n\n      window.resetExercisePlan = function () {\n        for (let i = 1; i <= 8; i++) {\n          const input = activity.querySelector(\n            \"#exercisePlan\" + i\n          );\n\n          const feedback = activity.querySelector(\n            \"#exercisePlanFeedback\" + i\n          );\n\n          input.value = \"\";\n          input.classList.remove(\"complete\", \"missing\");\n\n          feedback.textContent = \"\";\n          feedback.classList.remove(\"good\", \"missing-text\");\n        }\n\n        const overall = activity.querySelector(\n          \"#exercisePlanOverall\"\n        );\n\n        overall.textContent = \"\";\n        overall.className = \"overall-feedback\";\n      };\n    })();\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sleep Deprivation Vocabulary Challenge \ud83c\udf19 Sleep Deprivation Vocabulary Challenge Match each word or phrase with its meaning. Try to finish with as few mistakes as possible. 0 \/ 20 Matched 0 Mistakes \u21bb Reset Game How to play: Click a word on the left, then click its meaning on the right. You get feedback immediately. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13091","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Grade 5\u20136: Sleep Deprivation - Language Education &amp; Consultancy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/research-says.com\/tr\/grade-5-6-sleep-deprivation\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grade 5\u20136: Sleep Deprivation - Language Education &amp; Consultancy\" \/>\n<meta property=\"og:description\" content=\"Sleep Deprivation Vocabulary Challenge \ud83c\udf19 Sleep Deprivation Vocabulary Challenge Match each word or phrase with its meaning. Try to finish with as few mistakes as possible. 0 \/ 20 Matched 0 Mistakes \u21bb Reset Game How to play: Click a word on the left, then click its meaning on the right. You get feedback immediately. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/research-says.com\/tr\/grade-5-6-sleep-deprivation\/\" \/>\n<meta property=\"og:site_name\" content=\"Language Education &amp; Consultancy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/reliableeducationservices\/notifications\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-13T14:09:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/research-says.com\/wp-content\/uploads\/2019\/11\/cropped-cropped-cropped-cropped-Student-Teacher-B-W-resized-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"625\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@guveniliregitim\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/research-says.com\\\/grade-5-6-sleep-deprivation\\\/\",\"url\":\"https:\\\/\\\/research-says.com\\\/grade-5-6-sleep-deprivation\\\/\",\"name\":\"Grade 5\u20136: Sleep Deprivation - Language Education &amp; Consultancy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/research-says.com\\\/#website\"},\"datePublished\":\"2026-08-13T16:01:39+00:00\",\"dateModified\":\"2026-09-13T14:09:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/research-says.com\\\/grade-5-6-sleep-deprivation\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/research-says.com\\\/grade-5-6-sleep-deprivation\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/research-says.com\\\/grade-5-6-sleep-deprivation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/research-says.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grade 5\u20136: Sleep Deprivation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/research-says.com\\\/#website\",\"url\":\"https:\\\/\\\/research-says.com\\\/\",\"name\":\"Language Education &amp; Consultancy\",\"description\":\"Sharper Language. Stronger Communication.\",\"publisher\":{\"@id\":\"https:\\\/\\\/research-says.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/research-says.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/research-says.com\\\/#organization\",\"name\":\"Compleat English\",\"alternateName\":\"IELTS Writing\",\"url\":\"https:\\\/\\\/research-says.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/research-says.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/research-says.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cropped-cropped-plain-logo-e1772516744844.png\",\"contentUrl\":\"https:\\\/\\\/research-says.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cropped-cropped-plain-logo-e1772516744844.png\",\"width\":150,\"height\":163,\"caption\":\"Compleat English\"},\"image\":{\"@id\":\"https:\\\/\\\/research-says.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/reliableeducationservices\\\/notifications\\\/\",\"https:\\\/\\\/x.com\\\/guveniliregitim\",\"https:\\\/\\\/www.instagram.com\\\/guveniliregitimhizmetleri\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grade 5\u20136: Sleep Deprivation - Language Education &amp; Consultancy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/research-says.com\/tr\/grade-5-6-sleep-deprivation\/","og_locale":"tr_TR","og_type":"article","og_title":"Grade 5\u20136: Sleep Deprivation - Language Education &amp; Consultancy","og_description":"Sleep Deprivation Vocabulary Challenge \ud83c\udf19 Sleep Deprivation Vocabulary Challenge Match each word or phrase with its meaning. Try to finish with as few mistakes as possible. 0 \/ 20 Matched 0 Mistakes \u21bb Reset Game How to play: Click a word on the left, then click its meaning on the right. You get feedback immediately. [&hellip;]","og_url":"https:\/\/research-says.com\/tr\/grade-5-6-sleep-deprivation\/","og_site_name":"Language Education &amp; Consultancy","article_publisher":"https:\/\/www.facebook.com\/reliableeducationservices\/notifications\/","article_modified_time":"2026-09-13T14:09:40+00:00","og_image":[{"width":1000,"height":625,"url":"https:\/\/research-says.com\/wp-content\/uploads\/2019\/11\/cropped-cropped-cropped-cropped-Student-Teacher-B-W-resized-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@guveniliregitim","twitter_misc":{"Tahmini okuma s\u00fcresi":"7 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/research-says.com\/grade-5-6-sleep-deprivation\/","url":"https:\/\/research-says.com\/grade-5-6-sleep-deprivation\/","name":"Grade 5\u20136: Sleep Deprivation - Language Education &amp; Consultancy","isPartOf":{"@id":"https:\/\/research-says.com\/#website"},"datePublished":"2026-08-13T16:01:39+00:00","dateModified":"2026-09-13T14:09:40+00:00","breadcrumb":{"@id":"https:\/\/research-says.com\/grade-5-6-sleep-deprivation\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/research-says.com\/grade-5-6-sleep-deprivation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/research-says.com\/grade-5-6-sleep-deprivation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/research-says.com\/"},{"@type":"ListItem","position":2,"name":"Grade 5\u20136: Sleep Deprivation"}]},{"@type":"WebSite","@id":"https:\/\/research-says.com\/#website","url":"https:\/\/research-says.com\/","name":"Dil E\u011fitimi ve Dan\u0131\u015fmanl\u0131k","description":"Daha Etkili Dil. Daha G\u00fc\u00e7l\u00fc \u0130leti\u015fim.","publisher":{"@id":"https:\/\/research-says.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/research-says.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/research-says.com\/#organization","name":"Compleat English","alternateName":"IELTS Writing","url":"https:\/\/research-says.com\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/research-says.com\/#\/schema\/logo\/image\/","url":"https:\/\/research-says.com\/wp-content\/uploads\/2026\/03\/cropped-cropped-plain-logo-e1772516744844.png","contentUrl":"https:\/\/research-says.com\/wp-content\/uploads\/2026\/03\/cropped-cropped-plain-logo-e1772516744844.png","width":150,"height":163,"caption":"Compleat English"},"image":{"@id":"https:\/\/research-says.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/reliableeducationservices\/notifications\/","https:\/\/x.com\/guveniliregitim","https:\/\/www.instagram.com\/guveniliregitimhizmetleri\/"]}]}},"_links":{"self":[{"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/pages\/13091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/comments?post=13091"}],"version-history":[{"count":33,"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/pages\/13091\/revisions"}],"predecessor-version":[{"id":13161,"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/pages\/13091\/revisions\/13161"}],"wp:attachment":[{"href":"https:\/\/research-says.com\/tr\/wp-json\/wp\/v2\/media?parent=13091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}