福野泰介の一日一創

jigインターン2021夏シーズン2の作品紹介、最終Aチームは、スマホを持ち始める中学1年生向けの情報リテラシークイズアプリ。

「e-Literacy on GitHub」
スマホやパソコンに慣れていなくても直感的に使えるようにと誕生したデザイン、ニューモーフィズムを使用。（参考、【2020年】新しいデザインのトレンド「ニューモーフィズム」に注目 | FASTCODING BLOG、ニューモーフィズムとは？デザイン方法やルールのまとめ | Web Design Trends）

大阪府のネットリテラシー問題を使ったクイズアプリ！ 選択肢を選んで「決定」で解説も表示。サクサク自分で学べそう。完璧にこなせたら何かの認定デジタルシールとか提供するのもいいかもね。

チームAのメンバー、うっしー、てる、やまゆ、そう

情報リテラシーに関するクイズと言えば、情報処理技術者試験、過去問は出典表記で使用が可能とのこと（IPA 独立行政法人 情報処理推進機構：情報処理技術者試験：よくある質問、7 その他、試験の過去問題の使用方法（申請方法、使用料等）について教えてください）。

例えばこんな問題。クイズアプリを作る元ネタとしてもってこい！ひとまず、令和3年の問題からひとまず5問だけCSVデータにしました。出典表記の上、ご活用ください。追記大歓迎！
「code4fukui/digital-quiz-data」

CSVクイズデータを使った、簡単なクイズアプリ、作成例「digital-quiz」 in JavaScript
import { CSV } from "https://js.sabae.cc/CSV.js"; import { waitClick } from "https://js.sabae.cc/waitClick.js"; onload = async () => { const quizdata = CSV.toJSON(await CSV.fetch("https://code4fukui.github.io/digital-quiz-data/ap-2021spring.csv")); console.log(quizdata); let cnt = 0; for (const qd of quizdata) { q.textContent = qd.q; s1.textContent = qd.s1; s2.textContent = qd.s2; s3.textContent = qd.s3; s4.textContent = qd.s4; choice.value = null; await waitClick(ans); if (choice.value == qd.a) { alert("正解！"); cnt++; } else { alert("不正解！正解は" + qd.a); } } alert("正答率は" + (cnt / quizdata.length * 100) + "%!"); }; 4択限定のクイズアプリ、async/awaitを使うと、IchigoJamのように流れをシンプルに表現できます。waitClick.jsを参考に、慣れておこうPromise。

「デジタルクイズ ニューモーフィズム版」
e-Literacyのニューモーフィズムを sakura.css のように、CSSを適応するだけ版「neomo.css」を作って使ってみました。
<link rel="stylesheet" href="https://code4fukui.github.io/neomo.css/neomo.css"> inputやbuttonがニューモーフィズムになるCSSです。（input-checkboxも追加して、対応！）

sakura.cssを適応するとこんな感じ。デザインと機能、分離しておくといろいろ応用できて便利！

問題の答えを選ぶ、どれか選択を実現するUIは、inputのtype=radioですが、labelと合わせていまいちシンプルじゃないので作った、input-radio。 今回ニューモーフィズム対応のため内部構造をlabelのforを使うように少し改造しました。・・・が、sakura.css適応で改行されてしまう点、要改善です。

今日からスタートjigインターン2021夏シーズン3！
アイスブレイクとしてチーム毎にジェスチャークイズ、Zoomのチャットで一斉に答えを書く。誰を見るかが熱い！上は全チームのジェスチャー中の様子を合成したもの。

フロントエンドとバックエンドを一気に学ぶ、勉強会。Denoくん、かわいいね！

jigインターン生による成長の記録
「⭐jigintern diary⭐」