実際の様子
GitHubにあげてみた
おおまかなつくり
- csvファイルを読み込む
- それを配列にする
- ランダムな値を1つ決め、配列の[1]要素の英単語をlabelにセットする
- ランダムな値を重複がないように他に3つ取り、合計4つのランダムな整数を配列に入れる
- その配列をシャッフルする(正解の位置をバラバラに)
- それらを選択肢として[0]要素の日本語をbuttonにセットする(選択肢は動的に(自動的に?))(csvなどに不正解選択肢を持ちたくない)
- buttonにこっそり正解の属性を入れてある(改良の余地がありそう)
- 押下時に正解なら「正解」と出る(出るだけ、エフェクトはほしい)
感想など
HTMLを触るのもJavaScriptを触るのもほぼほぼ初めてで、今回登板はなかったがCSSももちろん触ったことがない。
ファイル名も「html JavaScript 紐づけ」などで調べて出てきたサイトに書いてあるとおりに練習をしていた名残で「sample.js」となっている。
HTMLをよく知らないので
<input type="button" id="btn1" onclick="clickfun(event)" ans="" />
のように勝手に属性「ans」を追加していい事に驚いた。(とても便利)
ボタン押下時に値を持っていきたいが、click関数の中にいるので正解を表示するのにはどうしたら良いのか悩んだのでとても助かった。
おそらくはもっといい方法があるはず。
正解かどうかはソースに書いてあるのでどうしても正解したい人に配慮する形になってしまっている。
クリックイベントと属性の追加に関してだが、
e.target.ans == "True"
としたかったが、世の中そんなに甘くなかった。
こちらも譲歩して
e.target.getAttribute("ans") == "True"
と書きたかったがこちらも認められなかった。
正規の(?)属性のidには使えたので仕方なくこのように書いた。
let btn = document.getElementById(e.target.id);
btn.getAttribute("ans") =="True"
あとはmain()が存在しなくても良い(？)っぽいので楽だなと思う。
だが、最初に参考にしたcsvを配列にする関数がfetchを使っていたので関数内で配列をセットしてくれなくて困った。
そのせいで、JavaScriptには参照渡しが存在しないんだと思ってしまった。
非同期処理はまだ、私には早いとされている。
今後の課題
- CSSで選択肢のサイズを統一したい(静的に)
- 英語のLableを大きくしたい(すぐにでもできることはわかる)
- 中央表示にしたい
- 正解時にマルを表示させたい
- 「次の問題」には自動的に行っていいと思う
- 不正解時に正解表示をした方が良い
- 正答率や間違えた問題など記録できたら良い
- 発音音声があると良い(とても難しそう)
- 他のモードもあると良い(時間制限でいくつ正解できるかなど)
- 他の4択もできると良い
- よくわからないがReactやTypeScriptなども学んでいきたい
- GCPなどでWebサイトにしたい
- ドメインが欲しい
- RaspberryPiが入荷してほしい
- GitHubの使い方がよくわからないのでちょっと怖い
- Qiitaの記事の書き方もよくわからない
コーディング面での課題
- 変数、関数の命名が下手(ハンガリアン記法大好きマンなのでホントはこれで書きたい)
- コピペのコメントなどを整理しようとする気がない
- htmlやjsのマナーを知らないので我流の処理がある気がする
- 関数は必ずしも }; としなくても } だけで良い？
- codepenを使いたかったがサインインできなかったのでやめた
- 恐縮だがコードの指摘があればぜひともお願いしたい...
今後に向けて
その2があればまた記事を書きたい。
Special thanks
参考にしたサイトの人たち配列の要素シャッフル関数を作ってくれたサイトの人
勝手に属性を追加することを許してくれたHTMLの人