{\rtf1\ansi\ansicpg950\cocoartf2761
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red70\green137\blue204;\red23\green24\blue24;\red140\green211\blue254;
\red202\green202\blue202;\red109\green109\blue109;\red194\green126\blue101;\red212\green212\blue212;\red113\green192\blue131;
\red167\green197\blue152;\red109\green115\blue120;\red183\green111\blue247;\red246\green124\blue48;\red54\green192\blue160;
}
{\*\expandedcolortbl;;\cssrgb\c33725\c61176\c83922;\cssrgb\c11765\c12157\c12549;\cssrgb\c61176\c86275\c99608;
\cssrgb\c83137\c83137\c83137;\cssrgb\c50196\c50196\c50196;\cssrgb\c80784\c56863\c47059;\cssrgb\c86275\c86275\c86275;\cssrgb\c50588\c78824\c58431;
\cssrgb\c70980\c80784\c65882;\cssrgb\c50196\c52549\c54510;\cssrgb\c77255\c54118\c97647;\cssrgb\c98039\c56471\c24314;\cssrgb\c23922\c78824\c69020;
}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\partightenfactor0

\f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 <!DOCTYPE\cf4 \strokec4  html\cf2 \strokec2 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 html\cf5 \strokec5  \cf4 \strokec4 lang\cf6 \strokec6 =\cf7 \strokec7 "zh-Hant"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 head\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 meta\cf5 \strokec5  \cf4 \strokec4 charset\cf6 \strokec6 =\cf7 \strokec7 "UTF-8"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 meta\cf5 \strokec5  \cf4 \strokec4 name\cf6 \strokec6 =\cf7 \strokec7 "viewport"\cf5 \strokec5  \cf4 \strokec4 content\cf6 \strokec6 =\cf7 \strokec7 "width=device-width, initial-scale=1.0"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 title\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12304 \u25136 \u30053  x \u25935 \u25463 \u12305 \u35519 \u36969 \u24615 \u23560 \u26696 \u31649 \u29702 \u24341 \u23566 \u24335 \u25945 \u23416 \u31995 \u32113 \cf6 \strokec6 </\cf2 \strokec2 title\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 script\cf5 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf7 \strokec7 "https://cdn.tailwindcss.com"\cf6 \strokec6 ></\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 link\cf5 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf7 \strokec7 "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap"\cf5 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf7 \strokec7 "stylesheet"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 link\cf5 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf7 \strokec7 "stylesheet"\cf5 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf7 \strokec7 "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"\cf6 \strokec6 ></\cf2 \strokec2 link\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 style\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 body\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 font-family:\cf5 \strokec5  \cf9 \strokec9 'Noto Sans TC'\cf8 \strokec8 ,\cf5 \strokec5  \cf7 \strokec7 sans-serif\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 overflow-x:\cf5 \strokec5  \cf7 \strokec7 hidden\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .module-tab\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 cursor:\cf5 \strokec5  \cf7 \strokec7 pointer\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transition:\cf5 \strokec5  \cf7 \strokec7 all\cf5 \strokec5  \cf10 \strokec10 0.3s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border-left:\cf5 \strokec5  \cf10 \strokec10 4px\cf5 \strokec5  \cf7 \strokec7 solid\cf5 \strokec5  \cf7 \strokec7 transparent\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .module-tab:hover\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #f3f4f6\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 /* gray-100 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border-left-color:\cf5 \strokec5  #9ca3af\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 /* gray-400 */\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .module-tab-active\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #eef2ff\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 /* indigo-50 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border-left-color:\cf5 \strokec5  #3b82f6\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 /* blue-500 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 color:\cf5 \strokec5  #3b82f6\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 /* blue-500 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 font-weight:\cf5 \strokec5  \cf10 \strokec10 700\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .hidden\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 display:\cf5 \strokec5  \cf7 \strokec7 none\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .modal-overlay\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 position:\cf5 \strokec5  \cf7 \strokec7 fixed\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 top:\cf5 \strokec5  \cf10 \strokec10 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 left:\cf5 \strokec5  \cf10 \strokec10 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 right:\cf5 \strokec5  \cf10 \strokec10 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 bottom:\cf5 \strokec5  \cf10 \strokec10 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background:\cf5 \strokec5  \cf7 \strokec7 rgba(\cf10 \strokec10 0\cf8 \strokec8 ,\cf10 \strokec10 0\cf8 \strokec8 ,\cf10 \strokec10 0\cf8 \strokec8 ,\cf10 \strokec10 0.7\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 display:\cf5 \strokec5  \cf7 \strokec7 flex\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 align-items:\cf5 \strokec5  \cf7 \strokec7 center\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 justify-content:\cf5 \strokec5  \cf7 \strokec7 center\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 z-index:\cf5 \strokec5  \cf10 \strokec10 1000\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transition:\cf5 \strokec5  \cf7 \strokec7 opacity\cf5 \strokec5  \cf10 \strokec10 0.3s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .modal-content\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background:\cf5 \strokec5  \cf7 \strokec7 white\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 padding:\cf5 \strokec5  \cf10 \strokec10 2rem\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border-radius:\cf5 \strokec5  \cf10 \strokec10 0.5rem\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 max-width:\cf5 \strokec5  \cf10 \strokec10 90%\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 width:\cf5 \strokec5  \cf10 \strokec10 600px\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 max-height:\cf5 \strokec5  \cf10 \strokec10 90vh\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 overflow-y:\cf5 \strokec5  \cf7 \strokec7 auto\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 scale(\cf10 \strokec10 0.95\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transition:\cf5 \strokec5  \cf7 \strokec7 transform\cf5 \strokec5  \cf10 \strokec10 0.3s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .task-card\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 cursor:\cf5 \strokec5  \cf7 \strokec7 grab\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .unit-card-completed\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border-left:\cf5 \strokec5  \cf10 \strokec10 4px\cf5 \strokec5  \cf7 \strokec7 solid\cf5 \strokec5  #10b981\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 /* emerald-500 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #f0fdf4\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .drop-zone\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 min-height:\cf5 \strokec5  \cf10 \strokec10 80px\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transition:\cf5 \strokec5  \cf7 \strokec7 background-color\cf5 \strokec5  \cf10 \strokec10 0.2s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .drop-zone.drag-over\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #e0e7ff\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 style\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 </\cf2 \strokec2 head\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 body\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-gray-100"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf11 \strokec11 <!-- Cover Page -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "cover-page"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "h-screen w-screen bg-gradient-to-br from-gray-900 via-blue-800 to-purple-900 flex flex-col items-center justify-center text-white text-center p-4 fixed top-0 left-0 z-20"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "max-w-2xl"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 i\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "fas fa-project-diagram fa-4x mb-6 text-blue-300"\cf6 \strokec6 ></\cf2 \strokec2 i\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h1\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-4xl md:text-6xl font-bold mb-4 leading-tight tracking-wide"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12304 \u25136 \u30053  x \u25935 \u25463 \u12305 \cf6 \strokec6 <\cf2 \strokec2 br\cf6 \strokec6 >\cf5 \strokec5 \uc0\u26032 \u19990 \u20195 \u23560 \u26696 \u38936 \u34966 \cf6 \strokec6 </\cf2 \strokec2 h1\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-lg md:text-2xl text-gray-300 mb-12"\cf6 \strokec6 >\cf5 \strokec5 12\uc0\u23567 \u26178 \u35519 \u36969 \u24615 \u23560 \u26696 \u31649 \u29702 \u24341 \u23566 \u24335 \u25945 \u23416 \u31995 \u32113 \cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 button\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "enter-course-btn"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-blue-500 text-white font-bold py-3 px-10 rounded-full text-xl hover:bg-blue-600 transition-transform transform hover:scale-105 duration-300 shadow-lg"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \uc0\u36914 \u20837 \u35506 \u31243  \cf6 \strokec6 <\cf2 \strokec2 i\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "fas fa-arrow-right ml-2"\cf6 \strokec6 ></\cf2 \strokec2 i\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 button\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf11 \strokec11 <!-- Main App Structure -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "app"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "flex h-screen hidden opacity-0"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 <!-- Sidebar for Module Tabs -->\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 aside\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "sidebar"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "w-1/4 bg-white p-6 overflow-y-auto shadow-lg hidden md:block"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h1\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-xl font-bold text-blue-600 mb-6"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u35506 \u31243 \u27169 \u32068 \cf6 \strokec6 </\cf2 \strokec2 h1\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "module-tabs"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "space-y-2"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 <!-- Module tabs will be injected here -->\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 aside\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3         \cf11 \strokec11 <!-- Main Content -->\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 main\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "w-full md:w-3/4 p-6 md:p-10 overflow-y-auto"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 <!-- Header -->\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 header\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mb-8"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "flex justify-between items-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "content-title"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl font-bold text-gray-800"\cf6 \strokec6 ></\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 button\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "mobile-menu-btn"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "md:hidden p-2 rounded-md bg-gray-200"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                         \cf6 \strokec6 <\cf2 \strokec2 i\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "fas fa-bars"\cf6 \strokec6 ></\cf2 \strokec2 i\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 </\cf2 \strokec2 button\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-gray-500 mt-1"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u32317 \u23416 \u32722 \u36914 \u24230 \cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "w-full bg-gray-200 rounded-full h-2.5 mt-4"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "progress-bar"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-blue-600 h-2.5 rounded-full transition-all duration-500"\cf5 \strokec5  \cf4 \strokec4 style\cf6 \strokec6 =\cf7 \strokec7 "width: 0%"\cf6 \strokec6 ></\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 header\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3             \cf11 \strokec11 <!-- Page Content Area -->\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "page-content-area"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 <!-- Module Pages will be injected here -->\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 main\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf11 \strokec11 <!-- Modal for interactive elements -->\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "modal"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "modal-overlay hidden opacity-0"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "modal-content"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 h3\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "modal-title"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-2xl font-bold mb-4"\cf6 \strokec6 ></\cf2 \strokec2 h3\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "modal-body"\cf6 \strokec6 ></\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-right mt-6"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 button\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "modal-close-btn"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700 transition duration-300"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u23436 \u25104 \u20114 \u21205 \cf6 \strokec6 </\cf2 \strokec2 button\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf6 \strokec6 <\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     document\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'DOMContentLoaded'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 const\cf5 \strokec5  app \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 // --- DATA ---\cf5 \cb1 \strokec5 \
\cb3             currentModuleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ,\cf5 \cb1 \strokec5 \
\cb3             progress\cf8 \strokec8 :\cf5 \strokec5  \cf8 \strokec8 [],\cf5 \strokec5  \cf11 \strokec11 // Array of booleans to track completion\cf5 \cb1 \strokec5 \
\cb3             modules\cf8 \strokec8 :\cf5 \strokec5  \cf8 \strokec8 [\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 "\uc0\u27169 \u32068 \u19968 \u65306 \u36939 \u31820 \u24119 \u24132 "\cf8 \strokec8 ,\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 "\uc0\u27169 \u32068 \u20108 \u65306 \u27934 \u23519 \u20840 \u23616 "\cf8 \strokec8 ,\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 "\uc0\u27169 \u32068 \u19977 \u65306 \u20853 \u36020 \u31070 \u36895 "\cf8 \strokec8 ,\cf5 \cb1 \strokec5 \
\cb3                 \cf9 \strokec9 "\uc0\u27169 \u32068 \u22235 \u65306 \u21512 \u32780 \u28858 \u19968 "\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 ],\cf5 \cb1 \strokec5 \
\cb3             courseData\cf8 \strokec8 :\cf5 \strokec5  \cf8 \strokec8 [\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 // Module 1\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u38283 \u22580 \u65306 \u28858 \u20309 \u38656 \u35201 \u12300 \u35519 \u36969 \u24615 \u12301 \u65311 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 20\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u23403 \u23376 \u20853 \u27861 \u26680 \u24515 (\u19968 )\u65306 \u24287 \u31639 \u33287 \u20116 \u20107 \u19971 \u35336 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 60\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u21830 \u26989 \u20998 \u26512 \u26680 \u24515 \u65306 \u24478 \u21839 \u38988 \u21040 \u20729 \u20540 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 70\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u25972 \u21512 \u33287 Q&A (\u27169 \u32068 \u19968 )"\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 30\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 // Module 2\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u21069 \u24773 \u25552 \u35201 \u33287 \u26262 \u36523  (\u27169 \u32068 \u20108 )"\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 20\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u31995 \u32113 \u24605 \u32771 \u26680 \u24515 \u65306 \u30475 \u35211 \u20840 \u35980 \u30340 \u34269 \u34899 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 70\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u23403 \u23376 \u20853 \u27861 \u26680 \u24515 (\u20108 )\u65306 \u30693 \u24049 \u30693 \u24444 \u33287 \u20840 \u21213 \u31574 \u30053 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 60\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u25972 \u21512 \u33287 Q&A (\u27169 \u32068 \u20108 )"\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 30\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 // Module 3\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u21069 \u24773 \u25552 \u35201 \u33287 \u26262 \u36523  (\u27169 \u32068 \u19977 )"\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 20\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u25935 \u25463 \u24605 \u32173 \u26680 \u24515 \u65306 \u20729 \u20540 \u39493 \u21205 \u33287 \u24555 \u36895 \u36845 \u20195 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 70\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u23403 \u23376 \u20853 \u27861 \u26680 \u24515 (\u19977 )\u65306 \u20853 \u36020 \u31070 \u36895 \u33287 \u22240 \u25973 \u21046 \u21213 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 60\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u25972 \u21512 \u33287 Q&A (\u27169 \u32068 \u19977 )"\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 30\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 // Module 4\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 3\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u21069 \u24773 \u25552 \u35201 \u33287 \u32156 \u21512 \u26262 \u36523 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 20\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 3\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u32066 \u26997 \u25972 \u21512 \u26696 \u20363 \u28436 \u32244 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 80\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 3\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u25104 \u26524 \u30332 \u34920 \u33287 \u22238 \u39243 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 50\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \{\cf5 \strokec5  moduleIndex\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 3\cf8 \strokec8 ,\cf5 \strokec5  unit\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 "\uc0\u35519 \u36969 \u24615 \u38936 \u34966 \u30340 \u20462 \u29001  & \u35506 \u31243 \u32317 \u32080 "\cf8 \strokec8 ,\cf5 \strokec5  duration\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 30\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 ],\cf5 \cb1 \strokec5 \
\
\cb3             \cf11 \strokec11 // --- METHODS ---\cf5 \cb1 \strokec5 \
\cb3             init\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 progress \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 new\cf5 \strokec5  \cf14 \strokec14 Array\cf8 \strokec8 (\cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 courseData\cf8 \strokec8 .\cf5 \strokec5 length\cf8 \strokec8 ).\cf5 \strokec5 fill\cf8 \strokec8 (\cf12 \strokec12 false\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 buildModulePages\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 renderModuleTabs\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 attachEventListeners\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 showModule\cf8 \strokec8 (\cf13 \strokec13 0\cf8 \strokec8 );\cf5 \strokec5  \cf11 \strokec11 // Show first module by default\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             buildModulePages\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  pageArea \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'page-content-area'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 pageArea\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 // Clear previous content\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 modules\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 ((\cf5 \strokec5 _\cf8 \strokec8 ,\cf5 \strokec5  moduleIdx\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  modulePage \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 createElement\cf8 \strokec8 (\cf9 \strokec9 'div'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     modulePage\cf8 \strokec8 .\cf5 \strokec5 id \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `module-page-\cf8 \strokec8 $\{\cf5 \strokec5 moduleIdx\cf8 \strokec8 \}\cf9 \strokec9 `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     modulePage\cf8 \strokec8 .\cf5 \strokec5 className \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'module-page space-y-8 hidden'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     pageArea\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 modulePage\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 courseData\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 ((\cf5 \strokec5 unit\cf8 \strokec8 ,\cf5 \strokec5  unitIdx\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  parentPage \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 `module-page-\cf8 \strokec8 $\{\cf5 \strokec5 unit\cf8 \strokec8 .\cf5 \strokec5 moduleIndex\cf8 \strokec8 \}\cf9 \strokec9 `\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 parentPage\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         parentPage\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 +=\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 getUnitHtml\cf8 \strokec8 (\cf5 \strokec5 unit\cf8 \strokec8 ,\cf5 \strokec5  unitIdx\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             getUnitHtml\cf8 \strokec8 (\cf5 \strokec5 unit\cf8 \strokec8 ,\cf5 \strokec5  unitIdx\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  isCompleted \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 progress\cf8 \strokec8 [\cf5 \strokec5 unitIdx\cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  completedClass \cf8 \strokec8 =\cf5 \strokec5  isCompleted \cf8 \strokec8 ?\cf5 \strokec5  \cf9 \strokec9 'unit-card-completed'\cf5 \strokec5  \cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  checkmark \cf8 \strokec8 =\cf5 \strokec5  isCompleted \cf8 \strokec8 ?\cf5 \strokec5  \cf9 \strokec9 `<i class="fas fa-check-circle text-green-500 text-xl absolute top-4 right-4"></i>`\cf5 \strokec5  \cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 let\cf5 \strokec5  interactiveButtonHtml \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 // Assign interactive tasks to specific units\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  interactiveMap \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf13 \strokec13 0\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'menti-challenge'\cf8 \strokec8 ,\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'five-matters-check'\cf8 \strokec8 ,\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'ba-workshop'\cf8 \strokec8 ,\cf5 \strokec5  \cf13 \strokec13 5\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'causal-loop'\cf8 \strokec8 ,\cf5 \strokec5  \cf13 \strokec13 9\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'trello-sim'\cf8 \strokec8 ,\cf5 \strokec5  \cf13 \strokec13 10\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'suntzu-scenario'\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \};\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 interactiveMap\cf8 \strokec8 [\cf5 \strokec5 unitIdx\cf8 \strokec8 ])\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     interactiveButtonHtml \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `<button data-interactive="\cf8 \strokec8 $\{\cf5 \strokec5 interactiveMap\cf8 \strokec8 [\cf5 \strokec5 unitIdx\cf8 \strokec8 ]\}\cf9 \strokec9 " data-unit-index="\cf8 \strokec8 $\{\cf5 \strokec5 unitIdx\cf8 \strokec8 \}\cf9 \strokec9 " class="mt-4 bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition">\uc0\u40670 \u25105 \u38283 \u22987 \u20114 \u21205 </button>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                     <div id="unit-card-\cf8 \strokec8 $\{\cf5 \strokec5 unitIdx\cf8 \strokec8 \}\cf9 \strokec9 " class="bg-white p-8 rounded-lg shadow-md space-y-4 relative transition-all duration-300 \cf8 \strokec8 $\{\cf5 \strokec5 completedClass\cf8 \strokec8 \}\cf9 \strokec9 ">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         \cf8 \strokec8 $\{\cf5 \strokec5 checkmark\cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h3 class="text-2xl font-bold text-gray-700">\cf8 \strokec8 $\{\cf5 \strokec5 unit\cf8 \strokec8 .\cf5 \strokec5 unit\cf8 \strokec8 \}\cf9 \strokec9 </h3>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="text-sm text-gray-500"><i class="far fa-clock mr-2"></i>\uc0\u24314 \u35696 \u26178 \u38263 : \cf8 \strokec8 $\{\cf5 \strokec5 unit\cf8 \strokec8 .\cf5 \strokec5 duration\cf8 \strokec8 \}\cf9 \strokec9  \uc0\u20998 \u37912 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <div class="text-gray-600 leading-relaxed pt-2">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             \cf8 \strokec8 $\{\cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 getUnitContent\cf8 \strokec8 (\cf5 \strokec5 unitIdx\cf8 \strokec8 )\}\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         \cf8 \strokec8 $\{\cf5 \strokec5 interactiveButtonHtml\cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                     </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                 `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             getUnitContent\cf8 \strokec8 (\cf5 \strokec5 index\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 // This function provides the descriptive text for each unit.\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 switch\cf8 \strokec8 (\cf5 \strokec5 index\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `<p>\uc0\u22312 \u20170 \u26085 VUCA\u30340 \u21830 \u26989 \u29872 \u22659 \u20013 \u65292 \u12300 \u35519 \u36969 \u24615 \u12301 \u26159 \u25105 \u20497 \u25033 \u23565 \u25361 \u25136 \u30340 \u26680 \u24515 \u24605 \u32173 \u12290 \u26412 \u35506 \u31243 \u23559 \u25972 \u21512 \u23403 \u23376 \u20853 \u27861 \u12289 \u21830 \u26989 \u20998 \u26512 \u12289 \u31995 \u32113 \u24605 \u32771 \u33287 \u25935 \u25463 \u38283 \u30332 \u22235 \u22823 \u26680 \u24515 \u33021 \u21147 \u12290 </p>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `<p>\uc0\u23403 \u23376 \u20853 \u27861 \u12298 \u35336 \u31687 \u12299 \u30340 \u12300 \u20116 \u20107 \u19971 \u35336 \u12301 \u26159 \u23560 \u26696 \u38283 \u22987 \u21069 \u30340 \u35413 \u20272 \u38364 \u37749 \u12290 \u25105 \u20497 \u23559 \u20854 \u36681 \u35695 \u28858 \u29694 \u20195 \u21830 \u26989 \u30340 \u12300 \u20351 \u21629 \u12289 \u26178 \u27231 \u12289 \u36039 \u28304 \u12289 \u22296 \u38538 \u12289 \u27969 \u31243 \u12301 \u20116 \u22823 \u35201 \u32032 \u20358 \u36914 \u34892 \u23560 \u26696 \u39636 \u27298 \u12290 </p>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u19968 \u12289  \u24478 \u12300 \u32893 \u21629 \u34892 \u20107 \u12301 \u21040 \u12300 \u21109 \u36896 \u20729 \u20540 \u12301 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <blockquote class="border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         \uc0\u23560 \u26696 \u26368 \u22823 \u30340 \u22833 \u25943 \u65292 \u19981 \u26159 \u12300 \u20570 \u37679 \u20102 \u12301 \u65292 \u32780 \u26159 \u12300 \u25226 \u37679 \u30340 \u20107 \u24773 \u20570 \u24471 \u23436 \u32654 \u12301 \u12290 \u21830 \u26989 \u20998 \u26512 \u30340 \u26680 \u24515 \u65292 \u23601 \u26159 \u30906 \u20445 \u25105 \u20497 \u22312 \u21205 \u25163 \u20043 \u21069 \u65292 \u20808 \u12300 \u20570 \u23565 \u30340 \u20107 \u24773 \u12301 \u12290 \u23427 \u23559 \u25105 \u20497 \u24478 \u19968 \u20491 \u34987 \u21205 \u30340 \u12300 \u38656 \u27714 \u35352 \u37636 \u21729 \u12301 \u65292 \u36681 \u35722 \u28858 \u20027 \u21205 \u30340 \u12300 \u20729 \u20540 \u39493 \u21205 \u32773 \u12301 \u12290 \cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </blockquote>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <hr class="my-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u20108 \u12289  \u26680 \u24515 \u24037 \u20855 (\u19968 )\u65306 \u21033 \u23475 \u38364 \u20418 \u20154 \u20998 \u26512 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-4">\uc0\u12300 \u30693 \u24049 \u30693 \u24444 \u12301 \u30340 \u31532 \u19968 \u27493 \u65292 \u26159 \u30436 \u40670 \u25152 \u26377 \u33287 \u23560 \u26696 \u30456 \u38364 \u30340 \u20154 \u12290 \u35504 \u25903 \u25345 \u65311 \u35504 \u21453 \u23565 \u65311 \u35504 \u30340 \u24847 \u35211 \u26368 \u38364 \u37749 \u65311 \u21033 \u23475 \u38364 \u20418 \u20154 \u22294 \u35676 \u24171 \u21161 \u25105 \u20497 \u35672 \u21029 \u38364 \u37749 \u20154 \u29289 \u65292 \u31649 \u29702 \u20182 \u20497 \u30340 \u26399 \u26395 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <div class="p-4 bg-gray-50 rounded-lg">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <h5 class="font-semibold">\uc0\u27402 \u21147 /\u21033 \u30410 \u26041 \u26684 \u22294 </h5>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <ul class="list-disc list-inside text-sm mt-2 space-y-1">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <li><strong>\uc0\u39640 \u27402 \u21147 /\u39640 \u21033 \u30410  (\u20027 \u35201 \u31649 \u29702 \u32773  Manage Closely):</strong> \u23560 \u26696 \u30332 \u36215 \u20154 \u12290 \u38656 \u23494 \u20999 \u28317 \u36890 \u65292 \u37325 \u40670 \u31649 \u29702 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <li><strong>\uc0\u39640 \u27402 \u21147 /\u20302 \u21033 \u30410  (\u20445 \u25345 \u28415 \u24847  Keep Satisfied):</strong> \u20844 \u21496 \u39640 \u23652 \u12290 \u19981 \u38656 \u32048 \u31680 \u65292 \u20294 \u35201 \u35731 \u20182 \u20497 \u28415 \u24847 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <li><strong>\uc0\u20302 \u27402 \u21147 /\u39640 \u21033 \u30410  (\u38568 \u26178 \u21578 \u30693  Keep Informed):</strong> \u32066 \u31471 \u20351 \u29992 \u32773 \u12290 \u20182 \u20497 \u26159 \u20729 \u20540 \u30340 \u26368 \u32066 \u35009 \u21028 \u65292 \u35201 \u35731 \u20182 \u20497 \u20102 \u35299 \u36914 \u24230 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <li><strong>\uc0\u20302 \u27402 \u21147 /\u20302 \u21033 \u30410  (\u33457 \u26368 \u23569 \u21147 \u27683 \u30435 \u25511  Monitor):</strong> \u20854 \u20182 \u37096 \u38272 \u12290 \u20677 \u38656 \u22522 \u26412 \u30435 \u25511 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <hr class="my-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u19977 \u12289  \u26680 \u24515 \u24037 \u20855 (\u20108 )\u65306 \u21839 \u38988 \u26681 \u28304 \u20998 \u26512  (5 Whys)</h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-4">\uc0\u35377 \u22810 \u38656 \u27714 \u37117 \u21482 \u26159 \u21839 \u38988 \u30340 \u12300 \u30151 \u29376 \u12301 \u12290 5 Whys \u24037 \u20855 \u20687 \u19968 \u25226 \u25163 \u34899 \u20992 \u65292 \u24171 \u21161 \u25105 \u20497 \u23652 \u23652 \u21085 \u38283 \u34920 \u35937 \u65292 \u25214 \u21040 \u30495 \u27491 \u38656 \u35201 \u35299 \u27770 \u30340 \u12300 \u30149 \u26681 \u12301 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <blockquote class="border-l-4 border-blue-300 pl-4 italic text-gray-700 bg-blue-50 p-4 rounded-r-lg">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <strong>\uc0\u26696 \u20363 \u65306 </strong>\u23458 \u25142 \u25265 \u24616 \u12300 \u22806 \u36865 \u22826 \u24930 \u12301 \u12290 <br>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             1. \uc0\u28858 \u20160 \u40636 \u65311  -> \u21253 \u35065 \u22826 \u26202 \u38626 \u38283 \u20489 \u24235 \u12290 <br>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             2. \uc0\u28858 \u20160 \u40636 \u65311  -> \u21253 \u35037 \u27969 \u31243 \u22826 \u33457 \u26178 \u38291 \u12290 <br>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             3. \uc0\u28858 \u20160 \u40636 \u65311  -> \u20154 \u21729 \u35201 \u25163 \u21205 \u26597 \u25214 \u21830 \u21697 \u20301 \u32622 \u12290 <br>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             4. \uc0\u28858 \u20160 \u40636 \u65311  -> \u26032 \u24235 \u23384 \u31995 \u32113 \u27794 \u21644 \u21253 \u35037 \u21934 \u25972 \u21512 \u12290 <br>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             5. \uc0\u28858 \u20160 \u40636 \u65311  -> \u28858 \u20102 \u30465 \u26178 \u38291 \u65292 \u19978 \u27425 \u23560 \u26696 \u25226 \u31995 \u32113 \u25972 \u21512 \u21151 \u33021 \u30733 \u25481 \u20102 \u12290 <br>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <strong>\uc0\u32080 \u35542 \u65306 </strong>\u30495 \u27491 \u30340 \u21839 \u38988 \u19981 \u26159 \u12300 \u21253 \u35037 \u24930 \u12301 \u65292 \u32780 \u26159 \u12300 \u31995 \u32113 \u27794 \u25972 \u21512 \u12301 \u12290 \u35299 \u27770 \u26041 \u26696 \u25130 \u28982 \u19981 \u21516 \u65281 \cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </blockquote>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <hr class="my-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u22235 \u12289  \u26680 \u24515 \u24037 \u20855 (\u19977 )\u65306 \u20729 \u20540 \u20027 \u24373 \u22294 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-4">\uc0\u36889 \u26159 \u30906 \u20445 \u12300 \u20379 \u38656 \u23186 \u21512 \u12301 \u30340 \u32066 \u26997 \u31070 \u22120 \u12290 \u23427 \u24375 \u21147 \u22320 \u23559 \u12300 \u25105 \u20497 \u24819 \u20570 \u30340 \u29986 \u21697 \u21151 \u33021 \u12301 \u33287 \u12300 \u23458 \u25142 \u30495 \u27491 \u30340 \u38656 \u27714 \u12301 \u36899 \u32080 \u36215 \u20358 \u65292 \u30906 \u20445 \u25105 \u20497 \u19981 \u26159 \u22312 \u33258 \u35498 \u33258 \u35441 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <div class="flex flex-col md:flex-row gap-4">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="w-full md:w-1/2 p-4 bg-green-50 rounded-lg border border-green-200">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <h5 class="font-semibold text-green-800"><i class="fas fa-gift mr-2"></i>\uc0\u20729 \u20540 \u20027 \u24373  (\u25105 \u20497 \u25552 \u20379 \u20160 \u40636 )</h5>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <ul class="list-disc list-inside text-sm mt-2 space-y-1">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u29986 \u21697 \u33287 \u26381 \u21209 \u65306 </strong>\u25105 \u20497 \u20855 \u39636 \u25552 \u20379 \u30340 \u21151 \u33021 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u30171 \u40670 \u35299 \u26041 \u65306 </strong>\u36889 \u20123 \u21151 \u33021 \u22914 \u20309 \u35299 \u27770 \u23458 \u25142 \u30340 \u29033 \u24817 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u29554 \u30410 \u21109 \u36896 \u65306 </strong>\u36889 \u20123 \u21151 \u33021 \u22914 \u20309 \u28858 \u23458 \u25142 \u21109 \u36896 \u20182 \u20497 \u24819 \u35201 \u30340 \u24555 \u27138 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="w-full md:w-1/2 p-4 bg-yellow-50 rounded-lg border border-yellow-200">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <h5 class="font-semibold text-yellow-800"><i class="fas fa-user-circle mr-2"></i>\uc0\u39015 \u23458 \u36650 \u24275  (\u20182 \u20497 \u26159 \u35504 )</h5>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <ul class="list-disc list-inside text-sm mt-2 space-y-1">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u39015 \u23458 \u30340 \u20219 \u21209 \u65306 </strong>\u20182 \u20497 \u24819 \u23436 \u25104 \u20160 \u40636 \u20107 \u65311 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u30171 \u40670 \u65306 </strong>\u36942 \u31243 \u20013 \u20182 \u20497 \u26377 \u21738 \u20123 \u29033 \u24817 \u65311 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u29554 \u30410 \u65306 </strong>\u20182 \u20497 \u24819 \u24471 \u21040 \u20160 \u40636 \u22909 \u34389 \u65311 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                     `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 3\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u19968 \u12289  \u27169 \u32068 \u22238 \u39015 \u65306 \u24478 \u12300 \u28858 \u20309 \u12301 \u21040 \u12300 \u22914 \u20309 \u12301 \u30340 \u24605 \u32771 \u37832 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-6">\uc0\u22312 \u26412 \u27169 \u32068 \u20013 \u65292 \u25105 \u20497 \u24314 \u31435 \u20102 \u19968 \u22871 \u23436 \u25972 \u30340 \u23560 \u26696 \u21855 \u21205 \u24605 \u32771 \u26694 \u26550 \u12290 \u35731 \u25105 \u20497 \u22238 \u39015 \u19968 \u19979 \u36889 \u26781 \u36335 \u24465 \u65306 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <ul class="space-y-4">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li class="flex items-start">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <i class="fas fa-question-circle text-red-500 fa-fw mt-1 mr-3"></i>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div><strong class="text-red-500">\uc0\u28858 \u20309 \u32780 \u25136  (Why)</strong><br>\u25105 \u20497 \u24478 \u12300 \u28858 \u20309 \u38656 \u35201 \u35519 \u36969 \u24615 \u12301 \u20986 \u30332 \u65292 \u29702 \u35299 \u21040 \u22312 VUCA\u26178 \u20195 \u65292 \u20725 \u21270 \u30340 \u35336 \u30059 \u26159 \u22833 \u25943 \u30340 \u26681 \u28304 \u12290 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li class="flex items-start">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <i class="fas fa-bullseye text-green-500 fa-fw mt-1 mr-3"></i>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div><strong class="text-green-500">\uc0\u25171 \u20160 \u40636 \u38774  (What)</strong><br>\u25509 \u33879 \u65292 \u36879 \u36942 \u12300 \u21830 \u26989 \u20998 \u26512 \u12301 \u65292 \u25105 \u20497 \u23416 \u26371 \u20102 \u22914 \u20309 \u23450 \u32681 \u30495 \u27491 \u30340 \u21839 \u38988 \u65292 \u25214 \u21040 \u23458 \u25142 \u30340 \u30171 \u40670 \u65292 \u24478 \u32780 \u30906 \u31435 \u23560 \u26696 \u35201 \u21109 \u36896 \u30340 \u12300 \u26680 \u24515 \u20729 \u20540 \u12301 \u12290 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li class="flex items-start">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <i class="fas fa-chess-king text-blue-500 fa-fw mt-1 mr-3"></i>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div><strong class="text-blue-500">\uc0\u22914 \u20309 \u20296 \u23616  (How)</strong><br>\u26368 \u24460 \u65292 \u36939 \u29992 \u12300 \u23403 \u23376 \u20853 \u27861 \u30340 \u20116 \u20107 \u19971 \u35336 \u12301 \u65292 \u25105 \u20497 \u23565 \u23560 \u26696 \u30340 \u12300 \u36947 \u12289 \u22825 \u12289 \u22320 \u12289 \u23559 \u12289 \u27861 \u12301 \u36914 \u34892 \u20102 \u20840 \u38754 \u30340 \u25136 \u30053 \u35413 \u20272 \u65292 \u20063 \u23601 \u26159 \u12300 \u24287 \u31639 \u12301 \u12290 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </ul>\cf5 \cb1 \strokec5 \
\
\cf9 \cb3 \strokec9                         <hr class="my-8">\cf5 \cb1 \strokec5 \
\
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u20108 \u12289  \u27010 \u24565 \u25972 \u21512 \u65306 \u25136 \u30053 \u30340 \u40643 \u37329 \u19977 \u35282 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-6">\uc0\u21830 \u26989 \u20998 \u26512 \u33287 \u23403 \u23376 \u20853 \u27861 \u65292 \u20849 \u21516 \u27083 \u25104 \u20102 \u23560 \u26696 \u21855 \u21205 \u21069 \u30340 \u12300 \u25136 \u30053 \u40643 \u37329 \u19977 \u35282 \u12301 \u12290 \u23427 \u20497 \u30340 \u38364 \u20418 \u22914 \u19979 \u22294 \u25152 \u31034 \u65306 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <div class="w-full bg-gray-50 p-6 rounded-lg border text-center">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="text-lg font-bold text-purple-600 mb-4">\uc0\u35519 \u36969 \u24615 \u24605 \u32173  (Adaptive Mindset)</div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="flex justify-center items-center">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="text-center">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <div class="p-3 bg-green-100 text-green-800 rounded-full font-semibold">\uc0\u21830 \u26989 \u20998 \u26512 <br>(\u23450 \u32681 \u20729 \u20540 )</div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="text-gray-400 mx-4 text-2xl font-light">&rarr;</div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="text-center">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <div class="p-3 bg-blue-100 text-blue-800 rounded-full font-semibold">\uc0\u23403 \u23376 \u20853 \u27861 <br>(\u35413 \u20272 \u21487 \u34892 \u24615 )</div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="text-gray-400 mx-4 text-2xl font-light">&rarr;</div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="text-center">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <div class="p-3 bg-indigo-100 text-indigo-800 rounded-full font-semibold">\uc0\u21021 \u27493 \u23560 \u26696 <br>(\u24418 \u25104 \u26041 \u21521 )</div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="text-sm text-gray-500 mt-4">\uc0\u25105 \u20497 \u29992 \u12300 \u21830 \u26989 \u20998 \u26512 \u12301 \u25214 \u21040 \u26368 \u26377 \u20729 \u20540 \u30340 \u23665 \u38957 \u65292 \u20877 \u29992 \u12300 \u23403 \u23376 \u20853 \u27861 \u12301 \u35215 \u21123 \u25915 \u19978 \u36889 \u20491 \u23665 \u38957 \u30340 \u26368 \u20339 \u36335 \u24465 \u65292 \u32780 \u12300 \u35519 \u36969 \u24615 \u24605 \u32173 \u12301 \u21063 \u26159 \u25105 \u20497 \u22312 \u22320 \u22294 \u19978 \u38568 \u26178 \u28310 \u20633 \u22909 \u30340 \u26367 \u20195 \u36335 \u32218 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </div>\cf5 \cb1 \strokec5 \
\
\cf9 \cb3 \strokec9                         <hr class="my-8">\cf5 \cb1 \strokec5 \
\
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u19977 \u12289  \u26696 \u20363 \u30740 \u35342 \u65306 \u20581 \u24247 \u39184 \u30418 \u37197 \u36865 \u26381 \u21209 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-4">\uc0\u20551 \u35373 \u65292 \u19968 \u23478 \u39184 \u39154 \u20844 \u21496 \u25552 \u20986 \u19968 \u20491 \u38656 \u27714 \u65306 \u12300 \u25105 \u20497 \u35201 \u25512 \u20986 \u19968 \u20491 \u20581 \u24247 \u39184 \u30418 \u30340 App\u12290 \u12301 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <ul class="list-disc list-inside space-y-3">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u27794 \u26377 BA\u33287 \u20853 \u27861 \u65306 </strong>\u30452 \u25509 \u25214 \u24037 \u31243 \u24107 \u65292 \u33457 \u19977 \u20491 \u26376 \u38283 \u30332 App\u65292 \u21151 \u33021 \u21253 \u21547 \u40670 \u39184 \u12289 \u20184 \u27454 \u12289 \u37197 \u36865 \u12290 \u19978 \u32218 \u24460 \u30332 \u29694 \u65292 \u35330 \u21934 \u24456 \u23569 \u65292 \u22240 \u28858 \u24066 \u22580 \u19978 \u31478 \u29229 \u28608 \u28872 \u65292 \u27794 \u26377 \u29305 \u33394 \u12290  &rarr; <span class="text-red-600 font-semibold">\u22833 \u25943 </span></li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u36939 \u29992 BA\u33287 \u20853 \u27861 \u65306 </strong>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <ol class="list-decimal list-inside ml-4 mt-2 space-y-2 text-gray-700">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u21830 \u26989 \u20998 \u26512 \u65306 </strong>\u35370 \u35527 \u24460 \u30332 \u29694 \u65292 \u30446 \u27161 \u23458 \u32676 \u19981 \u26159 \u26222 \u36890 \u19978 \u29677 \u26063 \u65292 \u32780 \u26159 \u12300 \u25812 \u24515 \u23401 \u23376 \u29151 \u39178 \u30340 \u32887 \u26989 \u23229 \u23229 \u12301 \u12290 \u22905 \u20497 \u30340 \u30171 \u40670 \u19981 \u26159 \u12300 \u27794 \u26481 \u35199 \u21507 \u12301 \u65292 \u32780 \u26159 \u12300 \u27794 \u26178 \u38291 \u28310 \u20633 \u20581 \u24247 \u12289 \u23433 \u24515 \u30340 \u20818 \u31461 \u39184 \u12301 \u12290 \u26680 \u24515 \u20729 \u20540 \u24478 \u12300 \u26041 \u20415 \u12301 \u36681 \u28858 \u12300 \u23433 \u24515 \u12301 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u23403 \u23376 \u20853 \u27861  (\u24287 \u31639 )\u65306 </strong>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                         <ul class="list-disc list-inside ml-4 mt-1">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                             <li><strong>\uc0\u36947 \u65306 </strong>\u31526 \u21512 \u20844 \u21496 \u12300 \u23432 \u35703 \u23478 \u24237 \u20581 \u24247 \u12301 \u30340 \u20351 \u21629 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                             <li><strong>\uc0\u22320 \u65306 </strong>\u30332 \u29694 \u20844 \u21496 \u27794 \u26377 \u33258 \u24049 \u30340 \u22806 \u36865 \u36554 \u38538  (\u24369 \u40670 )\u65292 \u20294 \u33287 \u35377 \u22810 \u31038 \u21312 \u31649 \u29702 \u22996 \u21729 \u26371 \u26377 \u33391 \u22909 \u38364 \u20418  (\u20778 \u21218 )\u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                             <li><strong>\uc0\u23559 \u65306 </strong>\u24282 \u24107 \u22296 \u38538 \u25797 \u38263 \u25104 \u20154 \u39184 \u65292 \u20294 \u38656 \u35201 \u20818 \u31461 \u29151 \u39178 \u24107  (\u38656 \u35036 \u24375 )\u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                         </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <li><strong>\uc0\u25972 \u21512 \u32080 \u35542 \u65306 </strong>\u23560 \u26696 \u26041 \u21521 \u24478 \u12300 \u38283 \u30332 \u19968 \u20491 App\u12301 \u65292 \u35722 \u28858 \u12300 \u33287 \u31038 \u21312 \u21512 \u20316 \u65292 \u25512 \u20986 \u20027 \u25171 \u12302 \u20818 \u31461 \u29151 \u39178 \u24107 \u35373 \u35336 \u12303 \u30340 \u31038 \u21312 \u22296 \u36092 \u39184 \u30418 \u26381 \u21209 \u65292 \u20808 \u24478 3\u20491 \u31038 \u21312 \u35430 \u40670 \u12301 \u12290 \u36889 \u26159 \u19968 \u20491 \u26356 \u31934 \u28310 \u12289 \u39080 \u38570 \u26356 \u20302 \u30340 \u21855 \u21205 \u31574 \u30053 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </ol>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         \cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <hr class="my-8">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-2">\uc0\u22235 \u12289  \u38283 \u25918 \u35342 \u35542  (Q&A)</h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p>\uc0\u29694 \u22312 \u65292 \u35731 \u25105 \u20497 \u23559 \u36889 \u20123 \u27010 \u24565 \u36899 \u32080 \u21040 \u24744 \u30340 \u23526 \u38555 \u24037 \u20316 \u20013 \u12290 \u35531 \u24605 \u32771 \u65306 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <ul class="list-question list-inside space-y-2 mt-4 text-indigo-700">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><i class="fas fa-question-circle fa-fw mr-2"></i>\uc0\u22312 \u24744 \u36942 \u21435 \u30340 \u23560 \u26696 \u20013 \u65292 \u26159 \u21542 \u26366 \u26377 \u36942 \u12300 \u25226 \u37679 \u30340 \u20107 \u24773 \u20570 \u24471 \u24456 \u22909 \u12301 \u30340 \u32147 \u39511 \u65311 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><i class="fas fa-question-circle fa-fw mr-2"></i>\uc0\u22312 \u21855 \u21205 \u23560 \u26696 \u21069 \u65292 \u24744 \u30340 \u22296 \u38538 \u33457 \u20102 \u22810 \u23569 \u26178 \u38291 \u36914 \u34892 \u12300 \u24287 \u31639 \u12301 \u33287 \u12300 \u20729 \u20540 \u23450 \u32681 \u12301 \u65311 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><i class="fas fa-question-circle fa-fw mr-2"></i>\uc0\u20170 \u22825 \u23416 \u21040 \u30340 \u24037 \u20855 \u65292 \u21738 \u19968 \u20491 \u23565 \u24744 \u26410 \u20358 \u30340 \u19979 \u19968 \u20491 \u23560 \u26696 \u26368 \u26377 \u24171 \u21161 \u65311 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                     `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 5\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `<p>\uc0\u31995 \u32113 \u24605 \u32771 \u24171 \u21161 \u25105 \u20497 \u30475 \u35211 \u21839 \u38988 \u34920 \u35937 \u20043 \u19979 \u30340 \u12300 \u32080 \u27083 \u12301 \u33287 \u12300 \u24515 \u26234 \u27169 \u24335 \u12301 \u12290 \u25105 \u20497 \u23559 \u29992 \u20912 \u23665 \u27169 \u22411 \u33287 \u22240 \u26524 \u22238 \u39243 \u22294 \u20358 \u20998 \u26512 \u12300 \u23560 \u26696 \u26178 \u31243 \u28858 \u20309 \u32317 \u26159 \u24310 \u35492 \u65311 \u12301 \u36889 \u20491 \u32147 \u20856 \u21839 \u38988 \u12290 </p>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 9\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `<p>\uc0\u25935 \u25463 \u30340 \u26680 \u24515 \u26159 \u20729 \u20540 \u39493 \u21205 \u33287 \u24555 \u36895 \u36845 \u20195 \u12290 \u25105 \u20497 \u23559 \u27169 \u25836 Scrum\u26694 \u26550 \u20013 \u30340 \u29986 \u21697 \u24453 \u36774 \u28165 \u21934 \u24314 \u31435 \u33287 \u25490 \u24207 \u36942 \u31243 \u65292 \u39636 \u39511 \u22914 \u20309 \u32858 \u28966 \u26044 \u26368 \u39640 \u20729 \u20540 \u30340 \u21151 \u33021 \u12290 </p>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf13 \strokec13 10\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u19968 \u12289  \u38283 \u22580 \u65306 \u24478 \u12300 \u25935 \u25463 \u12301 \u22238 \u21040 \u12300 \u20853 \u27861 \u12301 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <blockquote class="border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         \uc0\u12300 \u22312 \u19978 \u19968 \u21934 \u20803 \u65292 \u25105 \u20497 \u23416 \u32722 \u20102 \u25935 \u25463 \u24605 \u32173 \u30340 \u26680 \u24515 \u65306 \u20729 \u20540 \u39493 \u21205 \u33287 \u24555 \u36895 \u36845 \u20195 ...\u26412 \u21934 \u20803 \u65292 \u25105 \u20497 \u23559 \u32858 \u28966 \u20841 \u20491 \u26680 \u24515 \u27010 \u24565 \u65306 \u12302 \u20853 \u36020 \u31070 \u36895 \u12303 \u33287 \u12302 \u22240 \u25973 \u21046 \u21213 \u12303 \u65292 \u30475 \u30475 \u23427 \u20497 \u22914 \u20309 \u33287 \u25935 \u25463 \u30340 \u12302 \u36895 \u24230 \u12303 \u21644 \u12302 \u36969 \u25033 \u24615 \u12303 \u23436 \u32654 \u22865 \u21512 \u12290 \u12301 \cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </blockquote>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <hr class="my-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u20108 \u12289  \u26680 \u24515 \u27010 \u24565 (\u19968 )\u65306 \u20854 \u30142 \u22914 \u39080  \'97 \u36895 \u24230 \u30340 \u20729 \u20540 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-4">\uc0\u23559 \u23403 \u23376 \u20853 \u27861 \u23565 \u12300 \u36895 \u24230 \u12301 \u30340 \u35201 \u27714 \u65292 \u33287 \u25935 \u25463 \u30340 \u12300 \u30701 \u36913 \u26399 \u36845 \u20195 \u12301 \u36914 \u34892 \u36899 \u32080 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <div class="space-y-4 mb-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="p-4 bg-gray-50 rounded-lg"><h5 class="font-semibold">\uc0\u12298 \u20316 \u25136 \u31687 \u12299 \u65306 \u12300 \u20853 \u36020 \u21213 \u65292 \u19981 \u36020 \u20037 \u12290 \u12301 </h5><p class="text-sm mt-1"><strong>\u23560 \u26696 \u36681 \u35695 \u65306 </strong>\u19968 \u20491 \u23560 \u26696 \u25302 \u24471 \u36234 \u20037 \u65292 \u25104 \u26412 \u36234 \u39640 \u12289 \u39080 \u38570 \u36234 \u22823 \u12289 \u22296 \u38538 \u22763 \u27683 \u36234 \u20302 \u33853 \u65292 \u26356 \u21487 \u33021 \u37679 \u22833 \u24066 \u22580 \u33391 \u27231 \u12290 <strong>\u36895 \u24230 \u26412 \u36523 \u23601 \u26159 \u19968 \u31278 \u31478 \u29229 \u20778 \u21218 \u12290 </strong></p></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="p-4 bg-gray-50 rounded-lg"><h5 class="font-semibold">\uc0\u12298 \u20061 \u22320 \u31687 \u12299 \u65306 \u12300 \u20853 \u20043 \u24773 \u20027 \u36895 \u12290 \u12301 </h5><p class="text-sm mt-1"><strong>\u23560 \u26696 \u36681 \u35695 \u65306 </strong>\u24555 \u36895 \u34892 \u21205 \u33021 \u35731 \u25105 \u20497 \u25654 \u20308 \u20808 \u27231 \u65292 \u22312 \u31478 \u29229 \u23565 \u25163 \u36996 \u22312 \u35215 \u21123 \u26178 \u65292 \u25105 \u20497 \u24050 \u32147 \u22312 \u24066 \u22580 \u19978 \u23416 \u32722 \u21644 \u20462 \u27491 \u12290 </p></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h5 class="font-semibold mb-2">\uc0\u33287 \u25935 \u25463 \u24605 \u32173 \u30340 \u36899 \u32080 \u65306 </h5>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <ul class="list-disc list-inside space-y-2 mb-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u30701 \u36913 \u26399 \u36845 \u20195  (Sprint)\u65306 </strong>\u23559 \u22823 \u22411 \u23560 \u26696 \u20999 \u20998 \u28858 \u30701 \u30340 \u12300 \u34909 \u21050 \u26399 \u12301 \u65292 \u26159 \u12300 \u20853 \u36020 \u31070 \u36895 \u12301 \u30340 \u20855 \u39636 \u23526 \u36368 \u12290 \u20659 \u32113 \u38283 \u30332 \u20687 \u36896 \u24040 \u36650 \u65292 \u25935 \u25463 \u21063 \u20687 \u24555 \u33351 \u33382 \u38538 \u65292 \u33021 \u24555 \u36895 \u20986 \u21205 \u20006 \u35519 \u25972 \u33322 \u21521 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u26368 \u23567 \u21487 \u34892 \u24615 \u29986 \u21697  (MVP)\u65306 </strong>\u20808 \u29992 \u26680 \u24515 \u21151 \u33021 \u24555 \u36895 \u20570 \u20986 \u21487 \u29992 \u29256 \u26412 \u25237 \u20837 \u24066 \u22580 \u39511 \u35657 \u65292 \u26159 \u12300 \u20853 \u36020 \u21213 \u12301 \u30340 \u39636 \u29694 \'97\'97\u20808 \u27714 \u21462 \u23567 \u35215 \u27169 \u30340 \u21213 \u21033 \u65292 \u32780 \u38750 \u36953 \u36953 \u28961 \u26399 \u30340 \u22823 \u21213 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <blockquote class="border-l-4 border-blue-300 pl-4 italic text-gray-700 bg-blue-50 p-4 rounded-r-lg"><strong>\uc0\u26696 \u20363 \u25925 \u20107 \u65306 </strong> Instagram \u26368 \u21021 \u21151 \u33021 \u35079 \u38620 \u65292 \u20294 \u21109 \u36774 \u20154 \u30332 \u29694 \u29992 \u25142 \u21482 \u24859 \u29992 \u12300 \u29031 \u29255 \u28670 \u37857 \u12301 \u12290 \u20182 \u20497 \u26524 \u26039 \u30733 \u25481 90%\u21151 \u33021 \u65292 \u24555 \u36895 \u25512 \u20986 \u26032 \u29256 \u26412 \u65292 \u36889 \u25165 \u22823 \u29554 \u25104 \u21151 \u12290 \u36889 \u23601 \u26159 \u12300 \u20853 \u36020 \u31070 \u36895 \u12301 \u65292 \u24555 \u36895 \u30332 \u29694 \u20729 \u20540 \u65292 \u24555 \u36895 \u36681 \u21521 \u12290 </blockquote>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <hr class="my-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h4 class="text-xl font-bold text-gray-800 mb-4">\uc0\u19977 \u12289  \u26680 \u24515 \u27010 \u24565 (\u20108 )\u65306 \u22240 \u25973 \u32780 \u21046 \u21213  \'97 \u36969 \u25033 \u30340 \u21147 \u37327 </h4>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <p class="mb-4">\uc0\u23559 \u23403 \u23376 \u20853 \u27861 \u12300 \u26681 \u25818 \u25973 \u24773 \u35722 \u21270 \u35519 \u25972 \u31574 \u30053 \u12301 \u30340 \u24605 \u24819 \u65292 \u33287 \u25935 \u25463 \u30340 \u12300 \u22238 \u39243 \u33287 \u35519 \u25972 \u27231 \u21046 \u12301 \u36914 \u34892 \u36899 \u32080 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <div class="space-y-4 mb-6">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="p-4 bg-gray-50 rounded-lg"><h5 class="font-semibold">\uc0\u12298 \u34395 \u23526 \u31687 \u12299 \u65306 \u12300 \u22827 \u20853 \u24418 \u35937 \u27700 ...\u36991 \u23526 \u32780 \u25802 \u34395 \u12290 \u12301 </h5><p class="text-sm mt-1"><strong>\u23560 \u26696 \u36681 \u35695 \u65306 </strong>\u23560 \u26696 \u30340 \u12300 \u24418 \u12301 \u19981 \u26159 \u19968 \u25104 \u19981 \u35722 \u30340 \u12290 \u25105 \u20497 \u24517 \u38920 \u20687 \u27700 \u19968 \u27171 \u65292 \u26681 \u25818 \u24066 \u22580 \u30340 \u22238 \u39243 \u65292 \u36991 \u38283 \u27794 \u26377 \u20729 \u20540 \u30340 \u26041 \u21521 \u65292 \u21435 \u25915 \u25802 \u29992 \u25142 \u30495 \u27491 \u38656 \u35201 \u12289 \u33021 \u21109 \u36896 \u20729 \u20540 \u30340 \u30171 \u40670 \u12290 </p></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="p-4 bg-gray-50 rounded-lg"><h5 class="font-semibold">\uc0\u12298 \u34395 \u23526 \u31687 \u12299 \u65306 \u12300 \u25925 \u20853 \u28961 \u24120 \u21218 \u65292 \u27700 \u28961 \u24120 \u24418 ...\u33021 \u22240 \u25973 \u35722 \u21270 \u32780 \u21462 \u21213 \u32773 \u65292 \u35586 \u20043 \u31070 \u12290 \u12301 </h5><p class="text-sm mt-1"><strong>\u23560 \u26696 \u36681 \u35695 \u65306 </strong><strong>\u35336 \u30059 \u27704 \u36960 \u36245 \u19981 \u19978 \u35722 \u21270 \u12290 </strong>\u25104 \u21151 \u30340 \u23560 \u26696 \u38936 \u23566 \u32773 \u65292 \u26159 \u33021 \u25793 \u25265 \u35722 \u21270 \u65292 \u20006 \u21033 \u29992 \u35722 \u21270 \u20358 \u21109 \u36896 \u21213 \u21033 \u30340 \u20154 \u12290 </p></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <h5 class="font-semibold mb-2">\uc0\u33287 \u25935 \u25463 \u24605 \u32173 \u30340 \u36899 \u32080 \u65306 </h5>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         <ul class="list-disc list-inside space-y-2">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u27599 \u26085 \u31449 \u31435 \u26371 \u35696 \u65306 </strong>\u27599 \u26085 \u30340 \u12300 \u36557 \u24773 \u21295 \u22577 \u12301 \u65292 \u21363 \u26178 \u30332 \u29694 \u21839 \u38988 \u65292 \u24555 \u36895 \u35519 \u25972 \u30070 \u26085 \u25136 \u34899 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u34909 \u21050 \u23529 \u26597 \u26371 \u35696 \u65306 </strong>\u25226 \u12300 \u25136 \u26524 \u12301 \u25343 \u20986 \u20358 \u38754 \u23565 \u12300 \u24066 \u22580 \u12301 \u30340 \u27298 \u39511 \u65292 \u26681 \u25818 \u22238 \u39243 \u35519 \u25972 \u24460 \u32396 \u30340 \u12300 \u20316 \u25136 \u35336 \u30059 \u12301 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <li><strong>\uc0\u34909 \u21050 \u22238 \u39015 \u26371 \u35696 \u65306 </strong>\u22296 \u38538 \u30340 \u12300 \u33258 \u30465 \u12301 \u65292 \u19981 \u26039 \u20778 \u21270 \u25105 \u26041 \u30340 \u20316 \u25136 \u27969 \u31243 \u33287 \u33021 \u21147 \u65292 \u20197 \u26356 \u22909 \u22320 \u12300 \u22240 \u25973 \u35722 \u21270 \u12301 \u12290 </li>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         </ul>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                     `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 default\cf8 \strokec8 :\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf9 \strokec9 `<p>\uc0\u27492 \u34389 \u23559 \u25918 \u32622 \u35443 \u32048 \u30340 \u25945 \u23416 \u26448 \u26009 \u12289 \u26696 \u20363 \u20998 \u26512 \u33287 \u22294 \u34920 \u12290 \u65288 \u27492 \u28858 \u31034 \u31684 \u20839 \u23481 \u65289 </p>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             renderModuleTabs\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  tabsContainer \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'module-tabs'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 tabsContainer\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 modules\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 ((\cf5 \strokec5 moduleName\cf8 \strokec8 ,\cf5 \strokec5  index\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  tab \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 createElement\cf8 \strokec8 (\cf9 \strokec9 'div'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     tab\cf8 \strokec8 .\cf5 \strokec5 className \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'module-tab p-3 rounded-md text-gray-700'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     tab\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  moduleName\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     tab\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 index \cf8 \strokec8 =\cf5 \strokec5  index\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 index \cf8 \strokec8 ===\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 currentModuleIndex\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         tab\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'module-tab-active'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                     tabsContainer\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 tab\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             showModule\cf8 \strokec8 (\cf5 \strokec5 index\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 currentModuleIndex \cf8 \strokec8 =\cf5 \strokec5  index\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 querySelectorAll\cf8 \strokec8 (\cf9 \strokec9 '.module-page'\cf8 \strokec8 ).\cf5 \strokec5 forEach\cf8 \strokec8 (\cf5 \strokec5 page \cf8 \strokec8 =>\cf5 \strokec5  page\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 ));\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  activePage \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 `module-page-\cf8 \strokec8 $\{\cf5 \strokec5 index\cf8 \strokec8 \}\cf9 \strokec9 `\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 activePage\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     activePage\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'content-title'\cf8 \strokec8 ).\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 modules\cf8 \strokec8 [\cf5 \strokec5 index\cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 renderModuleTabs\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             updateProgress\cf8 \strokec8 (\cf5 \strokec5 unitIndex\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 progress\cf8 \strokec8 [\cf5 \strokec5 unitIndex\cf8 \strokec8 ])\cf5 \strokec5  \cf12 \strokec12 return\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 // Already completed\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 progress\cf8 \strokec8 [\cf5 \strokec5 unitIndex\cf8 \strokec8 ]\cf5 \strokec5  \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 true\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cb1 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  completedCount \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 progress\cf8 \strokec8 .\cf5 \strokec5 filter\cf8 \strokec8 (\cf14 \strokec14 Boolean\cf8 \strokec8 ).\cf5 \strokec5 length\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  totalCount \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 courseData\cf8 \strokec8 .\cf5 \strokec5 length\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  percentage \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 completedCount \cf8 \strokec8 /\cf5 \strokec5  totalCount\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 *\cf5 \strokec5  \cf13 \strokec13 100\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'progress-bar'\cf8 \strokec8 ).\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 width \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf8 \strokec8 $\{\cf5 \strokec5 percentage\cf8 \strokec8 \}\cf9 \strokec9 %`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  unitCard \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 `unit-card-\cf8 \strokec8 $\{\cf5 \strokec5 unitIndex\cf8 \strokec8 \}\cf9 \strokec9 `\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 unitCard \cf8 \strokec8 &&\cf5 \strokec5  \cf8 \strokec8 !\cf5 \strokec5 unitCard\cf8 \strokec8 .\cf5 \strokec5 querySelector\cf8 \strokec8 (\cf9 \strokec9 '.fa-check-circle'\cf8 \strokec8 ))\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     unitCard\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'unit-card-completed'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     unitCard\cf8 \strokec8 .\cf5 \strokec5 insertAdjacentHTML\cf8 \strokec8 (\cf9 \strokec9 'afterbegin'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 `<i class="fas fa-check-circle text-green-500 text-xl absolute top-4 right-4"></i>`\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             attachEventListeners\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'enter-course-btn'\cf8 \strokec8 ).\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  coverPage \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'cover-page'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  appContainer \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'app'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     coverPage\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'transition-opacity'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'duration-700'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'ease-in-out'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'opacity-0'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     setTimeout\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         coverPage\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         appContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         setTimeout\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  appContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'opacity-0'\cf8 \strokec8 ),\cf5 \strokec5  \cf13 \strokec13 50\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \},\cf5 \strokec5  \cf13 \strokec13 700\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'module-tabs'\cf8 \strokec8 ).\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 e\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  tab \cf8 \strokec8 =\cf5 \strokec5  e\cf8 \strokec8 .\cf5 \strokec5 target\cf8 \strokec8 .\cf5 \strokec5 closest\cf8 \strokec8 (\cf9 \strokec9 '.module-tab'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 tab \cf8 \strokec8 &&\cf5 \strokec5  tab\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 index\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 showModule\cf8 \strokec8 (\cf5 \strokec5 parseInt\cf8 \strokec8 (\cf5 \strokec5 tab\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 index\cf8 \strokec8 ));\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'page-content-area'\cf8 \strokec8 ).\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 e\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  interactiveBtn \cf8 \strokec8 =\cf5 \strokec5  e\cf8 \strokec8 .\cf5 \strokec5 target\cf8 \strokec8 .\cf5 \strokec5 closest\cf8 \strokec8 (\cf9 \strokec9 '[data-interactive]'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 interactiveBtn\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 const\cf5 \strokec5  type \cf8 \strokec8 =\cf5 \strokec5  interactiveBtn\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 interactive\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 const\cf5 \strokec5  unitIndex \cf8 \strokec8 =\cf5 \strokec5  parseInt\cf8 \strokec8 (\cf5 \strokec5 interactiveBtn\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 unitIndex\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 showModal\cf8 \strokec8 (\cf5 \strokec5 type\cf8 \strokec8 ,\cf5 \strokec5  unitIndex\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                 \cb1 \
\cb3                 document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'mobile-menu-btn'\cf8 \strokec8 ).\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'sidebar'\cf8 \strokec8 ).\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 toggle\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             showModal\cf8 \strokec8 (\cf5 \strokec5 type\cf8 \strokec8 ,\cf5 \strokec5  unitIndex\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  modal \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'modal'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  title \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'modal-title'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  body \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'modal-body'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  closeBtn \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'modal-close-btn'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  newCloseBtn \cf8 \strokec8 =\cf5 \strokec5  closeBtn\cf8 \strokec8 .\cf5 \strokec5 cloneNode\cf8 \strokec8 (\cf12 \strokec12 true\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 closeBtn\cf8 \strokec8 .\cf5 \strokec5 parentNode\cf8 \strokec8 .\cf5 \strokec5 replaceChild\cf8 \strokec8 (\cf5 \strokec5 newCloseBtn\cf8 \strokec8 ,\cf5 \strokec5  closeBtn\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 newCloseBtn\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 unitIndex \cf8 \strokec8 !==\cf5 \strokec5  \cf12 \strokec12 undefined\cf8 \strokec8 )\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 updateProgress\cf8 \strokec8 (\cf5 \strokec5 unitIndex\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     modal\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'opacity-0'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     modal\cf8 \strokec8 .\cf5 \strokec5 querySelector\cf8 \strokec8 (\cf9 \strokec9 '.modal-content'\cf8 \strokec8 ).\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 transform \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'scale(0.95)'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     setTimeout\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  modal\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 ),\cf5 \strokec5  \cf13 \strokec13 300\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                 \cb1 \
\cb3                 body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 // Clear previous content\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 switch\cf8 \strokec8 (\cf5 \strokec5 type\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 'menti-challenge'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                         title\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u24744 \u22312 \u23560 \u26696 \u20013 \u36935 \u21040 \u30340 \u26368 \u22823 \u25361 \u25136 \u26159 \u65311 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="mb-4 text-gray-600">\uc0\u36889 \u26159 \u22312 \u23560 \u26696 \u20013 \u24120 \u35211 \u30340 \u25361 \u25136 \u12290 \u24744 \u20063 \u21487 \u20197 \u22312 \u19979 \u26041 \u36664 \u20837 \u26694 \u20013 \u65292 \u21152 \u20837 \u24744 \u36935 \u21040 \u30340 \u25361 \u25136 \u65281 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div id="word-cloud-container" class="p-4 bg-gray-100 rounded-lg min-h-[200px] flex flex-wrap justify-center items-center gap-4 mb-4 border">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <!-- Word cloud will be generated here -->\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="flex gap-2">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <input id="word-cloud-input" type="text" placeholder="\uc0\u36664 \u20837 \u24744 \u30340 \u25361 \u25136 ..." class="flex-grow p-2 border rounded-md">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <button id="add-word-btn" class="bg-blue-500 text-white px-4 rounded-md hover:bg-blue-600"><i class="fas fa-plus"></i> \uc0\u26032 \u22686 </button>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 initWordCloud\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 'five-matters-check'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                         title\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u23560 \u26696 \u24555 \u36895 \u39636 \u27298 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `<p class="mb-4 text-gray-600">\uc0\u35531 \u23601 \u19968 \u20491 \u24744 \u29087 \u24713 \u30340 \u23560 \u26696 \u65292 \u22238 \u31572 \u20197 \u19979 \u21839 \u38988 \u65306 </p><div class="space-y-4"><div><label class="font-bold">\u36947  (\u20351 \u21629 /\u39000 \u26223 ):</label><textarea class="w-full p-2 border rounded-md mt-1" rows="2"></textarea></div><div><label class="font-bold">\u22825  (\u26178 \u27231 /\u29872 \u22659 ):</label><textarea class="w-full p-2 border rounded-md mt-1" rows="2"></textarea></div><div><label class="font-bold">\u22320  (\u36039 \u28304 /\u24066 \u22580 ):</label><textarea class="w-full p-2 border rounded-md mt-1" rows="2"></textarea></div><div><label class="font-bold">\u23559  (\u22296 \u38538 /\u33021 \u21147 ):</label><textarea class="w-full p-2 border rounded-md mt-1" rows="2"></textarea></div><div><label class="font-bold">\u27861  (\u27969 \u31243 /\u21046 \u24230 ):</label><textarea class="w-full p-2 border rounded-md mt-1" rows="2"></textarea></div></div>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 'ba-workshop'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                         title\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u21830 \u26989 \u20998 \u26512 \u23526 \u25136 \u24037 \u20316 \u22346 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="mb-4 text-gray-600"><strong>\uc0\u26696 \u20363 \u65306 </strong>\u19968 \u23478 \u31038 \u21312 \u21654 \u21857 \u24215 \u65292 \u24076 \u26395 \u38283 \u30332 \u19968 \u27454 App\u20358 \u25552 \u21319 \u29087 \u23458 \u30340 \u24544 \u35488 \u24230 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <hr class="my-4">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <h5 class="font-semibold mb-2">\uc0\u27493 \u39519 \u19968 \u65306 \u20729 \u20540 \u20027 \u24373 \u22294  (\u25302 \u26355 \u37197 \u23565 )</h5>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="text-sm mb-4">\uc0\u35531 \u23559 \u19979 \u26041 \u30340 \u12300 \u39015 \u23458 \u30171 \u40670 \u12301 \u21644 \u12300 App\u21151 \u33021 (\u30171 \u40670 \u35299 \u26041 )\u12301 \u25302 \u26355 \u21040 \u23565 \u25033 \u30340 \u21312 \u22495 \u20013 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div class="flex gap-4">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="w-1/2">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <h6 class="font-bold text-center text-red-600 mb-2">\uc0\u39015 \u23458 \u30171 \u40670  <i class="fas fa-sad-tear"></i></h6>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <div id="pain-zone" class="p-2 bg-red-50 border-2 border-dashed border-red-200 rounded-lg drop-zone"></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="w-1/2">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <h6 class="font-bold text-center text-green-600 mb-2">App\uc0\u21151 \u33021  (\u30171 \u40670 \u35299 \u26041 ) <i class="fas fa-magic"></i></h6>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                     <div id="pain-reliever-zone" class="p-2 bg-green-50 border-2 border-dashed border-green-200 rounded-lg drop-zone"></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div id="ba-cards" class="flex flex-wrap gap-2 mt-4">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="bg-white p-2 rounded shadow task-card border-l-4 border-red-500" draggable="true" data-type="pain">\uc0\u23574 \u23792 \u26178 \u27573 \u25490 \u38538 \u24456 \u20037 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="bg-white p-2 rounded shadow task-card border-l-4 border-green-500" draggable="true" data-type="reliever">\uc0\u25163 \u27231 \u38928 \u40670 \u39184 \u21151 \u33021 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="bg-white p-2 rounded shadow task-card border-l-4 border-red-500" draggable="true" data-type="pain">\uc0\u24120 \u24120 \u24536 \u35352 \u24118 \u38598 \u40670 \u21345 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <div class="bg-white p-2 rounded shadow task-card border-l-4 border-green-500" draggable="true" data-type="reliever">\uc0\u38651 \u23376 \u26371 \u21729 \u33287 \u38598 \u40670 \u31995 \u32113 </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 initDragAndDrop\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 'causal-loop'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                         title\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u32362 \u35069 \u22240 \u26524 \u22238 \u39243 \u22294 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `<p class="mb-4 text-gray-600">\uc0\u24605 \u32771 \u12300 \u23560 \u26696 \u26178 \u31243 \u24310 \u35492 \u12301 \u36889 \u20491 \u21839 \u38988 \u65292 \u21487 \u33021 \u26377 \u21738 \u20123 \u21407 \u22240 \u20114 \u30456 \u24433 \u38911 \u65311 \u35430 \u33879 \u25302 \u26355 \u19979 \u26041 \u30340 \u22240 \u32032 \u65292 \u20006 \u24605 \u32771 \u23427 \u20497 \u20043 \u38291 \u30340 \u38364 \u32879 \u12290 </p><div class="w-full h-64 bg-gray-200 rounded-lg p-4 border-2 border-dashed flex flex-wrap gap-4 items-start" id="cl-canvas"></div><div class="flex flex-wrap gap-2 mt-4" id="cl-items"><div class="bg-yellow-200 p-2 rounded-md task-card" draggable="true">\u26178 \u31243 \u22739 \u21147 </div><div class="bg-blue-200 p-2 rounded-md task-card" draggable="true">\u21152 \u29677 \u36245 \u24037 </div><div class="bg-red-200 p-2 rounded-md task-card" draggable="true">\u31243 \u24335 \u21697 \u36074 \u19979 \u38477 </div><div class="bg-green-200 p-2 rounded-md task-card" draggable="true">Bug\u25976 \u37327 \u22686 \u21152 </div><div class="bg-purple-200 p-2 rounded-md task-card" draggable="true">\u20462 \u24489 Bug\u26178 \u38291 </div><div class="bg-pink-200 p-2 rounded-md task-card" draggable="true">\u26032 \u21151 \u33021 \u38283 \u30332 \u35722 \u24930 </div></div><p class="text-sm text-gray-500 mt-4 italic">\u65288 \u22312 \u30495 \u23526 \u35506 \u31243 \u20013 \u65292 \u36889 \u35041 \u21487 \u20197 \u20351 \u29992 \u32362 \u22294 \u24037 \u20855 \u36899 \u32218 \u65289 </p>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 initDragAndDrop\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 'trello-sim'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                         title\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u27169 \u25836 \u24453 \u36774 \u28165 \u21934 \u25490 \u24207 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `<p class="mb-4 text-gray-600">\uc0\u35531 \u23559 \u21491 \u20596 \u30340 \u12300 \u21151 \u33021 \u36984 \u38917 \u12301 \u25302 \u26355 \u21040 \u24038 \u20596 \u30340 \u12300 \u29986 \u21697 \u24453 \u36774 \u28165 \u21934 \u12301 \u20013 \u65292 \u20006 \u30001 \u19978 \u33267 \u19979 \u25490 \u20986 \u24744 \u35469 \u28858 \u30340 \u20778 \u20808 \u38918 \u24207 \u12290 </p><div class="flex gap-6"><div class="w-1/2"><h4 class="font-bold text-center mb-2">\u29986 \u21697 \u24453 \u36774 \u28165 \u21934 </h4><div class="bg-gray-200 p-2 rounded-lg min-h-[200px]" id="backlog-col"></div></div><div class="w-1/2"><h4 class="font-bold text-center mb-2">\u21151 \u33021 \u36984 \u38917 </h4><div class="bg-gray-200 p-2 rounded-lg min-h-[200px] space-y-2" id="features-col"><div class="bg-white p-3 rounded-md shadow task-card" draggable="true">\u20351 \u29992 \u32773 \u30331 \u20837 /\u35387 \u20874 </div><div class="bg-white p-3 rounded-md shadow task-card" draggable="true">\u35506 \u31243 \u24433 \u29255 \u25773 \u25918 </div><div class="bg-white p-3 rounded-md shadow task-card" draggable="true">\u32218 \u19978 \u25903 \u20184 \u21151 \u33021 </div><div class="bg-white p-3 rounded-md shadow task-card" draggable="true">\u23416 \u32722 \u36914 \u24230 \u36861 \u36452 </div><div class="bg-white p-3 rounded-md shadow task-card" draggable="true">\u24107 \u29983 \u21839 \u31572 \u21312 </div></div></div></div>`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 initDragAndDrop\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 'suntzu-scenario'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                         title\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u32202 \u24613 \u36557 \u24773 \u65281 \u20320 \u35442 \u22914 \u20309 \u25033 \u23565 \u65311 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         body\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="mb-4 text-gray-600">\uc0\u20551 \u35373 \u20320 \u30340 \u22296 \u38538 \u27491 \u22312 \u28858 \u19968 \u20491 \u26032 \u30340 \u32218 \u19978 \u35506 \u31243 \u24179 \u21488 \u65292 \u36914 \u34892 \u28858 \u26399 \u20841 \u36913 \u30340 Sprint\u12290 Sprint\u30340 \u30446 \u27161 \u26159 \u23436 \u25104 \u12302 \u23416 \u21729 \u23416 \u32722 \u36914 \u24230 \u36861 \u36452 \u12303 \u21151 \u33021 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="font-bold text-red-600 mb-4">\uc0\u32202 \u24613 \u36557 \u24773 \u65306 \u22312 Sprint\u30340 \u31532 \u19968 \u36913 \u32080 \u26463 \u26178 \u65292 \u24066 \u22580 \u19978 \u26368 \u22823 \u30340 \u31478 \u29229 \u23565 \u25163 \u31361 \u28982 \u23459 \u24067 \u65292 \u20182 \u20497 \u19979 \u20491 \u26376 \u23559 \u25512 \u20986 \u19968 \u38917 \u38761 \u21629 \u24615 \u30340 \u12302 AI\u21161 \u25945 \u21363 \u26178 \u21839 \u31572 \u12303 \u21151 \u33021 \u65292 \u24341 \u30332 \u24066 \u22580 \u29105 \u35696 \u12290 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <p class="mb-6 font-semibold">\uc0\u36523 \u28858 \u23560 \u26696 \u25351 \u25582 \u23448 \u65292 \u20320 \u26371 \u22914 \u20309 \u27770 \u31574 \u65311 </p>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div id="scenario-options" class="space-y-3">\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <button data-feedback="1" class="w-full text-left p-3 border rounded-lg hover:bg-gray-100 transition"><strong>1. \uc0\u22533 \u23432 \u35336 \u30059 \u65306 </strong>\u12300 \u36557 \u20196 \u22914 \u23665 \u65281 \u25105 \u20497 \u24517 \u38920 \u20808 \u23436 \u25104 \u21407 \u23450 \u30340 \u12302 \u36914 \u24230 \u36861 \u36452 \u12303 \u21151 \u33021 \u12290 \u31478 \u29229 \u23565 \u25163 \u30340 \u20107 \u65292 \u19979 \u20491 Sprint\u20877 \u35498 \u12290 \u12301 </button>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <button data-feedback="2" class="w-full text-left p-3 border rounded-lg hover:bg-gray-100 transition"><strong>2. \uc0\u31435 \u21363 \u36681 \u21521 \u65306 </strong>\u12300 \u21313 \u33836 \u28779 \u24613 \u65281 \u31435 \u21363 \u20572 \u27490 \u38283 \u30332 \u36914 \u24230 \u36861 \u36452 \u65292 \u20840 \u21729 \u25237 \u20837 \u30740 \u31350 \u22914 \u20309 \u25220 \u35186 \u23565 \u25163 \u30340 AI\u21151 \u33021 \u12290 \u12301 </button>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                                 <button data-feedback="3" class="w-full text-left p-3 border rounded-lg hover:bg-gray-100 transition"><strong>3. \uc0\u20597 \u26597 \u33287 \u35519 \u36969 \u65306 </strong>\u12300 \u20445 \u25345 \u20919 \u38748 \u12290 \u26412 Sprint\u30446 \u27161 \u19981 \u35722 ...\u20849 \u21516 \u21830 \u35696 \u26159 \u21542 \u22312 \u19979 \u20491 Sprint\u23559 \u12302 \u25033 \u23565 AI\u21151 \u33021 \u12303 \u20316 \u28858 \u26368 \u39640 \u20778 \u20808 \u32026 \u20219 \u21209 \u12290 \u12301 </button>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             </div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                             <div id="scenario-feedback" class="hidden mt-4 p-4 rounded-lg"></div>\cf5 \cb1 \strokec5 \
\cf9 \cb3 \strokec9                         `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 initScenarioQuiz\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cb1 \
\cb3                 modal\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 setTimeout\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     modal\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'opacity-0'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     modal\cf8 \strokec8 .\cf5 \strokec5 querySelector\cf8 \strokec8 (\cf9 \strokec9 '.modal-content'\cf8 \strokec8 ).\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 transform \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'scale(1)'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \},\cf5 \strokec5  \cf13 \strokec13 10\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             initWordCloud\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  container \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'word-cloud-container'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  input \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'word-cloud-input'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  addBtn \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'add-word-btn'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (!\cf5 \strokec5 container \cf8 \strokec8 ||\cf5 \strokec5  \cf8 \strokec8 !\cf5 \strokec5 input \cf8 \strokec8 ||\cf5 \strokec5  \cf8 \strokec8 !\cf5 \strokec5 addBtn\cf8 \strokec8 )\cf5 \strokec5  \cf12 \strokec12 return\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 let\cf5 \strokec5  words \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u38656 \u27714 \u35722 \u26356 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 7\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u28317 \u36890 \u19981 \u33391 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 6\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26178 \u31243 \u24310 \u35492 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 7\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u36039 \u28304 \u19981 \u36275 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 5\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u30446 \u27161 \u27169 \u31946 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 6\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u38928 \u31639 \u36229 \u25903 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 4\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u36328 \u37096 \u38272 \u21332 \u35519 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 5\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u21033 \u23475 \u38364 \u20418 \u20154 \u31649 \u29702 '\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 4\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  colors \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [\cf9 \strokec9 '#3b82f6'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 '#10b981'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 '#ef4444'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 '#f97316'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 '#8b5cf6'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 '#ec4899'\cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 function\cf5 \strokec5  render\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     container\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf11 \strokec11 // Shuffle words for random placement\cf5 \cb1 \strokec5 \
\cb3                     words\cf8 \strokec8 .\cf5 \strokec5 sort\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf14 \strokec14 Math\cf8 \strokec8 .\cf5 \strokec5 random\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 -\cf5 \strokec5  \cf13 \strokec13 0.5\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     words\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 ((\cf5 \strokec5 word\cf8 \strokec8 ,\cf5 \strokec5  index\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 const\cf5 \strokec5  span \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 createElement\cf8 \strokec8 (\cf9 \strokec9 'span'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  word\cf8 \strokec8 .\cf5 \strokec5 text\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 fontSize \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf8 \strokec8 $\{\cf13 \strokec13 1\cf5 \strokec5  \cf8 \strokec8 +\cf5 \strokec5  word\cf8 \strokec8 .\cf5 \strokec5 size \cf8 \strokec8 *\cf5 \strokec5  \cf13 \strokec13 0.2\cf8 \strokec8 \}\cf9 \strokec9 rem`\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 fontWeight \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'bold'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 color \cf8 \strokec8 =\cf5 \strokec5  colors\cf8 \strokec8 [\cf5 \strokec5 index \cf8 \strokec8 %\cf5 \strokec5  colors\cf8 \strokec8 .\cf5 \strokec5 length\cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 padding \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '4px 8px'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 display \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'inline-block'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         span\cf8 \strokec8 .\cf5 \strokec5 style\cf8 \strokec8 .\cf5 \strokec5 cursor \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'default'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         container\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 span\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3                 \cf12 \strokec12 function\cf5 \strokec5  addWord\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  text \cf8 \strokec8 =\cf5 \strokec5  input\cf8 \strokec8 .\cf5 \strokec5 value\cf8 \strokec8 .\cf5 \strokec5 trim\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 text \cf8 \strokec8 &&\cf5 \strokec5  \cf8 \strokec8 !\cf5 \strokec5 words\cf8 \strokec8 .\cf5 \strokec5 some\cf8 \strokec8 (\cf5 \strokec5 w \cf8 \strokec8 =>\cf5 \strokec5  w\cf8 \strokec8 .\cf5 \strokec5 text \cf8 \strokec8 ===\cf5 \strokec5  text\cf8 \strokec8 ))\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         words\cf8 \strokec8 .\cf5 \strokec5 push\cf8 \strokec8 (\{\cf5 \strokec5  text\cf8 \strokec8 :\cf5 \strokec5  text\cf8 \strokec8 ,\cf5 \strokec5  size\cf8 \strokec8 :\cf5 \strokec5  \cf13 \strokec13 5\cf5 \strokec5  \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                         input\cf8 \strokec8 .\cf5 \strokec5 value \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         render\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3                 addBtn\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  addWord\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 input\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'keypress'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 e\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 e\cf8 \strokec8 .\cf5 \strokec5 key \cf8 \strokec8 ===\cf5 \strokec5  \cf9 \strokec9 'Enter'\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         addWord\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\
\cb3                 render\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             initScenarioQuiz\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  optionsContainer \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'scenario-options'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  feedbackContainer \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'scenario-feedback'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (!\cf5 \strokec5 optionsContainer\cf8 \strokec8 )\cf5 \strokec5  \cf12 \strokec12 return\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cb1 \
\cb3                 optionsContainer\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  e \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  button \cf8 \strokec8 =\cf5 \strokec5  e\cf8 \strokec8 .\cf5 \strokec5 target\cf8 \strokec8 .\cf5 \strokec5 closest\cf8 \strokec8 (\cf9 \strokec9 'button'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (!\cf5 \strokec5 button\cf8 \strokec8 )\cf5 \strokec5  \cf12 \strokec12 return\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  feedbackType \cf8 \strokec8 =\cf5 \strokec5  button\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 feedback\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 let\cf5 \strokec5  feedbackText \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 let\cf5 \strokec5  feedbackClass \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3                     \cf12 \strokec12 switch\cf8 \strokec8 (\cf5 \strokec5 feedbackType\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 '1'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                             feedbackText \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 "\uc0\u12300 \u36889 \u26159 \u19968 \u31278 \u20725 \u21270 \u30340 \u24605 \u32173 \u12290 \u38614 \u28982 \u36981 \u23432 \u35336 \u30059 \u24456 \u37325 \u35201 \u65292 \u20294 \u23436 \u20840 \u24573 \u35222 \u24066 \u22580 \u35722 \u21270 \u21487 \u33021 \u23566 \u33268 \u25105 \u20497 \u12302 \u36111 \u20102 \u25136 \u24441 \u65292 \u36664 \u20102 \u25136 \u29229 \u12303 \u12290 \u12301 "\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                             feedbackClass \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'bg-yellow-100 border-yellow-400 text-yellow-800'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                             \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 '2'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                             feedbackText \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 "\uc0\u12300 \u36889 \u26159 \u19968 \u31278 \u24656 \u24908 \u30340 \u21453 \u25033 \u12290 \u36031 \u28982 \u36681 \u21521 \u21487 \u33021 \u25171 \u20098 \u22296 \u38538 \u31680 \u22863 \u65292 \u19988 \u26410 \u32147 \u35413 \u20272 \u30340 \u25220 \u35186 \u31574 \u30053 \u39080 \u38570 \u26997 \u39640 \u65292 \u21487 \u33021 \u23566 \u33268 \u36039 \u28304 \u28010 \u36027 \u12290 \u12301 "\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                             feedbackClass \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'bg-red-100 border-red-400 text-red-800'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                             \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 case\cf5 \strokec5  \cf9 \strokec9 '3'\cf8 \strokec8 :\cf5 \cb1 \strokec5 \
\cb3                             feedbackText \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 "\uc0\u12300 <strong>\u36889 \u27491 \u26159 \u12302 \u20853 \u36020 \u31070 \u36895 \u12303 \u33287 \u12302 \u22240 \u25973 \u21046 \u21213 \u12303 \u30340 \u23436 \u32654 \u32080 \u21512 \u65281 </strong> \u20320 \u26082 \u20445 \u35657 \u20102 \u30070 \u21069 \u25215 \u35582 \u30340 \u36948 \u25104 \u65288 \u36895 \u65289 \u65292 \u21448 \u31309 \u26997 \u22320 \u26681 \u25818 \u25973 \u24773 \u35722 \u21270 \u65292 \u33287 \u27770 \u31574 \u32773 \u20849 \u21516 \u35519 \u25972 \u24460 \u32396 \u25136 \u30053 \u65288 \u22240 \u25973 \u21046 \u21213 \u65289 \u65292 \u26159 \u29992 \u20853 \u22914 \u31070 \u30340 \u34920 \u29694 \u65281 \u12301 "\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                             feedbackClass \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'bg-green-100 border-green-400 text-green-800'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                             \cf12 \strokec12 break\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3                     feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  feedbackText\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 className \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'mt-4 p-4 rounded-lg border-l-4'\cf8 \strokec8 ;\cf5 \strokec5  \cf11 \strokec11 // reset classes\cf5 \cb1 \strokec5 \
\cb3                     feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (...\cf5 \strokec5 feedbackClass\cf8 \strokec8 .\cf5 \strokec5 split\cf8 \strokec8 (\cf9 \strokec9 ' '\cf8 \strokec8 ));\cf5 \cb1 \strokec5 \
\cb3                     feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     optionsContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             initDragAndDrop\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  draggables \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 querySelectorAll\cf8 \strokec8 (\cf9 \strokec9 '.task-card'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  containers \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 querySelectorAll\cf8 \strokec8 (\cf9 \strokec9 '.drop-zone, .bg-gray-200[id$="-col"], #cl-canvas'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cb1 \
\cb3                 draggables\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 (\cf5 \strokec5 draggable \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     draggable\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'dragstart'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 e\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         draggable\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'opacity-50'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         e\cf8 \strokec8 .\cf5 \strokec5 dataTransfer\cf8 \strokec8 .\cf5 \strokec5 setData\cf8 \strokec8 (\cf9 \strokec9 'text/plain'\cf8 \strokec8 ,\cf5 \strokec5  draggable\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 type\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                     draggable\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'dragend'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         draggable\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'opacity-50'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\
\cb3                 containers\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 (\cf5 \strokec5 container \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     container\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'dragover'\cf8 \strokec8 ,\cf5 \strokec5  e \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         e\cf8 \strokec8 .\cf5 \strokec5 preventDefault\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         container\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'drag-over'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                      container\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'dragleave'\cf8 \strokec8 ,\cf5 \strokec5  e \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         container\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'drag-over'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                     container\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'drop'\cf8 \strokec8 ,\cf5 \strokec5  e \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                         e\cf8 \strokec8 .\cf5 \strokec5 preventDefault\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                         container\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'drag-over'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 const\cf5 \strokec5  draggable \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 querySelector\cf8 \strokec8 (\cf9 \strokec9 '.opacity-50'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                         \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 draggable\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                             \cf11 \strokec11 // Specific logic for BA workshop\cf5 \cb1 \strokec5 \
\cb3                             \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 container\cf8 \strokec8 .\cf5 \strokec5 id \cf8 \strokec8 ===\cf5 \strokec5  \cf9 \strokec9 'pain-zone'\cf5 \strokec5  \cf8 \strokec8 &&\cf5 \strokec5  draggable\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 type \cf8 \strokec8 ===\cf5 \strokec5  \cf9 \strokec9 'pain'\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                                 container\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 draggable\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                             \cf8 \strokec8 \}\cf5 \strokec5  \cf12 \strokec12 else\cf5 \strokec5  \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 container\cf8 \strokec8 .\cf5 \strokec5 id \cf8 \strokec8 ===\cf5 \strokec5  \cf9 \strokec9 'pain-reliever-zone'\cf5 \strokec5  \cf8 \strokec8 &&\cf5 \strokec5  draggable\cf8 \strokec8 .\cf5 \strokec5 dataset\cf8 \strokec8 .\cf5 \strokec5 type \cf8 \strokec8 ===\cf5 \strokec5  \cf9 \strokec9 'reliever'\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                                 container\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 draggable\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                             \cf8 \strokec8 \}\cf5 \strokec5  \cf12 \strokec12 else\cf5 \strokec5  \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (!\cf5 \strokec5 container\cf8 \strokec8 .\cf5 \strokec5 id\cf8 \strokec8 .\cf5 \strokec5 includes\cf8 \strokec8 (\cf9 \strokec9 '-zone'\cf8 \strokec8 ))\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf11 \strokec11 // For other drag-drop areas\cf5 \cb1 \strokec5 \
\cb3                                 \cf12 \strokec12 const\cf5 \strokec5  afterElement \cf8 \strokec8 =\cf5 \strokec5  \cf12 \strokec12 this\cf8 \strokec8 .\cf5 \strokec5 getDragAfterElement\cf8 \strokec8 (\cf5 \strokec5 container\cf8 \strokec8 ,\cf5 \strokec5  e\cf8 \strokec8 .\cf5 \strokec5 clientY\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                                 \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 afterElement \cf8 \strokec8 ==\cf5 \strokec5  \cf12 \strokec12 null\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  container\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 draggable\cf8 \strokec8 );\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \strokec5  \cb1 \
\cb3                                 \cf12 \strokec12 else\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  container\cf8 \strokec8 .\cf5 \strokec5 insertBefore\cf8 \strokec8 (\cf5 \strokec5 draggable\cf8 \strokec8 ,\cf5 \strokec5  afterElement\cf8 \strokec8 );\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                             \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\
\cb3             getDragAfterElement\cf8 \strokec8 (\cf5 \strokec5 container\cf8 \strokec8 ,\cf5 \strokec5  y\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 const\cf5 \strokec5  draggableElements \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [...\cf5 \strokec5 container\cf8 \strokec8 .\cf5 \strokec5 querySelectorAll\cf8 \strokec8 (\cf9 \strokec9 '.task-card:not(.opacity-50)'\cf8 \strokec8 )];\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 return\cf5 \strokec5  draggableElements\cf8 \strokec8 .\cf5 \strokec5 reduce\cf8 \strokec8 ((\cf5 \strokec5 closest\cf8 \strokec8 ,\cf5 \strokec5  child\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  box \cf8 \strokec8 =\cf5 \strokec5  child\cf8 \strokec8 .\cf5 \strokec5 getBoundingClientRect\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 const\cf5 \strokec5  offset \cf8 \strokec8 =\cf5 \strokec5  y \cf8 \strokec8 -\cf5 \strokec5  box\cf8 \strokec8 .\cf5 \strokec5 top \cf8 \strokec8 -\cf5 \strokec5  box\cf8 \strokec8 .\cf5 \strokec5 height \cf8 \strokec8 /\cf5 \strokec5  \cf13 \strokec13 2\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 offset \cf8 \strokec8 <\cf5 \strokec5  \cf13 \strokec13 0\cf5 \strokec5  \cf8 \strokec8 &&\cf5 \strokec5  offset \cf8 \strokec8 >\cf5 \strokec5  closest\cf8 \strokec8 .\cf5 \strokec5 offset\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  offset\cf8 \strokec8 :\cf5 \strokec5  offset\cf8 \strokec8 ,\cf5 \strokec5  element\cf8 \strokec8 :\cf5 \strokec5  child \cf8 \strokec8 \};\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \strokec5  \cb1 \
\cb3                     \cf12 \strokec12 else\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf12 \strokec12 return\cf5 \strokec5  closest\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  offset\cf8 \strokec8 :\cf5 \strokec5  \cf14 \strokec14 Number\cf8 \strokec8 .\cf14 \strokec14 NEGATIVE_INFINITY\cf5 \strokec5  \cf8 \strokec8 \}).\cf5 \strokec5 element\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \};\cf5 \cb1 \strokec5 \
\
\cb3         app\cf8 \strokec8 .\cf5 \strokec5 init\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3     \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 </\cf2 \strokec2 body\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 </\cf2 \strokec2 ht\cf5 \cb1 \strokec5 \
}