今日目標: 學習拿Polymer做實際應用

[線上試玩]

<x-sentence> 這標籤可以用來輸入英文整句句子，並即時與正確答案進行比對，而且可以唸出英文句子 (記得開喇叭)

使用說明

<x-sentence>...</x-sentence> 標籤使用方式

會產生一個整句輸入框，如果按下逗號 『，』會自動唸出英文句子

單字拼錯背景會變成紅色，單字拼對了，會移除輸入框，改用純文字顯示

範例一 加上句子元件

直接使用 sentence 自定標籤，size 屬性是字形的大小

元件化後整個html看起來很清爽

[Github]

自定標籤程式碼說明

[Github]

再來看看<x-sentence>句子元件如何完成

第1行 引入x-word自定標籤元件

第5行 設定 layout

第6~8行 使用 template repeat屬性，產生單字組合而成的英文句子

第13~22行 和 x-word 一樣，提供念出整句英文的語音功能

第25行 預設整句字形大小

第27~30行 如果使用者在x-word輸入框中輸入逗號，表示要念整句英文，所以這裡註冊 x-word 發出的事件 'x-word-sound' ，然後唸出整句英文

第32~36行 將<x-sentence>...</x-sentence>英文句子記錄起來，並整理出單字陣列

第 37 行 唸出整句英文

在HTML使用template動態載入英文句子

範例二 改讀JSON資料並加上語音

[線上試玩]

[Github]

範例二使用 template功能動態注入英文句型資料，準備之後搭配 Google SpreadSheet 元件，就可以自行擴充資料進行練習了。

範例三 加上動態評分

[線上試玩]

[Github]

在x-word 元件埋下輸入完成後，會發出 x-word-check 事件，我們就可以直接在document捕捉該事件，然後進行評分

節錄至 x-word 程式碼，第70行

英文發音上畢竟是機器，腔調不大行，沒有真人發音來的順暢，接下來再整合 youtube 元件，就可以達到真正的練英文聽力了

待續....