Skip to content

update #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Pinont merged 1 commit into from
Sep 5, 2025
Merged

update #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions public/css/logic_game.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ body { font-family: sans-serif;
margin-bottom: 5px;
}
.branch {
border: 2px dashed #666;
padding: 8px;
min-height: 40px;
margin: 6px 0;
Expand All @@ -48,8 +47,8 @@ body { font-family: sans-serif;
font-size: 12px;
font-weight: bold;
}
.container {
margin: 10px 2rem 10px 2rem;
.main-content {
margin: 10px 2rem 10px 2rem;
border-radius: 1.125rem;
padding: 2.5rem clamp(1.75rem, 1vw, 25rem);
background:
Expand All @@ -62,6 +61,21 @@ body { font-family: sans-serif;
backdrop-filter: blur(0.875rem) saturate(120%);
border: 0.0625rem solid rgba(255,255,255,.10);
overflow: auto; /* เพิ่มการเลื่อนภายใน container */
}
.container {
margin: 10px 5rem 10px 5rem;
border-radius: 1.125rem;
padding: 2.5rem clamp(1.75rem, 1vw, 25rem);
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) padding-box,
radial-gradient(120% 140% at 100% 0%, rgba(224,133,0,.30), transparent 40%) padding-box,
radial-gradient(120% 140% at 0% 100%, rgba(0,95,163,.35), transparent 40%) padding-box;
box-shadow:
0 0.625rem 1.875rem rgba(0,0,0,.45),
inset 0 0.0625rem 0 rgba(255,255,255,.06);
backdrop-filter: blur(0.875rem) saturate(120%);
border: 0.0625rem solid rgba(255,255,255,.10);
justify-content: center;
}
.btn_submitlogic {
--_ring: rgba(0,95,163,.38);
Expand Down Expand Up @@ -99,6 +113,7 @@ body { font-family: sans-serif;
.level-header {
text-align: center;
margin-bottom: 20px;
font-size: 1.5rem;
}
.level-select {
margin: 10px 0 20px 0;
Expand Down
64 changes: 33 additions & 31 deletions public/html/logic_game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,39 @@ <h1>CAMT OPEN HOUSE 68<span class="cursor">_</span></h1>
</header>
</head>
<body>
<div class="container">
<header class="level-header">
<h2 id="level-title">Level 1: IF ฝนตก → หยิบร่ม</h2>
<p id="level-description">ลากบล็อกเข้าไปใน Branch True/False ของ IF ได้</p>
</header>

<!-- Dropdown สำหรับเลือกข้อ -->
<label for="level-select">เลือกข้อ:</label>
<select id="level-select" onchange="selectLevel()" class="level-select">
<option value="0">Level 1</option>
<option value="1">Level 2</option>
<option value="2">Level 3</option>
<option value="3">Level 4</option>
<option value="4">Level 5</option>
<option value="5">Level 6</option>
<option value="6">Level 7</option>
<option value="7">Level 8</option>
<option value="8">Level 9</option>
<option value="9">Level 10</option>
</select>

<h3>บล็อกที่ให้</h3>
<ul id="blocks" class="list"></ul>

<h3>Flow หลัก</h3>
<ul id="dropzone" class="list"></ul>

<button onclick="checkAnswer()" class="btn_submitlogic">ตรวจคำตอบ</button>
<div class="result">
<p id="result"></p>
<div class="main-content">
<div class="container">
<header class="level-header">
<h2 id="level-title">Level 1: IF ฝนตก → หยิบร่ม</h2>
<p id="level-description">ลากบล็อกเข้าไปใน Branch True/False ของ IF ได้</p>
</header>

<!-- Dropdown สำหรับเลือกข้อ -->
<label for="level-select">เลือกข้อ:</label>
<select id="level-select" onchange="selectLevel()" class="level-select">
<option value="0">Level 1</option>
<option value="1">Level 2</option>
<option value="2">Level 3</option>
<option value="3">Level 4</option>
<option value="4">Level 5</option>
<option value="5">Level 6</option>
<option value="6">Level 7</option>
<option value="7">Level 8</option>
<option value="8">Level 9</option>
<option value="9">Level 10</option>
</select>

<h3>บล็อกที่ให้</h3>
<ul id="blocks" class="list"></ul>

<h3>Flow หลัก</h3>
<ul id="dropzone" class="list"></ul>

<button onclick="checkAnswer()" class="btn_submitlogic">ตรวจคำตอบ</button>
<div class="result">
<p id="result"></p>
</div>
</div>
</div>
</div>
</body>
</html>
70 changes: 33 additions & 37 deletions src/logic_game.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,60 +20,55 @@ const levels = [
correctFalse: ["ไปโรงเรียน"],
},
{
title: "Level 2: IF หนาว → ใส่เสื้อกันหนาว",
description: "เพิ่ม IF หนาวใน Flowchart",
title: "Level 2: Prime Number ",
description: "รับตัวเลขจำนวนเต็มจากผู้ใช้ ถ้าเป็นจำนวนเฉพาะ (Prime Number) ให้แสดงข้อความว่า “เป็นจำนวนเฉพาะ” แต่ถ้าไม่ใช่ให้แสดง “ไม่ใช่จำนวนเฉพาะ”",
blocks: [
"Start",
"ตื่นนอน",
"อาบน้ำ",
"แต่งตัว",
"IF หนาว?",
"ใส่เสื้อกันหนาว",
"ไปโรงเรียน",
"เป็นจำนวนเฉพาะ",
"รับตัวเลขจากผู้ใช้",
"ไม่ใช่จำนวนเฉพาะ",
"IF ตัวเลขเป็นจำนวนเฉพาะ?",
"End",
],
correctMain: [
"Start",
"ตื่นนอน",
"อาบน้ำ",
"แต่งตัว",
"IF หนาว?",
"ไปโรงเรียน",
"End",
"รับตัวเลขจากผู้ใช้",
"IF ตัวเลขเป็นจำนวนเฉพาะ?",
"End"
],
correctTrue: ["ใส่เสื้อกันหนาว"],
correctFalse: [],
correctTrue: ["เป็นจำนวนเฉพาะ"],
correctFalse: ["ไม่ใช่จำนวนเฉพาะ"],
},
{
title: "Level 3: IF หิว → กินข้าว",
description: "เพิ่ม IF หิวใน Flowchart",
blocks: ["Start", "ตื่นนอน", "IF หิว?", "กินข้าว", "ไปโรงเรียน", "End"],
correctMain: ["Start", "ตื่นนอน", "IF หิว?", "ไปโรงเรียน", "End"],
correctTrue: ["กินข้าว"],
correctFalse: [],
title: "Level 3: เปรียบเทียบรหัสผ่าน",
description: "ถ้ารหัสผ่านตรงกับ “abc123” ให้แสดง “เข้าสู่ระบบสำเร็จ” ถ้าไม่ตรง ให้แสดง “รหัสผ่านผิด”",
blocks: [ "IF รหัสผ่าน == abc123?", "เข้าสู่ระบบสำเร็จ","รับรหัสผ่านจากผู้ใช้","Start", "รหัสผ่านผิด", "End"],
correctMain: ["Start", "รับรหัสผ่านจากผู้ใช้", "IF รหัสผ่าน == abc123?", "End"],
correctTrue: ["เข้าสู่ระบบสำเร็จ"],
correctFalse: ["รหัสผ่านผิด"],
},
{
title: "Level 4: IF มีเวลา → อ่านหนังสือ",
description: "เพิ่ม IF มีเวลาใน Flowchart",
title: "Level 4: ระบบส่วนลด",
description: "รับยอดซื้อสินค้าจากผู้ใช้ ถ้ายอดซื้อมากกว่า 1000 บาทให้แสดง “ได้ส่วนลด 10%” ถ้าน้อยกว่าหรือเท่ากับ 1000 บาทให้แสดง “ไม่ได้ส่วนลด”",
blocks: [
"Start",
"ตื่นนอน",
"IF มีเวลา?",
"อ่านหนังสือ",
"ไปโรงเรียน",
"ได้ส่วนลด 10%",
"IF ยอดซื้อ > 1000?",
"ไม่ได้ส่วนลด",
"End",
"รับยอดซื้อจากผู้ใช้"
],
correctMain: ["Start", "ตื่นนอน", "IF มีเวลา?", "ไปโรงเรียน", "End"],
correctTrue: ["อ่านหนังสือ"],
correctFalse: [],
correctMain: ["Start", "รับยอดซื้อจากผู้ใช้", "IF ยอดซื้อ > 1000?", "End"],
correctTrue: ["ได้ส่วนลด 10%"],
correctFalse: ["ไม่ได้ส่วนลด"],
},
{
title: "Level 5: IF มีงาน → ทำงาน",
description: "เพิ่ม IF มีงานใน Flowchart",
blocks: ["Start", "ตื่นนอน", "IF มีงาน?", "ทำงาน", "ไปโรงเรียน", "End"],
correctMain: ["Start", "ตื่นนอน", "IF มีงาน?", "ไปโรงเรียน", "End"],
correctTrue: ["ทำงาน"],
correctFalse: [],
title: "Level 5: เช็คเลขคู่หรือเลขคี่",
description: "รับตัวเลขจำนวนเต็มจากผู้ใช้ ถ้าเลขนั้นเป็นเลขคู่ ให้แสดง “เลขคู่” ถ้าเป็นเลขคี่ ให้แสดง “เลขคี่”",
blocks: ["เลขคู่","Start", "IF ตัวเลข % 2 == 0?", "เลขคี่","รับตัวเลขจากผู้ใช้", "End"],
correctMain: ["Start", "รับตัวเลขจากผู้ใช้", "IF ตัวเลข % 2 == 0?", "End"],
correctTrue: ["เลขคู่"],
correctFalse: ["เลขคี่"],
},
{
title: "Level 6: IF ฝนตก → หยิบร่ม, IF หนาว → ใส่เสื้อกันหนาว",
Expand Down Expand Up @@ -249,6 +244,7 @@ function loadLevel(levelIndex: number) {
if (resultElement) resultElement.innerText = "";
new Sortable(blocksContainer, { group: "shared", animation: 150 });
new Sortable(dropzone, { group: "shared", animation: 150 });

Array.from(document.querySelectorAll(".branch")).forEach((branch) => {
new Sortable(branch, { group: "shared", animation: 150 });
});
Expand Down