06. 使用者介面
Computer Science activities with a sense of fun: Spit-not-so V1.0, 15 March 2014
Created by Paul Curzon, Queen Mary, University of London for Teaching London Computing: http://teachinglondoncomputing.org
本教材以創用CC 3.0 姓名標示-非商業性-相同方式分享釋出(creative commons 3.0 BY-NC-SA) https://creativecommons.org/licenses/by-nc-sa/3.0/deed.zh_TW
一個被稱為Spit-not-so的文字遊戲
運用迄今為止你學過的運算思維，跟你的同學比一場文字遊戲。
透過這個活動，告訴學生為什麼圖形的使用者介面比純文字介面更容易使用，並解釋資料結構的概念，以及有良好的運算思維是多麼重要的事。
在這個單元可以學習到:
- 資料結構data structures
- 運算思維
- 使用者介面
活動說明:
1. 告訴學生，我們要來學習一個新的文字遊戲，稱為Spit-not-so。
2. 在黑板上依序寫出下列單字（由上往下）：
SPIT
NOT
SO
FAT
FOP
AS
IF
IN
PAN
3. 遊戲進行時，請學生兩個兩個一組，輪流任意選擇其中一個單字，選擇後用筆將單字劃掉（先選的人用打╳的方式劃記、後選的人用打○的方式劃記）。
4. 你所劃掉的單字中，先有三個單字均包含了同一個英文字母，即為勝利。
例如：SPIT、SO、AS都包含了字母S，如果這三個單字均由同一個人劃記，則由這個人獲勝。
如果全部的單字都被劃完，卻沒有人達成獲勝條件，則稱為平局。
5. 賽局範例：
學生1: SPIT
學生2: SO
學生1: FAT
學生2: NOT
學生1: FOP
學生2: IF
學生1: PAN
獲勝者為學生1，因為他所劃記的四個單字SPIT、FAT、FOP與PAN，有三個單字包含了英文字母P
6. 讓學生兩兩一組，進行幾局遊戲，然後進行討論：
(1) 判斷勝利條件是否達成，是容易還是困難的？ (2) 你們的賽局成功分出輸贏的機會多，還是平局的機會多？ (3) 你覺得這遊戲容易玩嗎？ (4) 在對方快要贏的時候，你有沒有辦法即時判斷出來？ (5) 如何判斷你這一步的單字劃記是好的或是壞的選擇？ (6) 詢問學生，井字遊戲（或稱圈叉遊戲）同樣是輪流進行劃記的比賽，跟SPIT-NOT-SO比起來，哪一個比較容易進行？7. 找兩個自願者到黑板之前，在全班同學面前進行比賽。其中一人按照原本的方式劃記，另一人則給他三張紙：提示盤、先下者的指示與後下者的指示，讓他按照紙上給予的協助進行比賽。
8. 三張紙張的內容分別如下：
(1) 提示盤
只有自己能看，先下者劃掉一個單字，就在對應那個單字的格子內劃╳，後下者劃掉的單字，就在對應的格子內劃○
注意：劃╳或○的動作都只有在提示盤上面進行。
(2) 先下者的指示
第1步：找到任意一個角落的單字，劃╳第2步：如果上一步劃掉的單字，斜對角沒有被劃掉的話，就劃掉斜對角的那一個。如果斜對角已經被劃掉了，那就隨便找一個角落，劃掉那個位置的單字。第3步：如果任意一個橫排、直列或是對角線已經有兩個╳了，那就找到第三個位置劃╳如果任意一個橫排、直列或是對角線已經有兩個○了，那就找到第三個位置劃╳以上兩個情形都沒有發生的話，那就找一個空白的角落劃╳第4步：如果任意一個橫排、直列或是對角線已經有兩個╳了，那就找到第三個位置劃╳如果任意一個橫排、直列或是對角線已經有兩個○了，那就找到第三個位置劃╳以上兩個情形都沒有發生的話，那就找一個空白的角落劃╳第5步：找到還沒被劃記的地方，劃╳(3) 後下者的指示
第1步：如果對手第一步就劃掉了正中間的單字，那就找到任意一個角落的單字，劃○如果正中間的單字沒被劃掉，那就在正中間的單字上劃○第2步：如果有一條線已經有兩個╳，那就在空白的位置劃○否則觀察對手佔掉了哪個角落的位置，在它斜對角的角落位置劃○若是對手也沒有佔掉任何一個角落，則隨意找一個位置劃○第3步：如果有一條線已經有兩個○，那就在空白的位置劃○否則如果有一條線已經有兩個╳，那就在空白的位置劃○若是以上情形都沒有發生，則隨意找一個位置劃○第4步：如果有一條線已經有兩個○，那就在空白的位置劃○否則如果有一條線已經有兩個╳，那就在空白的位置劃○若是以上情形都沒有發生，則隨意找一個位置劃○詳細說明:
1. 資料結構（data structure）
透過這個活動，我們發現了可以用一個比較簡單的方式，讓原本可能不容易進行的遊戲變得簡單。在劃記的流程之中，原本看到的都是英文單字（學生最討厭的東西），光是要判斷下一步是否會造成勝局或是敗局都不容易了，但只要轉換成傳統的井字遊戲形式，英文單字本身包含了哪些字母，其實就再也不重要。
原本的單字排列方式，是由上而下書寫，我們稱之為一個串列（list），在指示盤中我們把串列轉換成井字方格（grid）的形式，這個動作在電腦科學演算法的概念裡面稱為資料結構的轉換。串列的資料形式會讓遊戲的進行變得較不順利（緩慢），而一個好的資料結構將能加快遊戲進行的速度，對於電腦程式來說也是這樣的。
2. 使用者介面（user interface）
為了知道是否達成勝利的條件，在腦中我們會一直重覆檢查每個單字之中的英文字母。經過資料結構的轉換，我們將可以不用再關心實際上單字究竟是什麼，後續的動作變得跟玩一場井字遊戲一模一樣。對於大腦的運作來說，圖形式的操作方式，比起面對一連串的文字，將會來得比較容易一些。所以我們在設計程式時，也必需同時要設計出容易使用的操作介面。比起介面都是文字組成（稱為command line interface）的，使用者會比較喜歡圖形介面（graphical interface），感覺比較親切且直覺。當然，圖形的設計就顯得非常重要了，它必需一目了然，看了就知道它的用意（當然也可以在圖案旁邊搭配簡單的文字說明），像是電鍋的煮飯開關，你不會把它設計成一個發射飛彈的圖案吧？
3. 運算思維
最後我們把注意力放在指示紙條上面，像是先前玩過的「有智慧的紙片」活動，對於電腦而言，所謂的人工智慧其實是來自於人類賦予它的指令，而電腦其實只是按照設計好的指令在執行。指令設計得越好，電腦所表現出來的智慧越令人驚訝。電腦科學家透過不同的指令設計（program）來完成指令的設計，也就是一般所稱的程式語言（program language）。這次我們的指令更為複雜，考慮到了先下與後下的兩個狀況，只是因為井字遊戲的規則、訣竅差不多是固定的，所以我們能把遊戲過程設計成指示的指令，無論是誰來進行遊戲，只要照著上面步驟做，都可以把遊戲玩得很出色。
6 提示盤與步驟提示.doc