{"id":6743,"date":"2026-10-26T04:49:31","date_gmt":"2026-10-26T03:49:31","guid":{"rendered":"https:\/\/erasmuslife4you.com\/dig-tworzenie-map-stref-priorytetowych\/"},"modified":"2026-10-26T12:53:40","modified_gmt":"2026-10-26T11:53:40","slug":"dig-tworzenie-map-stref-priorytetowych","status":"publish","type":"page","link":"https:\/\/erasmuslife4you.com\/pl\/dig-tworzenie-map-stref-priorytetowych\/","title":{"rendered":"DIG \u2013 TWORZENIE MAP STREF PRIORYTETOWYCH"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6743\" class=\"elementor elementor-6743 elementor-6526\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7e01e5 e-flex e-con-boxed e-con e-parent\" data-id=\"d7e01e5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9392029 elementor-widget elementor-widget-html\" data-id=\"9392029\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"dig-focus-zones-map\">\n\n<style>\n\n\/* =========================================================\n   DIG \u2013 FOCUS ZONES MAPPING\n   MODULE 5 \u2022 ACTIVITY 1\n========================================================= *\/\n\n#dig-focus-zones-map{\n  --azure:#71AFDB;\n  --blue:#286f98;\n  --navy:#173f59;\n  --peach:#F8D4B5;\n  --peach-light:#fff5ec;\n  --blue-light:#eef7fc;\n  --page:#f7fbfd;\n  --text:#293943;\n  --muted:#5f707a;\n  --border:#d9eaf3;\n\n  font-family:Ubuntu,Arial,sans-serif;\n  color:var(--text);\n  background:var(--page);\n  padding:28px 16px 48px;\n  line-height:1.6;\n  box-sizing:border-box;\n}\n\n#dig-focus-zones-map *{\n  box-sizing:border-box;\n}\n\n#dig-focus-zones-map .dig-shell{\n  max-width:960px;\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   BRANDING\n========================================================= *\/\n\n#dig-focus-zones-map .dig-topbar{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  flex-wrap:wrap;\n  gap:24px;\n  background:#ffffff;\n  border:1px solid var(--border);\n  border-radius:20px;\n  padding:20px 24px;\n  margin-bottom:18px;\n}\n\n#dig-focus-zones-map .dig-project-logo{\n  width:170px;\n  max-width:100%;\n  height:auto;\n  display:block;\n}\n\n#dig-focus-zones-map .dig-eu-logo{\n  width:215px;\n  max-width:100%;\n  height:auto;\n  display:block;\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n#dig-focus-zones-map .hero{\n  position:relative;\n  overflow:hidden;\n  background:linear-gradient(\n    135deg,\n    rgba(113,175,219,.24),\n    rgba(248,212,181,.48)\n  );\n  border:1px solid rgba(113,175,219,.30);\n  border-radius:30px;\n  padding:40px 38px;\n  margin-bottom:18px;\n}\n\n#dig-focus-zones-map .hero::after{\n  content:\"\";\n  position:absolute;\n  width:190px;\n  height:190px;\n  right:-65px;\n  top:-75px;\n  border-radius:50%;\n  background:rgba(255,255,255,.32);\n}\n\n#dig-focus-zones-map .hero > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-focus-zones-map .eyebrow{\n  display:inline-block;\n  background:#ffffff;\n  color:var(--blue);\n  border:1px solid rgba(113,175,219,.40);\n  border-radius:999px;\n  padding:7px 14px;\n  margin-bottom:14px;\n  font-size:13px;\n  font-weight:800;\n  letter-spacing:.05em;\n  text-transform:uppercase;\n}\n\n#dig-focus-zones-map h1{\n  margin:0 0 12px;\n  color:var(--navy);\n  font-size:40px;\n  line-height:1.08;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .hero p{\n  margin:0;\n  max-width:760px;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:16px;\n  line-height:1.72;\n}\n\n\n\/* =========================================================\n   PROGRESS\n========================================================= *\/\n\n#dig-focus-zones-map .progress-card{\n  background:#ffffff;\n  border:1px solid var(--border);\n  border-radius:19px;\n  padding:18px 20px;\n  margin-bottom:18px;\n}\n\n#dig-focus-zones-map .progress-top{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:12px;\n  margin-bottom:10px;\n}\n\n#dig-focus-zones-map .progress-title{\n  color:var(--navy);\n  font-weight:800;\n  font-size:14px;\n}\n\n#dig-focus-zones-map .progress-value{\n  color:var(--blue);\n  font-weight:800;\n  font-size:13px;\n}\n\n#dig-focus-zones-map .progress-track{\n  height:9px;\n  background:#e9f1f5;\n  border-radius:999px;\n  overflow:hidden;\n}\n\n#dig-focus-zones-map .progress-fill{\n  height:100%;\n  width:0;\n  border-radius:999px;\n  background:linear-gradient(90deg,var(--azure),var(--blue));\n  transition:width .4s ease;\n}\n\n\n\/* =========================================================\n   GENERAL\n========================================================= *\/\n\n#dig-focus-zones-map .step{\n  background:#ffffff;\n  border-radius:23px;\n  padding:27px;\n  margin:18px 0;\n  box-shadow:0 7px 24px rgba(29,65,84,.06);\n}\n\n#dig-focus-zones-map .step-blue{\n  border-left:6px solid var(--azure);\n}\n\n#dig-focus-zones-map .step-peach{\n  border-left:6px solid var(--peach);\n}\n\n#dig-focus-zones-map .step-label{\n  color:var(--blue);\n  font-size:12px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.07em;\n  margin-bottom:5px;\n}\n\n#dig-focus-zones-map h2{\n  margin:0 0 8px;\n  color:var(--navy);\n  font-size:25px;\n  line-height:1.3;\n}\n\n#dig-focus-zones-map .help{\n  margin:0 0 18px;\n  color:#425d6d;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:14px;\n  line-height:1.65;\n}\n\n\n\/* =========================================================\n   DAY CARDS\n========================================================= *\/\n\n#dig-focus-zones-map .day-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n}\n\n#dig-focus-zones-map .day-card{\n  border-radius:20px;\n  padding:20px;\n  border:1px solid var(--border);\n  background:#ffffff;\n}\n\n#dig-focus-zones-map .day-card:nth-child(1),\n#dig-focus-zones-map .day-card:nth-child(3){\n  background:var(--peach-light);\n  border-color:#eadfd5;\n}\n\n#dig-focus-zones-map .day-icon{\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  margin-bottom:11px;\n  background:var(--azure);\n  color:#ffffff;\n  font-size:18px;\n}\n\n#dig-focus-zones-map .day-card:nth-child(2) .day-icon{\n  background:var(--peach);\n  color:var(--navy);\n}\n\n#dig-focus-zones-map .day-title{\n  color:var(--navy);\n  font-size:18px;\n  font-weight:800;\n  margin-bottom:5px;\n}\n\n#dig-focus-zones-map .day-note{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   FOCUS RATING\n========================================================= *\/\n\n#dig-focus-zones-map .rating-title{\n  display:block;\n  margin:16px 0 8px;\n  color:var(--navy);\n  font-size:13px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .rating-group{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:6px;\n}\n\n#dig-focus-zones-map .rating-btn{\n  min-height:40px;\n  border:2px solid var(--border);\n  border-radius:11px;\n  background:#ffffff;\n  color:var(--navy);\n  cursor:pointer;\n  font-family:Ubuntu,Arial,sans-serif;\n  font-size:11px;\n  font-weight:800;\n  transition:\n    transform .18s ease,\n    border-color .18s ease,\n    background .18s ease;\n}\n\n#dig-focus-zones-map .rating-btn:hover{\n  transform:translateY(-1px);\n}\n\n#dig-focus-zones-map .rating-btn.active{\n  border-color:var(--blue);\n  background:#dff1fa;\n  transform:translateY(-2px);\n}\n\n\n\/* =========================================================\n   CONDITIONS\n========================================================= *\/\n\n#dig-focus-zones-map .condition-title{\n  display:block;\n  margin:16px 0 8px;\n  color:var(--navy);\n  font-size:13px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .condition-grid{\n  display:flex;\n  flex-wrap:wrap;\n  gap:6px;\n}\n\n#dig-focus-zones-map .condition-btn{\n  border:2px solid var(--border);\n  border-radius:999px;\n  background:#ffffff;\n  color:#425d6d;\n  padding:7px 10px;\n  cursor:pointer;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:10px;\n  font-weight:700;\n}\n\n#dig-focus-zones-map .condition-btn.active{\n  background:#e5f4fb;\n  border-color:var(--blue);\n  color:var(--navy);\n}\n\n\n\/* =========================================================\n   TEXT FIELDS\n========================================================= *\/\n\n#dig-focus-zones-map .field-label{\n  display:block;\n  margin:15px 0 7px;\n  color:var(--navy);\n  font-size:13px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map textarea,\n#dig-focus-zones-map input[type=\"text\"]{\n  width:100%;\n  border:2px solid #cfe2ed;\n  border-radius:12px;\n  background:#ffffff;\n  color:var(--text);\n  padding:11px 12px;\n  outline:none;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n  line-height:1.5;\n}\n\n#dig-focus-zones-map textarea{\n  min-height:76px;\n  resize:vertical;\n}\n\n#dig-focus-zones-map textarea:focus,\n#dig-focus-zones-map input[type=\"text\"]:focus{\n  border-color:var(--azure);\n  box-shadow:0 0 0 3px rgba(113,175,219,.17);\n}\n\n\n\/* =========================================================\n   VISUAL MAP\n========================================================= *\/\n\n#dig-focus-zones-map .map-card{\n  background:linear-gradient(135deg,#eef7fc,#fff5ec);\n  border:1px solid var(--border);\n  border-radius:22px;\n  padding:24px;\n}\n\n#dig-focus-zones-map .visual-map{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n  align-items:end;\n  min-height:250px;\n  margin-top:18px;\n}\n\n#dig-focus-zones-map .zone-column{\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:flex-end;\n  height:220px;\n}\n\n#dig-focus-zones-map .zone-bar-wrap{\n  width:72%;\n  max-width:100px;\n  height:165px;\n  display:flex;\n  align-items:flex-end;\n  justify-content:center;\n  border-radius:18px;\n  background:rgba(255,255,255,.65);\n  border:1px solid var(--border);\n  overflow:hidden;\n}\n\n#dig-focus-zones-map .zone-bar{\n  width:100%;\n  height:7%;\n  min-height:12px;\n  background:linear-gradient(180deg,var(--azure),var(--blue));\n  transition:height .4s ease;\n}\n\n#dig-focus-zones-map .zone-time{\n  margin-top:10px;\n  color:var(--navy);\n  font-size:13px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .zone-level{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:10px;\n}\n\n\n\/* =========================================================\n   SNAPSHOT INSIGHTS\n========================================================= *\/\n\n#dig-focus-zones-map .snapshot-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n  margin-top:18px;\n}\n\n#dig-focus-zones-map .snapshot-card{\n  padding:18px;\n  border-radius:17px;\n  background:#ffffff;\n  border:1px solid var(--border);\n}\n\n#dig-focus-zones-map .snapshot-card:nth-child(2){\n  background:var(--peach-light);\n  border-color:#eadfd5;\n}\n\n#dig-focus-zones-map .snapshot-label{\n  color:var(--blue);\n  font-size:10px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.05em;\n}\n\n#dig-focus-zones-map .snapshot-value{\n  margin-top:4px;\n  color:var(--navy);\n  font-size:18px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .snapshot-note{\n  margin-top:5px;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   PATTERN BOX\n========================================================= *\/\n\n#dig-focus-zones-map .pattern-box{\n  margin-top:18px;\n  padding:18px;\n  border-radius:17px;\n  background:var(--navy);\n  color:#ffffff;\n}\n\n#dig-focus-zones-map .pattern-label{\n  color:var(--peach);\n  font-size:10px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.06em;\n}\n\n#dig-focus-zones-map .pattern-text{\n  margin-top:5px;\n  color:#ffffff;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:14px;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   REFLECTION\n========================================================= *\/\n\n#dig-focus-zones-map .reflection-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#dig-focus-zones-map .reflection-card{\n  padding:17px;\n  border-radius:17px;\n  background:#f7fbfd;\n  border:1px solid var(--border);\n}\n\n#dig-focus-zones-map .reflection-card:nth-child(even){\n  background:var(--peach-light);\n  border-color:#eadfd5;\n}\n\n\n\/* =========================================================\n   SUMMARY\n========================================================= *\/\n\n#dig-focus-zones-map .summary{\n  position:relative;\n  overflow:hidden;\n  background:var(--navy);\n  color:#ffffff;\n  border-radius:25px;\n  padding:28px;\n  margin:20px 0;\n}\n\n#dig-focus-zones-map .summary::after{\n  content:\"\";\n  position:absolute;\n  width:190px;\n  height:190px;\n  right:-90px;\n  bottom:-95px;\n  border-radius:50%;\n  background:rgba(113,175,219,.13);\n}\n\n#dig-focus-zones-map .summary > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-focus-zones-map .summary-kicker{\n  color:var(--peach);\n  font-size:12px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.07em;\n}\n\n#dig-focus-zones-map .summary-title{\n  margin:4px 0 18px;\n  color:#ffffff;\n  font-size:25px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .summary-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n\n#dig-focus-zones-map .summary-item{\n  padding:15px;\n  border-radius:14px;\n  background:rgba(255,255,255,.09);\n  border:1px solid rgba(255,255,255,.13);\n}\n\n#dig-focus-zones-map .summary-wide{\n  grid-column:1\/-1;\n}\n\n#dig-focus-zones-map .summary-label{\n  color:#b9dff3;\n  font-size:10px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.05em;\n  margin-bottom:4px;\n}\n\n#dig-focus-zones-map .summary-value{\n  color:#ffffff;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n  line-height:1.55;\n  white-space:pre-wrap;\n  overflow-wrap:anywhere;\n}\n\n#dig-focus-zones-map .summary-message{\n  margin-top:17px;\n  padding-top:16px;\n  border-top:1px solid rgba(255,255,255,.15);\n  color:#ffffff;\n  font-size:18px;\n  font-weight:800;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   SUPPORT\n========================================================= *\/\n\n#dig-focus-zones-map .support{\n  background:var(--peach-light);\n  border-left:6px solid var(--peach);\n  border-radius:20px;\n  padding:23px;\n  margin:20px 0;\n}\n\n#dig-focus-zones-map .support-title{\n  color:#8a5a34;\n  font-size:12px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.07em;\n  margin-bottom:7px;\n}\n\n#dig-focus-zones-map .support p{\n  margin:0;\n  color:#425d6d;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:14px;\n  line-height:1.65;\n}\n\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dig-focus-zones-map .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin:24px 0 8px;\n}\n\n#dig-focus-zones-map .btn{\n  min-height:47px;\n  border:0;\n  border-radius:12px;\n  padding:13px 18px;\n  cursor:pointer;\n  font-family:Ubuntu,Arial,sans-serif;\n  font-size:15px;\n  font-weight:800;\n}\n\n#dig-focus-zones-map .btn-primary{\n  color:#ffffff;\n  background:var(--blue);\n}\n\n#dig-focus-zones-map .btn-secondary{\n  color:var(--blue);\n  background:#ffffff;\n  border:2px solid var(--border);\n}\n\n#dig-focus-zones-map .privacy{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n}\n\n\n\/* =========================================================\n   FOOTER\n========================================================= *\/\n\n#dig-focus-zones-map .footer{\n  background:#ffffff;\n  border:1px solid var(--border);\n  border-radius:20px;\n  padding:20px;\n  margin-top:24px;\n}\n\n#dig-focus-zones-map .footer-top{\n  display:flex;\n  align-items:flex-start;\n  gap:22px;\n  flex-wrap:wrap;\n}\n\n#dig-focus-zones-map .footer .dig-eu-logo{\n  width:180px;\n}\n\n#dig-focus-zones-map .disclaimer{\n  flex:1 1 440px;\n  margin:0;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n  line-height:1.6;\n}\n\n#dig-focus-zones-map .project-number{\n  margin-top:14px;\n  padding-top:12px;\n  border-top:1px solid var(--border);\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:760px){\n\n  #dig-focus-zones-map{\n    padding:18px 10px 34px;\n  }\n\n  #dig-focus-zones-map .hero{\n    padding:28px 22px;\n  }\n\n  #dig-focus-zones-map h1{\n    font-size:31px;\n  }\n\n  #dig-focus-zones-map .day-grid,\n  #dig-focus-zones-map .snapshot-grid,\n  #dig-focus-zones-map .reflection-grid,\n  #dig-focus-zones-map .summary-grid{\n    grid-template-columns:1fr;\n  }\n\n  #dig-focus-zones-map .summary-wide{\n    grid-column:auto;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  #dig-focus-zones-map *,\n  #dig-focus-zones-map *::before,\n  #dig-focus-zones-map *::after{\n    transition:none !important;\n    animation:none !important;\n  }\n\n}\n\n\n\/* =========================================================\n   PRINT\n========================================================= *\/\n\n@media print{\n\n  body{\n    background:#ffffff !important;\n  }\n\n  #dig-focus-zones-map{\n    background:#ffffff !important;\n    padding:0 !important;\n  }\n\n  #dig-focus-zones-map .actions,\n  #dig-focus-zones-map .privacy,\n  #dig-focus-zones-map .progress-card{\n    display:none !important;\n  }\n\n  #dig-focus-zones-map .step,\n  #dig-focus-zones-map .hero,\n  #dig-focus-zones-map .summary,\n  #dig-focus-zones-map .support,\n  #dig-focus-zones-map .footer,\n  #dig-focus-zones-map .dig-topbar{\n    box-shadow:none !important;\n    break-inside:avoid;\n  }\n\n}\n\n<\/style>\n\n\n<div class=\"dig-shell\">\n\n\n<!-- =====================================================\n     BRANDING\n===================================================== -->\n\n<div class=\"dig-topbar\">\n\n  <img data-recalc-dims=\"1\" decoding=\"async\" class=\"dig-project-logo\" src=\"https:\/\/i0.wp.com\/erasmuslife4you.com\/wp-content\/uploads\/2026\/08\/DIG-FINAL-LOGO1.png?w=640&#038;ssl=1\" alt=\"DIG \u2013 Delay Instant Gratification for a Better Life\">\n\n  <img data-recalc-dims=\"1\" decoding=\"async\" class=\"dig-eu-logo\" src=\"https:\/\/i0.wp.com\/erasmuslife4you.com\/wp-content\/uploads\/2026\/05\/erasmus-logo.png?w=640&#038;ssl=1\" alt=\"Co-funded by the European Union\">\n\n<\/div>\n\n\n<!-- =====================================================\n     HERO\n===================================================== -->\n\n<section class=\"hero\">\n\n  <div class=\"eyebrow\">\n    Module 5 \u2022 Activity 1\n  <\/div>\n\n  <h1>\n    My Focus Zones Map\n  <\/h1>\n\n  <p>\n    Look back at one ordinary day, compare how your focus changed\n    and notice what may have helped or interrupted your attention.\n  <\/p>\n\n<\/section>\n\n\n<!-- =====================================================\n     PROGRESS\n===================================================== -->\n\n<div class=\"progress-card\">\n\n  <div class=\"progress-top\">\n\n    <div class=\"progress-title\">\n      My Focus Snapshot\n    <\/div>\n\n    <div class=\"progress-value\">\n      <span id=\"fzm-progress-number\">0<\/span>\/4 steps\n    <\/div>\n\n  <\/div>\n\n  <div class=\"progress-track\">\n    <div class=\"progress-fill\" id=\"fzm-progress-fill\">\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\n<!-- =====================================================\n     STEP 1 + 2 \u2013 MAP THE DAY\n===================================================== -->\n\n<section class=\"step step-blue\">\n\n  <div class=\"step-label\">\n    Steps 1\u20132\n  <\/div>\n\n  <h2>\n    Recall yesterday and rate your focus\n  <\/h2>\n\n  <p class=\"help\">\n    Think about morning, afternoon and evening.\n    Choose the focus level that feels closest for each period, then add the conditions you remember.\n  <\/p>\n\n\n  <div class=\"day-grid\">\n\n\n    <!-- MORNING -->\n\n    <div class=\"day-card\" data-day=\"morning\">\n\n      <div class=\"day-icon\">\n        \u2600\n      <\/div>\n\n      <div class=\"day-title\">\n        Morning\n      <\/div>\n\n      <div class=\"day-note\">\n        Think about the first part of your day.\n      <\/div>\n\n\n      <span class=\"rating-title\">\n        My focus felt:\n      <\/span>\n\n      <div class=\"rating-group\" data-rating=\"morning\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"3\">\n          Strong\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"2\">\n          Medium\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Low\n        <\/button>\n\n      <\/div>\n\n\n      <span class=\"condition-title\">\n        What was happening?\n      <\/span>\n\n      <div class=\"condition-grid\" data-conditions=\"morning\">\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Good energy\">\n          Good energy\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Tired\">\n          Tired\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Quiet\">\n          Quiet\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Noise\">\n          Noise\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Clear task\">\n          Clear task\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Phone interruptions\">\n          Phone\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Other people\">\n          People\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Interesting task\">\n          Interesting\n        <\/button>\n\n      <\/div>\n\n\n      <label class=\"field-label\" for=\"fzm-morning-note\">\n        Anything else?\n      <\/label>\n\n      <textarea id=\"fzm-morning-note\" placeholder=\"For example: I had slept well and knew exactly what I needed to do.\"><\/textarea>\n\n    <\/div>\n\n\n\n    <!-- AFTERNOON -->\n\n    <div class=\"day-card\" data-day=\"afternoon\">\n\n      <div class=\"day-icon\">\n        \u25c9\n      <\/div>\n\n      <div class=\"day-title\">\n        Afternoon\n      <\/div>\n\n      <div class=\"day-note\">\n        Think about the middle part of your day.\n      <\/div>\n\n\n      <span class=\"rating-title\">\n        My focus felt:\n      <\/span>\n\n      <div class=\"rating-group\" data-rating=\"afternoon\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"3\">\n          Strong\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"2\">\n          Medium\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Low\n        <\/button>\n\n      <\/div>\n\n\n      <span class=\"condition-title\">\n        What was happening?\n      <\/span>\n\n      <div class=\"condition-grid\" data-conditions=\"afternoon\">\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Good energy\">\n          Good energy\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Tired\">\n          Tired\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Quiet\">\n          Quiet\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Noise\">\n          Noise\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Clear task\">\n          Clear task\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Phone interruptions\">\n          Phone\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Other people\">\n          People\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Interesting task\">\n          Interesting\n        <\/button>\n\n      <\/div>\n\n\n      <label class=\"field-label\" for=\"fzm-afternoon-note\">\n        Anything else?\n      <\/label>\n\n      <textarea id=\"fzm-afternoon-note\" placeholder=\"For example: I was tired after school and kept checking messages.\"><\/textarea>\n\n    <\/div>\n\n\n\n    <!-- EVENING -->\n\n    <div class=\"day-card\" data-day=\"evening\">\n\n      <div class=\"day-icon\">\n        \u25d0\n      <\/div>\n\n      <div class=\"day-title\">\n        Evening\n      <\/div>\n\n      <div class=\"day-note\">\n        Think about the later part of your day.\n      <\/div>\n\n\n      <span class=\"rating-title\">\n        My focus felt:\n      <\/span>\n\n      <div class=\"rating-group\" data-rating=\"evening\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"3\">\n          Strong\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"2\">\n          Medium\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Low\n        <\/button>\n\n      <\/div>\n\n\n      <span class=\"condition-title\">\n        What was happening?\n      <\/span>\n\n      <div class=\"condition-grid\" data-conditions=\"evening\">\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Good energy\">\n          Good energy\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Tired\">\n          Tired\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Quiet\">\n          Quiet\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Noise\">\n          Noise\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Clear task\">\n          Clear task\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Phone interruptions\">\n          Phone\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Other people\">\n          People\n        <\/button>\n\n        <button type=\"button\" class=\"condition-btn\" data-value=\"Interesting task\">\n          Interesting\n        <\/button>\n\n      <\/div>\n\n\n      <label class=\"field-label\" for=\"fzm-evening-note\">\n        Anything else?\n      <\/label>\n\n      <textarea id=\"fzm-evening-note\" placeholder=\"For example: it was quieter after dinner, but I was starting to feel tired.\"><\/textarea>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     STEP 3 \u2013 VISUAL MAP\n===================================================== -->\n\n<section class=\"step step-peach\">\n\n  <div class=\"step-label\">\n    Step 3\n  <\/div>\n\n  <h2>\n    Compare your Focus Zones\n  <\/h2>\n\n  <p class=\"help\">\n    Your visual map updates as you rate each part of the day.\n    It is a snapshot of one day \u2014 not a permanent judgement about when you can or cannot focus.\n  <\/p>\n\n\n  <div class=\"map-card\">\n\n    <div class=\"visual-map\">\n\n\n      <div class=\"zone-column\">\n\n        <div class=\"zone-bar-wrap\">\n\n          <div class=\"zone-bar\" id=\"fzm-bar-morning\">\n          <\/div>\n\n        <\/div>\n\n        <div class=\"zone-time\">\n          Morning\n        <\/div>\n\n        <div class=\"zone-level\" id=\"fzm-level-morning\">\n          Not rated\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"zone-column\">\n\n        <div class=\"zone-bar-wrap\">\n\n          <div class=\"zone-bar\" id=\"fzm-bar-afternoon\">\n          <\/div>\n\n        <\/div>\n\n        <div class=\"zone-time\">\n          Afternoon\n        <\/div>\n\n        <div class=\"zone-level\" id=\"fzm-level-afternoon\">\n          Not rated\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"zone-column\">\n\n        <div class=\"zone-bar-wrap\">\n\n          <div class=\"zone-bar\" id=\"fzm-bar-evening\">\n          <\/div>\n\n        <\/div>\n\n        <div class=\"zone-time\">\n          Evening\n        <\/div>\n\n        <div class=\"zone-level\" id=\"fzm-level-evening\">\n          Not rated\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"snapshot-grid\">\n\n\n      <div class=\"snapshot-card\">\n\n        <div class=\"snapshot-label\">\n          Strongest snapshot\n        <\/div>\n\n        <div class=\"snapshot-value\" id=\"fzm-strongest\">\n          \u2014\n        <\/div>\n\n        <div class=\"snapshot-note\" id=\"fzm-strongest-note\">\n          Complete the three ratings to compare your day.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"snapshot-card\">\n\n        <div class=\"snapshot-label\">\n          Lowest snapshot\n        <\/div>\n\n        <div class=\"snapshot-value\" id=\"fzm-lowest\">\n          \u2014\n        <\/div>\n\n        <div class=\"snapshot-note\" id=\"fzm-lowest-note\">\n          This does not mean this time is always difficult for you.\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"pattern-box\">\n\n      <div class=\"pattern-label\">\n        What your snapshot suggests\n      <\/div>\n\n      <div class=\"pattern-text\" id=\"fzm-pattern\">\n        Add your focus ratings and conditions to see a short pattern summary.\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     STEP 4 \u2013 REFLECT\n===================================================== -->\n\n<section class=\"step step-blue\">\n\n  <div class=\"step-label\">\n    Step 4\n  <\/div>\n\n  <h2>\n    What seems to affect your focus?\n  <\/h2>\n\n  <p class=\"help\">\n    Look beyond the time of day. Think about the conditions connected with your stronger and weaker focus moments.\n  <\/p>\n\n\n  <div class=\"reflection-grid\">\n\n\n    <div class=\"reflection-card\">\n\n      <label class=\"field-label\" for=\"fzm-helped\">\n        What seemed to help your focus?\n      <\/label>\n\n      <textarea id=\"fzm-helped\" placeholder=\"For example: a quiet room, enough energy, a clear task, fewer phone interruptions...\"><\/textarea>\n\n    <\/div>\n\n\n    <div class=\"reflection-card\">\n\n      <label class=\"field-label\" for=\"fzm-interrupted\">\n        What seemed to interrupt your focus?\n      <\/label>\n\n      <textarea id=\"fzm-interrupted\" placeholder=\"For example: tiredness, noise, messages, not knowing where to start...\"><\/textarea>\n\n    <\/div>\n\n\n  <\/div>\n\n\n  <div style=\"margin-top:12px;background:#fff5ec;border:1px solid #eadfd5;border-radius:17px;padding:17px;\">\n\n    <label class=\"field-label\" for=\"fzm-next-time\" style=\"margin-top:0;\">\n      One thing I could try next time:\n    <\/label>\n\n    <textarea id=\"fzm-next-time\" placeholder=\"For example: do one difficult task when I have more energy, make the first step clearer, or move my phone away for 20 minutes.\"><\/textarea>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     SUPPORT\n===================================================== -->\n\n<div class=\"support\">\n\n  <div class=\"support-title\">\n    If This Is Hard\n  <\/div>\n\n  <p>\n    You do not need to remember the whole day perfectly.\n    Use your best estimate. If three parts of the day feel like too much,\n    focus on the two moments you remember most clearly.\n  <\/p>\n\n<\/div>\n\n\n<!-- =====================================================\n     SUMMARY\n===================================================== -->\n\n<section class=\"summary\">\n\n  <div class=\"summary-kicker\">\n    My Focus Snapshot\n  <\/div>\n\n  <div class=\"summary-title\">\n    What I noticed about my attention\n  <\/div>\n\n\n  <div class=\"summary-grid\">\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        Morning\n      <\/div>\n\n      <div class=\"summary-value\" id=\"fzm-summary-morning\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        Afternoon\n      <\/div>\n\n      <div class=\"summary-value\" id=\"fzm-summary-afternoon\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        Evening\n      <\/div>\n\n      <div class=\"summary-value\" id=\"fzm-summary-evening\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        Strongest snapshot\n      <\/div>\n\n      <div class=\"summary-value\" id=\"fzm-summary-strongest\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item summary-wide\">\n\n      <div class=\"summary-label\">\n        What seemed to help\n      <\/div>\n\n      <div class=\"summary-value\" id=\"fzm-summary-helped\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item summary-wide\">\n\n      <div class=\"summary-label\">\n        One thing I can try\n      <\/div>\n\n      <div class=\"summary-value\" id=\"fzm-summary-next\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n\n  <div class=\"summary-message\">\n    My focus is not fixed.\n    I can notice the conditions that make attention easier or harder to manage.\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     ACTIONS\n===================================================== -->\n\n<div class=\"actions\">\n\n  <button type=\"button\" class=\"btn btn-primary\" id=\"fzm-print\">\n    Print \/ Save as PDF\n  <\/button>\n\n  <button type=\"button\" class=\"btn btn-secondary\" id=\"fzm-clear\">\n    Clear my Focus Zones Map\n  <\/button>\n\n<\/div>\n\n\n<div class=\"privacy\">\n  Your answers stay on this page while you are using it.\n  They are not submitted, graded or shared.\n<\/div>\n\n\n<!-- =====================================================\n     FOOTER\n===================================================== -->\n\n<footer class=\"footer\">\n\n  <div class=\"footer-top\">\n\n    <img data-recalc-dims=\"1\" decoding=\"async\" class=\"dig-eu-logo\" src=\"https:\/\/i0.wp.com\/erasmuslife4you.com\/wp-content\/uploads\/2026\/05\/erasmus-logo.png?w=640&#038;ssl=1\" alt=\"Co-funded by the European Union\">\n\n    <p class=\"disclaimer\">\n      Funded by the European Union. Views and opinions expressed are however\n      those of the author(s) only and do not necessarily reflect those of\n      the European Union or the European Education and Culture Executive\n      Agency (EACEA). Neither the European Union nor EACEA can be held\n      responsible for them.\n    <\/p>\n\n  <\/div>\n\n  <div class=\"project-number\">\n    DIG \u2013 Delay Instant Gratification for a Better Life \u00b7\n    Erasmus+ KA220-YOU \u00b7\n    Project No. 2024-1-PL01-KA220-YOU-000247051\n  <\/div>\n\n<\/footer>\n\n\n<\/div>\n\n\n<script>\n\n(function(){\n\n  var root =\n    document.getElementById('dig-focus-zones-map');\n\n  if(!root || root.dataset.ready === '1'){\n    return;\n  }\n\n  root.dataset.ready = '1';\n\n\n  \/* =====================================================\n     DATA\n  ====================================================== *\/\n\n  var days = [\n    'morning',\n    'afternoon',\n    'evening'\n  ];\n\n  var labels = {\n    morning:'Morning',\n    afternoon:'Afternoon',\n    evening:'Evening'\n  };\n\n  var levelLabels = {\n    1:'Low',\n    2:'Medium',\n    3:'Strong'\n  };\n\n  var ratings = {\n    morning:0,\n    afternoon:0,\n    evening:0\n  };\n\n  var conditions = {\n    morning:[],\n    afternoon:[],\n    evening:[]\n  };\n\n\n  \/* =====================================================\n     ELEMENTS\n  ====================================================== *\/\n\n  var ratingGroups =\n    root.querySelectorAll('.rating-group');\n\n  var conditionGroups =\n    root.querySelectorAll('.condition-grid');\n\n  var helpedInput =\n    root.querySelector('#fzm-helped');\n\n  var interruptedInput =\n    root.querySelector('#fzm-interrupted');\n\n  var nextInput =\n    root.querySelector('#fzm-next-time');\n\n\n  \/* =====================================================\n     RATINGS\n  ====================================================== *\/\n\n  ratingGroups.forEach(function(group){\n\n    var day =\n      group.getAttribute('data-rating');\n\n    var buttons =\n      group.querySelectorAll('.rating-btn');\n\n\n    buttons.forEach(function(button){\n\n      button.addEventListener(\n        'click',\n        function(){\n\n          ratings[day] =\n            parseInt(\n              button.getAttribute('data-value'),\n              10\n            );\n\n\n          buttons.forEach(function(other){\n\n            other.classList.remove('active');\n\n          });\n\n\n          button.classList.add('active');\n\n          updateAll();\n\n        }\n      );\n\n    });\n\n  });\n\n\n  \/* =====================================================\n     CONDITIONS\n  ====================================================== *\/\n\n  conditionGroups.forEach(function(group){\n\n    var day =\n      group.getAttribute('data-conditions');\n\n    var buttons =\n      group.querySelectorAll('.condition-btn');\n\n\n    buttons.forEach(function(button){\n\n      button.addEventListener(\n        'click',\n        function(){\n\n          var value =\n            button.getAttribute('data-value');\n\n          var index =\n            conditions[day].indexOf(value);\n\n\n          if(index === -1){\n\n            conditions[day].push(value);\n\n            button.classList.add('active');\n\n          }else{\n\n            conditions[day].splice(index,1);\n\n            button.classList.remove('active');\n\n          }\n\n\n          updateAll();\n\n        }\n      );\n\n    });\n\n  });\n\n\n  \/* =====================================================\n     VISUAL MAP\n  ====================================================== *\/\n\n  function updateBars(){\n\n    days.forEach(function(day){\n\n      var value =\n        ratings[day];\n\n      var height =\n        value === 3\n          ? 100\n          : value === 2\n          ? 62\n          : value === 1\n          ? 30\n          : 7;\n\n\n      root.querySelector(\n        '#fzm-bar-' + day\n      ).style.height =\n        height + '%';\n\n\n      root.querySelector(\n        '#fzm-level-' + day\n      ).textContent =\n        value\n          ? levelLabels[value]\n          : 'Not rated';\n\n    });\n\n  }\n\n\n  \/* =====================================================\n     STRONGEST \/ LOWEST\n  ====================================================== *\/\n\n  function getCompletedDays(){\n\n    return days.filter(function(day){\n\n      return ratings[day] > 0;\n\n    });\n\n  }\n\n\n  function getStrongestDays(){\n\n    var completed =\n      getCompletedDays();\n\n    if(!completed.length){\n      return [];\n    }\n\n\n    var max =\n      Math.max.apply(\n        null,\n        completed.map(function(day){\n          return ratings[day];\n        })\n      );\n\n\n    return completed.filter(function(day){\n\n      return ratings[day] === max;\n\n    });\n\n  }\n\n\n  function getLowestDays(){\n\n    var completed =\n      getCompletedDays();\n\n    if(!completed.length){\n      return [];\n    }\n\n\n    var min =\n      Math.min.apply(\n        null,\n        completed.map(function(day){\n          return ratings[day];\n        })\n      );\n\n\n    return completed.filter(function(day){\n\n      return ratings[day] === min;\n\n    });\n\n  }\n\n\n  function dayNames(list){\n\n    return list\n      .map(function(day){\n        return labels[day];\n      })\n      .join(' & ');\n\n  }\n\n\n  function combinedConditions(list){\n\n    var all = [];\n\n\n    list.forEach(function(day){\n\n      conditions[day].forEach(function(item){\n\n        if(all.indexOf(item) === -1){\n          all.push(item);\n        }\n\n      });\n\n    });\n\n\n    return all;\n\n  }\n\n\n  \/* =====================================================\n     SNAPSHOT\n  ====================================================== *\/\n\n  function updateSnapshot(){\n\n    var strongest =\n      getStrongestDays();\n\n    var lowest =\n      getLowestDays();\n\n\n    var strongestEl =\n      root.querySelector('#fzm-strongest');\n\n    var strongestNote =\n      root.querySelector('#fzm-strongest-note');\n\n    var lowestEl =\n      root.querySelector('#fzm-lowest');\n\n    var lowestNote =\n      root.querySelector('#fzm-lowest-note');\n\n\n    if(!strongest.length){\n\n      strongestEl.textContent = '\u2014';\n\n      strongestNote.textContent =\n        'Complete your ratings to compare your day.';\n\n    }else{\n\n      strongestEl.textContent =\n        dayNames(strongest);\n\n      var strongConditions =\n        combinedConditions(strongest);\n\n\n      strongestNote.textContent =\n        strongConditions.length\n          ? 'Conditions: ' +\n            strongConditions.join(', ')\n          : 'Add some conditions to explore what may have helped.';\n\n    }\n\n\n    if(!lowest.length){\n\n      lowestEl.textContent = '\u2014';\n\n      lowestNote.textContent =\n        'This does not mean this time is always difficult for you.';\n\n    }else{\n\n      lowestEl.textContent =\n        dayNames(lowest);\n\n      var lowConditions =\n        combinedConditions(lowest);\n\n\n      lowestNote.textContent =\n        lowConditions.length\n          ? 'Conditions: ' +\n            lowConditions.join(', ')\n          : 'Add some conditions to explore what may have made focusing harder.';\n\n    }\n\n  }\n\n\n  \/* =====================================================\n     PATTERN\n  ====================================================== *\/\n\n  function updatePattern(){\n\n    var pattern =\n      root.querySelector('#fzm-pattern');\n\n    var completed =\n      getCompletedDays();\n\n\n    if(completed.length < 2){\n\n      pattern.textContent =\n        'Rate at least two parts of the day to begin comparing your focus.';\n\n      return;\n\n    }\n\n\n    var strongest =\n      getStrongestDays();\n\n    var lowest =\n      getLowestDays();\n\n\n    var strongConditions =\n      combinedConditions(strongest);\n\n    var lowConditions =\n      combinedConditions(lowest);\n\n\n    var sameScore =\n      strongest.length === completed.length &&\n      lowest.length === completed.length;\n\n\n    if(sameScore){\n\n      pattern.textContent =\n        'Your focus rating was similar across the periods you mapped. Look at the conditions instead \u2014 the same focus level can happen for different reasons.';\n\n      return;\n\n    }\n\n\n    var text =\n      'Your stronger focus snapshot was ' +\n      dayNames(strongest) +\n      ', while the lower snapshot was ' +\n      dayNames(lowest) +\n      '.';\n\n\n    if(strongConditions.length){\n\n      text +=\n        ' Around your stronger period you selected: ' +\n        strongConditions.join(', ') +\n        '.';\n\n    }\n\n\n    if(lowConditions.length){\n\n      text +=\n        ' Around your lower period you selected: ' +\n        lowConditions.join(', ') +\n        '.';\n\n    }\n\n\n    text +=\n      ' This is one day of information, so treat it as a clue rather than a fixed rule.';\n\n\n    pattern.textContent =\n      text;\n\n  }\n\n\n  \/* =====================================================\n     SUMMARY\n  ====================================================== *\/\n\n  function daySummary(day){\n\n    if(!ratings[day]){\n      return '\u2014';\n    }\n\n\n    var text =\n      levelLabels[\n        ratings[day]\n      ];\n\n\n    if(conditions[day].length){\n\n      text +=\n        '\\n' +\n        conditions[day].join(', ');\n\n    }\n\n\n    return text;\n\n  }\n\n\n  function updateSummary(){\n\n    root.querySelector(\n      '#fzm-summary-morning'\n    ).textContent =\n      daySummary('morning');\n\n\n    root.querySelector(\n      '#fzm-summary-afternoon'\n    ).textContent =\n      daySummary('afternoon');\n\n\n    root.querySelector(\n      '#fzm-summary-evening'\n    ).textContent =\n      daySummary('evening');\n\n\n    var strongest =\n      getStrongestDays();\n\n\n    root.querySelector(\n      '#fzm-summary-strongest'\n    ).textContent =\n      strongest.length\n        ? dayNames(strongest)\n        : '\u2014';\n\n\n    root.querySelector(\n      '#fzm-summary-helped'\n    ).textContent =\n      helpedInput.value.trim() || '\u2014';\n\n\n    root.querySelector(\n      '#fzm-summary-next'\n    ).textContent =\n      nextInput.value.trim() || '\u2014';\n\n  }\n\n\n  \/* =====================================================\n     PROGRESS\n  ====================================================== *\/\n\n  function updateProgress(){\n\n    var completed = 0;\n\n    var rated =\n      getCompletedDays().length;\n\n\n    if(rated >= 2){\n      completed++;\n    }\n\n\n    var totalConditions =\n      conditions.morning.length +\n      conditions.afternoon.length +\n      conditions.evening.length;\n\n\n    if(totalConditions){\n      completed++;\n    }\n\n\n    if(rated === 3){\n      completed++;\n    }\n\n\n    if(\n      helpedInput.value.trim() ||\n      interruptedInput.value.trim() ||\n      nextInput.value.trim()\n    ){\n      completed++;\n    }\n\n\n    root.querySelector(\n      '#fzm-progress-number'\n    ).textContent =\n      completed;\n\n\n    root.querySelector(\n      '#fzm-progress-fill'\n    ).style.width =\n      ((completed \/ 4) * 100) + '%';\n\n  }\n\n\n  \/* =====================================================\n     UPDATE ALL\n  ====================================================== *\/\n\n  function updateAll(){\n\n    updateBars();\n    updateSnapshot();\n    updatePattern();\n    updateSummary();\n    updateProgress();\n\n  }\n\n\n  helpedInput.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  interruptedInput.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  nextInput.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  \/* =====================================================\n     NOTES ALSO COUNT AS INPUT\n  ====================================================== *\/\n\n  [\n    'fzm-morning-note',\n    'fzm-afternoon-note',\n    'fzm-evening-note'\n  ].forEach(function(id){\n\n    var field =\n      root.querySelector('#' + id);\n\n    if(field){\n\n      field.addEventListener(\n        'input',\n        updateAll\n      );\n\n    }\n\n  });\n\n\n  \/* =====================================================\n     PRINT\n  ====================================================== *\/\n\n  root\n    .querySelector('#fzm-print')\n    .addEventListener(\n      'click',\n      function(){\n\n        updateAll();\n\n        window.print();\n\n      }\n    );\n\n\n  \/* =====================================================\n     CLEAR\n  ====================================================== *\/\n\n  root\n    .querySelector('#fzm-clear')\n    .addEventListener(\n      'click',\n      function(){\n\n        ratings = {\n          morning:0,\n          afternoon:0,\n          evening:0\n        };\n\n\n        conditions = {\n          morning:[],\n          afternoon:[],\n          evening:[]\n        };\n\n\n        root\n          .querySelectorAll('.rating-btn')\n          .forEach(function(button){\n\n            button.classList.remove('active');\n\n          });\n\n\n        root\n          .querySelectorAll('.condition-btn')\n          .forEach(function(button){\n\n            button.classList.remove('active');\n\n          });\n\n\n        root\n          .querySelectorAll('textarea')\n          .forEach(function(field){\n\n            field.value = '';\n\n          });\n\n\n        root\n          .querySelectorAll('input[type=\"text\"]')\n          .forEach(function(field){\n\n            field.value = '';\n\n          });\n\n\n        updateAll();\n\n\n        root.scrollIntoView({\n          behavior:'smooth',\n          block:'start'\n        });\n\n      }\n    );\n\n\n  \/* =====================================================\n     INITIALISE\n  ====================================================== *\/\n\n  updateAll();\n\n\n})();\n\n<\/script>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Module 5 \u2022 Activity 1 My Focus Zones Map Look back at one ordinary day, compare how your focus changed and notice what may have helped or interrupted your attention. My Focus Snapshot 0\/4 steps Steps 1\u20132 Recall yesterday and rate your focus Think about morning, afternoon and evening. Choose the focus level that feels [&hellip;]<\/p>\n","protected":false},"author":176376442,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"elearning_container_layout":"tg-site-layout--default","elearning_sidebar_layout":"tg-site-layout--default","elearning_remove_content_margin":false,"elearning_sidebar":"default","elearning_transparent_header":"customizer","elearning_logo":0,"elearning_header_style":"default","elearning_menu_item_color":"","elearning_menu_item_hover_color":"","elearning_menu_item_active_color":"","elearning_menu_item_active_style":"","elearning_page_header":true,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"footnotes":""},"class_list":["post-6743","page","type-page","status-publish","hentry"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PhfHCT-1KL","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/pages\/6743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/users\/176376442"}],"replies":[{"embeddable":true,"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/comments?post=6743"}],"version-history":[{"count":1,"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/pages\/6743\/revisions"}],"predecessor-version":[{"id":6744,"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/pages\/6743\/revisions\/6744"}],"wp:attachment":[{"href":"https:\/\/erasmuslife4you.com\/pl\/wp-json\/wp\/v2\/media?parent=6743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}