学習するためのゲームの開発とモバイルで表示する方法を検討していました。

まず学習するためのクイズゲームは指文字の画像を表示して4択の中から正解を選択するゲームです。問題順序や選択肢の配置順はすべてランダムになっています。

当初は画像のようなボタンをイメージしてコーディングしていたがCSSがうまく反映されていません。

li {
position: relative;
label {
color: #222;
display: block;
margin: 0 auto;
height: 60px;
display: flex;
align-items: center;
width: 100%;
padding: 4px 20px 4px 80px;
font-weight: bold;
font-size: 18px;
line-height: 1.16;
position: relative;
transition: 0.3s ease-in-out;
border: 1px solid #000;
white-space: pre-wrap;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
&.is-checked {
pointer-events: none;
}
}
&::after {
position: absolute;
text-align: center;
font-size: 20px;
font-weight: bold;
content: “”;
width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 1;
pointer-events: none;
border-right: 1px solid #000;
}
&:nth-child(1)::after {
content: “A”;
}
&:nth-child(2)::after {
content: “B”;
}
&:nth-child(3)::after {
content: “C”;
}
&:nth-child(4)::after {
content: “D”;
}
}
}

最後にスコアが表示される場面でスコアや「最初にからやり直す」ボタン以外の背景を半透明の黒色にしてスコアが強調されるようにしたかったのですが、これもCSSがうまく反映されませんでした。

このゲームモードと逆のひらがなから正しい指文字の画像を選択するゲームモードも作成中ですが、内部システムはほとんど流用できるのですぐできると思います。

また、モバイル端末での表示ですが先輩のプログラムはPythonのFlaskを使ったWebアプリのためプラグインの導入やサーバのレンタルでは難しいと思いました。

https://blog.creative-plus.net/archives/9393

こちらのサイトではPython Flask で作ったWEBアプリを GitHub にプッシュして Heroku でデプロイする方法が記載されていたため、GitHubやHerokuのアカウント作成や、ファイルの生成などを行う必要があるため準備をしていました。

来週は内定式で３日間ほど関東に行かないといけないため、研究を進めるのが少し難しいかと思います。