英単語が学習できるWebアプリケーションを作成してみよう。
10種類の動物が日本語が表示されるので英単語入力すると正解が表示される。
10問終わると結果が出力される。
実行例
○実行すると以下のように表示される。
○ぞうは英語でなんだろうか？記憶を頼りに入力していく。
○入力が終わったら「答える」ボタンを押す。すると下部に正解かどうかが表示され次の問題が出題される。(この正解という文字は1.5秒後に消える)
○次の問題を解答する。しろくま？？難しい。。。
○間違えてしまった場合は下部に正解が表示される。(この表示も1.5秒後に消える)
○以後繰り返し行い10問を終えると結果を表示して最初に戻る
下のリンクから実際に試すことができる。
https://joytas.net/php/animal/
準備
○任意の場所にanimalappフォルダを作成し、その中にcssフォルダ、jsフォルダ、imagesフォルダを作成する。
○以下のリンクからzipファイルをダウンロードし、解凍後imagesフォルダに格納する。
Let’s challenge
それでは、やってみよう！！
解答例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animal</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<p id="ja"></p>
<input type="text" id="entry">
<img id="img">
<button id="btn">答える</button>
<p id="result"></p>
</div>
</body>
</html>
○特に問題がないであろう。js処理の際にDOMの取得がしやすいように各パーツにidを振っている。中身は全て空にしておき、JSにて動的に生成する。
main.css
#container{
display:flex;
flex-direction:column;
align-items:center;
}
#ja,#entry{
font-size:30px;
}
#img{
width:300px;
height:300px;
margin:20px;
}
#btn{
font-size:30px;
cursor:pointer;
}
#result{
transition:0.5s;
opacity:1;
}
#result.fade{
opacity:0;
}
○スタイルもほとんど当てていない。基本的なレイアウトをflexboxで行ってる。
テキストの表示の際にフェードイン、アウトするようにtransitionを設定している。
main.js
'use strict';
window.onload=()=>{
const animals=[
['ぞう','elephant','elephant.png'],
['しろくま','polarbear','polarbear.png'],
['くじら','whale','whale.png'],
['ペンギン','penguin','penguin.png'],
['ライオン','lion','lion.png'],
['カンガルー','kangaroo','kangaroo.png'],
['ひと','human','human.png'],
['いぬ','dog','dog.png'],
['ねこ','cat','cat.png'],
['あり','ant','ant.png'],
];
const ja =document.getElementById('ja');
const entry=document.getElementById('entry');
const img=document.getElementById('img');
const btn=document.getElementById('btn');
const result=document.getElementById('result');
let index=0;
let correct=0;
btn.addEventListener('click',()=>{
let ans=entry.value.toLowerCase();
let msg='';
if (ans == animals[index][1]){
correct++;
msg='正解!';
}else{
msg=`不正解!${animals[index][0]}の英単語は${animals[index][1]}`;
}
if(index==animals.length-1){
msg+=`<br>全${animals.length}問中,${correct}問正解`;
index=-1;
}
result.innerHTML=msg;
result.classList.remove('fade');
setTimeout(function(){
result.classList.add('fade');
},1500);
setItem(++index);
entry.focus();
});
function setItem(index){
entry.value='';
ja.textContent=animals[index][0];
img.src='images/'+animals[index][2];
}
setItem(index);
}
○英単語のデータをどのように持つか。。。JSだと、悩ましいところだ。クラス、オブジェクト、配列など色々考えられる。今回は一番ラクに記述できる配列を採用した。
○setTimeoutを使ってテキストが1.5秒表示したら消えるようにしている。
○focus()メソッドを使ってボタンを押した後、再び入力欄にフォーカスが戻るようにしている。こういった小さな工夫の積み重ねが使いやすいUIを生む。
完成
このお題を様々な言語で実装していたらこの10種類の英単語を完璧マスターしてしまった。なお、シロクマはwhite bearでも問題なく伝わるようだ。polarbearだとpolarが北極を表すので「ホッキョクグマ」のニュアンスに近くなる。
コメント