高二自主學習-單字練習系統
作品連結
完整版文章請至以下連結(此版本為測試markdown)
https://github.com/123456dr/RCvocabulary# (最新)
https://hackmd.io/@Rcchu/Sy8DaW-fR (次新)
此篇文章不保證及時更新
flutter7000單計畫
flutter buid web
高畫質版PDF & 翻頁書 PDF不支援手機版查看! ! !
如果是長期使用者,
建議使用同一次開啟的網頁頁面,
=>開啟頁面後不得關閉,(關閉頁面可能造成新增的資料流失)
手機 : 把該頁面按分享鍵,選擇新增到手機主頁面
電腦版 :
![image](https://hackmd.io/_uploads/ryLW8FbPC.png =80%x)
! ! !
使用說明
*系統會自動紀錄
最後一次瀏覽的頁面! 節省刷新後重選類別!
*注意⚠️ 若遇到過長的文字,可以水平滑動查看喔!
*單字發音
電腦版使用者[男聲]
手機板使用者[女聲]
p.s 強烈建議在我研究出手機板男聲前使用電腦練習
(男生標準清楚&手機版單字庫尚未優化不能正常顯示)
(預計學測後修正)
*於填空模式多按幾次翻譯按鈕即可成功重載英文句子
說明:
1.點選級別/類型 進入頁面,
右上方可切換模式(目前可使用:學習+測驗 ,’填空’施工中)
- 於預設-測驗模式 : 輸入上方提示之英文單字,
按下確認(鍵盤或按鈕),若輸入正確將該單字從題庫移至已學會資料庫 - 於學習模式 : 看英文練中文,熟練後按
- 按learned 將該單字從題庫移至已學會資料庫
- 按pass 跳過該題(表示仍會出現於題目)
2.小按鈕:
- 點案音量符號可撥放發音
- 可點選「ANS」查看該題英文單字
3.下方按鈕
- 「查看已學會單字」 : 點選查看作答正確列表,
可復原使該單字再次出現於題目中 - 「查看剩餘單字」,
將列出未作答單字,
可點選「刪除」排除該單字出現在題目的可能
4.點選「重置」,
將把已學會清單清空,
用於題目回答完畢時,一鍵重新學習,
[注意此動作無法復原]
5.主頁面點選「input」進入頁面,
點按’編輯單字’可自定義單字
*小細節 : 輸入框按鍵盤enter會自動跳下一個輸入框喔!可於編輯單字區輸入單字,
在輸入完英文後,
可選擇系統建議中譯,
[注意單字英中為必填,詞性可選填]
按下ADD鍵送出,可於下方列表第一項查看上方一鍵清除為清空所有新增單字
失誤將造成無可挽回的慘況orz
! ! ! 設計細節:
剛學會或剛復原的單字將顯示在資料庫頂端,便於回復上一步
*備註RCC專用倉庫暫不開放
更新日誌
7/2 - 4h:
(要學測了還做orz
- 完成句子填空頁面
- 英文句子挖空
- 英文句子解答填空
- 英文句子中譯
- 英文句子朗讀
- 新增學習頁面自動發音選項
- 當切換到別的頁面=>失效並自動關閉選項
- 新增個人網頁連結於首頁https://123456dr.github.io/2024/05/28/RCvocabulary/
6/13:
- 改成按下類別才顯示清單
=>為了解決手機無法載入單字列表頁面(資料過多,當機) - 在自定義單字頁面新增刪除開關啟用鍵,雙重點擊(啟用+按刪除)減少用戶失誤永久刪除單字
6/12:
- FocusScope.of(context).requestFocus(_focusNode1);
當點擊新增單字的’Add’後將自動回到單字輸入框
=>失敗 - 解決的一鍵復原/移出題庫的checkbox不顯示
=>因為對話框沒有及時改變狀態的效果,
我選擇在當用戶按下checkbox時自動關閉再開啟對話框,
達到重載效果
Navigator.of(context).pop();
_showClassSelectionDialog(context); - 修改[自定義單字] :
當用戶輸入的中文翻譯和自動翻譯選項不同時隱藏選項,
若用戶手動清空該輸入框則再次顯示中文翻譯建議 - 修正資料庫項目計數 :
原先為刪除/復原一個單字num–
導致連按快於系統反應出現num=-1
連帶影響單字轉換儲存庫的動作(題庫與以學會資料庫間轉換)
=>改為刪除/復原單字時setState(){num=該資料庫項目.length}
6/10:
- 新增建立自定義單字分類!
- 新增一鍵復原/學會類別!
可以方便選擇練習範圍(自定義單字的部分,input頁面)
*小細節,在輸入自訂單字時,送出內容後分類輸入框
欄位不會清空,可以節省一次性輸入同類別時的時間!
*在資料庫查看頁面,也按照類別分類,可以輕鬆查找
(帶新增搜尋單字系統)
6/8主要更新:
1.新增三個模式頁面[填空, 學習, 測驗]
主模式為測驗(意即進入分級預設模式)
*填空頁面為英文句子待更新
https://www.wordnik.com/users/rcc/API
2.優化程式碼
將多部分重複片段整合
*待處理:獨立頁面程式碼
3.編輯單字頁面:
三個輸入框,
輸入完第一個按鍵盤確定會自動跳到下一個框!
最後一個則是自動送出!
4.花了5小時新增第二級單字+精簡程式碼+除錯!
5.新增了主頁面連結複製按扭,
原先設計的超連結限定電腦使用,所以製作複製扭讓手機用戶可以以瀏覽器貼上網址的方式前往察看我的其他資料!
6/2主要更新:
1.新增答題發音,資料庫查看發音
2.修正input自定義單字儲存問題
3.新增input輸入英單提供建議中譯
4.新增input一鍵清空自訂單字
5.加密個人分頁(rc儲藏室)
6.新增多項清除作業提示框(清除,重置)
7.改善輸入框視覺效果
5/31:
1.新增ANS三切功能[提示,顯示,隱藏]
動機
過程
將大考中心的英文單字文本,
以[選取複製]的方式丟到c++程式碼分析成Json格式!
1.複製文本,為了讓網頁有單字中文的顯示,先透過c++程式碼將英文單字與詞性分離並輸出單字部分,接著複製純單字至線上翻譯網頁大量翻譯內容
2.得到英文 詞性 中文後再撰寫程式碼轉換成Json格式輸出
檢討:
事後仔細考慮,
發現直接在dart檔案裡修改資料儲存模式,
先把資料文本存入陣列,在撰寫出轉換Json格式的程式碼修飾文本即可,
也可以乾脆案規律從文本陣列提取資料減去繁瑣流程!
1 |
|
Json格式
![image](https://hackmd.io/_uploads/BJOtshE4C.png =50%x)
翻譯網站:https://www.onlinedoctranslator.com/app/translationprocess
(原本有考慮從頭到尾用API google translate,
但考慮到離學測的日子不遠,
先做出簡易實用版,
只有:使用者自定單字的建議中譯有引用到!)
遇到的問題
發現單字計數不會隨按下按鈕及時改變 => 把length改成num++
發現單字經過調動(已學會、復原或新增等),
該單字會移置顯示畫面底端=>把LIST 從index值(頭到尾)顯示改為length-index-1(尾到頭)5/29新增葉面記錄功能,直接紀錄上次作答的類別頁面,
減少刷新夜面重選選單的困擾改善bottom overflow =>捲動+加長到螢幕底
1
2
3
4
5SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height,
),更新:按鍵盤enter等同按鈕確認
修改答案提示的底線數量根據單字長度變化
6/8花了2小時編修正邊查找[ 單字庫顯示錯誤 ]的問題,
發現:在學習模式做完所有單字 (all移出題庫存入已學會單字庫),
在沒有剩餘單字的情況下按learned按鈕會送null到’已學會map’,導致存入不合法的空資料
==>應在每次按下learned按鈕後setstate檢查題庫是否為空,
若不為空則正常執行(該單字移入已學會db),
否則執行showrandomword進行函式在沒有題庫下的清空輸出動作
心得
reference:
- flutter讀取pdf文字
- https://tw-hkt.blogspot.com/2019/11/2019-flutter-30-1117.html
- https://ithelp.ithome.com.tw/users/20139951/ironman/3913
- https://www.onlinedoctranslator.com/app/translationprocess