Энэ хичээлээр багш нар Claude Artifacts ашиглан интерактив сургалтын тоглоом хэрхэн зохион бүтээхийг суралцана. Оролцогчид тоглоомын логик, дүрэм, даалгавар болон онооны системийг энгийн текст заавраар үүсгэж, сурагчдын идэвх, оролцоог нэмэгдүүлэх сонирхолтой сургалтын контент боловсруулах чадвартай болно. Хичээлийн төгсгөлд та хичээлийн сэдвээ тоглоомын хэлбэрт шилжүүлж, сурагчдын сурах туршлагыг илүү интерактив, хөгжилтэй болгох боломжтой болно. 

Ашигласан промпт:

> HTML, CSS, JavaScript ашиглан нэг Claude Artifact дотор ажиллах **интерактив Escape Room тоглоом** бүтээ.

>

> Сэдэв: **“Escape Room – Нарны аймаг (Сурах бичгийн агуулгатай)” 🚀**

>

> Энэ систем нь **Сурагчийн горим + Багшийн Dashboard + Ангийн явцын хяналт**-тай байна.

---

## 📖 Түүх (Сурагчийн горим)

Тоглогч бол сансрын станцад гацсан сансрын нисгэгч. Гарахын тулд Нарны аймгийн тухай **сурах бичгийн агуулгад суурилсан 5 хаалганы даалгаврыг** гүйцэтгэж байж зугтана.

---

## 🎮 Сурагчийн тоглоом (Escape Room)

### 🪐 5 хаалга (сурах бичгийн агуулга)

1. **Буд гараг** – температурын ялгаа, хамгийн жижиг гариг

2. **Сугар гараг** – хүлэмжийн эффект, атмосфер

3. **Дэлхий** – усны эргэлт, амьдрал орших нөхцөл

4. **Ангараг** – улаан өнгийн шалтгаан, онцлог

5. **Бархасбадь** – хамгийн том гариг, хийн бүтэц

---

### 🧠 Тоглоомын шаардлага:

* Олон сонголттой асуулт (A, B, C, D)

* Зөв/буруу хариултын шууд feedback (тайлбартай)

* Явцын үзүүлэлт (Хаалга 1/5 → 5/5)

* Оноо тоолох систем

* Зөв хариулсан үед дараагийн хаалга нээгдэнэ

* Төгсгөлд:

  * нийт оноо

  * зарцуулсан хугацаа

  * зөв хариултын хувь (%) харуулна

  * “Амжилттай зугтлаа 🚀” дэлгэц гарна

---

## 👩‍🏫 Багшийн Dashboard 

“Багшийн Dashboard” гэсэн товчоор ордог тусдаа хэсэг үүсгэнэ.

### 📊 Dashboard функцууд:

* Ангийн бүх сурагчдын жагсаалт харуулах

* Сурагч бүрийн мэдээлэл:

  * Нэр

  * Оноо

  * Дуусгасан эсэх (Дууссан / Явцтай)

  * Зарцуулсан хугацаа

  * Зөв хариултын хувь (%)

* Эрэмбэлэх боломж:

  * Хамгийн өндөр оноо

  * Хамгийн хурдан хугацаа

* Ангийн статистик:

  * Нийт сурагчдын тоо

  * Дундаж оноо

  * Дундаж гүйцэтгэл

* Шилдэг 3 сурагчийг тод өнгөөр (алт / мөнгө / хүрэл) харуулах

---

## 💾 Ангийн явцын хадгалалт (ЧУХАЛ)

**localStorage ашиглана.**

Дараах мэдээллийг хадгална:

* Сурагчийн нэр

* Оноо

* Зарцуулсан хугацаа

* Зөв хариултын хувь

* Дууссан эсэх

Шаардлага:

* Refresh хийсэн ч устахгүй

* Олон сурагч хадгалагдана

* Шинэ тоглолт бүр шинэ record нэмнэ (давхардахгүй, overwrite хийхгүй)

---

## 🎨 UI/UX дизайн

### Сурагчийн горим:

* Сансрын theme (хар background, одод, гаригууд)

* Хаалга нээгдэх animation

* Зөв/буруу хариултын ногоон/улаан эффект

* Гар утсанд тохиромжтой responsive дизайн

### Багшийн Dashboard:

* Энгийн, цэвэр хүснэгтэн дизайн

* Ангийн анализ харагдахуйц бүтэц

* Шилдэг сурагчдыг тодруулсан өнгөний дизайн

---

## 🔐 Горим солих

* “Багшийн Dashboard” товч нэм

* Нууц үг: `teacher123`

* Буцах товч: “Сурагчийн горим”

---

## 🏁 Эцсийн шаардлага

* Нэг файл дотор бүрэн ажиллах Artifact байх

* Гадны library ашиглахгүй

* Сурагч + багшийн систем бүрэн салангид логиктой байх

* Сургалтын хэрэглээнд тохиромжтой, ойлгомжтой дизайнтай байх