12. Testwork
作品概要 #
以前から学校、特に小中高各学校ではあまりデジタル化が進んでおらず、授業は主に教科書、ノート、プリントを使って行われる事が多いです。
その中でも、プリントは特にかさばって困ることが多かったです。さらに、コロナが流行し、緊急事態宣言が出て学校は休校。
授業が進まず、周りの高校生は結構大変そうでした。
そこで、プリントの中で特に小テストを題材にweb上で使えると便利だと思い、今回の作品を制作しました。
この作品を実際に使えるようにするにはまだまだかなりやらなければならないことが多いですが、最終的には各学校で使ってもらえるよう、デザインや動作をブラッシュアップしていきたいです。
プレゼンテーション動画 #
アピールポイント #
この作品は、vue.jsを使って実際に問題に回答できるサイトにしました。
問題は全10問で、回答し終わったら結果が表示されます。次の問題に変わるごとにvue.jsでHTMLの問題文を差し替える仕組みとなっています。
デザインは、学生向けということでダークモードな色合いを通常の色として使って目に優しい配色を心がけました。余白は基本的に１２の倍数と８の倍数で構成し、秩序をもたせました。
コーディングでは、scssとBEMのルールに則って、わかりやすい構造を心がけました。
class名はブロックごとに共通した名前+役割で決め、scssでコーディングしやすい構造になるように考えてコーディングしました。
cssは、共通の要素、レイアウト、各HTML文書ごとの要素でまとめて書いてわかりやすくしました。
制作者感想 #
作品を作っている間はずっと楽しく作業をすることができました。
進めていくうちに「あれもできるんじゃないか」と機能を増やしていったのですが、なんとか問題なく実装ができて本当に良かったです。
今回は２つの外部ライブラリを使用しましたが、それぞれの公式リファレンスに使い方のすべてが詰まっており、検索したり一人で悩んだりするよりまずは公式サイトをよく読むことが大切だと思いました。
また、JavaScriptでHTMLを操作していると可読性が下がったりタグを適切に使用する意識が抜けてしまったりすることもあり、事前の計画や拡張性を意識した設計をもっと心がけることができたらなお良かったです。
- 次の作品: 時間割表作成
- 前の作品: SFチックな天気予報サイト
コメント #
作品ならびにプレゼン動画の閲覧ありがとうございました。
さらに学生作品への評価・アドバイス、感想などコメントいただけると、今後の制作、就職活動の励みになります。よろしくお願いいたします。