{"id":6726,"date":"2026-10-26T02:49:26","date_gmt":"2026-10-26T01:49:26","guid":{"rendered":"https:\/\/erasmuslife4you.com\/dig-koleso-emocii\/"},"modified":"2026-10-26T12:53:02","modified_gmt":"2026-10-26T11:53:02","slug":"dig-koleso-emocii","status":"publish","type":"page","link":"https:\/\/erasmuslife4you.com\/sk\/dig-koleso-emocii\/","title":{"rendered":"DIG \u2013 KOLESO EM\u00d3CI\u00cd"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6726\" class=\"elementor elementor-6726 elementor-6468\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1dbb09c e-flex e-con-boxed e-con e-parent\" data-id=\"1dbb09c\" 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-4ce33f1 elementor-widget elementor-widget-html\" data-id=\"4ce33f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"dig-emotion-wheel\">\n\n<style>\n\n\/* =========================================================\n   DIG \u2013 EMOTION WHEEL\n   MODULE 4 \u2022 ACTIVITY 1\n========================================================= *\/\n\n#dig-emotion-wheel{\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-emotion-wheel *{\n  box-sizing:border-box;\n}\n\n#dig-emotion-wheel .dig-shell{\n  max-width:960px;\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   BRANDING\n========================================================= *\/\n\n#dig-emotion-wheel .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-emotion-wheel .dig-project-logo{\n  display:block;\n  width:170px;\n  max-width:100%;\n  height:auto;\n}\n\n#dig-emotion-wheel .dig-eu-logo{\n  display:block;\n  width:215px;\n  max-width:100%;\n  height:auto;\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n#dig-emotion-wheel .hero{\n  position:relative;\n  overflow:hidden;\n  background:linear-gradient(\n    135deg,\n    rgba(113,175,219,.23),\n    rgba(248,212,181,.50)\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-emotion-wheel .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-emotion-wheel .hero > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-emotion-wheel .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-emotion-wheel 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-emotion-wheel .hero p{\n  margin:0;\n  max-width:750px;\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-emotion-wheel .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-emotion-wheel .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-emotion-wheel .progress-title{\n  color:var(--navy);\n  font-weight:800;\n  font-size:14px;\n}\n\n#dig-emotion-wheel .progress-value{\n  color:var(--blue);\n  font-weight:800;\n  font-size:13px;\n}\n\n#dig-emotion-wheel .progress-track{\n  height:9px;\n  background:#e9f1f5;\n  border-radius:999px;\n  overflow:hidden;\n}\n\n#dig-emotion-wheel .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 SECTIONS\n========================================================= *\/\n\n#dig-emotion-wheel .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-emotion-wheel .step-blue{\n  border-left:6px solid var(--azure);\n}\n\n#dig-emotion-wheel .step-peach{\n  border-left:6px solid var(--peach);\n}\n\n#dig-emotion-wheel .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-emotion-wheel h2{\n  margin:0 0 8px;\n  color:var(--navy);\n  font-size:25px;\n  line-height:1.3;\n}\n\n#dig-emotion-wheel .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   INPUTS\n========================================================= *\/\n\n#dig-emotion-wheel input[type=\"text\"],\n#dig-emotion-wheel textarea{\n  width:100%;\n  padding:13px 14px;\n  border:2px solid #cfe2ed;\n  border-radius:13px;\n  background:#ffffff;\n  color:var(--text);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:16px;\n  line-height:1.5;\n  outline:none;\n}\n\n#dig-emotion-wheel textarea{\n  min-height:96px;\n  resize:vertical;\n}\n\n#dig-emotion-wheel input[type=\"text\"]:focus,\n#dig-emotion-wheel textarea:focus{\n  border-color:var(--azure);\n  box-shadow:0 0 0 3px rgba(113,175,219,.17);\n}\n\n#dig-emotion-wheel .field-label{\n  display:block;\n  margin:0 0 8px;\n  color:var(--navy);\n  font-size:15px;\n  font-weight:800;\n}\n\n\n\/* =========================================================\n   MOMENT\n========================================================= *\/\n\n#dig-emotion-wheel .moment-card{\n  background:linear-gradient(135deg,#eef7fc,#fff5ec);\n  border:1px solid var(--border);\n  border-radius:18px;\n  padding:20px;\n}\n\n\n\/* =========================================================\n   INTERACTIVE WHEEL\n========================================================= *\/\n\n#dig-emotion-wheel .wheel-layout{\n  display:grid;\n  grid-template-columns:minmax(320px,430px) 1fr;\n  gap:26px;\n  align-items:center;\n  margin-top:22px;\n}\n\n#dig-emotion-wheel .wheel-stage{\n  position:relative;\n  width:100%;\n  max-width:420px;\n  aspect-ratio:1\/1;\n  margin:0 auto;\n}\n\n#dig-emotion-wheel .wheel-ring{\n  position:absolute;\n  inset:0;\n  border-radius:50%;\n  background:\n    conic-gradient(\n      from -30deg,\n      #71AFDB 0deg 60deg,\n      #F8D4B5 60deg 120deg,\n      #8ec5e7 120deg 180deg,\n      #f0c99f 180deg 240deg,\n      #5f98be 240deg 300deg,\n      #f5dfcc 300deg 360deg\n    );\n  box-shadow:0 14px 36px rgba(23,63,89,.12);\n}\n\n#dig-emotion-wheel .wheel-ring::after{\n  content:\"\";\n  position:absolute;\n  inset:27%;\n  border-radius:50%;\n  background:#ffffff;\n  box-shadow:inset 0 0 0 1px var(--border);\n}\n\n#dig-emotion-wheel .wheel-center{\n  position:absolute;\n  inset:34%;\n  border-radius:50%;\n  background:var(--navy);\n  color:#ffffff;\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  padding:12px;\n  z-index:4;\n  box-shadow:0 7px 20px rgba(23,63,89,.2);\n}\n\n#dig-emotion-wheel .wheel-center-small{\n  font-size:10px;\n  text-transform:uppercase;\n  letter-spacing:.07em;\n  color:#b9dff3;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .wheel-center-main{\n  margin-top:4px;\n  font-size:17px;\n  font-weight:800;\n  line-height:1.25;\n}\n\n#dig-emotion-wheel .emotion-node{\n  position:absolute;\n  z-index:5;\n  width:92px;\n  min-height:58px;\n  border:2px solid rgba(255,255,255,.95);\n  border-radius:16px;\n  background:#ffffff;\n  color:var(--navy);\n  font-family:Ubuntu,Arial,sans-serif;\n  font-size:13px;\n  font-weight:800;\n  cursor:pointer;\n  box-shadow:0 5px 14px rgba(23,63,89,.12);\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease,\n    border-color .2s ease,\n    background .2s ease;\n}\n\n#dig-emotion-wheel .emotion-node:hover{\n  transform:scale(1.04);\n}\n\n#dig-emotion-wheel .emotion-node.active{\n  border-color:var(--navy);\n  background:var(--navy);\n  color:#ffffff;\n  transform:scale(1.06);\n  box-shadow:0 8px 20px rgba(23,63,89,.22);\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"happy\"]{\n  top:4%;\n  left:50%;\n  transform:translateX(-50%);\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"surprised\"]{\n  top:24%;\n  right:3%;\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"afraid\"]{\n  bottom:22%;\n  right:4%;\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"sad\"]{\n  bottom:4%;\n  left:50%;\n  transform:translateX(-50%);\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"angry\"]{\n  bottom:22%;\n  left:4%;\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"disgusted\"]{\n  top:24%;\n  left:3%;\n}\n\n#dig-emotion-wheel .emotion-node[data-emotion=\"happy\"].active,\n#dig-emotion-wheel .emotion-node[data-emotion=\"sad\"].active{\n  transform:translateX(-50%) scale(1.06);\n}\n\n\n\/* =========================================================\n   SPECIFIC EMOTIONS\n========================================================= *\/\n\n#dig-emotion-wheel .specific-panel{\n  min-height:330px;\n  background:linear-gradient(135deg,#eef7fc,#fff5ec);\n  border:1px solid var(--border);\n  border-radius:21px;\n  padding:22px;\n}\n\n#dig-emotion-wheel .specific-kicker{\n  color:var(--blue);\n  font-size:11px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.07em;\n}\n\n#dig-emotion-wheel .specific-title{\n  margin:5px 0 6px;\n  color:var(--navy);\n  font-size:21px;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .specific-note{\n  margin:0 0 17px;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n  line-height:1.55;\n}\n\n#dig-emotion-wheel .emotion-chips{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  min-height:92px;\n}\n\n#dig-emotion-wheel .emotion-chip{\n  border:2px solid var(--border);\n  border-radius:999px;\n  padding:9px 13px;\n  background:#ffffff;\n  color:var(--navy);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n  font-weight:700;\n  cursor:pointer;\n  transition:\n    transform .18s ease,\n    border-color .18s ease,\n    background .18s ease;\n}\n\n#dig-emotion-wheel .emotion-chip:hover{\n  transform:translateY(-1px);\n}\n\n#dig-emotion-wheel .emotion-chip.active{\n  border-color:var(--blue);\n  background:#dff1fa;\n  transform:translateY(-2px);\n}\n\n#dig-emotion-wheel .current-choice{\n  margin-top:17px;\n  padding:16px;\n  border-radius:16px;\n  background:#ffffff;\n  border:1px solid var(--border);\n}\n\n#dig-emotion-wheel .current-label{\n  color:var(--muted);\n  font-size:10px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.06em;\n}\n\n#dig-emotion-wheel .current-value{\n  margin-top:4px;\n  color:var(--navy);\n  font-size:17px;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .add-emotion-btn{\n  width:100%;\n  margin-top:13px;\n  min-height:45px;\n  border:0;\n  border-radius:12px;\n  background:var(--blue);\n  color:#ffffff;\n  font-family:Ubuntu,Arial,sans-serif;\n  font-size:14px;\n  font-weight:800;\n  cursor:pointer;\n}\n\n#dig-emotion-wheel .add-emotion-btn:disabled{\n  opacity:.45;\n  cursor:not-allowed;\n}\n\n\n\/* =========================================================\n   WEEK SNAPSHOT\n========================================================= *\/\n\n#dig-emotion-wheel .week-list{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:10px;\n  margin-top:18px;\n}\n\n#dig-emotion-wheel .week-entry{\n  position:relative;\n  padding:16px 42px 16px 16px;\n  border-radius:16px;\n  background:#ffffff;\n  border:1px solid var(--border);\n}\n\n#dig-emotion-wheel .week-entry:nth-child(even){\n  background:var(--peach-light);\n}\n\n#dig-emotion-wheel .week-broad{\n  color:var(--blue);\n  font-size:10px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.05em;\n}\n\n#dig-emotion-wheel .week-specific{\n  margin-top:3px;\n  color:var(--navy);\n  font-size:16px;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .week-moment{\n  margin-top:5px;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n  line-height:1.45;\n}\n\n#dig-emotion-wheel .remove-entry{\n  position:absolute;\n  top:11px;\n  right:11px;\n  width:25px;\n  height:25px;\n  border:0;\n  border-radius:50%;\n  background:#edf3f6;\n  color:#667985;\n  cursor:pointer;\n  font-size:15px;\n  line-height:25px;\n  text-align:center;\n}\n\n#dig-emotion-wheel .empty-week{\n  grid-column:1 \/ -1;\n  padding:20px;\n  border:1px dashed #bad3df;\n  border-radius:15px;\n  color:var(--muted);\n  text-align:center;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n}\n\n\n\/* =========================================================\n   PATTERN CHART\n========================================================= *\/\n\n#dig-emotion-wheel .chart-wrap{\n  display:grid;\n  grid-template-columns:220px 1fr;\n  gap:24px;\n  align-items:center;\n  margin-top:20px;\n}\n\n#dig-emotion-wheel .donut{\n  --happy:0deg;\n  --surprised:0deg;\n  --afraid:0deg;\n  --sad:0deg;\n  --angry:0deg;\n\n  width:210px;\n  height:210px;\n  margin:0 auto;\n  border-radius:50%;\n  background:#e9f1f5;\n  position:relative;\n  transition:background .4s ease;\n}\n\n#dig-emotion-wheel .donut::after{\n  content:\"\";\n  position:absolute;\n  inset:27%;\n  border-radius:50%;\n  background:#ffffff;\n  box-shadow:0 0 0 1px var(--border);\n}\n\n#dig-emotion-wheel .donut-center{\n  position:absolute;\n  inset:34%;\n  z-index:3;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  align-items:center;\n  text-align:center;\n}\n\n#dig-emotion-wheel .donut-number{\n  color:var(--navy);\n  font-size:29px;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .donut-label{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:9px;\n  line-height:1.25;\n}\n\n#dig-emotion-wheel .pattern-bars{\n  display:grid;\n  gap:9px;\n}\n\n#dig-emotion-wheel .pattern-row{\n  display:grid;\n  grid-template-columns:95px 1fr 25px;\n  gap:8px;\n  align-items:center;\n}\n\n#dig-emotion-wheel .pattern-name{\n  color:var(--navy);\n  font-size:12px;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .pattern-track{\n  height:12px;\n  border-radius:999px;\n  background:#e8eff3;\n  overflow:hidden;\n}\n\n#dig-emotion-wheel .pattern-fill{\n  width:0;\n  height:100%;\n  border-radius:999px;\n  transition:width .4s ease;\n}\n\n#dig-emotion-wheel .pattern-fill.happy{\n  background:#71AFDB;\n}\n\n#dig-emotion-wheel .pattern-fill.surprised{\n  background:#F8D4B5;\n}\n\n#dig-emotion-wheel .pattern-fill.afraid{\n  background:#8ec5e7;\n}\n\n#dig-emotion-wheel .pattern-fill.sad{\n  background:#f0c99f;\n}\n\n#dig-emotion-wheel .pattern-fill.angry{\n  background:#5f98be;\n}\n\n#dig-emotion-wheel .pattern-fill.disgusted{\n  background:#d9c8bd;\n}\n\n#dig-emotion-wheel .pattern-count{\n  color:var(--navy);\n  font-size:12px;\n  font-weight:800;\n  text-align:right;\n}\n\n#dig-emotion-wheel .pattern-insight{\n  margin-top:17px;\n  padding:15px 16px;\n  background:#eef7fc;\n  border:1px solid var(--border);\n  border-radius:14px;\n  color:#425d6d;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   REFLECTION\n========================================================= *\/\n\n#dig-emotion-wheel .reflection-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#dig-emotion-wheel .reflection-card{\n  background:#f7fbfd;\n  border:1px solid var(--border);\n  border-radius:17px;\n  padding:17px;\n}\n\n#dig-emotion-wheel .reflection-card:nth-child(even){\n  background:var(--peach-light);\n  border-color:#eadfd5;\n}\n\n\n\/* =========================================================\n   SUMMARY\n========================================================= *\/\n\n#dig-emotion-wheel .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-emotion-wheel .summary::after{\n  content:\"\";\n  position:absolute;\n  width:180px;\n  height:180px;\n  right:-90px;\n  bottom:-90px;\n  border-radius:50%;\n  background:rgba(113,175,219,.13);\n}\n\n#dig-emotion-wheel .summary > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-emotion-wheel .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-emotion-wheel .summary-title{\n  margin:4px 0 18px;\n  color:#ffffff;\n  font-size:25px;\n  font-weight:800;\n}\n\n#dig-emotion-wheel .summary-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n\n#dig-emotion-wheel .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-emotion-wheel .summary-wide{\n  grid-column:1 \/ -1;\n}\n\n#dig-emotion-wheel .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-emotion-wheel .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-emotion-wheel .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-emotion-wheel .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-emotion-wheel .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-emotion-wheel .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   BOTTOM ACTIONS\n========================================================= *\/\n\n#dig-emotion-wheel .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin:24px 0 8px;\n}\n\n#dig-emotion-wheel .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-emotion-wheel .btn-primary{\n  color:#ffffff;\n  background:var(--blue);\n}\n\n#dig-emotion-wheel .btn-secondary{\n  color:var(--blue);\n  background:#ffffff;\n  border:2px solid var(--border);\n}\n\n#dig-emotion-wheel .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-emotion-wheel .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-emotion-wheel .footer-top{\n  display:flex;\n  align-items:flex-start;\n  gap:22px;\n  flex-wrap:wrap;\n}\n\n#dig-emotion-wheel .footer .dig-eu-logo{\n  width:180px;\n}\n\n#dig-emotion-wheel .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-emotion-wheel .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-emotion-wheel{\n    padding:18px 10px 34px;\n  }\n\n  #dig-emotion-wheel .hero{\n    padding:28px 22px;\n  }\n\n  #dig-emotion-wheel h1{\n    font-size:31px;\n  }\n\n  #dig-emotion-wheel .wheel-layout,\n  #dig-emotion-wheel .chart-wrap,\n  #dig-emotion-wheel .reflection-grid,\n  #dig-emotion-wheel .summary-grid{\n    grid-template-columns:1fr;\n  }\n\n  #dig-emotion-wheel .summary-wide{\n    grid-column:auto;\n  }\n\n  #dig-emotion-wheel .week-list{\n    grid-template-columns:1fr;\n  }\n\n  #dig-emotion-wheel .wheel-stage{\n    max-width:350px;\n  }\n\n  #dig-emotion-wheel .emotion-node{\n    width:79px;\n    min-height:50px;\n    font-size:11px;\n  }\n\n  #dig-emotion-wheel .specific-panel{\n    min-height:auto;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  #dig-emotion-wheel *,\n  #dig-emotion-wheel *::before,\n  #dig-emotion-wheel *::after{\n    animation:none !important;\n    transition: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-emotion-wheel{\n    background:#ffffff !important;\n    padding:0 !important;\n  }\n\n  #dig-emotion-wheel .actions,\n  #dig-emotion-wheel .privacy,\n  #dig-emotion-wheel .progress-card,\n  #dig-emotion-wheel .add-emotion-btn,\n  #dig-emotion-wheel .remove-entry{\n    display:none !important;\n  }\n\n  #dig-emotion-wheel .step,\n  #dig-emotion-wheel .summary,\n  #dig-emotion-wheel .hero,\n  #dig-emotion-wheel .dig-topbar,\n  #dig-emotion-wheel .footer,\n  #dig-emotion-wheel .support{\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  <!-- =====================================================\n       HERO\n  ====================================================== -->\n\n  <section class=\"hero\">\n\n    <div class=\"eyebrow\">\n      Module 4 \u2022 Activity 1\n    <\/div>\n\n    <h1>\n      My Emotion Wheel\n    <\/h1>\n\n    <p>\n      Recall a few moments from your week, find words that fit what you felt,\n      and build a visual snapshot of your emotional mix.\n    <\/p>\n\n  <\/section>\n\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 Emotion Check\n      <\/div>\n\n      <div class=\"progress-value\">\n        <span id=\"ew-progress-number\">0<\/span>\/4 steps\n      <\/div>\n\n    <\/div>\n\n    <div class=\"progress-track\">\n      <div class=\"progress-fill\" id=\"ew-progress-fill\"><\/div>\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       STEP 1\n  ====================================================== -->\n\n  <section class=\"step step-blue\">\n\n    <div class=\"step-label\">\n      Step 1\n    <\/div>\n\n    <h2>\n      Recall one moment\n    <\/h2>\n\n    <p class=\"help\">\n      Start with one moment from the last week that you remember clearly.\n      You can keep the description short and private.\n    <\/p>\n\n\n    <div class=\"moment-card\">\n\n      <label class=\"field-label\" for=\"ew-moment\">\n\n        What happened?\n      <\/label>\n\n      <textarea id=\"ew-moment\" placeholder=\"For example: something I planned did not work out the way I expected\"><\/textarea>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       STEP 2 \u2013 WHEEL\n  ====================================================== -->\n\n  <section class=\"step step-peach\">\n\n    <div class=\"step-label\">\n      Step 2\n    <\/div>\n\n    <h2>\n      Explore the Emotion Wheel\n    <\/h2>\n\n    <p class=\"help\">\n      Choose a broad emotion first. Then look at the more specific words and select the one that feels closest.\n    <\/p>\n\n\n    <div class=\"wheel-layout\">\n\n\n      <!-- WHEEL -->\n\n      <div class=\"wheel-stage\">\n\n        <div class=\"wheel-ring\"><\/div>\n\n\n        <button type=\"button\" class=\"emotion-node\" data-emotion=\"happy\">\n          Happy\n        <\/button>\n\n\n        <button type=\"button\" class=\"emotion-node\" data-emotion=\"surprised\">\n          Surprised\n        <\/button>\n\n\n        <button type=\"button\" class=\"emotion-node\" data-emotion=\"afraid\">\n          Afraid\n        <\/button>\n\n\n        <button type=\"button\" class=\"emotion-node\" data-emotion=\"sad\">\n          Sad\n        <\/button>\n\n\n        <button type=\"button\" class=\"emotion-node\" data-emotion=\"angry\">\n          Angry\n        <\/button>\n\n\n        <button type=\"button\" class=\"emotion-node\" data-emotion=\"disgusted\">\n          Disgusted\n        <\/button>\n\n\n        <div class=\"wheel-center\">\n\n          <div class=\"wheel-center-small\">\n            Start here\n          <\/div>\n\n          <div class=\"wheel-center-main\">\n            What did I feel?\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- SPECIFIC EMOTIONS -->\n\n      <div class=\"specific-panel\">\n\n        <div class=\"specific-kicker\">\n          Get More Specific\n        <\/div>\n\n        <div class=\"specific-title\" id=\"ew-specific-title\">\n\n          Choose a broad emotion\n        <\/div>\n\n        <p class=\"specific-note\" id=\"ew-specific-note\">\n\n          Related emotion words will appear here.\n        <\/p>\n\n\n        <div class=\"emotion-chips\" id=\"ew-emotion-chips\">\n        <\/div>\n\n\n        <div class=\"current-choice\">\n\n          <div class=\"current-label\">\n            My closest match\n          <\/div>\n\n          <div class=\"current-value\" id=\"ew-current-choice\">\n\n            \u2014\n          <\/div>\n\n        <\/div>\n\n\n        <button type=\"button\" class=\"add-emotion-btn\" id=\"ew-add-emotion\" disabled>\n\n          Add this emotion to my week\n\n        <\/button>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       STEP 3 \u2013 WEEK SNAPSHOT\n  ====================================================== -->\n\n  <section class=\"step step-blue\">\n\n    <div class=\"step-label\">\n      Step 3\n    <\/div>\n\n    <h2>\n      Build your Week Snapshot\n    <\/h2>\n\n    <p class=\"help\">\n      Add more than one emotion if several feelings were present.\n      You can also change the moment above and repeat the wheel for another situation from your week.\n    <\/p>\n\n\n    <div class=\"week-list\" id=\"ew-week-list\">\n\n      <div class=\"empty-week\">\n        Your selected emotions will appear here.\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- PATTERN CHART -->\n\n    <div class=\"chart-wrap\">\n\n\n      <div class=\"donut\" id=\"ew-donut\">\n\n        <div class=\"donut-center\">\n\n          <div class=\"donut-number\" id=\"ew-total-emotions\">\n            0\n          <\/div>\n\n          <div class=\"donut-label\">\n            emotions added\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"pattern-bars\">\n\n\n        <div class=\"pattern-row\">\n\n          <div class=\"pattern-name\">\n            Happy\n          <\/div>\n\n          <div class=\"pattern-track\">\n            <div class=\"pattern-fill happy\" id=\"ew-bar-happy\"><\/div>\n          <\/div>\n\n          <div class=\"pattern-count\" id=\"ew-count-happy\">\n            0\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pattern-row\">\n\n          <div class=\"pattern-name\">\n            Surprised\n          <\/div>\n\n          <div class=\"pattern-track\">\n            <div class=\"pattern-fill surprised\" id=\"ew-bar-surprised\"><\/div>\n          <\/div>\n\n          <div class=\"pattern-count\" id=\"ew-count-surprised\">\n            0\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pattern-row\">\n\n          <div class=\"pattern-name\">\n            Afraid\n          <\/div>\n\n          <div class=\"pattern-track\">\n            <div class=\"pattern-fill afraid\" id=\"ew-bar-afraid\"><\/div>\n          <\/div>\n\n          <div class=\"pattern-count\" id=\"ew-count-afraid\">\n            0\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pattern-row\">\n\n          <div class=\"pattern-name\">\n            Sad\n          <\/div>\n\n          <div class=\"pattern-track\">\n            <div class=\"pattern-fill sad\" id=\"ew-bar-sad\"><\/div>\n          <\/div>\n\n          <div class=\"pattern-count\" id=\"ew-count-sad\">\n            0\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pattern-row\">\n\n          <div class=\"pattern-name\">\n            Angry\n          <\/div>\n\n          <div class=\"pattern-track\">\n            <div class=\"pattern-fill angry\" id=\"ew-bar-angry\"><\/div>\n          <\/div>\n\n          <div class=\"pattern-count\" id=\"ew-count-angry\">\n            0\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pattern-row\">\n\n          <div class=\"pattern-name\">\n            Disgusted\n          <\/div>\n\n          <div class=\"pattern-track\">\n            <div class=\"pattern-fill disgusted\" id=\"ew-bar-disgusted\"><\/div>\n          <\/div>\n\n          <div class=\"pattern-count\" id=\"ew-count-disgusted\">\n            0\n          <\/div>\n\n        <\/div>\n\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"pattern-insight\" id=\"ew-pattern-insight\">\n\n      Add a few emotions to start seeing your week as a pattern rather than one single feeling.\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       STEP 4 \u2013 REFLECT\n  ====================================================== -->\n\n  <section class=\"step step-peach\">\n\n    <div class=\"step-label\">\n      Step 4\n    <\/div>\n\n    <h2>\n      What do you notice?\n    <\/h2>\n\n    <p class=\"help\">\n      There is no correct emotional pattern. Use these questions to notice what stands out to you.\n    <\/p>\n\n\n    <div class=\"reflection-grid\">\n\n\n      <div class=\"reflection-card\">\n\n        <label class=\"field-label\" for=\"ew-reflection-one\">\n\n          Which emotion or emotions appeared more than once?\n        <\/label>\n\n        <textarea id=\"ew-reflection-one\" placeholder=\"Write what you noticed...\"><\/textarea>\n\n      <\/div>\n\n\n      <div class=\"reflection-card\">\n\n        <label class=\"field-label\" for=\"ew-reflection-two\">\n\n          Did a more specific word change how you understood any situation?\n        <\/label>\n\n        <textarea id=\"ew-reflection-two\" placeholder=\"For example: I realised I was disappointed rather than simply sad\"><\/textarea>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/section>\n\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 find the perfect emotion word. Start with the closest\n      broad feeling and choose a more specific word only if it helps.\n      More than one emotion can fit the same situation.\n    <\/p>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       SUMMARY\n  ====================================================== -->\n\n  <section class=\"summary\">\n\n    <div class=\"summary-kicker\">\n      My Emotion Wheel\n    <\/div>\n\n    <div class=\"summary-title\">\n      My emotional snapshot\n    <\/div>\n\n\n    <div class=\"summary-grid\">\n\n\n      <div class=\"summary-item summary-wide\">\n\n        <div class=\"summary-label\">\n          Emotions I noticed\n        <\/div>\n\n        <div class=\"summary-value\" id=\"ew-summary-emotions\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"summary-item\">\n\n        <div class=\"summary-label\">\n          Most common broad emotion\n        <\/div>\n\n        <div class=\"summary-value\" id=\"ew-summary-common\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"summary-item\">\n\n        <div class=\"summary-label\">\n          Number of emotions added\n        <\/div>\n\n        <div class=\"summary-value\" id=\"ew-summary-total\">\n          0\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"summary-item summary-wide\">\n\n        <div class=\"summary-label\">\n          What I noticed\n        <\/div>\n\n        <div class=\"summary-value\" id=\"ew-summary-reflection\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"summary-message\">\n      Naming an emotion does not make it disappear.\n      It can help me understand what is happening more clearly.\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       BOTTOM ACTIONS\n  ====================================================== -->\n\n  <div class=\"actions\">\n\n    <button type=\"button\" class=\"btn btn-primary\" id=\"ew-print\">\n\n      Print \/ Save as PDF\n\n    <\/button>\n\n\n    <button type=\"button\" class=\"btn btn-secondary\" id=\"ew-clear\">\n\n      Clear my Emotion Wheel\n\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  <!-- =====================================================\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\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\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\n<script>\n\n(function(){\n\n  var root =\n    document.getElementById('dig-emotion-wheel');\n\n  if(!root || root.dataset.ready === '1'){\n    return;\n  }\n\n  root.dataset.ready = '1';\n\n\n\n  \/* =====================================================\n     DATA\n  ====================================================== *\/\n\n  var emotionData = {\n\n    happy:{\n      label:'Happy',\n      words:[\n        'Excited',\n        'Proud',\n        'Relieved',\n        'Hopeful',\n        'Peaceful',\n        'Grateful'\n      ]\n    },\n\n    surprised:{\n      label:'Surprised',\n      words:[\n        'Amazed',\n        'Confused',\n        'Curious',\n        'Shocked',\n        'Impressed',\n        'Uncertain'\n      ]\n    },\n\n    afraid:{\n      label:'Afraid',\n      words:[\n        'Nervous',\n        'Worried',\n        'Uneasy',\n        'Overwhelmed',\n        'Insecure',\n        'Scared'\n      ]\n    },\n\n    sad:{\n      label:'Sad',\n      words:[\n        'Disappointed',\n        'Lonely',\n        'Hurt',\n        'Discouraged',\n        'Guilty',\n        'Down'\n      ]\n    },\n\n    angry:{\n      label:'Angry',\n      words:[\n        'Annoyed',\n        'Frustrated',\n        'Irritated',\n        'Furious',\n        'Resentful',\n        'Impatient'\n      ]\n    },\n\n    disgusted:{\n      label:'Disgusted',\n      words:[\n        'Uncomfortable',\n        'Disapproving',\n        'Put off',\n        'Disturbed',\n        'Sceptical',\n        'Repelled'\n      ]\n    }\n\n  };\n\n\n  var selectedBroad = '';\n  var selectedSpecific = '';\n\n  var entries = [];\n\n\n\n  \/* =====================================================\n     ELEMENTS\n  ====================================================== *\/\n\n  var momentInput =\n    root.querySelector('#ew-moment');\n\n  var emotionNodes =\n    root.querySelectorAll('.emotion-node');\n\n  var chipsWrap =\n    root.querySelector('#ew-emotion-chips');\n\n  var specificTitle =\n    root.querySelector('#ew-specific-title');\n\n  var specificNote =\n    root.querySelector('#ew-specific-note');\n\n  var currentChoice =\n    root.querySelector('#ew-current-choice');\n\n  var addButton =\n    root.querySelector('#ew-add-emotion');\n\n  var weekList =\n    root.querySelector('#ew-week-list');\n\n  var reflectionOne =\n    root.querySelector('#ew-reflection-one');\n\n  var reflectionTwo =\n    root.querySelector('#ew-reflection-two');\n\n\n\n  \/* =====================================================\n     BROAD EMOTION\n  ====================================================== *\/\n\n  emotionNodes.forEach(function(node){\n\n    node.addEventListener(\n      'click',\n      function(){\n\n        emotionNodes.forEach(function(other){\n          other.classList.remove('active');\n        });\n\n        node.classList.add('active');\n\n        selectedBroad =\n          node.getAttribute('data-emotion');\n\n        selectedSpecific = '';\n\n        renderSpecificEmotions();\n\n        updateAll();\n\n      }\n    );\n\n  });\n\n\n\n  \/* =====================================================\n     SPECIFIC EMOTIONS\n  ====================================================== *\/\n\n  function renderSpecificEmotions(){\n\n    chipsWrap.innerHTML = '';\n\n    if(!selectedBroad){\n\n      specificTitle.textContent =\n        'Choose a broad emotion';\n\n      specificNote.textContent =\n        'Related emotion words will appear here.';\n\n      currentChoice.textContent = '\u2014';\n\n      addButton.disabled = true;\n\n      return;\n\n    }\n\n\n    var data =\n      emotionData[selectedBroad];\n\n\n    specificTitle.textContent =\n      data.label;\n\n\n    specificNote.textContent =\n      'Which word feels closest to your experience?';\n\n\n    data.words.forEach(function(word){\n\n      var chip =\n        document.createElement('button');\n\n      chip.type = 'button';\n\n      chip.className =\n        'emotion-chip';\n\n      chip.textContent =\n        word;\n\n\n      chip.addEventListener(\n        'click',\n        function(){\n\n          chipsWrap\n            .querySelectorAll('.emotion-chip')\n            .forEach(function(other){\n\n              other.classList.remove('active');\n\n            });\n\n\n          chip.classList.add('active');\n\n          selectedSpecific =\n            word;\n\n\n          currentChoice.textContent =\n            word;\n\n\n          addButton.disabled =\n            false;\n\n\n          updateAll();\n\n        }\n      );\n\n\n      chipsWrap.appendChild(chip);\n\n    });\n\n\n    currentChoice.textContent =\n      'Choose a more specific word';\n\n    addButton.disabled =\n      true;\n\n  }\n\n\n\n  \/* =====================================================\n     ADD TO WEEK\n  ====================================================== *\/\n\n  addButton.addEventListener(\n    'click',\n    function(){\n\n      if(\n        !selectedBroad ||\n        !selectedSpecific\n      ){\n        return;\n      }\n\n\n      entries.push({\n\n        broad:selectedBroad,\n\n        broadLabel:\n          emotionData[selectedBroad].label,\n\n        specific:\n          selectedSpecific,\n\n        moment:\n          momentInput.value.trim()\n\n      });\n\n\n      selectedSpecific = '';\n\n      chipsWrap\n        .querySelectorAll('.emotion-chip')\n        .forEach(function(chip){\n\n          chip.classList.remove('active');\n\n        });\n\n\n      currentChoice.textContent =\n        'Choose another word or emotion';\n\n      addButton.disabled =\n        true;\n\n\n      renderWeek();\n      updateAll();\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     WEEK SNAPSHOT\n  ====================================================== *\/\n\n  function renderWeek(){\n\n    weekList.innerHTML = '';\n\n\n    if(!entries.length){\n\n      weekList.innerHTML =\n        '<div class=\"empty-week\">Your selected emotions will appear here.<\/div>';\n\n      return;\n\n    }\n\n\n    entries.forEach(function(entry,index){\n\n      var card =\n        document.createElement('div');\n\n      card.className =\n        'week-entry';\n\n\n      var broad =\n        document.createElement('div');\n\n      broad.className =\n        'week-broad';\n\n      broad.textContent =\n        entry.broadLabel;\n\n\n      var specific =\n        document.createElement('div');\n\n      specific.className =\n        'week-specific';\n\n      specific.textContent =\n        entry.specific;\n\n\n      var moment =\n        document.createElement('div');\n\n      moment.className =\n        'week-moment';\n\n      moment.textContent =\n        entry.moment\n          ? entry.moment\n          : 'No situation description added.';\n\n\n      var remove =\n        document.createElement('button');\n\n      remove.type =\n        'button';\n\n      remove.className =\n        'remove-entry';\n\n      remove.setAttribute(\n        'aria-label',\n        'Remove emotion'\n      );\n\n      remove.textContent =\n        '\u00d7';\n\n\n      remove.addEventListener(\n        'click',\n        function(){\n\n          entries.splice(index,1);\n\n          renderWeek();\n          updateAll();\n\n        }\n      );\n\n\n      card.appendChild(broad);\n      card.appendChild(specific);\n      card.appendChild(moment);\n      card.appendChild(remove);\n\n      weekList.appendChild(card);\n\n    });\n\n  }\n\n\n\n  \/* =====================================================\n     COUNTS\n  ====================================================== *\/\n\n  function getCounts(){\n\n    var counts = {\n\n      happy:0,\n      surprised:0,\n      afraid:0,\n      sad:0,\n      angry:0,\n      disgusted:0\n\n    };\n\n\n    entries.forEach(function(entry){\n\n      if(\n        counts.hasOwnProperty(entry.broad)\n      ){\n\n        counts[entry.broad]++;\n\n      }\n\n    });\n\n\n    return counts;\n\n  }\n\n\n\n  \/* =====================================================\n     CHART\n  ====================================================== *\/\n\n  function updateChart(){\n\n    var counts =\n      getCounts();\n\n    var total =\n      entries.length;\n\n\n    root.querySelector(\n      '#ew-total-emotions'\n    ).textContent =\n      total;\n\n\n    Object.keys(counts)\n      .forEach(function(key){\n\n        root.querySelector(\n          '#ew-count-' + key\n        ).textContent =\n          counts[key];\n\n\n        var pct =\n          total\n            ? (counts[key] \/ total) * 100\n            : 0;\n\n\n        root.querySelector(\n          '#ew-bar-' + key\n        ).style.width =\n          pct + '%';\n\n      });\n\n\n\n    \/* -------------------------\n       DONUT\n    ------------------------- *\/\n\n    var colors = {\n\n      happy:'#71AFDB',\n      surprised:'#F8D4B5',\n      afraid:'#8ec5e7',\n      sad:'#f0c99f',\n      angry:'#5f98be',\n      disgusted:'#d9c8bd'\n\n    };\n\n\n    var donut =\n      root.querySelector('#ew-donut');\n\n\n    if(!total){\n\n      donut.style.background =\n        '#e9f1f5';\n\n    }else{\n\n      var start = 0;\n\n      var stops = [];\n\n\n      Object.keys(counts)\n        .forEach(function(key){\n\n          var amount =\n            (counts[key] \/ total) * 360;\n\n          if(amount > 0){\n\n            var end =\n              start + amount;\n\n            stops.push(\n              colors[key] +\n              ' ' +\n              start +\n              'deg ' +\n              end +\n              'deg'\n            );\n\n            start = end;\n\n          }\n\n        });\n\n\n      donut.style.background =\n        'conic-gradient(' +\n        stops.join(',') +\n        ')';\n\n    }\n\n\n\n    \/* -------------------------\n       INSIGHT\n    ------------------------- *\/\n\n    var insight =\n      root.querySelector(\n        '#ew-pattern-insight'\n      );\n\n\n    if(total === 0){\n\n      insight.textContent =\n        'Add a few emotions to start seeing your week as a pattern rather than one single feeling.';\n\n      return;\n\n    }\n\n\n    if(total === 1){\n\n      insight.textContent =\n        'You have added one emotion. Add another moment or another emotion if you want to see a broader snapshot.';\n\n      return;\n\n    }\n\n\n    var max =\n      Math.max.apply(\n        null,\n        Object.values(counts)\n      );\n\n\n    var topKeys =\n      Object.keys(counts)\n        .filter(function(key){\n\n          return counts[key] === max &&\n                 max > 0;\n\n        });\n\n\n    var labels =\n      topKeys.map(function(key){\n\n        return emotionData[key].label;\n\n      });\n\n\n    if(labels.length === 1){\n\n      insight.textContent =\n        labels[0] +\n        ' appeared most often in the emotions you added. This does not define your whole week \u2014 it is simply one pattern in the moments you chose.';\n\n    }else{\n\n      insight.textContent =\n        labels.join(' and ') +\n        ' appeared equally often in the emotions you added. Your week may include a mix rather than one dominant emotional pattern.';\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     SUMMARY\n  ====================================================== *\/\n\n  function updateSummary(){\n\n    var counts =\n      getCounts();\n\n    var total =\n      entries.length;\n\n\n    var emotionNames =\n      entries.map(function(entry){\n\n        return entry.specific;\n\n      });\n\n\n    root.querySelector(\n      '#ew-summary-emotions'\n    ).textContent =\n      emotionNames.length\n        ? emotionNames.join(', ')\n        : '\u2014';\n\n\n    root.querySelector(\n      '#ew-summary-total'\n    ).textContent =\n      total;\n\n\n    if(total){\n\n      var max =\n        Math.max.apply(\n          null,\n          Object.values(counts)\n        );\n\n\n      var topKeys =\n        Object.keys(counts)\n          .filter(function(key){\n\n            return counts[key] === max;\n\n          });\n\n\n      root.querySelector(\n        '#ew-summary-common'\n      ).textContent =\n        topKeys\n          .map(function(key){\n\n            return emotionData[key].label;\n\n          })\n          .join(' \/ ');\n\n    }else{\n\n      root.querySelector(\n        '#ew-summary-common'\n      ).textContent =\n        '\u2014';\n\n    }\n\n\n    var reflections = [];\n\n\n    if(reflectionOne.value.trim()){\n\n      reflections.push(\n        reflectionOne.value.trim()\n      );\n\n    }\n\n\n    if(reflectionTwo.value.trim()){\n\n      reflections.push(\n        reflectionTwo.value.trim()\n      );\n\n    }\n\n\n    root.querySelector(\n      '#ew-summary-reflection'\n    ).textContent =\n      reflections.length\n        ? reflections.join('\\n\\n')\n        : '\u2014';\n\n  }\n\n\n\n  \/* =====================================================\n     PROGRESS\n  ====================================================== *\/\n\n  function updateProgress(){\n\n    var completed = 0;\n\n\n    if(\n      momentInput.value.trim()\n    ){\n      completed++;\n    }\n\n\n    if(\n      selectedBroad\n    ){\n      completed++;\n    }\n\n\n    if(\n      entries.length\n    ){\n      completed++;\n    }\n\n\n    if(\n      reflectionOne.value.trim() ||\n      reflectionTwo.value.trim()\n    ){\n      completed++;\n    }\n\n\n    root.querySelector(\n      '#ew-progress-number'\n    ).textContent =\n      completed;\n\n\n    root.querySelector(\n      '#ew-progress-fill'\n    ).style.width =\n      ((completed \/ 4) * 100) + '%';\n\n  }\n\n\n\n  \/* =====================================================\n     UPDATE ALL\n  ====================================================== *\/\n\n  function updateAll(){\n\n    updateChart();\n    updateSummary();\n    updateProgress();\n\n  }\n\n\n\n  \/* =====================================================\n     INPUT LISTENERS\n  ====================================================== *\/\n\n  momentInput.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  reflectionOne.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  reflectionTwo.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n\n  \/* =====================================================\n     PRINT\n  ====================================================== *\/\n\n  root\n    .querySelector('#ew-print')\n    .addEventListener(\n      'click',\n      function(){\n\n        updateAll();\n\n        window.print();\n\n      }\n    );\n\n\n\n  \/* =====================================================\n     CLEAR\n  ====================================================== *\/\n\n  root\n    .querySelector('#ew-clear')\n    .addEventListener(\n      'click',\n      function(){\n\n\n        momentInput.value = '';\n\n        reflectionOne.value = '';\n\n        reflectionTwo.value = '';\n\n        entries = [];\n\n        selectedBroad = '';\n\n        selectedSpecific = '';\n\n\n        emotionNodes.forEach(function(node){\n\n          node.classList.remove(\n            'active'\n          );\n\n        });\n\n\n        chipsWrap.innerHTML = '';\n\n\n        specificTitle.textContent =\n          'Choose a broad emotion';\n\n        specificNote.textContent =\n          'Related emotion words will appear here.';\n\n        currentChoice.textContent =\n          '\u2014';\n\n        addButton.disabled =\n          true;\n\n\n        renderWeek();\n        updateAll();\n\n\n        root.scrollIntoView({\n          behavior:'smooth',\n          block:'start'\n        });\n\n      }\n    );\n\n\n\n  \/* =====================================================\n     INITIALISE\n  ====================================================== *\/\n\n  renderWeek();\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 4 \u2022 Activity 1 My Emotion Wheel Recall a few moments from your week, find words that fit what you felt, and build a visual snapshot of your emotional mix. My Emotion Check 0\/4 steps Step 1 Recall one moment Start with one moment from the last week that you remember clearly. You can [&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-6726","page","type-page","status-publish","hentry"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PhfHCT-1Ku","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages\/6726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/users\/176376442"}],"replies":[{"embeddable":true,"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/comments?post=6726"}],"version-history":[{"count":1,"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages\/6726\/revisions"}],"predecessor-version":[{"id":6727,"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages\/6726\/revisions\/6727"}],"wp:attachment":[{"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/media?parent=6726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}