Internet上智慧型電腦輔助教學系統之研究

-- 以國字筆順教學為例

孫光天,許隨耀,陳岳宏,謝凱隆

國立台南師範學院

資訊教育研究所

Tel: 06-2113111 ext 777

e-mail: ktsun@cie.ntntc.edu.tw

摘要

由於電腦網路的普及化,使電腦輔助教學軟體的發展,提供一更寬廣的空間,傳統單機版系統只能做到個人學習歷程與成果之紀錄,而無法做一團體學習成效之分析,進而得到一大量學習成效資料,使教學軟體之信度與效度無法獲得,故網路版之電腦輔助教學軟體之設計與製作,為目前從事資訊教育與軟體系統發展者所必須重視的。本文,則以自行發展之網路教學軟體智慧型國字筆順教學系統為例,說明Internet上電腦輔助教學軟體的設計與製作技術,對有興趣發展網路上教學軟體者,將有相當助益。

研究動機

電腦輔助教學(Computer Assisted Instruction, 簡稱CAI)之研究已在國內、外行之有年,並取得相當豐碩的成果,如:SCHOLAR(Carbonell,1970)SOPHIE (Brown and Burton,1978)與智慧型國字筆順教學系統(孫光天與王俊義,民86)等。

但是大部份的電腦輔助教學系統只可在單機環境運作,使用者無法與其它人透過網路溝通,研究者亦不易借由CAI系統收集大量資料以做為研究之用。近年來由於網路的蓬勃發展,在網路上的溝通日亦頻繁,因此如何設計一個網路上的CAI系統,以達到遠距教學的目的,成為一重要工作。由於傳統單機版的CAI已有多年之發展經驗與顯著的成果若僅考慮為運用到網路環境而重新發展設計,是相當花費時間的一件事,因此如何在舊有的單機版CAI軟體修改成具有網路功能的網路版CAI,即成為本文之主要研究動機。

研究目的

本文,將以網路版的智慧型國字筆順教學系統(孫光天,王俊義,黃志裕,張瑞隆,莊博勝,民87)為例,進行說明,如何將一套傳統單機版的CAI軟體,修改為Internet版之軟體,使一套軟體能透過網路無遠弗屆之能力,達到廣泛學習之功能。

網路CAI軟體之設計

智慧型國字筆順教學系統之系統結構如圖一所示。

圖一.智慧型國字筆順教學系統之架構示意圖

  • 其人機界面之設計考量,為與學習者溝通與輸入方便,使用觸控式螢幕或滑鼠均可操作,其方式是將國字字型以顏色字的方式顯示在螢幕上,學習者可用手指直接在螢幕上書寫國字,所劃過之筆畫會立刻變成紅色提醒使用者。過程如圖二所示。

    圖二.人機介面國字輸入畫面

    為使系統能在流覽器上書寫國字與存取後端的筆順資料庫,系統須能在流覽器上繪圖與連結後端筆順資料庫其方法詳述如下:

  • 一、瀏覽器上的繪圖技術

  • 由於目前在瀏覽器上較常使用的語言如:HTML Java Script VB Script(R. McDaniel, 1997)等手稿語言皆未提供繪圖函式。而Active Server Page(M. Corning, S.E. Hanbcm, D.Melnick, 1997)亦未支援繪圖環境,因此我們必須考慮以他種方式來達到在瀏覽器上繪圖的目的。以程式語言而言有兩種選擇,一種是Java Language(E. R. Harold, 1996),另一種則是ActiveX Control (A. Denning, 1997)技術。我們將以ActiveX Control技術為基礎,說明如何利用Control達到在瀏覽器繪圖的目的。

    我們運用MFC(Microsoft, 1997)來建構一個能在瀏覽器上跑的ActiveX Control,將系統實做成一個ActiveX Control後,利用MFC所提供的繪點函數來達成繪圖的目標。以下是以MFC繪圖程式碼實作說明。

    對筆順教學系統而言,須先設計一個可以偵測Control上圖形像點(Pixel)顏色的函式(Function)。例如,字型的顏色如果是綠色而背景顏色是白色的圖形。我們可以利用此函式偵測,如果偵測到像點是綠色(即表示在字型裡面),則將像點變成紅色,若偵測到的像點是白色的背景顏色則不變色,此部份之程式可以下列方式達成。

  • void CFirstCtrl :: SetPoint(CDC* pDC, int x, int y, COLORREF color)

    {

    int i, j;

    for(i=x; i<=x + positionweight; i++)

    {

    if(pDC->GetPixel(i, y) != RGB(128, 128, 0)

    && pDC->GetPixel(i,y) != RGB(255, 0, 0)

    && pDC->GetPixel(i,y) != RGB(0, 0, 0))

    break;

    for(j=y; j>=y-positionweight; j--)

    {

    if(pDC->GetPixel(i, j) != RGB(128, 128, 0)

    && pDC->GetPixel(i, j) != RGB(255, 0, 0)

    && pDC->GetPixel(i, j) != RGB(0, 0, 0))

    break;

    else

    pDC->SetPixel(i, j, color);

    }

    }

    //以下三個迴圈與上一副程式配合可繪畫出一紅色方塊

    for(…..);

    for(…..);

    for(…..);

    }

     

  • 以上函示之作用為利用GetPixel()偵測Control中之像點(Pixel)顏色,以SetPixel()設定像點顏色,並利用四個迴圈分由上下左右以滑鼠為中心畫出一紅色方塊,四個迴圈的寫法大同小異,在此處省略不提。當使用者欲在一字型上書寫,只要在字型裡按滑鼠左鍵並拖動滑鼠,我們就讓這個繪點函式起作用。使用者就會看到筆劃沿著滑鼠所經過的軌跡變成紅色,填滿一筆畫,以達到書寫一筆劃的目的,程式撰寫如下:
  • //當滑鼠左鍵按下並移動時讓SetPoint()函式起作用

    void CFirstCtrl::OnMouseMove(UINT nFlags, CPoint point)

     

  • {
  • // TODO: Add your message handler code here and/or call default

    if(!startflag)

    COleControl::OnMouseMove(nFlags, point);

    else

    {

    //mouse的左鍵按下and mouse move時呼叫SetPoint()改變

    //國字顏色

    if(nFlags & MK_LBUTTON)

    {

    CClientDC DC(this);

    SetPoint(&DC, point.x, point.y, RGB(255, 0, 0));

    if(mousepositioncount <= 98)

    {

    moveposition[mousepositioncount].x = point.x;

    moveposition[mousepositioncount].y = point.y;

    mousepositioncount++;

    }

    m_MouseMoveFlag = TRUE;

    }

    …………….

    }

    }

  • 因此,當瀏覽器載入此Control(即載入本系統),只要系統一偵測到瀏覽器上有滑鼠移動並按下左鍵的事件發生,就會在字型裡繪上紅色軌跡,如此我們就可達到在瀏覽器上書寫國字的目的了。
  • 二、在Internet上存取檔案的技術

  • 為了減低資料庫的負荷,我們採取了兩層式(two-tiers)與三層式(three-tiers)並行的網路存取架構。將一些不會更動的資料與檔案可由Client端直接透過HttpServer要求檔案讀取,例如國字的字型圖,音效與動畫即可利用此種方式來達成。以Windows NT Server為例,透過Internet Information Server(IIS)架設成Http Server,架構如下圖三所示:
  • 圖三.兩層式的Internet檔案存取架構

  • 我們利用MFC中的數個Internet Class來實作圖三所示架構的連結方式,程式撰寫如下所示:
  • //Http Server下載動畫與音效至硬碟

    void CFirstCtrl :: HttpDownFile(LPCTSTR httpservername,

    LPCTSTR httpfilename, LPCTSTR filepath)

    {

    BeginWaitCursor();

    CFile m_File; //宣告一個 file

    //Declare Internet File Connection

    //要做到可以從Internet中存取檔案必須有以下的步驟

    CInternetSession session("HTTPGET"); //Declare a internet session

    //型態須符合gopher, http, ftp的格式

    //請參考CInternetSession Class

    CHttpConnection *pHC = NULL; //Declare a http connection pointer

    // Internet sessionhttp方式連接 server

    CHttpFile *pHF = NULL; //Declare a http type communication file pointer

    //連上http server, exsample:"www.ntntc.edu.tw"

    pHC = session.GetHttpConnection("icai1101.ntntc.edu.tw");

    LPCTSTR str="*/*";

    CString strfile;

    strfile =CString("/FileSource/") + CString(httpfilename);

    pHF = pHC->OpenRequest(_T(""), _T((LPCTSTR) strfile),

    NULL, 0, &str, NULL, 0);

    //向檔案送出請求

    pHF->SendRequest();

    ………………..

    ……………….

    }

  • 要注意的是檔案的存取仍必須遵循Http的協定。本函式是用HTTPGET的模式向Server要求檔案服務,亦可用HTTPPOST的方式。其行為和HTML中的GETPOST的方式無異。至於 ‘/FileSource/’則是IIS(Internet Information Server)所設定的檔案存放的虛擬路徑。我們將透過InternetServer所讀取到的檔案寫入到Client端的硬碟以增加下一次存取動畫的速度。以上程式碼實作是用Http為例子,亦可改為由Ftp Gopher存取檔案。
  • 三、透過Internet在流覽器上顯示國字圖形的技術

  • 有了上一個從Internet上存取檔案函式設計的經驗,只要將其稍加修改及可用來在流覽器上顯式國字圖形:
  • //Internet Http Bitmap Show On Screen

    void CFirstCtrl :: HttpBitmapShow(LPCTSTR strbuffer, LPCTSTR httpservername, LPCTSTR httpfilesource)

    {

    ……………………….. //連接Http Server與上一個函式相同

    BYTE buffer[10240];

    DWORD length = pHF->SeekToEnd(); //取得bmp file length

    pHF->Seek(0, CFile::begin);

    pHF->Read(buffer, length); //將檔案讀入buffer

    //開起一個buffer file

    m_BitmapFile.Open("c:\\buffer.bmp", CFile::modeCreate |

    CFile::modeReadWrite);

    //將bmp file 寫入buffer file

    m_BitmapFile.Write(buffer, length);

    m_BitmapFile.SeekToBegin();

    m_dibFile.Read(&m_BitmapFile); // read buffer file to dib file

    m_dibFile.UsePalette(&m_memDC); // use palette

    // show dib bitmap file on screen

    m_dibFile.Draw(&m_memDC, CPoint(offsetX, offsetY), CSize(300, 300));

    ……………..

    }

  • 連結Http Server的方式並無不同,在本含式中只多了處理Bmp檔的檔案存取方式,並將其顯示在流覽器上。
  • 四、在Internet上存取資料庫的技術

  • 為達到與使用者互動並能即時判斷使用者書寫國字筆順的情形,系統必須存取大量的資料並儲存使用者的學習行為,以供系統中的學生行為模組分析,因此利用資料庫來建構判斷與分析國字筆順結構的資料,並存取學生的學習歷程,透過Internet達到網路教學的目的。本系統在這方面採用三層式(three-tiers)的架構,如下圖四所示。
  • 圖四.三層式資料庫連結架構

  • Client端所須要的筆順規則資料透過Server上的ODBC介面由後端的資料庫傳送到Client端,而Client端則將學生的學習歷程透過Server上的ODBC介面傳送給後端的資料庫。程式碼實作如下:
  • //Initial Database

    void CFirstCtrl :: InitDatabase()

    {

    //將Database建立起來並建立primary CRecord

    if(m_StrokeOrder == NULL)

    {

    m_StrokeOrder = new CStrokeOrder(&m_database);

    //取得資料庫的連接介面形態(ODBC)

    CString strConnect = m_StrokeOrder->GetDefaultConnect();

    //打開資料庫

    m_database.Open(NULL, FALSE, FALSE, strConnect, FALSE);

    }

    //將其餘的資料表建立起來

    m_StrokeOrderDemoX = new CStrokeOrderDemoX(&m_database);

    m_StrokeOrderDemoY = new CStrokeOrderDemoY(&m_database);

    //將資料表打開並測試是否有資料

    if(m_StrokeOrder->IsOpen())

    m_StrokeOrder->Close();

    ……………………..//以下為其他一些資料庫的動作

    }

  • InitDatabase()利用CDatabase類別中的GetDefaultConnect()函式將ODBC介面與程式及Server端資料庫連接起來,系統與後端的資料庫連接後,並打開所須用到的各個資料表,如此系統的各個模組即可運用資料庫的資料了。其餘應用資料庫的方法則與單機使用資料庫的方式並無不同。關於後端的資料庫亦可用MS-Access或其它有支援到ODBC介面的資料庫軟體來實作,或者透過DAO(Data Access Object)ADO(Active Data Object)來達到與資料庫相結合的目的。
  • 結論

    本文之研究,係將原單機版之CAI系統,修改為網路版之教學軟體,為解決本系統所須之特殊需求(在瀏覽器上繪圖),因此面臨相當多的網路程式語言之研究,如此一來網際網路版之CAI系統將突破時空之限制,提供更廣泛之學習環境與功能,相信,其他CAI之軟體亦可經由本研究之心得與經驗,修改為網路版之系統。

    參考文獻

    孫光天,黃志裕,王俊義(86) 國字筆順之智慧型電腦輔助教學系統中華民國八十六年全國計算機會議pp.D-147~152,東海大學,十二月二十二~二十三。

    孫光天,王俊義,黃志裕,張瑞隆,莊博勝 (87)類神經網路於國字筆順電腦輔助教學之研究”, 第七屆電腦輔助教學研討會,國立高雄師範大學,三月十九~二十一。

    Brown, J. S. and Burton, R. R. (1978). Multiple representations of knowledge for tutoring reasoning, Representation and Understanding Studies in Cognitive Science, D.G. Bobrow and Allan Collins (Eds), New York: Academic Press, pp. 311-349.

    Carbonell, J. R. (1970). AI in CAI: An artificial intelligence approach to computer-aided-instruction, IEEE Transactions on Man-Machine System, 11(4), pp.190-202.

    Corning, M., Hanbacm, S. E. & D. Melnick, (1997). Working with Active Server Page. QUE.

    Denning, A.(1997). ActiveX Control Inside Out. Microsoft Press.

    Harlod, E. R.(1996). Java Network Programming. O’REILLY.

    McDaniel, R.(1997). How to Progr