Add a daily question, a learning passport, and a confounding lab

.github/workflows/deploy.yml

@@ -38,10 +38,13 @@ jobs:
         run: |
           for f in data/*.json; do python3 -m json.tool "$f" > /dev/null || { echo "Invalid JSON: $f"; exit 1; }; done
 
+      - name: Build Builder pages and badges
+        run: python3 scripts/build_builders.py
+
       - name: Collect site files
         run: |
           mkdir _site
-          cp -r index.html article.html 404.html .nojekyll assets data articles _site/
+          cp -r index.html article.html game.html lab.html 404.html .nojekyll assets data articles builders badges _site/
 
       - name: Publish to gh-pages
         uses: peaceiris/actions-gh-pages@v4

.gitignore

@@ -1,3 +1,6 @@
 .DS_Store
 _site/
 node_modules/
+/builders/
+/badges/
+__pycache__/

404.html

@@ -2,13 +2,7 @@
 <html lang="ko">
 <head>
 <meta charset="utf-8">
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEBVKYH8HL"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-BEBVKYH8HL');
-</script>
+<script src="/assets/js/ga.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>페이지를 찾을 수 없습니다 | Causal Inference Hub</title>
 <link rel="icon" href="/assets/img/team-mark.png">
@@ -20,6 +14,7 @@
 <header class="site-header">
   <div class="wrap header-row">
     <a class="brand" href="/"><img class="brand-logo" src="/assets/img/team-mark.png" alt="" width="34" height="34"><span class="brand-text"><span class="brand-name">Causal Inference Hub</span><span class="brand-sub">가짜연구소 인과추론팀</span></span></a>
+    <button type="button" class="pass-btn" data-passport aria-label="학습 여권 열기">여권 <b data-passport-count>0/9</b></button>
   </div>
 </header>
 <main class="reader">
@@ -29,5 +24,7 @@ <h1>페이지를 찾을 수 없습니다</h1>
     <p><a class="btn" href="/">허브로 돌아가기</a></p>
   </div>
 </main>
+<script src="/assets/js/track.js" defer></script>
+<script src="/assets/js/passport.js" defer></script>
 </body>
 </html>

CONTRIBUTING.md

@@ -14,14 +14,16 @@
 | 파일 | 고치는 경우 |
 | --- | --- |
 | `data/featured.json` | 첫 화면 배너의 대표 오픈소스 링크를 바꿀 때. `repo`를 적으면 스타 수가 함께 나옵니다. |
-| `data/projects.json` | 기수별 프로젝트를 추가할 때. 러너는 인원수(`runners`)만 적습니다. |
-| `data/builders.json` | Builder의 LinkedIn, GitHub 아이디(프로필 사진에 쓰임), 한 줄 소개, Builder가 되기 전 러너로 참여한 프로젝트(`runnerOf`)를 넣을 때 |
+| `data/projects.json` | 기수별 프로젝트를 추가할 때. 러너는 인원수(`runners`)만 적습니다. Builder가 회고를 보내 주면 `"retro": {"why": "…", "learned": "…", "next": "…"}`로 넣습니다. 비어 있으면 화면에 나오지 않습니다. |
+| `data/builders.json` | Builder의 LinkedIn, GitHub 아이디(프로필 사진에 쓰임), 한 줄 소개, Builder가 되기 전 러너로 참여한 프로젝트(`runnerOf`)를 넣을 때. `slug`는 Builder 페이지 주소(`/builders/<slug>.html`)가 되므로 한 번 정하면 바꾸지 않습니다. |
 | `data/growth.json` | 기수별 누적 러너 수. 프로젝트 시트를 xlsx로 내려받아 `python scripts/runners_from_sheet.py 파일.xlsx > data/growth.json`으로 만듭니다. 이름은 파일에 남지 않습니다. |
 | `data/events.json` | Data Forum 같은 행사를 추가할 때 |
 | `data/repos.json` | 레포를 추가하거나 설명·단계·트랙·상태를 바꿀 때 |
 | `data/map.json` | 트랙 지도에서 레포의 위치를 정할 때. 책과 강의(`paid`)의 표지와 소개도 여기서 고칩니다. |
 | `data/routes.json` | 경로 안내 항목을 바꿀 때 |
 | `data/articles.json`, `articles/*.md` | 읽을거리를 추가할 때 |
+| `data/game.json` | ‘상관일까, 인과일까?’ 문항을 고칠 때. `answer`는 `corr` 또는 `cause`이고, 문항마다 웹북 장 링크(`chapter`)를 답니다. |
+| `data/daily.json` | 오늘의 한 문제 문항을 더하거나 고칠 때. 형식은 `game.json`과 같고, 날짜마다 순서대로 돌아갑니다. 인과와 상관 문항을 비슷한 수로 맞춥니다. |
 | `data/stats.json` | 직접 고치지 않습니다. 매주 GitHub Actions가 스타 추이와 기여자 수를 갱신합니다. |
 
 레포를 추가할 때의 예시입니다.
@@ -43,6 +45,29 @@
 
 `stars`는 기본값이고, 사이트는 열릴 때 GitHub에서 최신 스타 수와 마지막 커밋 날짜를 불러옵니다.
 
+## Builder 페이지와 배지
+
+`builders/<slug>.html`, `builders/index.html`, `badges/<slug>.svg`는 `scripts/build_builders.py`가 데이터 파일로 만듭니다. 만들어지는 파일이라 커밋하지 않고, 배포할 때 GitHub Actions가 실행합니다. 로컬에서 보려면 먼저 실행하세요.
+
+```bash
+python3 scripts/build_builders.py
+```
+
+링크를 공유할 때 보이는 이미지(`assets/og/builders/<slug>.jpg`)는 따로 만들어 커밋합니다. Builder가 새로 생기거나 숫자가 바뀌면 다시 만들어 주세요. 이미지가 없는 페이지는 허브 기본 이미지를 씁니다.
+
+```bash
+pip install playwright && python -m playwright install chromium
+python3 scripts/builder_cards.py
+```
+
+## 학습 여권과 실험실
+
+스탬프 정의는 `assets/js/passport.js`의 `STAMPS`에 있습니다. 다른 페이지에서는 `window.hubStamp("lab")`처럼 부르면 되고, 이미 받은 스탬프는 다시 주지 않습니다. 기록은 `localStorage`에만 남습니다. 교란 실험실(`lab.html`, `assets/js/lab.js`)의 데이터는 페이지에서 만드는 가상 사용자입니다.
+
+## 이벤트 측정
+
+`assets/js/track.js`의 `hubTrack(이름, 파라미터)`가 GA4로 이벤트를 보냅니다. GA4가 설치되지 않았으면 아무 일도 하지 않습니다. 이벤트 이름과 파라미터는 PM 문서의 이벤트 사전을 따르고, 새 이벤트를 넣을 때는 사전에도 같이 적습니다. HTML에서는 `data-event="click_join" data-event-params='{"target":"template","source":"builder_page"}'`처럼 속성만으로도 보낼 수 있습니다. 로컬에서 확인하려면 콘솔에서 `window.HUB_DEBUG = true`를 켭니다.
+
 ## 로컬에서 보기
 
 ```bash

README.md

@@ -37,6 +37,16 @@
 
 팀 레포 전체는 허브의 트랙 지도와 커리큘럼 탭에서 볼 수 있습니다.
 
+## 허브에서 해 볼 것
+
+- **오늘의 한 문제:** 첫 화면 아래에 매일 한 문제가 바뀝니다. 사흘 연속으로 풀면 스탬프를 받습니다.
+- **교란 실험실:** 가상 사용자 800명으로 교란이 단순 비교를 얼마나 속이는지 슬라이더로 직접 움직여 봅니다. [실험실 열기](https://causalinferencelab.github.io/lab.html)
+- **학습 여권:** 자료 열기, 진단, 게임, 실험실, 완주 같은 행동마다 스탬프가 쌓입니다. 기록은 내 브라우저에만 남습니다.
+- **3문항으로 시작점 찾기:** 경험, 하는 일, 원하는 것을 고르면 볼 순서와 첫 자료를 추천합니다. [바로 해 보기](https://causalinferencelab.github.io/?quiz=1)
+- **상관일까, 인과일까?:** 데이터 상황 10개를 보고 상관인지 인과인지 고르는 2분짜리 게임입니다. 답마다 관련 웹북 장으로 이어집니다. [게임 하기](https://causalinferencelab.github.io/game.html)
+- **완주 카드:** 한 단계의 자료를 모두 학습 완료로 표시하면, 공유할 수 있는 완주 카드 이미지를 만들 수 있습니다.
+- **Builder 페이지:** 프로젝트를 연 Builder마다 이력, 만든 레포, 배지를 모은 페이지가 있습니다. [Builder 전체 보기](https://causalinferencelab.github.io/builders/)
+
 ## 커리큘럼: L0–L4
 
 L0–L2는 **배우는 단계**로, 무료 자료만으로 끝까지 갈 수 있습니다. L3–L4는 **만드는 단계**입니다.

article.html

@@ -2,13 +2,7 @@
 <html lang="ko">
 <head>
 <meta charset="utf-8">
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEBVKYH8HL"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-BEBVKYH8HL');
-</script>
+<script src="assets/js/ga.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>읽을거리 | Causal Inference Hub</title>
 <meta name="description" content="가짜연구소 인과추론팀이 쓴 글과 독자를 위한 자료입니다.">
@@ -33,6 +27,7 @@
       <a href="./#reading">읽을거리</a>
       <a href="./#join">참여하기</a>
     </nav>
+    <button type="button" class="pass-btn" data-passport aria-label="학습 여권 열기">여권 <b data-passport-count>0/9</b></button>
   </div>
 </header>
 
@@ -63,5 +58,7 @@ <h2 id="more-title">다른 글</h2>
 
 <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
 <script src="assets/js/article.js" defer></script>
+<script src="assets/js/track.js" defer></script>
+<script src="assets/js/passport.js" defer></script>
 </body>
 </html>