Trilingual Education

📌 一、情境流程圖（Scenario Flowchart）

▶️ 定義與目的 (Definition & Purpose)

• 中文：情境流程圖是將程式的運作場景、角色互動及使用流程以視覺方式呈現，協助學生理解程式執行時的具體情境與步驟。

• English: A Scenario Flowchart visually represents the operational scenarios, interactions between characters, and user processes of a program, helping students understand specific contexts and steps when running a program.

▶️ 情境流程圖特色 (Key Features)

中文（Chinese）

英文（English）

展現故事情境

Display Story Scenario

清楚角色互動

Clearly Present Character Interaction

呈現事件順序

Show Event Sequence

幫助思考使用者需求

Assist in Thinking about User Needs

▶️ 情境流程圖範例 (Scenario Flowchart Example)

情境主題：角色收集寶石遊戲 (Character Collecting Gems Game)

scss

複製編輯

開始 (Start)

   │

角色進入舞台 (Sprite Enters Stage)

   │

出現寶石 (Gems Appear)

   │

玩家操作角色移動 (Player Controls Sprite Movement)

   │

判斷角色是否碰到寶石？

Does the sprite touch the gem?

 ├───Yes───▶ 增加得分並播放音效 (Increase Score & Play Sound)

 │           │

 │           ▼

 │   判斷是否得分達標？(Is the target score reached?)

 │           ├──Yes──▶ 遊戲勝利 (Win Game)

 │           └──No───▶ 返回「出現寶石」(Back to Gems Appear)

 └───No───▶ 角色持續移動 (Sprite Keeps Moving)

📌 二、程式流程圖（Program Flowchart）

▶️ 定義與目的 (Definition & Purpose)

• 中文：程式流程圖以視覺圖示清楚呈現程式運作邏輯與順序，方便學生理解程式的控制流程與邏輯結構，進一步有效地撰寫 NKNUblock 程式。

• English: A Program Flowchart clearly illustrates the logic and sequence of program execution using visual symbols, helping students understand the control flow and logical structure, thereby effectively developing NKNUblock programs.

▶️ 程式流程圖常用符號 (Common Symbols)

中文（Chinese）

英文（English）

圖示說明（Description）

開始／結束

Start/End

橢圓形（Oval）

處理步驟

Process

矩形（Rectangle）

判斷條件

Decision

菱形（Diamond）

輸入／輸出

Input/Output

平行四邊形（Parallelogram）

流程方向

Flow Direction

箭頭（Arrow）

▶️ 程式流程圖範例 (Program Flowchart Example)

程式主題：角色收集寶石遊戲的程式邏輯 (Program Logic for Gem Collection Game)

pgsql

複製編輯

(Start) 開始

   │

設定得分為0

Set score = 0

   │

寶石隨機出現位置

Gem appears at random position

   │

等待玩家控制角色移動

Wait for player’s sprite movement

   │

角色移動

Sprite moves

   │

判斷角色是否碰到寶石？

Does sprite touch the gem?

  ├──Yes───▶ 得分 +1，播放音效

  │           Increase score by 1, Play sound effect

  │               │

  │               ▼

  │       判斷得分是否達標？ 

  │       Score ≥ target?

  │         ├──Yes───▶ 顯示勝利畫面 (Show Win Screen)，結束 (End)

  │         └──No───▶ 返回「寶石隨機出現位置」(Back to gem appears randomly)

  └──No───▶ 角色繼續移動 (Continue moving sprite)

📌 三、雙語教學策略建議（Teaching Strategies）

1. 中文講解情境，再以英文重述
   (Explain scenario in Chinese first, then repeat in English.)

2. 透過流程圖幫助學生視覺化邏輯思考
   (Use flowcharts to help students visualize logical thinking.)

3. 搭配 NKNUblock 軟體實作，加深理解與應用
   (Combine NKNUblock software practices for deeper understanding and application.)

4. 鼓勵學生練習使用雙語描述程式邏輯，增強語言能力
   (Encourage students to practice describing programming logic bilingually to strengthen language proficiency.)

雙語「NKNUBLOCK」的情境流程圖與程式流程圖介紹

Bilingual Introduction to "NKNUblock" Scenario Flowcharts & Program Flowcharts

📌 什麼是情境流程圖？(What is a Scenario Flowchart?)

情境流程圖用來描繪系統或應用程式的運行過程，幫助使用者了解整體操作步驟。
(A scenario flowchart is used to illustrate the operation process of a system or application, helping users understand the overall steps.)

📍 NKNUBLOCK 情境流程圖 (NKNUblock Scenario Flowchart)

🟢 案例：使用 NKNUblock 創建一個互動遊戲
(Case: Creating an Interactive Game with NKNUblock)

📌 流程 (Process)
1️⃣ 開始 (Start) → 使用者打開 NKNUblock，選擇新專案
(User opens NKNUblock and selects a new project.)
2️⃣ 選擇角色 (Choose a Sprite) → 選擇一個角色，設定外觀與起始位置
(Choose a sprite and set its appearance and starting position.)
3️⃣ 加入控制事件 (Add Control Events) → 例如「當綠旗被點擊」時開始遊戲
(Add control events such as "When the green flag is clicked," start the game.)
4️⃣ 設定角色動作 (Set Sprite Actions) → 讓角色移動、跳躍或旋轉
(Make the sprite move, jump, or rotate.)
5️⃣ 加入變數與條件判斷 (Add Variables & Conditions) → 設定計分機制或關卡條件
(Set a scoring mechanism or level conditions.)
6️⃣ 測試與調整 (Test & Adjust) → 運行遊戲，確認效果並修正錯誤
(Run the game, verify the effects, and fix errors.)
7️⃣ 發布專案 (Publish the Project) → 與朋友分享遊戲作品
(Share the game project with friends.)

📌 什麼是程式流程圖？(What is a Program Flowchart?)

程式流程圖是一種使用標準符號來表示程式邏輯的視覺化圖表，幫助開發者規劃與理解程式運作。
(A program flowchart is a visual diagram that uses standard symbols to represent the logic of a program, helping developers plan and understand how the program works.)

📍 NKNUBLOCK 程式流程圖 (NKNUblock Program Flowchart)

🟢 案例：角色遇到障礙物後改變方向
(Case: A sprite changes direction when hitting an obstacle.)

📌 流程 (Process)
1️⃣ 開始 (Start)
2️⃣ 角色移動 (Move Sprite Forward)
3️⃣ 檢查是否碰到障礙物 (Check if the sprite touches an obstacle?)

• ✅ 是 (Yes) → 改變方向 (Change Direction)

• ❌ 否 (No) → 繼續移動 (Continue Moving)
  4️⃣ 返回步驟 2 (Go back to Step 2)
  5️⃣ 結束 (End)

📌 流程圖符號 (Flowchart Symbols)

符號 (Symbol)

名稱 (Name)

用途 (Usage)

🔲

開始 / 結束 (Start / End)

標示程式的開始或結束 (Indicates the start or end of the program.)

🔺

決策 (Decision)

判斷條件是否成立 (Determines whether a condition is met.)

🔷

處理 (Process)

執行動作，如變數運算或移動角色 (Executes actions like variable calculations or sprite movements.)

⬆️

流程箭頭 (Flow Arrow)

顯示程式執行順序 (Indicates the sequence of execution in the program.)

📌 NKNUblock 流程圖範例 (NKNUblock Flowchart Example)

🎮 案例：角色控制遊戲 (Case: Character Control Game)
(A simple game where the player moves a character using arrow keys.)

📌 流程圖 (Flowchart):

scss

複製編輯

🔲 開始 (Start)

  ↓

🔷 等待使用者輸入 (Wait for User Input)

  ↓

🔺 是否按下方向鍵？ (Arrow Key Pressed?)

  → ❌ 否 (No) → 返回等待輸入 (Go back to "Wait for User Input")

  → ✅ 是 (Yes) 

  ↓

🔷 移動角色 (Move the Character)

  ↓

🔺 是否碰到邊界？ (Touching the Edge?)

  → ❌ 否 (No) → 返回等待輸入 (Go back to "Wait for User Input")

  → ✅ 是 (Yes)

  ↓

🔷 角色反彈 (Make the Character Bounce)

  ↓

🔲 結束 (End)

📌 結論 (Conclusion)

情境流程圖幫助我們理解 應用場景，而程式流程圖則幫助我們設計 程式邏輯。在 NKNUblock 的學習過程中，這兩種流程圖都能讓學生更直覺地掌握如何設計互動遊戲與應用程式。
(Scenario flowcharts help us understand application scenarios, while program flowcharts assist in designing program logic. Both types of flowcharts make it easier for students to intuitively grasp how to design interactive games and applications using NKNUblock.)