# Dựng trọn một course e-learning bằng Claude Code và đóng gói SCORM 1.2

[Jeff Batt](https://homus.dev/speakers/jeff-batt) · [Learning Dojo](https://homus.dev/orgs/learning-dojo)

> Jeff Batt dựng một course e-learning từ folder trống bằng Claude Code, chỉnh từng feature bằng annotation, rồi SCORM wrap và chạy thử trên SCORM Cloud.

Topics: Coding Agents, Skills, Workflow

Canonical: https://homus.dev/talks/build-a-full-elearning-course-with-claude-code-step-by-step

## 1. Dựng một course e-learning từ con số không

Jeff Batt mở đầu bằng mục tiêu của video: dẫn người xem bắt đầu tạo một course e-learning tuỳ biến (custom e-learning course) bằng Claude Code. Anh nói rõ đây là cách anh sẽ làm nếu phải tạo một course từ đầu, cùng các kiểu tương tác (interaction) khác nhau. Công cụ xuyên suốt là Claude Code (video đăng ngày 01/11/2026).

![Jeff Batt ngồi trước bàn phím, phía sau là kệ mô hình siêu anh hùng](https://homus.dev/photos/5npH-QI0W0U-0043.jpg)

Jeff Batt nói trước camera ở phần mở đầu, sau lưng là kệ mô hình nhân vật siêu anh hùng.

Bước đầu tiên của anh là vào Claude Code và bắt đầu một local project mới. Nhưng trước đó, anh thích tạo sẵn một folder trên desktop, ở đây đặt tên là `Course 101`. Anh không có file Word hay thứ gì tương tự để bắt đầu. Theo Jeff (video đăng ngày 01/11/2026), nếu bạn có một file Word, một storyboard hay một tài liệu nào đó làm điểm xuất phát thì rất tốt, vì Claude Code về cơ bản có thể lấy nội dung trong đó và tự suy ra (infer) course cần những kiểu trang nào. Lần này anh không có, nên anh sẽ tạo nội dung mẫu (sample content).

## 2. Tạo local project trong Claude Code

Jeff trỏ Claude Code vào đúng folder `Course 101` vừa tạo và chọn tạo một project kiểu local. Anh nói thêm: bạn cũng có thể chọn cloud, mà theo anh là kiểu như GitHub, cho phép version control: sao lưu, quay lại bản cũ (revert) hoặc tách nhánh (branch) khi đang thử nhiều hướng khác nhau (theo Jeff, video đăng ngày 01/11/2026). Video này không đi sâu vào phần đó.

Anh bấm vào nút chọn folder, chọn "open folder", vào desktop rồi chọn `Course 101`. Theo lời anh, có thể bạn sẽ phải bấm "trust workspace"; trong demo, hộp thoại "Trust this workspace?" hiện ra và anh bấm nút đó (demo trong video đăng ngày 01/11/2026). Vậy là đã có thể bắt đầu prompt.

Bốn bước Jeff đi qua để có một local project trong Claude Code (demo trong video đăng ngày 01/11/2026).

## 3. Chọn model, effort và để ý giới hạn usage

Jeff chọn Opus. Theo anh (video đăng ngày 01/11/2026), bạn có thể chọn Fable cho lượt build đầu, nhưng nó sẽ tốn nhiều credit hơn. Anh dùng Opus, mà Opus cũng vẫn tốn khá nhiều credit. Nếu muốn giảm bớt, bạn có thể hạ xuống Sonnet; nhưng ở lượt đầu anh thích dùng Opus vì muốn bản build ban đầu thật tốt.

![Menu chọn model trong Claude Code với Fable 5.1, Opus 5, Sonnet 5, Haiku 4.5 và tooltip về Fable](https://homus.dev/photos/5npH-QI0W0U-0225.jpg)

Menu model trong Claude Code bản desktop: Fable 5.1, Opus (đang được chọn), Sonnet 5, Haiku 4.5. Tooltip ghi Fable là model mạnh nhất và tiêu usage nhanh hơn Opus nhiều; góc dưới hiện "Opus 5" và mức effort "Extra" (màn hình trong video đăng ngày 01/11/2026).

Bạn cũng có thể chỉnh mức effort (level of effort): hạ xuống high nếu muốn, hoặc chọn mức khác. Với lượt đầu tiên này, anh chọn Extra, mức này cũng tốn nhiều credit hơn (theo Jeff, video đăng ngày 01/11/2026).

Vì vậy, theo anh, lúc nào bạn cũng có thể vào settings, mở mục usage để theo dõi mình đang ở đâu so với giới hạn năm giờ (five hour limit) và so với giới hạn tổng theo tuần (weekly limit) (video đăng ngày 01/11/2026).

Jeff ví: AI lúc này giống các gói cước điện thoại kiểu cũ (nhận xét trong video đăng ngày 01/11/2026). Anh hy vọng rồi sẽ tới lúc không giới hạn, như chuyện đã xảy ra với gói điện thoại. Anh thấy giới hạn năm giờ khá lạ: theo anh, cứ để người dùng dùng hết những gì có trong tuần đó. Có thể anh sẽ hết weekly limit nhanh, anh không biết, nhưng giới hạn năm giờ thì anh thấy kỳ.

## 4. Bạn là đạo diễn: Claude Design rồi tới Claude Code

Tiếp theo, anh sẽ mô tả course càng chi tiết càng tốt. "Bạn là đạo diễn (director) trong chuyện này", Jeff nói. Bạn phải mô tả. Theo anh (video đăng ngày 01/11/2026), đây là bộ kỹ năng mới: bạn dẫn dắt AI bằng cách hình dung và mô tả cái hình dung đó ra.

Anh nhắc tới Claude Design: bạn có thể dùng nó để làm phần design trước, nhưng ở đó bạn vẫn phải mô tả. Theo Jeff (video đăng ngày 01/11/2026), anh sẽ không tạo cả một course bên trong Claude Design, vì nó không cho bạn tạo các kết nối (connections), không cho publish ra SCORM, không cho làm nhiều thứ như vậy. Sớm muộn gì bạn cũng phải chuyển từ Claude Design sang Claude Code, nên anh cho rằng cứ dựng luôn trong Claude Code. Dù vậy, phần design có cho bạn thêm một số feature, bám theo một theme và tạo những thứ tương tự.

Theo Jeff (video đăng ngày 01/11/2026), bước một thường là Claude Design, rồi bàn giao style guide và nền móng sang Claude Code.

Với anh, bước số một thường là Claude Design, rồi nó bàn giao sang Claude Code (video đăng ngày 01/11/2026). Nhưng video này chỉ tập trung vào Claude Code.

## 5. Từng slide một hay trang cuộn dài

Jeff bắt đầu mô tả một course e-learning. Theo anh (video đăng ngày 01/11/2026), nếu bạn muốn một course kiểu Rise với các trang cuộn dài (long scrolling pages) thì cũng làm được, và vẫn có menu. Nhưng anh thích để người học tập trung vào một mẩu nội dung mỗi lúc.

Vì vậy anh vẫn thích kiểu từng slide một (slide-by-slide). Anh biết chuyện này gây tranh cãi (quan điểm của Jeff trong video đăng ngày 01/11/2026). Vẫn có thể làm nó responsive, vẫn có thể làm theo bất cứ cách nào mình muốn. Nhưng anh không thích kiểu cuộn xuống mãi, nó khiến anh có cảm giác như đọc sách giáo khoa. Anh muốn người học tập trung: đây là thứ ta đang học lúc này, bấm Next.

Đúng, nó truyền thống. Đúng, nó kiểu cũ. Nhưng theo Jeff, nó hiệu quả, và đó là lý do PowerPoint vẫn còn chỗ đứng: PowerPoint vẫn còn đó, người ta vẫn thuyết trình. Vì thế, với anh, đây là kiểu tương tác học tập tốt hơn (quan điểm của Jeff trong video đăng ngày 01/11/2026).

Hai kiểu course Jeff so sánh: trang cuộn dài anh thấy giống sách giáo khoa, và kiểu từng slide một mà anh chọn để người học tập trung vào từng mẩu (video đăng ngày 01/11/2026).

## 6. Prompt đầu tiên: player, menu, trang mẫu và điều hướng

Rồi anh nói ra prompt đầu tiên. Theo lời anh, nội dung là: tôi muốn tạo một course e-learning. Course này sẽ có một player ở phía trên, hiển thị tiêu đề và phần mô tả. Nó cũng có một menu trượt ra (slide in) để hiện các trang khác nhau. Sẽ có nhiều kiểu trang khác nhau, nên hãy tạo các trang mẫu. Tạm thời cứ lấy ảnh từ Pexels hoặc Unsplash cho hợp với theme. Theme của course là standards of conduct (chuẩn mực ứng xử), nên tạm dùng nội dung mẫu để tạo các trang (prompt trong video đăng ngày 01/11/2026).

Ở phía dưới sẽ có phần điều hướng trang (page navigation) để đi từ trang này sang trang khác, gồm nút Next và nút Back. Và ở góc trên bên phải của player sẽ có một nút resources (prompt trong video đăng ngày 01/11/2026).

Những thành phần Jeff nêu trong prompt đầu tiên: player có tiêu đề, menu trượt ra, các trang mẫu về standards of conduct, nút Resources góc trên bên phải và cặp nút Back, Next ở dưới (video đăng ngày 01/11/2026).

Anh không muốn đưa quá nhiều ngay từ đầu. Theo Jeff (video đăng ngày 01/11/2026), prompt ban đầu chứa nhiều thứ thì cũng tốt, nhưng bạn nên tiếp cận từng chút một. Lý do anh đưa ra: nếu đưa nó cả một bản kế hoạch, nó có thể bỏ qua một phần; nó đang khá hơn ở chuyện này, nhưng ban đầu vẫn có thể bỏ sót.

## 7. Mỗi lần một feature: effort chứ không phải số prompt

Sau lượt đầu, cách anh làm là tập trung vào một thứ mỗi lần (theo Jeff, video đăng ngày 01/11/2026). Anh sẽ vào kiểm tra để chắc chắn menu chạy được. Anh sẽ kiểm tra để chắc chắn nút Next và Back hoạt động và có đủ các trạng thái (states) của chúng. Làm vậy cũng giúp chính bạn tập trung vào từng việc một.

Theo Jeff (video đăng ngày 01/11/2026), điều quan trọng không phải là số lượng prompt bạn đưa cho AI, mà là mức effort bạn bắt AI bỏ ra. Nếu lần nào bạn cũng đưa prompt khổng lồ, lần nào cũng là rất nhiều effort, và bạn sẽ hết credit khá nhanh. Nếu chỉ đưa những chỉnh sửa nhỏ, thì đúng là bạn sẽ gửi nhiều prompt hơn, và rồi cũng sẽ hết, nhưng anh cho rằng cách này giúp bạn tinh chỉnh (fine-tune) từng bước một.

Khuyến nghị Jeff đặt cao nhất trong video đăng ngày 01/11/2026: tập trung vào một feature mỗi lần, sau một prompt đầu có thể chi tiết bao nhiêu tuỳ ý.

Đó là khuyến nghị anh đặt cao nhất (highest recommendation): tập trung vào một feature mỗi lần (video đăng ngày 01/11/2026). Còn prompt đầu tiên thì có thể chi tiết bao nhiêu tuỳ ý. Lượt build này có thể mất vài phút, nên anh chờ để xem ban đầu nó tạo ra gì.

## 8. Trong lúc chờ: một course hoàn chỉnh trên SCORM Cloud

Trong lúc Claude Code đang cập nhật và gần xong, Jeff mở SCORM Cloud để cho xem một course e-learning hoàn chỉnh đã build trước đó, để người xem hình dung được đích đến. Anh bắt đầu lại từ đầu course đó (demo trong video đăng ngày 01/11/2026).

Course có menu bên trái, menu này đồng thời theo dõi tiến độ học. Có bộ chuyển ngôn ngữ (language switcher) để đổi sang các ngôn ngữ khác; theo Jeff, điều đó có được là nhờ cách course được cấu trúc bằng JSON. Course cũng mobile responsive: nó tự điều chỉnh theo kích thước điện thoại. Các nút điều hướng nằm ở phía dưới, và các trang khác nhau cũng tự điều chỉnh (demo trong video đăng ngày 01/11/2026).

Trong course có nhiều kiểu câu hỏi quiz: trắc nghiệm (multiple choice), điền vào chỗ trống (fill in the blank). Anh tua tới vài phần khác: câu hỏi kéo thả (drag and drop), câu hỏi phân loại (category), một trang kết quả (results page). Có audio phát được, với toàn quyền điều khiển audio. Có các accordion, và có thể chặn người học đi tiếp. Có tương tác dạng tab, tương tác flip card, và accordion dọc tự thích ứng với kích thước màn hình: chúng chuyển từ ngang sang dọc (demo trong video đăng ngày 01/11/2026).

Những gì Jeff lần lượt chỉ ra trong course hoàn chỉnh mở trên SCORM Cloud (demo trong video đăng ngày 01/11/2026).

## 9. Bản build đầu tiên: tám trang mẫu

Quay lại Claude Code, bản build đang dần hiện ra. Anh không hề đưa cho nó design nào. Có nút resources ở phía trên; anh không thích các đường viền (outline) quanh nút. Có nút Next và Back. Và Claude Code đang tự tìm ra bug, vẫn đang test một số thứ, nên anh để nó làm xong rồi mới cho xem kết quả cuối (demo trong video đăng ngày 01/11/2026).

Theo Jeff (video đăng ngày 01/11/2026), đây là lý do phần design là phần quan trọng, đi qua Claude Design trước: để có design trước khi bắt đầu build tương tác. Claude Design cũng build một phần tương tác cho bạn; anh nghĩ đó là chỗ nhiều người bị nhầm, vì nó có kèm HTML. Nhưng với anh, đó là nền móng, không phải thứ anh sẽ dùng để build gói SCORM. Bạn chỉ việc bàn giao style guide và nền móng sang Claude Code, rồi nó cầm lấy và làm tiếp từ đó.

Anh thấy một điều thú vị: trong course menu, nó chia theo introduction, content pages, scenario pages. Anh không hề yêu cầu chia theo kiểu trang. Anh không chắc mình muốn thế, vì nó có thể làm rối phần điều hướng. Hoặc có lẽ bạn sẽ nói "bỏ hết quiz đi" hay "làm hết quiz"; anh thấy có thể hữu ích ở đâu đó, nhưng thật lòng anh nghĩ nó dễ làm người học bối rối hơn (nhận xét về bản build trong video đăng ngày 01/11/2026).

![Claude Code bên trái báo đang sửa bug, bên phải là course menu 8 pages với các chip lọc theo loại trang](https://homus.dev/photos/5npH-QI0W0U-0917.jpg)

Lúc gần xong: bên trái Claude Code ghi lại việc tự sửa bug và kiểm tra layout responsive, đồng hồ chạy "13m 43s · 20.1k tokens"; bên phải là course menu "8 pages" với các chip lọc All pages, Introduction, Content Page, Scenario, Knowledge Check, Summary (demo trong video đăng ngày 01/11/2026).

Course có phần outline với tám trang mẫu. Có nút Start course, và còn có thêm một nút Next nữa; đôi khi anh không thích điều hướng bị trùng lặp. Có bộ đếm trang ở phía dưới. Có mục resources với các file PDF khác nhau để chỉnh sau. Có nút Next và Back đưa người học qua các trang, và có menu bên trái để nhảy tới các phần và các trang khác nhau. Chỉ với prompt ban đầu, đã có một thứ để bắt đầu (demo trong video đăng ngày 01/11/2026).

![Claude Code liệt kê tám trang mẫu và template, bên phải là trang Welcome của course Standards of Conduct](https://homus.dev/photos/5npH-QI0W0U-1003.jpg)

Bản tóm tắt của Claude Code: bảng "Eight sample pages, eight templates" (Welcome, Learning Objectives, The Four Standards, Everyday Expectations, Scenario: A Gray Area, Knowledge Check, Raising a Concern, Summary), nội dung nằm trong `js/content.js`, ảnh Unsplash tải về máy, và câu hỏi có nên nối SCORM tracking. Bên phải là trang Welcome với "8 pages", "About 15 minutes" và nút "Start the course" (demo trong video đăng ngày 01/11/2026).

Có các layout trang đơn giản: ảnh, chữ, nhiều layout khác nhau. Một số khối trông như bấm được vì có hiệu ứng hover nhưng thực ra không bấm được, nên có thể anh sẽ chỉnh. Có tương tác dạng tab, một câu hỏi quiz, một kiểu quiz khác có nút submit, và trang dài thì cuộn xuống được. Rồi lượt build xong (demo trong video đăng ngày 01/11/2026).

Theo Jeff, từ đây chỉ còn là chuyện tinh chỉnh. Nội dung chưa được tách ra file JSON, nên chưa dễ dịch sang ngôn ngữ khác (bản build trong video đăng ngày 01/11/2026). Anh kiểm tra để chắc các dấu tích (check marks) hoạt động.

## 10. Annotation tool: dọn lại menu

Giờ anh bắt đầu chỉnh vài thứ. Theo Jeff (video đăng ngày 01/11/2026), bạn có thể dùng các annotation tool ở phía trên: bấm vào đó rồi khoanh vùng mình đang nói tới, hoặc dùng selection tool để bấm thẳng vào một phần tử. Anh thích vẽ hơn, vì nó xử lý được nhiều thứ khác nhau: anh khoanh vùng mình muốn nói, thậm chí thêm mũi tên hay hình khối.

Anh khoanh phần chip lọc trong menu, bấm "Add to chat", rồi gõ yêu cầu bỏ phần đó đi. Nội dung tin nhắn trên màn hình:

```
Get rid of this section. We actually don't need it to drill down to the page types; let's just have the normal menu content pages there.
```

Cứ thế, anh bắt đầu chỉnh, mỗi lần tập trung vào một vài thứ. Theo Jeff (video đăng ngày 01/11/2026), một khi đã chuyển sang những thay đổi nhỏ, việc cập nhật không mất lâu như lượt build đầu. Lượt đầu mất khá nhiều thời gian vì nó dựng cả cấu trúc; những thay đổi nhỏ thì bạn sẽ thấy xong trong vòng vài phút.

![Ảnh chụp menu có khoanh đỏ quanh các chip lọc, tin nhắn yêu cầu bỏ phần đó, và trả lời của Claude Code](https://homus.dev/photos/5npH-QI0W0U-1216.jpg)

Ảnh chụp menu có vòng khoanh đỏ quanh các chip lọc, kèm tin nhắn của Jeff. Claude Code trả lời đã bỏ hàng filter, đưa danh sách về thứ tự trang 1 tới 8 nhưng vẫn giữ nhãn màu cho từng loại trang, và cập nhật README (demo trong video đăng ngày 01/11/2026).

Thay đổi đã xong: phần đó đã bị bỏ. Anh nghĩ các bộ lọc chỉ để lọc theo section, và lẽ ra anh có thể tìm hiểu kỹ hơn một chút. Nhưng anh thấy thế này đủ gọn để nhảy tới các trang khác nhau (demo trong video đăng ngày 01/11/2026).

## 11. Top bar: nút chỉ có icon và màu xanh trơn

Còn vài thứ nữa anh muốn chỉnh: bỏ đường viền quanh các nút, và cho nút resources chỉ còn icon. Anh khoanh toàn bộ vùng top bar, bấm "Add to chat" và gửi yêu cầu. Nội dung tin nhắn trên màn hình:

```
I want to get rid of the outline around the buttons:
1. Change the resources button to just have the icon.
2. Change the menu button to just be the hamburger menu, with no outline around it.
Also, get rid of the gradient on the top bar. Let's just have a solid blue color up there.
```

Top bar có một chút gradient. Anh không thích nó: với anh, đó là kiểu design cũ, kiểu mười năm trước, nên anh muốn bỏ luôn (nhận xét trong video đăng ngày 01/11/2026).

![Tin nhắn ba yêu cầu cho top bar, trả lời All three done, và thanh annotation tool ở dưới preview](https://homus.dev/photos/5npH-QI0W0U-1322.jpg)

Sau tin nhắn ba yêu cầu, Claude Code báo "All three done": nút Resources chỉ còn icon folder, nút hamburger không viền, top bar màu trơn. Ở dưới preview là thanh annotation tool với bút, mũi tên, hình khối, màu và nút "Add to chat" (demo trong video đăng ngày 01/11/2026).

Theo Jeff, những thay đổi bổ sung này không mất nhiều thời gian (video đăng ngày 01/11/2026). Đó là điều anh muốn nói: bạn tập trung vào từng thứ một và có thể đi qua rất nhiều việc khá nhanh. Giờ có icon resources ở phía trên, có icon cho menu. Anh chỉ ra rằng khi một cái hiện thì cái kia bị ẩn, và anh thấy vậy là tốt vì không muốn cả hai cùng hiện. Top bar giờ là một màu trơn. Anh vẫn chưa chắc mình thích màu xanh đó, nhưng tạm giữ (demo trong video đăng ngày 01/11/2026).

## 12. Nút Next và Back thành nút tròn có mũi tên

Tiếp theo là phần điều hướng ở dưới. Anh khoanh vùng phía dưới, bấm "Add to chat" và gửi. Nội dung tin nhắn trên màn hình:

```
Let's change the next and back buttons to just be arrows, and let's make them circle buttons. So, you'll have a circle with the next arrow and a circle with the back arrow.
```

Chỉ là một thay đổi nhỏ, nhưng anh thích vì theo anh nó giúp cho việc dịch: bạn không phải dịch chữ trên nút. Bạn vẫn phải dịch phần pop-up, nên có thể vẫn cần chữ "Next" hiện ra khi rê chuột lên. Theo Jeff (video đăng ngày 01/11/2026), anh thích giữ phần điều hướng đơn giản hết mức, vì khi thu nhỏ xuống kích thước điện thoại, nó cũng dễ vừa hơn, không phải nhét chữ vào. Đó là cách anh thích; nếu bạn thích có chữ thì cứ giữ chữ.

Theo trả lời của Claude Code trong demo (video đăng ngày 01/11/2026): Back là nút tròn xám nhạt, Next là nút tròn xanh đặc với mũi tên trắng; chữ "Back", "Next" chuyển vào aria-label và tooltip.

Kết quả: Next và Back giờ đều là nút tròn có mũi tên. Nút này màu xám nhạt; anh có thể đổi cả hai thành màu xanh nếu muốn (demo trong video đăng ngày 01/11/2026).

## 13. Select tool, nút pill và chuyện biết tên component

Rồi anh bắt đầu chỉnh từng trang. Anh muốn đưa nút Start sang bên phải, thậm chí có thể ẩn nút Next, nhưng tạm chưa bận tâm chuyện đó. Định khoanh nút Start, anh đổi ý và thử thêm một thứ: select tool. Theo Jeff (video đăng ngày 01/11/2026), dùng select sẽ trỏ thẳng tới đúng phần tử đó, và bạn thấy nó đang nói chính xác về phần tử ấy. Nội dung tin nhắn trên màn hình:

```
Let's move the start button over to the right-hand side. Keep it on the same row as the "8 pages, about 15 minutes" information, and make it more of a pill shape.
```

Anh giải thích: pill shape là nút bo tròn góc nhiều hơn, về cơ bản là một nút hình chữ nhật bo tròn (rounded rectangle) (theo Jeff, video đăng ngày 01/11/2026).

![Tin nhắn chọn nút Start the course, và preview với nút pill màu cam nằm bên phải cùng hàng 8 pages, About 15 minutes](https://homus.dev/photos/5npH-QI0W0U-1529.jpg)

Tin nhắn kèm phần tử đã chọn ("Start the course"); Claude Code báo đang chuyển nút vào hàng thông tin, căn phải và bo thành pill ("49s · 735 tokens"). Bên phải, nút Start the course đã nằm cùng hàng với "8 pages" và "About 15 minutes", còn nút Next ở dưới đã thành nút tròn (demo trong video đăng ngày 01/11/2026).

Rồi Jeff nói về chuyện biết các thuật ngữ, biết các component, biết tên của component. Theo Jeff (video đăng ngày 01/11/2026), bạn không cần biết những thứ đó để bắt đầu, nhưng anh nghĩ nên để AI dạy bạn chúng. Khi bạn thực sự đóng vai đạo diễn, anh nghĩ đó là bộ kỹ năng mới cần học: biết các component, biết cách chỉ đạo AI để có đúng thứ mình muốn, để không phải qua lại nhiều lần.

Trong đầu anh, đó là điều hữu ích nhất khi để AI tạo nội dung này cho bạn (quan điểm của Jeff trong video đăng ngày 01/11/2026). Kết quả: nút "Start the course" trông khá hơn nhiều. Mấy ô thông tin kia cũng trông như nút, nên có thể sau này anh sẽ bỏ, nhưng anh thấy nút Start giờ nổi bật hơn. Và anh vẫn nhảy được tới các trang (demo trong video đăng ngày 01/11/2026).

## 14. Layout 50/50 và kiểm tra responsive

Giờ giả sử anh muốn ảnh chiếm trọn một nửa trang. Anh có thể chụp màn hình và nói ảnh chiếm 50%, chữ chiếm phần còn lại. Anh làm luôn: kéo khoanh vùng nội dung của trang, bấm "Add to chat" (demo trong video đăng ngày 01/11/2026). Nội dung tin nhắn trên màn hình:

```
I want to change up this page:

• Desktop: I want the image to fill the entire 50% of the left-hand side, and the text to be fully on the right-hand side.
• Mobile: I want the image to go to the top, and the text to go down to the bottom.
```

Trong lúc anh gõ, Claude Code vẫn đang chỉnh vài thứ: nó chưa xong hẳn việc trước và đang test, nên preview nhảy về trang khác. Anh quay lại trang đó rồi bấm enter (demo trong video đăng ngày 01/11/2026).

![Trang Learning Objectives với ảnh phòng họp chiếm nửa trái và danh sách mục tiêu ở nửa phải](https://homus.dev/photos/5npH-QI0W0U-1653.jpg)

Trang Learning Objectives sau khi sửa: ảnh phòng họp lấp nửa trái từ trên xuống thanh điều hướng, chữ "What you will be able to do" và bốn mục tiêu ở nửa phải. Claude Code mô tả đây là "full-bleed 50/50 split that stacks on mobile" (demo trong video đăng ngày 01/11/2026).

Đơn giản như vậy, giờ ảnh ở bên trái, chữ ở bên phải, và anh thấy trông khá hơn nhiều. Nếu muốn xem responsive trên mobile, theo Jeff, bạn bấm vào chỗ có chữ viewport ở phía trên rồi chọn mobile để xem nó thích ứng thế nào. Ảnh lên trên, chữ xuống dưới, và anh vẫn cuộn lên xuống được (demo trong video đăng ngày 01/11/2026).

![Preview ở chế độ Mobile 375 x 812, ảnh ở trên và chữ ở dưới, menu viewport đang mở](https://homus.dev/photos/5npH-QI0W0U-1643.jpg)

Menu viewport trong preview với ba lựa chọn Responsive, Mobile (375 × 812) và Tablet (768 × 1024). Ở chế độ Mobile, ảnh nằm trên, chữ nằm dưới, thanh điều hướng ghi "Page 2 of 8" (demo trong video đăng ngày 01/11/2026).

Anh cũng chuyển sang chế độ tablet để xem chính xác nó trông thế nào trên tablet, hoặc quay về chế độ responsive. Ở chế độ responsive, bạn vẫn kéo đổi kích thước được và trang tự điều chỉnh theo (demo trong video đăng ngày 01/11/2026).

## 15. SCORM wrap course bằng một skill

Còn một việc nữa anh muốn làm. Anh nhận xét: chưa đưa nhiều prompt mà đã có một kiểu e-course đầy đủ (demo trong video đăng ngày 01/11/2026). Việc cuối là SCORM wrap nó. Course này đơn giản, chưa có nhiều câu hỏi quiz hay tương tác; anh nói mình có thể prompt thêm một game, một accordion dọc, một accordion ngang, những thứ như vậy để tăng tính tương tác. Nhưng lần này anh SCORM wrap luôn bản hiện có.

Anh gõ "SCORM" để gọi skill. Trên màn hình, skill là `anthropic-skills:scorm-cmi5-wrapper` (demo trong video đăng ngày 01/11/2026). Rồi anh gửi yêu cầu. Nội dung tin nhắn trên màn hình:

```
/anthropic-skills:scorm-cmi5-wrapper Use this skill to SCORM-wrap this package to SCORM 1.2.

I want you to:
1. Keep track of the pages and send a completion once the learner has completed all of them.
2. Send the quiz questions inside the package, along with the overall score, over to the Learning Management System (LMS).
```

Anh không nói rõ phải xuất ra file nén, nên anh không biết nó có tự tạo một file ZIP trong folder hay không. Anh mở folder để xem các file đang được tạo ra. Anh nói thêm về file README: theo Jeff (video đăng ngày 01/11/2026), README là chỉ dẫn bạn đưa cho nó, bạn có thể ghi những chỉ dẫn cụ thể kiểu "khi tôi nói thế này thì luôn làm thế kia"; với anh, file README đóng vai trò gần như bộ nhớ (memory) của nó.

![Claude Code hỏi ba câu về cách chấm điểm SCORM, đang ở câu 3: Knowledge Check có nút Try again, LMS nên thấy lần làm nào](https://homus.dev/photos/5npH-QI0W0U-1843.jpg)

Sau khi đọc nội dung (một SCO, tám trang render bằng JS, hai mục tương tác là Scenario và Knowledge Check), Claude Code hỏi ba câu: tương tác nào tính vào điểm gửi LMS, LMS nhận gì khi đã xem đủ 8 trang vì SCORM 1.2 chỉ có một trường status, và với nút Try again thì LMS thấy lần làm nào. Câu 3 đang mở với "First attempt (Recommended)" (demo trong video đăng ngày 01/11/2026).

Như anh báo trước, nó hỏi lại anh vài điều (demo trong video đăng ngày 01/11/2026):

- Tương tác nào tính vào điểm: anh chọn knowledge check only (chỉ knowledge check) (demo trong video đăng ngày 01/11/2026).

- SCORM 1.2 chỉ có một trường status, nên pass/fail chính là completion: anh chọn gửi "completed" kèm điểm (câu hỏi của Claude Code trong demo, video đăng ngày 01/11/2026).

- Knowledge Check có nút Try again, LMS nên thấy lần làm nào: anh chọn first attempt (lần làm đầu). Theo Jeff, nếu muốn bạn có thể yêu cầu nó làm lại kiểu khác; đó là một điểm nên ghi nhớ (video đăng ngày 01/11/2026).

## 16. Templatize, JSON và gói ZIP SCORM 1.2

Với Jeff, chuyện này "mind blowing": chưa mất mấy thời gian, chỉ với vài prompt, đã có ít nhất một player cơ bản có nội dung (nhận xét trong video đăng ngày 01/11/2026). Giờ chỉ cần cập nhật nội dung theo ý mình khi đi qua course.

Nhưng theo Jeff (video đăng ngày 01/11/2026), tới lúc đó bạn sẽ muốn templatize nó. Bạn có thể nói: mỗi lần tạo một course mới, hoặc copy project rồi mở ra và bảo "giờ thay nội dung này bằng nội dung kia". Bạn làm vậy được. Hoặc bạn bảo đảm mọi thứ đều là JSON: dữ liệu được tách ra và đặt vào các file dữ liệu, khi đó cập nhật các thứ sẽ dễ hơn.

Hai cách templatize Jeff nêu (video đăng ngày 01/11/2026): copy project rồi bảo Claude Code thay nội dung, hoặc đưa mọi thứ thành JSON để cập nhật dễ hơn.

Lượt SCORM wrap đang kết thúc. Claude Code báo đã tạo và kiểm tra driver SCORM, và gói ZIP nằm ngay đó. Anh không chắc nó đặt file ở đâu; anh có thể tải về, nhưng thực ra file đã nằm sẵn trong folder, chỉ là cửa sổ folder của anh chưa refresh (demo trong video đăng ngày 01/11/2026).

![Claude Code báo gói SCORM 1.2 đã build và kiểm tra, có bảng ba lần chạy thử với mock API](https://homus.dev/photos/5npH-QI0W0U-1950.jpg)

Báo cáo của Claude Code: gói `standards-of-conduct-scorm12.zip` (21 file, 1.8 MB) đã build và kiểm tra với mock API qua ba lần chạy: sai lần đầu rồi Try again (score 0), đúng ngay lần đầu (score 100, lesson_status completed), và tiếp tục từ trang 5. Đồng hồ ghi "10m 10s · 9.8k tokens" (demo trong video đăng ngày 01/11/2026).

## 17. Upload lên SCORM Cloud và chạy thử

Giờ anh vào SCORM Cloud để upload. Anh xoá một course cũ trong thư viện, thêm nội dung mới, bấm browse, nói rằng có thể nó chưa hoàn hảo, rồi chọn file trong folder Course 101: Standards of Conduct. Anh bấm launch, và mọi thứ chạy: các trang hiện đủ (demo trong video đăng ngày 01/11/2026).

Theo Jeff (video đăng ngày 01/11/2026), ở đây bạn vẫn có thể tạo những trang cuộn dài như trong Rise, nhưng mỗi lúc chỉ tập trung vào một số trang nhất định. Bạn thấy anh vẫn cuộn xuống được trong một trang, nhưng anh vẫn thích có phần điều hướng trang. Các tab và tương tác đều chạy. Rồi tới câu hỏi đầu tiên, với một số thông tin; hoá ra chỉ có một câu hỏi. Anh đóng course lại (demo trong video đăng ngày 01/11/2026).

![Trang course Standards of Conduct trên SCORM Cloud: Completion complete, Success unknown, Score 100.00 %, Total Time 38s](https://homus.dev/photos/5npH-QI0W0U-2047.jpg)

Trang course trên SCORM Cloud sau khi chạy thử: Learning Standard SCORM 1.2, Completion "complete", Success "unknown", Score "100.00 %", Total Time "38s" (demo trong video đăng ngày 01/11/2026).

Kết quả: 100% và trạng thái complete. Theo Jeff (video đăng ngày 01/11/2026), với SCORM 1.2, course không gửi được cả complete lẫn passed; muốn có cả hai thì chỉ SCORM 2004 mới có. Tuỳ LMS, có thể bạn sẽ phải có complete và passed, hoặc chỉ passed, hay kiểu như vậy.

Anh không đo chính xác thời gian, nhưng theo Jeff, chưa tới một giờ anh đã tạo được cả một course từ đầu, publish ra SCORM 1.2, upload lên LMS và mọi thứ đều chạy (video đăng ngày 01/11/2026). Với anh, việc tạo một tương tác, một course e-learning hoàn chỉnh với vài prompt và tạo được một gói SCORM là điều "mind-blowing", và anh thấy ở đây có rất nhiều tiềm năng. Anh hy vọng người xem thích video, cảm ơn mọi người và hẹn gặp lại.

## Nguồn và liên kết

- Tên gốc: Build a Full eLearning Course with Claude Code [Step-by-Step]
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=5npH-QI0W0U](https://www.youtube.com/watch?v=5npH-QI0W0U)

- Kênh YouTube Learning Dojo (Jeff Batt): [youtube.com/channel/UCUba2y1EMN5hTfHCY_fA0iA](https://www.youtube.com/channel/UCUba2y1EMN5hTfHCY_fA0iA)

- Tài liệu Claude Code về desktop app, phần chọn environment, project folder và model ở hàng dưới ô prompt (đọc ngày 01/11/2026): [code.claude.com/docs/en/desktop](https://code.claude.com/docs/en/desktop)

- SCORM Cloud, nơi Jeff upload và chạy thử gói SCORM 1.2 (đọc ngày 01/11/2026): [cloud.scorm.com](https://cloud.scorm.com/)

Nguồn: https://homus.dev/talks/build-a-full-elearning-course-with-claude-code-step-by-step · cập nhật 2026-11-01