{"id":6598,"date":"2026-10-26T05:19:17","date_gmt":"2026-10-26T04:19:17","guid":{"rendered":"https:\/\/erasmuslife4you.com\/dig-informovanost-o-aplikaciach\/"},"modified":"2026-10-26T12:47:21","modified_gmt":"2026-10-26T11:47:21","slug":"dig-informovanost-o-aplikaciach","status":"publish","type":"page","link":"https:\/\/erasmuslife4you.com\/sk\/dig-informovanost-o-aplikaciach\/","title":{"rendered":"DIG \u2013 Informovanos\u0165 o aplik\u00e1ci\u00e1ch"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6598\" class=\"elementor elementor-6598 elementor-6544\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e4e748 e-flex e-con-boxed e-con e-parent\" data-id=\"0e4e748\" 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-9d2d3ee elementor-widget elementor-widget-html\" data-id=\"9d2d3ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"dig-app-awareness\">\n\n<style>\n\n\/* =========================================================\n   DIG \u2013 APP AWARENESS\n   MODULE 5 \u2022 ACTIVITY 2\n========================================================= *\/\n\n#dig-app-awareness{\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-app-awareness *{\n  box-sizing:border-box;\n}\n\n#dig-app-awareness .dig-shell{\n  max-width:960px;\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   BRANDING\n========================================================= *\/\n\n#dig-app-awareness .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-app-awareness .dig-project-logo{\n  width:170px;\n  max-width:100%;\n  height:auto;\n  display:block;\n}\n\n#dig-app-awareness .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-app-awareness .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-app-awareness .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-app-awareness .hero > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-app-awareness .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-app-awareness 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-app-awareness .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-app-awareness .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-app-awareness .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-app-awareness .progress-title{\n  color:var(--navy);\n  font-weight:800;\n  font-size:14px;\n}\n\n#dig-app-awareness .progress-value{\n  color:var(--blue);\n  font-weight:800;\n  font-size:13px;\n}\n\n#dig-app-awareness .progress-track{\n  height:9px;\n  background:#e9f1f5;\n  border-radius:999px;\n  overflow:hidden;\n}\n\n#dig-app-awareness .progress-fill{\n  height:100%;\n  width:0;\n  background:linear-gradient(90deg,var(--azure),var(--blue));\n  border-radius:999px;\n  transition:width .4s ease;\n}\n\n\n\/* =========================================================\n   GENERAL\n========================================================= *\/\n\n#dig-app-awareness .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-app-awareness .step-blue{\n  border-left:6px solid var(--azure);\n}\n\n#dig-app-awareness .step-peach{\n  border-left:6px solid var(--peach);\n}\n\n#dig-app-awareness .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-app-awareness h2{\n  margin:0 0 8px;\n  color:var(--navy);\n  font-size:25px;\n  line-height:1.3;\n}\n\n#dig-app-awareness .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   APP CARDS\n========================================================= *\/\n\n#dig-app-awareness .app-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n}\n\n#dig-app-awareness .app-card{\n  padding:20px;\n  border-radius:19px;\n  background:#ffffff;\n  border:1px solid var(--border);\n}\n\n#dig-app-awareness .app-card:nth-child(2){\n  background:var(--peach-light);\n  border-color:#eadfd5;\n}\n\n#dig-app-awareness .app-number{\n  width:38px;\n  height:38px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  margin-bottom:10px;\n  border-radius:50%;\n  background:var(--azure);\n  color:#ffffff;\n  font-size:13px;\n  font-weight:800;\n}\n\n#dig-app-awareness .app-card:nth-child(2) .app-number{\n  background:var(--peach);\n  color:var(--navy);\n}\n\n#dig-app-awareness .field-label{\n  display:block;\n  margin:14px 0 7px;\n  color:var(--navy);\n  font-size:13px;\n  font-weight:800;\n}\n\n#dig-app-awareness input[type=\"text\"],\n#dig-app-awareness textarea{\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-app-awareness textarea{\n  min-height:80px;\n  resize:vertical;\n}\n\n#dig-app-awareness input[type=\"text\"]:focus,\n#dig-app-awareness textarea:focus{\n  border-color:var(--azure);\n  box-shadow:0 0 0 3px rgba(113,175,219,.17);\n}\n\n\n\/* =========================================================\n   RATINGS\n========================================================= *\/\n\n#dig-app-awareness .rating-row{\n  display:flex;\n  gap:6px;\n  margin-top:7px;\n}\n\n#dig-app-awareness .rating-btn{\n  flex:1 1 0;\n  min-width:0;\n  min-height:39px;\n  border:2px solid var(--border);\n  border-radius:10px;\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    background .18s ease,\n    border-color .18s ease;\n}\n\n#dig-app-awareness .rating-btn:hover{\n  transform:translateY(-1px);\n}\n\n#dig-app-awareness .rating-btn.active{\n  border-color:var(--blue);\n  background:#dff1fa;\n  transform:translateY(-2px);\n}\n\n#dig-app-awareness .rating-ends{\n  display:flex;\n  justify-content:space-between;\n  gap:8px;\n  margin-top:5px;\n  color:#71848f;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:9px;\n}\n\n\n\/* =========================================================\n   TRIGGERS\n========================================================= *\/\n\n#dig-app-awareness .trigger-grid{\n  display:flex;\n  flex-wrap:wrap;\n  gap:7px;\n  margin-top:8px;\n}\n\n#dig-app-awareness .trigger-btn{\n  border:2px solid var(--border);\n  border-radius:999px;\n  background:#ffffff;\n  color:#425d6d;\n  padding:8px 11px;\n  cursor:pointer;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:10px;\n  font-weight:700;\n}\n\n#dig-app-awareness .trigger-btn.active{\n  border-color:var(--blue);\n  background:#e5f4fb;\n  color:var(--navy);\n}\n\n\n\/* =========================================================\n   COMPARISON\n========================================================= *\/\n\n#dig-app-awareness .comparison{\n  background:linear-gradient(135deg,#eef7fc,#fff5ec);\n  border:1px solid var(--border);\n  border-radius:22px;\n  padding:23px;\n}\n\n#dig-app-awareness .comparison-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:11px;\n  margin-top:17px;\n}\n\n#dig-app-awareness .compare-card{\n  min-height:170px;\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n  padding:17px;\n  border-radius:16px;\n  background:#ffffff;\n  border:1px solid var(--border);\n}\n\n#dig-app-awareness .compare-name{\n  color:var(--navy);\n  font-size:16px;\n  font-weight:800;\n  overflow-wrap:anywhere;\n}\n\n#dig-app-awareness .compare-placeholder{\n  color:#8a99a1;\n  font-style:italic;\n}\n\n#dig-app-awareness .meter{\n  height:10px;\n  margin-top:12px;\n  background:#e7eff3;\n  border-radius:999px;\n  overflow:hidden;\n}\n\n#dig-app-awareness .meter-fill{\n  height:100%;\n  width:0;\n  background:linear-gradient(90deg,var(--azure),var(--blue));\n  border-radius:999px;\n  transition:width .3s ease;\n}\n\n#dig-app-awareness .compare-detail{\n  margin-top:7px;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:10px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   MAIN DISTRACTION\n========================================================= *\/\n\n#dig-app-awareness .main-pull{\n  margin-top:18px;\n  padding:19px;\n  border-radius:18px;\n  background:var(--navy);\n  color:#ffffff;\n}\n\n#dig-app-awareness .main-pull-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-app-awareness .main-pull-name{\n  margin-top:4px;\n  color:#ffffff;\n  font-size:22px;\n  font-weight:800;\n}\n\n#dig-app-awareness .main-pull-text{\n  margin-top:6px;\n  color:#dcecf4;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   BARRIER OPTIONS\n========================================================= *\/\n\n#dig-app-awareness .barrier-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:10px;\n  margin-top:16px;\n}\n\n#dig-app-awareness .barrier-option{\n  position:relative;\n  cursor:pointer;\n}\n\n#dig-app-awareness .barrier-option input{\n  position:absolute;\n  opacity:0;\n  pointer-events:none;\n}\n\n#dig-app-awareness .barrier-box{\n  min-height:100px;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  border:2px solid var(--border);\n  border-radius:16px;\n  background:#ffffff;\n  padding:16px;\n  transition:\n    transform .18s ease,\n    border-color .18s ease,\n    background .18s ease;\n}\n\n#dig-app-awareness .barrier-option input:checked + .barrier-box{\n  border-color:var(--blue);\n  background:#e5f4fb;\n  transform:translateY(-2px);\n}\n\n#dig-app-awareness .barrier-name{\n  color:var(--navy);\n  font-size:14px;\n  font-weight:800;\n  margin-bottom:4px;\n}\n\n#dig-app-awareness .barrier-note{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:10px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   TEST PLAN\n========================================================= *\/\n\n#dig-app-awareness .test-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n}\n\n#dig-app-awareness .test-card{\n  background:#f7fbfd;\n  border:1px solid var(--border);\n  border-radius:17px;\n  padding:17px;\n}\n\n#dig-app-awareness .test-card:nth-child(even){\n  background:var(--peach-light);\n  border-color:#eadfd5;\n}\n\n\n\/* =========================================================\n   SUMMARY\n========================================================= *\/\n\n#dig-app-awareness .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-app-awareness .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-app-awareness .summary > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-app-awareness .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-app-awareness .summary-title{\n  margin:4px 0 18px;\n  color:#ffffff;\n  font-size:25px;\n  font-weight:800;\n}\n\n#dig-app-awareness .summary-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n\n#dig-app-awareness .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-app-awareness .summary-wide{\n  grid-column:1\/-1;\n}\n\n#dig-app-awareness .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-app-awareness .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-app-awareness .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-app-awareness .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-app-awareness .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-app-awareness .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-app-awareness .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin:24px 0 8px;\n}\n\n#dig-app-awareness .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-app-awareness .btn-primary{\n  color:#ffffff;\n  background:var(--blue);\n}\n\n#dig-app-awareness .btn-secondary{\n  color:var(--blue);\n  background:#ffffff;\n  border:2px solid var(--border);\n}\n\n#dig-app-awareness .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-app-awareness .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-app-awareness .footer-top{\n  display:flex;\n  align-items:flex-start;\n  gap:22px;\n  flex-wrap:wrap;\n}\n\n#dig-app-awareness .footer .dig-eu-logo{\n  width:180px;\n}\n\n#dig-app-awareness .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-app-awareness .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-app-awareness{\n    padding:18px 10px 34px;\n  }\n\n  #dig-app-awareness .hero{\n    padding:28px 22px;\n  }\n\n  #dig-app-awareness h1{\n    font-size:31px;\n  }\n\n  #dig-app-awareness .app-grid,\n  #dig-app-awareness .comparison-grid,\n  #dig-app-awareness .barrier-grid,\n  #dig-app-awareness .test-grid,\n  #dig-app-awareness .summary-grid{\n    grid-template-columns:1fr;\n  }\n\n  #dig-app-awareness .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-app-awareness *,\n  #dig-app-awareness *::before,\n  #dig-app-awareness *::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-app-awareness{\n    background:#ffffff !important;\n    padding:0 !important;\n  }\n\n  #dig-app-awareness .actions,\n  #dig-app-awareness .privacy,\n  #dig-app-awareness .progress-card{\n    display:none !important;\n  }\n\n  #dig-app-awareness .step,\n  #dig-app-awareness .hero,\n  #dig-app-awareness .summary,\n  #dig-app-awareness .support,\n  #dig-app-awareness .footer,\n  #dig-app-awareness .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 2\n  <\/div>\n\n  <h1>\n    My App Awareness Check\n  <\/h1>\n\n  <p>\n    Compare the digital spaces you use, notice which one most often pulls you away from another task,\n    and choose one small action that can make the distraction less automatic.\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 Digital Attention Check\n    <\/div>\n\n    <div class=\"progress-value\">\n      <span id=\"aaa-progress-number\">0<\/span>\/4 steps\n    <\/div>\n\n  <\/div>\n\n  <div class=\"progress-track\">\n    <div class=\"progress-fill\" id=\"aaa-progress-fill\">\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\n<!-- =====================================================\n     STEP 1 \u2013 IDENTIFY\n===================================================== -->\n\n<section class=\"step step-blue\">\n\n  <div class=\"step-label\">\n    Step 1 \u2022 Identify\n  <\/div>\n\n  <h2>\n    Add up to 3 apps or digital spaces\n  <\/h2>\n\n  <p class=\"help\">\n    Choose the ones you use often or the ones that seem most relevant to your focus.\n    They do not need to be social media apps.\n  <\/p>\n\n\n  <div class=\"app-grid\">\n\n\n    <!-- APP 1 -->\n\n    <div class=\"app-card\">\n\n      <div class=\"app-number\">\n        1\n      <\/div>\n\n      <label class=\"field-label\" for=\"aaa-app-1\" style=\"margin-top:0;\">\n        App or digital space\n      <\/label>\n\n      <input\n        type=\"text\"\n        id=\"aaa-app-1\"\n        placeholder=\"For example: Messages\">\n\n\n      <span class=\"field-label\">\n        How often do I use it?\n      <\/span>\n\n      <div class=\"rating-row\" data-app=\"1\" data-type=\"use\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Low\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=\"3\">\n          High\n        <\/button>\n\n      <\/div>\n\n\n      <span class=\"field-label\">\n        How often does it pull me away from another task?\n      <\/span>\n\n      <div class=\"rating-row\" data-app=\"1\" data-type=\"pull\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Rarely\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"2\">\n          Sometimes\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"3\">\n          Often\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- APP 2 -->\n\n    <div class=\"app-card\">\n\n      <div class=\"app-number\">\n        2\n      <\/div>\n\n      <label class=\"field-label\" for=\"aaa-app-2\" style=\"margin-top:0;\">\n        App or digital space\n      <\/label>\n\n      <input\n        type=\"text\"\n        id=\"aaa-app-2\"\n        placeholder=\"For example: Short-video app\">\n\n\n      <span class=\"field-label\">\n        How often do I use it?\n      <\/span>\n\n      <div class=\"rating-row\" data-app=\"2\" data-type=\"use\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Low\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=\"3\">\n          High\n        <\/button>\n\n      <\/div>\n\n\n      <span class=\"field-label\">\n        How often does it pull me away from another task?\n      <\/span>\n\n      <div class=\"rating-row\" data-app=\"2\" data-type=\"pull\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Rarely\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"2\">\n          Sometimes\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"3\">\n          Often\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- APP 3 -->\n\n    <div class=\"app-card\">\n\n      <div class=\"app-number\">\n        3\n      <\/div>\n\n      <label class=\"field-label\" for=\"aaa-app-3\" style=\"margin-top:0;\">\n        App or digital space\n      <\/label>\n\n      <input\n        type=\"text\"\n        id=\"aaa-app-3\"\n        placeholder=\"For example: Music app\">\n\n\n      <span class=\"field-label\">\n        How often do I use it?\n      <\/span>\n\n      <div class=\"rating-row\" data-app=\"3\" data-type=\"use\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Low\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=\"3\">\n          High\n        <\/button>\n\n      <\/div>\n\n\n      <span class=\"field-label\">\n        How often does it pull me away from another task?\n      <\/span>\n\n      <div class=\"rating-row\" data-app=\"3\" data-type=\"pull\">\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"1\">\n          Rarely\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"2\">\n          Sometimes\n        <\/button>\n\n        <button type=\"button\" class=\"rating-btn\" data-value=\"3\">\n          Often\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     STEP 2 \u2013 COMPARE\n===================================================== -->\n\n<section class=\"step step-peach\">\n\n  <div class=\"step-label\">\n    Step 2 \u2022 Notice the Pull\n  <\/div>\n\n  <h2>\n    Compare use with distraction\n  <\/h2>\n\n  <p class=\"help\">\n    The app you use most is not automatically the app that interrupts your focus most.\n    Look at the pull instead of only the amount of use.\n  <\/p>\n\n\n  <div class=\"comparison\">\n\n    <div class=\"comparison-grid\">\n\n\n      <div class=\"compare-card\">\n\n        <div>\n\n          <div class=\"compare-name compare-placeholder\" id=\"aaa-compare-name-1\">\n            App 1\n          <\/div>\n\n          <div class=\"compare-detail\">\n            Distraction pull\n          <\/div>\n\n          <div class=\"meter\">\n            <div class=\"meter-fill\" id=\"aaa-meter-1\">\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"compare-detail\" id=\"aaa-compare-detail-1\">\n          Add a name and ratings.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"compare-card\">\n\n        <div>\n\n          <div class=\"compare-name compare-placeholder\" id=\"aaa-compare-name-2\">\n            App 2\n          <\/div>\n\n          <div class=\"compare-detail\">\n            Distraction pull\n          <\/div>\n\n          <div class=\"meter\">\n            <div class=\"meter-fill\" id=\"aaa-meter-2\">\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"compare-detail\" id=\"aaa-compare-detail-2\">\n          Add a name and ratings.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"compare-card\">\n\n        <div>\n\n          <div class=\"compare-name compare-placeholder\" id=\"aaa-compare-name-3\">\n            App 3\n          <\/div>\n\n          <div class=\"compare-detail\">\n            Distraction pull\n          <\/div>\n\n          <div class=\"meter\">\n            <div class=\"meter-fill\" id=\"aaa-meter-3\">\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"compare-detail\" id=\"aaa-compare-detail-3\">\n          Add a name and ratings.\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"main-pull\">\n\n      <div class=\"main-pull-label\">\n        Strongest distraction pull\n      <\/div>\n\n      <div class=\"main-pull-name\" id=\"aaa-main-pull\">\n        \u2014\n      <\/div>\n\n      <div class=\"main-pull-text\" id=\"aaa-main-pull-text\">\n        Add your app names and distraction ratings to compare them.\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =====================================================\n     TRIGGERS\n===================================================== -->\n\n<section class=\"step step-blue\">\n\n  <div class=\"step-label\">\n    Notice the Moment\n  <\/div>\n\n  <h2>\n    What usually happens just before you open it?\n  <\/h2>\n\n  <p class=\"help\">\n    Think about the app or digital habit that most often interrupts another task.\n    Select any cues that feel familiar.\n  <\/p>\n\n\n  <div class=\"trigger-grid\" id=\"aaa-trigger-grid\">\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"A notification appears\">\n      Notification\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"I open it automatically\">\n      Automatic habit\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"The task feels boring\">\n      Boredom\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"The task feels difficult\">\n      Difficult task\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"I want to see what is new\">\n      Curiosity\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"I plan to check for only a moment\">\n      \u201cJust a second\u201d\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"Someone messages me\">\n      Message from someone\n    <\/button>\n\n    <button type=\"button\" class=\"trigger-btn\" data-value=\"I feel restless\">\n      Restlessness\n    <\/button>\n\n  <\/div>\n\n\n  <label class=\"field-label\" for=\"aaa-trigger-note\">\n    Anything else you notice?\n  <\/label>\n\n  <textarea id=\"aaa-trigger-note\" placeholder=\"For example: I usually open it when I get stuck and do not know what to do next.\"><\/textarea>\n\n<\/section>\n\n\n<!-- =====================================================\n     STEP 3 \u2013 PROTECT\n===================================================== -->\n\n<section class=\"step step-peach\">\n\n  <div class=\"step-label\">\n    Step 3 \u2022 Protect\n  <\/div>\n\n  <h2>\n    Choose one small barrier\n  <\/h2>\n\n  <p class=\"help\">\n    Pick one realistic change that makes the distracting habit slightly less automatic.\n    You only need one.\n  <\/p>\n\n\n  <div class=\"barrier-grid\" id=\"aaa-barrier-grid\">\n\n\n    <label class=\"barrier-option\">\n\n      <input\n        type=\"radio\"\n        name=\"aaa-barrier\"\n        value=\"Mute non-essential notifications\">\n\n      <span class=\"barrier-box\">\n\n        <span class=\"barrier-name\">\n          Mute notifications\n        <\/span>\n\n        <span class=\"barrier-note\">\n          Reduce cues that invite you to switch attention.\n        <\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n    <label class=\"barrier-option\">\n\n      <input\n        type=\"radio\"\n        name=\"aaa-barrier\"\n        value=\"Move the app away from the home screen\">\n\n      <span class=\"barrier-box\">\n\n        <span class=\"barrier-name\">\n          Move the app\n        <\/span>\n\n        <span class=\"barrier-note\">\n          Put it somewhere that requires a more deliberate choice to open.\n        <\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n    <label class=\"barrier-option\">\n\n      <input\n        type=\"radio\"\n        name=\"aaa-barrier\"\n        value=\"Move the phone farther away\">\n\n      <span class=\"barrier-box\">\n\n        <span class=\"barrier-name\">\n          Move the phone\n        <\/span>\n\n        <span class=\"barrier-note\">\n          Put it slightly farther away during a short focus period.\n        <\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n    <label class=\"barrier-option\">\n\n      <input\n        type=\"radio\"\n        name=\"aaa-barrier\"\n        value=\"Set a short focus period before checking\">\n\n      <span class=\"barrier-box\">\n\n        <span class=\"barrier-name\">\n          Set a focus period\n        <\/span>\n\n        <span class=\"barrier-note\">\n          Decide how long you want to stay with one task before checking.\n        <\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n    <label class=\"barrier-option\">\n\n      <input\n        type=\"radio\"\n        name=\"aaa-barrier\"\n        value=\"Log out of the distracting app\">\n\n      <span class=\"barrier-box\">\n\n        <span class=\"barrier-name\">\n          Log out\n        <\/span>\n\n        <span class=\"barrier-note\">\n          Add one extra step before entering the app.\n        <\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n    <label class=\"barrier-option\">\n\n      <input\n        type=\"radio\"\n        name=\"aaa-barrier\"\n        value=\"Use my own barrier\">\n\n      <span class=\"barrier-box\">\n\n        <span class=\"barrier-name\">\n          My own idea\n        <\/span>\n\n        <span class=\"barrier-note\">\n          Choose another small barrier that fits your situation.\n        <\/span>\n\n      <\/span>\n\n    <\/label>\n\n\n  <\/div>\n\n\n  <label class=\"field-label\" for=\"aaa-own-barrier\">\n    If you chose your own idea, describe it here:\n  <\/label>\n\n  <input\n    type=\"text\"\n    id=\"aaa-own-barrier\"\n    placeholder=\"For example: keep the phone in my bag during homework.\">\n\n<\/section>\n\n\n<!-- =====================================================\n     STEP 4 \u2013 TEST\n===================================================== -->\n\n<section class=\"step step-blue\">\n\n  <div class=\"step-label\">\n    Step 4 \u2022 Test\n  <\/div>\n\n  <h2>\n    Make a small test plan\n  <\/h2>\n\n  <p class=\"help\">\n    You do not need to change your whole digital routine.\n    Choose one situation where you can test the barrier and see what happens.\n  <\/p>\n\n\n  <div class=\"test-grid\">\n\n\n    <div class=\"test-card\">\n\n      <label class=\"field-label\" for=\"aaa-test-when\" style=\"margin-top:0;\">\n        When will I test it?\n      <\/label>\n\n      <textarea id=\"aaa-test-when\" placeholder=\"For example: tomorrow while doing homework for 20 minutes.\"><\/textarea>\n\n    <\/div>\n\n\n    <div class=\"test-card\">\n\n      <label class=\"field-label\" for=\"aaa-test-look\" style=\"margin-top:0;\">\n        What will I notice?\n      <\/label>\n\n      <textarea id=\"aaa-test-look\" placeholder=\"For example: whether I reach for the phone less automatically or return to the task more easily.\"><\/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=\"aaa-success\" style=\"margin-top:0;\">\n      What would count as useful?\n    <\/label>\n\n    <textarea id=\"aaa-success\" placeholder=\"For example: I do not need zero phone checks. It would be useful if I pause before opening the app or stay with the task a little longer.\"><\/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    Remember\n  <\/div>\n\n  <p>\n    The goal is not to prove that an app is \u201cbad\u201d or to stop using your phone.\n    The goal is to notice when digital use changes what you intended to do\n    and experiment with one small way to protect your attention.\n  <\/p>\n\n<\/div>\n\n\n<!-- =====================================================\n     SUMMARY\n===================================================== -->\n\n<section class=\"summary\">\n\n  <div class=\"summary-kicker\">\n    My App Awareness Plan\n  <\/div>\n\n  <div class=\"summary-title\">\n    What I learned about my digital attention\n  <\/div>\n\n\n  <div class=\"summary-grid\">\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        Strongest distraction pull\n      <\/div>\n\n      <div class=\"summary-value\" id=\"aaa-summary-app\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        Common trigger\n      <\/div>\n\n      <div class=\"summary-value\" id=\"aaa-summary-trigger\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item summary-wide\">\n\n      <div class=\"summary-label\">\n        My protection strategy\n      <\/div>\n\n      <div class=\"summary-value\" id=\"aaa-summary-barrier\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        When I will test it\n      <\/div>\n\n      <div class=\"summary-value\" id=\"aaa-summary-when\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"summary-item\">\n\n      <div class=\"summary-label\">\n        What I will notice\n      <\/div>\n\n      <div class=\"summary-value\" id=\"aaa-summary-look\">\n        \u2014\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n\n  <div class=\"summary-message\">\n    I do not need to remove every distraction.\n    I can make one important distraction less automatic.\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=\"aaa-print\">\n    Print \/ Save as PDF\n  <\/button>\n\n  <button type=\"button\" class=\"btn btn-secondary\" id=\"aaa-clear\">\n    Clear my App Awareness Check\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\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-app-awareness');\n\n  if(!root || root.dataset.ready === '1'){\n    return;\n  }\n\n  root.dataset.ready = '1';\n\n\n  \/* =====================================================\n     STATE\n  ====================================================== *\/\n\n  var apps = {\n\n    1:{\n      name:'',\n      use:0,\n      pull:0\n    },\n\n    2:{\n      name:'',\n      use:0,\n      pull:0\n    },\n\n    3:{\n      name:'',\n      use:0,\n      pull:0\n    }\n\n  };\n\n\n  var triggers = [];\n\n  var selectedBarrier = '';\n\n\n  \/* =====================================================\n     ELEMENTS\n  ====================================================== *\/\n\n  var appInputs = {\n    1:root.querySelector('#aaa-app-1'),\n    2:root.querySelector('#aaa-app-2'),\n    3:root.querySelector('#aaa-app-3')\n  };\n\n  var ratingRows =\n    root.querySelectorAll('.rating-row');\n\n  var triggerButtons =\n    root.querySelectorAll('.trigger-btn');\n\n  var barrierInputs =\n    root.querySelectorAll('input[name=\"aaa-barrier\"]');\n\n  var ownBarrierInput =\n    root.querySelector('#aaa-own-barrier');\n\n  var triggerNote =\n    root.querySelector('#aaa-trigger-note');\n\n  var testWhen =\n    root.querySelector('#aaa-test-when');\n\n  var testLook =\n    root.querySelector('#aaa-test-look');\n\n  var successInput =\n    root.querySelector('#aaa-success');\n\n\n  \/* =====================================================\n     APP NAMES\n  ====================================================== *\/\n\n  Object.keys(appInputs).forEach(function(key){\n\n    appInputs[key].addEventListener(\n      'input',\n      function(){\n\n        apps[key].name =\n          appInputs[key].value.trim();\n\n        updateAll();\n\n      }\n    );\n\n  });\n\n\n  \/* =====================================================\n     RATINGS\n  ====================================================== *\/\n\n  ratingRows.forEach(function(row){\n\n    var app =\n      row.getAttribute('data-app');\n\n    var type =\n      row.getAttribute('data-type');\n\n    var buttons =\n      row.querySelectorAll('.rating-btn');\n\n\n    buttons.forEach(function(button){\n\n      button.addEventListener(\n        'click',\n        function(){\n\n          apps[app][type] =\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     TRIGGERS\n  ====================================================== *\/\n\n  triggerButtons.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          triggers.indexOf(value);\n\n\n        if(index === -1){\n\n          triggers.push(value);\n\n          button.classList.add('active');\n\n        }else{\n\n          triggers.splice(index,1);\n\n          button.classList.remove('active');\n\n        }\n\n\n        updateAll();\n\n      }\n    );\n\n  });\n\n\n  \/* =====================================================\n     BARRIERS\n  ====================================================== *\/\n\n  barrierInputs.forEach(function(input){\n\n    input.addEventListener(\n      'change',\n      function(){\n\n        if(input.checked){\n\n          selectedBarrier =\n            input.value;\n\n        }\n\n        updateAll();\n\n      }\n    );\n\n  });\n\n\n  ownBarrierInput.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  triggerNote.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  testWhen.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  testLook.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  successInput.addEventListener(\n    'input',\n    updateAll\n  );\n\n\n  \/* =====================================================\n     MAIN DISTRACTION\n  ====================================================== *\/\n\n  function getValidApps(){\n\n    return [1,2,3].filter(function(key){\n\n      return (\n        apps[key].name ||\n        apps[key].pull > 0 ||\n        apps[key].use > 0\n      );\n\n    });\n\n  }\n\n\n  function getMainPullApps(){\n\n    var valid =\n      getValidApps().filter(function(key){\n\n        return apps[key].pull > 0;\n\n      });\n\n\n    if(!valid.length){\n      return [];\n    }\n\n\n    var max =\n      Math.max.apply(\n        null,\n        valid.map(function(key){\n\n          return apps[key].pull;\n\n        })\n      );\n\n\n    return valid.filter(function(key){\n\n      return apps[key].pull === max;\n\n    });\n\n  }\n\n\n  function appDisplayName(key){\n\n    return apps[key].name\n      ? apps[key].name\n      : 'App ' + key;\n\n  }\n\n\n  \/* =====================================================\n     COMPARISON\n  ====================================================== *\/\n\n  function updateComparison(){\n\n    [1,2,3].forEach(function(key){\n\n      var nameEl =\n        root.querySelector(\n          '#aaa-compare-name-' + key\n        );\n\n      var meter =\n        root.querySelector(\n          '#aaa-meter-' + key\n        );\n\n      var detail =\n        root.querySelector(\n          '#aaa-compare-detail-' + key\n        );\n\n\n      if(apps[key].name){\n\n        nameEl.textContent =\n          apps[key].name;\n\n        nameEl.classList.remove(\n          'compare-placeholder'\n        );\n\n      }else{\n\n        nameEl.textContent =\n          'App ' + key;\n\n        nameEl.classList.add(\n          'compare-placeholder'\n        );\n\n      }\n\n\n      var pullWidth =\n        apps[key].pull === 3\n          ? 100\n          : apps[key].pull === 2\n          ? 66\n          : apps[key].pull === 1\n          ? 33\n          : 0;\n\n\n      meter.style.width =\n        pullWidth + '%';\n\n\n      if(\n        apps[key].use &&\n        apps[key].pull\n      ){\n\n        var useText =\n          apps[key].use === 3\n            ? 'High use'\n            : apps[key].use === 2\n            ? 'Medium use'\n            : 'Low use';\n\n\n        var pullText =\n          apps[key].pull === 3\n            ? 'Often pulls attention'\n            : apps[key].pull === 2\n            ? 'Sometimes pulls attention'\n            : 'Rarely pulls attention';\n\n\n        detail.textContent =\n          useText + ' \u00b7 ' + pullText;\n\n      }else{\n\n        detail.textContent =\n          'Add use and distraction ratings.';\n\n      }\n\n    });\n\n\n    var main =\n      getMainPullApps();\n\n    var mainName =\n      root.querySelector('#aaa-main-pull');\n\n    var mainText =\n      root.querySelector('#aaa-main-pull-text');\n\n\n    if(!main.length){\n\n      mainName.textContent =\n        '\u2014';\n\n      mainText.textContent =\n        'Add your app names and distraction ratings to compare them.';\n\n      return;\n\n    }\n\n\n    mainName.textContent =\n      main\n        .map(appDisplayName)\n        .join(' & ');\n\n\n    if(main.length > 1){\n\n      mainText.textContent =\n        'These apps have the same distraction rating in your snapshot. Look at the trigger patterns to decide which one you want to work with first.';\n\n    }else{\n\n      var key =\n        main[0];\n\n\n      if(\n        apps[key].use === 3 &&\n        apps[key].pull === 3\n      ){\n\n        mainText.textContent =\n          'You use this app often and it also often pulls you away from another task.';\n\n      }else if(\n        apps[key].use < apps[key].pull\n      ){\n\n        mainText.textContent =\n          'This is a useful clue: it may interrupt you more than its overall use would suggest.';\n\n      }else{\n\n        mainText.textContent =\n          'This app has the strongest distraction pull in your current snapshot.';\n\n      }\n\n    }\n\n  }\n\n\n  \/* =====================================================\n     SUMMARY\n  ====================================================== *\/\n\n  function getBarrierText(){\n\n    if(\n      selectedBarrier ===\n      'Use my own barrier'\n    ){\n\n      return ownBarrierInput.value.trim()\n        ? ownBarrierInput.value.trim()\n        : 'My own barrier';\n\n    }\n\n\n    return selectedBarrier || '';\n\n  }\n\n\n  function updateSummary(){\n\n    var main =\n      getMainPullApps();\n\n\n    root.querySelector(\n      '#aaa-summary-app'\n    ).textContent =\n      main.length\n        ? main\n            .map(appDisplayName)\n            .join(' & ')\n        : '\u2014';\n\n\n    var triggerText = '';\n\n\n    if(triggers.length){\n\n      triggerText =\n        triggers.join(', ');\n\n    }\n\n\n    if(triggerNote.value.trim()){\n\n      triggerText +=\n        (\n          triggerText\n            ? '\\n'\n            : ''\n        ) +\n        triggerNote.value.trim();\n\n    }\n\n\n    root.querySelector(\n      '#aaa-summary-trigger'\n    ).textContent =\n      triggerText || '\u2014';\n\n\n    root.querySelector(\n      '#aaa-summary-barrier'\n    ).textContent =\n      getBarrierText() || '\u2014';\n\n\n    root.querySelector(\n      '#aaa-summary-when'\n    ).textContent =\n      testWhen.value.trim() || '\u2014';\n\n\n    root.querySelector(\n      '#aaa-summary-look'\n    ).textContent =\n      testLook.value.trim() || '\u2014';\n\n  }\n\n\n  \/* =====================================================\n     PROGRESS\n  ====================================================== *\/\n\n  function updateProgress(){\n\n    var completed = 0;\n\n\n    var namedApps =\n      [1,2,3].filter(function(key){\n\n        return apps[key].name;\n\n      }).length;\n\n\n    if(namedApps){\n      completed++;\n    }\n\n\n    var ratedPulls =\n      [1,2,3].filter(function(key){\n\n        return apps[key].pull > 0;\n\n      }).length;\n\n\n    if(ratedPulls){\n      completed++;\n    }\n\n\n    if(getBarrierText()){\n      completed++;\n    }\n\n\n    if(\n      testWhen.value.trim() &&\n      testLook.value.trim()\n    ){\n      completed++;\n    }\n\n\n    root.querySelector(\n      '#aaa-progress-number'\n    ).textContent =\n      completed;\n\n\n    root.querySelector(\n      '#aaa-progress-fill'\n    ).style.width =\n      ((completed \/ 4) * 100) + '%';\n\n  }\n\n\n  \/* =====================================================\n     UPDATE ALL\n  ====================================================== *\/\n\n  function updateAll(){\n\n    updateComparison();\n    updateSummary();\n    updateProgress();\n\n  }\n\n\n  \/* =====================================================\n     PRINT\n  ====================================================== *\/\n\n  root\n    .querySelector('#aaa-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('#aaa-clear')\n    .addEventListener(\n      'click',\n      function(){\n\n        apps = {\n\n          1:{\n            name:'',\n            use:0,\n            pull:0\n          },\n\n          2:{\n            name:'',\n            use:0,\n            pull:0\n          },\n\n          3:{\n            name:'',\n            use:0,\n            pull:0\n          }\n\n        };\n\n\n        triggers = [];\n\n        selectedBarrier = '';\n\n\n        root\n          .querySelectorAll('input[type=\"text\"]')\n          .forEach(function(input){\n\n            input.value = '';\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('.rating-btn')\n          .forEach(function(button){\n\n            button.classList.remove('active');\n\n          });\n\n\n        root\n          .querySelectorAll('.trigger-btn')\n          .forEach(function(button){\n\n            button.classList.remove('active');\n\n          });\n\n\n        barrierInputs.forEach(function(input){\n\n          input.checked = false;\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 2 My App Awareness Check Compare the digital spaces you use, notice which one most often pulls you away from another task, and choose one small action that can make the distraction less automatic. My Digital Attention Check 0\/4 steps Step 1 \u2022 Identify Add up to 3 apps or digital [&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-6598","page","type-page","status-publish","hentry"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PhfHCT-1Iq","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages\/6598","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=6598"}],"version-history":[{"count":1,"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages\/6598\/revisions"}],"predecessor-version":[{"id":6599,"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/pages\/6598\/revisions\/6599"}],"wp:attachment":[{"href":"https:\/\/erasmuslife4you.com\/sk\/wp-json\/wp\/v2\/media?parent=6598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}