METhướng dẫn
Toàn cảnh Trang chủ

Bộ deck học nhanh khung MET

Bộ slide HTML chạy offline hoàn toàn. Không cần mạng, không cần cài gì. Bấm đúp vào index.html là dùng được. Đã có bản online cho máy khác và điện thoại — xem mục 11.

0. Bắt đầu từ đâu

Bạn đang là aiMở cái này
Chưa biết MET là gìoutline.html — bộ khung trên một màn hình, một buổi sáng có thật trong lớp, ba lộ trình theo thời gian bạn có
Sắp tới ngày sát hạchMục Tờ ôn ở cuối outline.html — toàn bộ câu chốt gom theo trụ, Ctrl+P in ra vài trang A4
Đang học nghiêm túcindex.html → sáu deck, làm quiz và flashcard để % thuộc tăng

Đừng mở deck trước. 139 thẻ đọc tuần tự từ thẻ đầu là cách chậm nhất để hiểu MET. Trang toàn cảnh mất 20 phút và tiết kiệm được nhiều giờ sau đó.

1. Dùng thế nào

Bấm đúp index.html → trang chủ hiện ra với:

Sáu deck

DeckNội dung
Nền móngMET là gì · ba nền tảng · triết lý · ba trụ cột
M — Làm chủ chuyên mônAm hiểu trẻ · 9 lĩnh vực · quy trình 3 bước · 10 mốc nhịp điệu ngày
E — Môi trường8 tiêu chí môi trường vật lý · bầu không khí · quản lý lớp
T — Sự chuyển hoá8 thông lệ người lớn · chuẩn what's so · nhịp thực hành
Nguyên tắc xuyên suốtSáu nguyên tắc chung
Ôn sát hạch 28/10Hai mốc · chuẩn viết · thang 1–4 · bộ số liệu · kịch bản tour

Trang toàn cảnh outline.html

Bấm nút Toàn cảnh ở trang chủ. Trang này gồm:

Ctrl+P ở trang này in ra TỜ ÔN, không in bản đồ và lộ trình — khác với bản in trong deck (in toàn bộ thẻ, mỗi thẻ một trang). Muốn in đủ một deck thì vào deck rồi mới in.

Bản đồ, lộ trình và tờ ôn đều sinh từ data/. Thêm thẻ mới vào data/cards-XX.js là trang toàn cảnh tự có thẻ đó, không phải sửa hai chỗ.

Phím tắt trong deck

PhímLàm gì
→ SpaceThẻ sau
←Thẻ trước
Home EndThẻ đầu / thẻ cuối
/Nhảy vào ô tìm kiếm
EscMở mục lục — hoặc đóng quiz / flashcard đang mở

Ô tìm kiếm bỏ dấu được: gõ binh an vẫn tìm ra Bình An.

In ra giấy hoặc PDF: bấm Ctrl+P (máy Mac: Cmd+P) trong một deck — bản in gồm toàn bộ thẻ của deck đó, mỗi thẻ một trang, đã bỏ thanh điều hướng. Màn hình trở lại bình thường sau khi in.

Citation

Cuối mỗi thẻ có các nhãn nguồn như TQ tr.12, AP sheet 6A · tr.21, PPT s.43. Bấm vào nhãn sẽ mở đúng file PDF trong sources/ ở trang tương ứng.

Nếu bấm citation mà PDF mở ở trang 1 thay vì đúng trang: một số trình duyệt không xử lý #page=N khi mở bằng file://. Số trang vẫn hiện trên nhãn, cuộn tay tới đó.

Ý nghĩa “% thuộc”

% thuộc = 0,6 × (điểm quiz cao nhất / tổng số câu)
        + 0,4 × (số flashcard đã thuộc / tổng số flashcard)

Đọc hết deck mà chưa làm quiz thì % vẫn bằng 0. Đây là cố ý: mục tiêu là đo, không phải làm mình thấy dễ chịu. Chỉ số “đã đọc x/y thẻ” hiện bên dưới mỗi deck chỉ để đánh dấu chỗ đang học dở.

Flashcard chỉ được tính là thuộc khi đánh Nhớ hai lần liên tiếp. Đánh Quên thì thẻ quay lại cuối hàng đợi và đếm lại từ đầu.

2. Sao lưu tiến độ — đọc kỹ mục này

Tiến độ nằm trong bộ nhớ của một trình duyệt trên một máy.

Sẽ mất nếu: đổi máy · đổi trình duyệt · xoá dữ liệu duyệt web · dùng chế độ ẩn danh.

Cách sao lưu: trang chủ → mục Sao lưu tiến độ → bấm Xuất tiến độ.

Nên xuất mỗi tuần một lần, và bắt buộc xuất trước khi dọn dẹp trình duyệt.

Cách khôi phục: bấm Chọn file… rồi chọn file JSON đã lưu — hoặc dán nội dung vào ô văn bản rồi bấm Nhập từ ô bên dưới.

3. Thêm một thẻ kiến thức mới

Mở file dữ liệu của deck cần thêm, trong thư mục data/:

DeckFile
Nền móngdata/cards-00.js
M — Làm chủ chuyên môndata/cards-01.js
E — Môi trườngdata/cards-02.js
T — Sự chuyển hoádata/cards-03.js
Nguyên tắc xuyên suốtdata/cards-04.js
Ôn sát hạchdata/cards-05.js

Copy nguyên một khối thẻ, dán vào trước dòng ]}; ở cuối file, nhớ có dấu phẩy ngăn cách giữa hai khối, rồi sửa nội dung:

  { id: 'ten-rieng-khong-dau',          // đặt tên riêng, không trùng thẻ nào khác
    kieu: 'khai-niem',
    tieuDe: 'Tiêu đề thẻ',
    chot: 'Câu chốt, tối đa 20 từ.',
    y: [
      'Gạch đầu dòng thứ nhất.',
      'Gạch đầu dòng thứ hai.'
    ],
    cite: ['tq-triet-ly'] },            // ít nhất một nguồn

Lưu file, mở lại deck trong trình duyệt (bấm Ctrl+R). Thẻ mới xuất hiện.

Ba kiểu thẻ

khai-niem — một khái niệm cần hiểu. Bắt buộc có chot (≤ 20 từ), thân thẻ tối đa 80 từ.

bang — danh sách có cấu trúc:

  { id: 'ten-rieng', kieu: 'bang',
    tieuDe: 'Tiêu đề bảng',
    chot: 'Câu chốt.',
    bang: {
      cot:  ['Cột 1', 'Cột 2'],
      hang: [ ['ô a', 'ô b'],
              ['ô c', 'ô d'] ]
    },
    cite: ['ap-s6-thang-1-4'] },

Số ô mỗi hàng phải bằng số cột.

doi-chieu — đúng/sai, trước/sau:

  { id: 'ten-rieng', kieu: 'doi-chieu',
    tieuDe: 'Tiêu đề',
    chot: 'Câu chốt.',
    doiChieu: {
      trai:  { tieuDe: 'Đúng', y: ['...'] },
      phai:  { tieuDe: 'Sai',  y: ['...'] },
      viSao: 'Giải thích vì sao câu sai là sai.'
    },
    cite: ['ap-s1-whats-so'] },

Các trường thêm được cho bất kỳ kiểu thẻ nào

    anh: 's24-ghe-binh-an.jpg',      // tên file trong assets/img/
    anhChu: 'Chú thích ảnh.',
    ghiChu: 'Cảnh báo nguồn lệch, ghi chú thêm.',
    luyen: { yeuCau: 'Đề bài.', dapAn: 'Đáp án — ẩn cho tới khi bấm.' },
    viDu: { canh: '...', dung: '...', sai: '...' },   // xem mục ngay dưới

Thêm ví dụ cho một thẻ — trường viDu

Thẻ trừu tượng ("mã hoá và hoàn nguyên", "kiến tạo", "what's so") rất khó nắm nếu chỉ đọc định nghĩa. Thêm một cảnh lớp học thật:

    viDu: {
      canh: 'Bé Na chơi xong khay hạt, cầm khay đứng giữa lớp không biết để đâu.',
      dung: 'Đáy kệ dán ảnh chụp chính khay đó; bé so ảnh rồi tự đặt về đúng chỗ.',
      sai:  'Kệ trống trơn không nhãn; cô phải nhắc từng bé, rồi tự xếp lại cả kệ.' },
Ranh giới quan trọng. Ví dụ chỉ được minh hoạ tiêu chí đã có trong chính thẻ đó. Không thêm học thuyết, con số hay quy định nào mà nguồn chưa nói. Khối ví dụ hiện trên màn hình với nhãn Ví dụ minh hoạ để không ai nhầm nó là trích nguồn.

Hiện 58/139 thẻ đã có ví dụ — tập trung ở 8 tiêu chí môi trường, 8 thông lệ, 6 nguyên tắc, và các thẻ nền móng. Thẻ tra cứu thuần (bảng 9 lĩnh vực, hồ sơ mốc, ghi chú nguồn lệch) cố ý không có, vì thêm ví dụ chỉ làm dài thêm.

Trong mọi chuỗi văn bản đều dùng được thẻ HTML đơn giản: <b>, <i>, <br>. Muốn viết dấu & thì gõ &amp;.

4. Thêm một câu quiz

Mở data/quiz-XX.js (cùng số với deck), copy một khối, dán vào trước ]};:

{ id: 'q00-13', dang: 'tinh-huong', theNguon: 'met-la-gi',
  hoi: 'Nội dung câu hỏi?',
  luaChon: ['Đáp án A', 'Đáp án B', 'Đáp án C', 'Đáp án D'],
  dapAn: 2,                      // đếm từ 0 — ở đây đáp án đúng là C
  giaiThich: 'Vì sao đáp án đó đúng.' },

theNguon là bắt buộc — đó là id của thẻ kiến thức trả lời câu này. Nhờ nó, khi làm sai người học bấm được thẳng sang thẻ nguồn.

Bốn dạng câu hỏi:

dangCách khai
chonluaChon 4 đáp án · dapAn là số thứ tự, đếm từ 0
dung-saikhông cần luaChon · dapAn là true hoặc false
tinh-huongnhư chon, nhưng nội dung là một tình huống lớp học
dienkhông cần luaChon · thay bằng dapAnMau: '...' · người học tự chấm

Giữ tỉ lệ ít nhất 40% câu dạng tinh-huong, để tránh học vẹt con số.

5. Thêm một flashcard

Flashcard được sinh tự động từ mọi thẻ kiến thức: mặt trước là tiêu đề, mặt sau là câu chốt. Không phải làm gì thêm.

Chỉ khi muốn hỏi ngược (cho định nghĩa, đoán tên khái niệm) thì thêm tay vào data/flashcards-XX.js:

{ id: 'fc00-9',
  truoc: 'Năng lực kiến tạo sự thanh thản khi đối mặt việc cần xử lý. → Khái niệm nào?',
  sau:   'Sự Bình An',
  cite:  ['ppt-s10-binh-an'] },

6. Thêm một nguồn trích dẫn mới

Mở data/citation-index.js, thêm một dòng vào MET_CITATIONS:

  'ma-rieng-cua-ban': { nguon: 'TQ', trang: 12, nhan: 'TQ tr.12' },

Ánh xạ sheet → trang của file AP: sheet 1 → tr.1–3 · sheet 2 → tr.4–11 · sheet 3 → tr.12–14 · sheet 4 → tr.15–18 · sheet 5 → tr.19–20 · sheet 6 → tr.21–23 · sheet 7 → tr.24–28. Sheet 8 không có trong bản PDF.

7. Kiểm tra sau khi sửa

Nếu máy có cài Node.js:

cd met-deck
node tools/check-links.js

Script báo ngay nếu: thẻ thiếu citation · citation trỏ tới mã không tồn tại · id trùng nhau · ảnh không tồn tại · câu chốt quá 20 từ · thân thẻ quá 80 từ · viDu thiếu canh/dung hoặc quá 60 từ · câu quiz trỏ tới thẻ không có thật · deck thiếu câu hỏi hoặc flashcard · lộ trình, thuật ngữ hoặc link trong outline.html trỏ tới thẻ không tồn tại.

Mục cuối đáng chú ý: trang toàn cảnh là thứ người mới gặp đầu tiên, nên link chết ở đó bị tính là lỗi, không phải cảnh báo.

Sửa file này hoặc docs/deploy-cloudflare.md

Nút Hướng dẫn ở trang chủ mở huong-dan.html — bản HTML sinh ra từ chính file README này. Trình duyệt không hiển thị được Markdown thô, nên không trỏ thẳng vào .md nữa. Sửa xong file .md thì dựng lại:

cd met-deck
node tools/build-guide.js

Quên chạy thì check-links.js báo lỗi trang hướng dẫn cũ hơn file .md. Không sửa tay huong-dan.html hay docs/deploy-cloudflare.html: lần dựng sau ghi đè hết.

Không có Node.js cũng không sao: mở deck trong trình duyệt, bấm F12 xem tab Console — thẻ nào có citation hỏng sẽ hiện dòng đỏ [met] citation không tồn tại.

8. Trích lại ảnh từ bộ slide

Ảnh đã trích sẵn trong assets/img/. Chỉ chạy lại khi file slide gốc thay đổi:

cd met-deck
python3 tools/extract-pptx-media.py

Script không ghi đè ảnh đã đổi tên bằng tay — nó nhớ trong tools/media-manifest.json. Ảnh EMF bị bỏ qua vì trình duyệt không hiển thị được.

Một vài ảnh trong assets/img/ hiện chưa thẻ nào dùng (ảnh chụp buổi tập huấn). Giữ lại để dùng khi cần; check-links.js liệt kê chúng ở mục Cảnh báo.

9. Cấu trúc thư mục

met-deck/
  index.html              trang chủ: mục lục · dashboard · ma trận tự chấm · đếm ngược
  outline.html            toàn cảnh: sơ đồ khung · một buổi sáng MET · bản đồ thẻ · lộ trình · tờ ôn
  huong-dan.html          bản HTML của README này — sinh ra, không sửa tay
  decks/                  sáu deck nội dung
  assets/css/deck.css     hệ thiết kế dùng chung
  assets/js/              deck.js · quiz.js · flashcard.js · progress.js · dashboard.js · outline.js
  assets/img/             ảnh trích từ bộ slide
  data/                   nội dung thẻ · câu quiz · flashcard · citation · ma trận · curation outline
  sources/                bản sao tài liệu gốc, tên không dấu để link chạy ổn định
  tools/                  check-links.js · build-guide.js · extract-pptx-media.py

Sửa nội dung chỉ cần đụng vào data/. Không phải sửa HTML, CSS hay JS.

Cột chữ mặc định hẹp (--wrap) cho dễ đọc. Trang nào cần rộng hơn — như index.html với ma trận 7 cột — thì đặt class="trang-rong" lên thẻ <body>; cả thanh đầu trang lẫn phần thân đều giãn theo, không cần !important.

Lộ trình học và danh sách thuật ngữ của trang toàn cảnh nằm ở data/outline.js — đó là quyết định sư phạm (học gì trước, bỏ qua gì được), nên để trong data/ chứ không nhét vào code. Mỗi mục trỏ tới thẻ bằng cặp ['mã deck', 'id thẻ']; gõ sai id thì check-links.js báo lỗi ngay.

10. Giới hạn đã biết

11. Bản trên mạng

Deck đã có bản online, dùng được từ điện thoại hoặc máy không có sẵn thư mục này:

https://met-deck.met-deck.workers.dev

Bản offline vẫn dùng bình thường, hai bản không ảnh hưởng nhau — nhưng tiến độ học của hai bản là hai kho riêng, vì tiến độ lưu theo địa chỉ truy cập. Chuyển qua lại thì dùng khối sao lưu tiến độ ở mục 2.

Cách tự đẩy bản mới lên mạng sau khi sửa thẻ, cách xem project trên Cloudflare, gắn domain riêng và quay về bản cũ: xem docs/deploy-cloudflare.md.

12. Liên hệ

Câu hỏi về nội dung deck, hoặc thấy chỗ sai so với tài liệu gốc — nhắn Zalo, kèm mã thẻ hoặc tên mục để dễ tra:

Zalo 0944 556 692