立即申請 檢閱考試指示 測驗分數評估

考試

請實作依照設計圖像素完美桌面及手機前端介面。

  • 必使用React.js, Flexbox, 及React UI 零件架構。
  • 必使用static page方式(無後端)在Firebase或其他架構上架。

桌面介面

手機介面

需求規範

  1. RWD. 桌面及手機Responsive Web Design。
  2. 必使用JavaScript.
  3. 必使用 React.js.
  4. 必使用 **CSS Flexbox
  5. 必使用React UI framework,從以下賽選:
    1. Material UI
    2. Semantic UI
    3. React Bootstrap
    4. React Toolbox
    5. Elemental UI
  6. 必使用static page方式(無後端)在雲端架構上架。
    1. 請用雲端架構 Heroku, Firebase, ZEIT, 或 Netilfy 上架static page。
    2. 這不是後端測驗,所以網頁和使用者互動全在前端實作。

重要提醒

  • 我們並不期望你完整開發每個功能。重點不是要全部 “做完”,是要查看有嘗試部分的能力、進度,盡力而為就可以。
  • 請使用 GitHub/GitLab.
  • 這份線上測驗分數會決定您的職級與薪資範圍。每個網頁功能有分數。請必定要交卷。
  • 2.5小時到時:
    • 有開發多少,就交卷多少,考試並沒有所謂的 “完成”。
    • 請必定要上架,並提供網頁 URL.

考題大綱

  1. 像素完美在一下狀態:
    1. 桌面(Chrome)
    2. 手機(Android, iOS)
    3. 沒設計圖的狀態
  2. 效果
    1. Hover
    2. Selection
    3. Disable
  3. 鍵盤及滑鼠動作
滿分 網頁功能
50 數據輸入格
50 圈圈表格及數據介面
60 選項介面(每種選項型20分)
40 主頁及Hashtags

測驗分數評估

網頁功能

請以下表單選任網頁功能實作,不用照順序。

1. 數據輸入格

  • 限制輸入數字 (0-9), 逗點 (.), 及符號 (/)
  • 不行用左右鍵往前後
  • 不行用滑鼠點輸入格
  • 鍵盤自動專注在輸入格,不需點輸入格
  • “Press Enter” 文字及 “Submit” 會在有輸入數字時出現

2. 圈圈表格及數據介面

  • 桌面和手機介面像素完美
  • 不能只是個畫面,需要跟著數據變動

桌面介面

手機介面

3. 選項介面

  • 桌面和手機介面像素完美
  • 三種選項
    • 簡易選項
    • 多選項
    • 點勾選項

簡易選項

多選項

點勾選項

4. 主頁及Hashtags

  • 桌面和手機介面像素完美

桌面介面

手機介面