接續上次找到 Javascript 文字轉語音的 API 以後，我做了一個網頁版的數獨，裡面使用該功能讓玩家能直接聽讀同橫排、同直排及同九宮格內的數字。提出來與大家分享，有任何意見也請不吝賜教！
我自己的測試環境：
以下假設讀者已經具備 Javascript 的變數、流程控制、使用者定義函數、陣列及字串處理等基礎，也知道如何替網頁上的 HTML 元件設置事件 (onClick, onChange, onKeyDown, etc.) 處理函數 (handler). 網頁中有一個 <select> 下拉方塊，一個 <table> 表格當成 81 個數字按鈕擺放處，另一個 <table> 放「題庫」。但除題庫外其他元件的內容都變成由 Javascript 產生。下拉方塊的每個選項會提示玩家有幾個空格，用 empty_cells 函數簡單定義空格數量為難度值三倍加五。放數字按鈕的表格，由 Javascript 產生 81 個 <button> 元件，並設置好其 onClick 跟 onKeyDown 事件處理，兩個事件分別當焦點在按鈕上按 Enter 或空白啟動按鈕，以及焦點在按鈕上時按下任何鍵而觸發。 另外網頁一開始就在 <select> 上也設置 onChange 事件處理，會當改變它被選中的選項或焦點在上面按 Enter 時觸發。以及網頁內容開始處 <body> 也設置 onLoad, 當網頁顯示完成時會觸發。 當網頁開啟，將執行下列三個步驟：
因為這個網頁設計成與 IE6 相容，所以文字轉語音方面的使用方式也必須包裝成一樣。然而 ActiveX 的 SAPI 物件無法用 IE6 執行修改語音速率 (rate) 的操作，必須使用 SAPI 的 XML TTS 實現調整音量和速率等客制化設定。讀者有興趣可以進入剛才的連結閱讀，其實 NVDA 也使用 XML TTS 的方式讓我們聽到語音有音量和音調、速率的變化！ 第二步是把 <select> 和 <table> 裡的 Javascript 做完，才算完成這兩個元件，整個網頁顯示完後執行 onLoad 的內容，將把難度 <select> 的值設為 1, 並用 1 為參數呼叫 initialize 函數。這個函數負責初始化整群數字按鈕，會隨機從題庫抽出題目並且混淆，流程大致如下：
最後隨機選出挖空處。先把所有格子都變成黑色無法修改狀態再挑選挖空處，為避免選到重複的格子，被選中的格子需立即改變顏色與工具提示，要是這次選到的格子已經被改過，就避開重選，確定是未選過的格子就也要將數字改成 0. 到此，題目產生完畢，開始計時。 玩家會感受到焦點被拉到 (0, 0) 的按鈕上，可用方向鍵遊走於整個盤面，停在某處想要查探四週可善用 Ctrl 加方向的語音提示（可用句點叫它立刻閉嘴）。可修改的格子剛開始除了呈現紅色外，數字寫 0 且工具提示顯示 M 於座標之後。玩家必須自己找出 0 並從同橫排、同直排、同九宮格等提示推論該格答案。 想修改按鈕上的數字時，可用空白或 Enter 啟動按鈕，若確實可修改則一個含有打字區的視窗將彈出，玩家只允許輸入一個數字。如果輸入不合規定或者故意輸入同橫排、同直排、同九宮格已有一樣數字者，就會引起錯誤訊息，提示此修改無效。注意，玩家可將內容設為 0 表示取消之前的修改，讓該格回到未知數字的狀態。 每次修改成功時，系統會檢查所有按鈕的數字分布是否符合數獨答案，是則立即宣布玩家獲勝，並且顯示回答所花時間。一般狀況顯示時、分、秒，如果作答時間超過 24 小時就只顯示幾天（很難發生吧，除非故意開著整天，然後向別人炫耀自己解數獨的速度有多慢……）。 此時，原本紅色可以啟動的按鈕都變綠，再也無法啟動修改，工具提示厚的 F/M 維持原狀。玩家可以直接用 F2 另起新局，或者用 Tab 跳到「難度」下拉方塊改變空格數目，一旦 Enter 確認難度改變，立刻出現另一局數獨並且開始計時！如果玩到一半想另起新局或改變難度也可以依照上述操作，不一定要等一局結束。 最後，該網頁的 HTML 與 Javascript 程式碼如下。故鄉可能會把程式碼中的半形空白變成全形，想避免此狀況可以從「友善閱讀」或從本文一開始的連結中取得網頁原始碼。 其他參考資料：
|
| 本站公告：〔您越需要我們，我們就越有創意〕 | 本站說明書：〔發現故鄉還有改進的地方，請來信告訴原丁們〕 |
| 觀察應用學習點數 ：〔咱的故鄉有您的參與，會使我們有更大的發揮空間，展現更豐富精彩的學習畫面〕 | 〔期待藉由無障礙網頁設計，能讓視障小朋友更愛看書、更愛寫作且更愛學習〕：盲用電腦「心得分享」 |