iT邦幫忙

DAY 13
2

你不能不知道的Polymer開發實戰系列 第 13

來點實際應用 - 出英文考題 (電腦請評分)

今日目標: 學習拿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 元件,就可以達到真正的練英文聽力了

待續....


上一篇
來點實際應用 - 出英文考題
下一篇
鐵人賽分享徽章又不見了? 沒關係,有產生器
系列文
你不能不知道的Polymer開發實戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言