いよいよ受験本格シーズンです！！
というわけで、僕の最も苦手な漢字について、フラッシュカードを作りました。
（どこでもできるように・・との考えからMonacaでアプリ化しました）
当然、受験勉強中の息抜きとしてのプログラミングなので、作り自体は単純です。
kanji.csv
うずまき,渦巻き
せんたく,洗濯
おんびんに済ませる,穏便
ようけい業,養鶏
つめを切る,爪
かいこんする,開梱
おだやかな天気,穏やか
映画のかんとく,監督
・
・
・
Excelで中三で習う漢字をすべて書き出し、CSVに出力します
（正直これが一番大変だった）
あとは、Monacaの白紙テンプレートでコードを書いていきます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<img src="img/top.jpg" id="back">
<div id="question">練習開始！</div>
<script>
/*↓画像の置き換え関数↓*/
//画像番号用のグローバル変数
var cnt = 0;
//以下キリバン画像
//画像を配列に格納する
var img = new Array();
img[0] = new Image();
img[0].src = "img/gazou0.png";
img[1] = new Image();
img[1].src = "img/gazou1.png";
img[2] = new Image();
img[2].src = "img/gazou2.jpg";
img[2] = new Image();
img[2].src = "img/gazou3.jpg";
//画像切り替え関数
function changeIMG() {
//画像番号をランダムで決定
cnt = Math.floor(Math.random()*img.length);
//画像を切り替える
document.getElementById("back").src = img[cnt].src;
}
//以下背景画像
var img2 = new Array();
img2[0] = new Image();
img2[0].src = "img/gazou4.png";
img2[1] = new Image();
img2[1].src = "img/gazou5.png";
img2[2] = new Image();
img2[2].src = "img/gazou6.png";
function changeIMG2() {
//画像番号をランダムで決定
cnt = Math.floor(Math.random()*img.length);
//画像を切り替える
document.getElementById("back").src = img2[cnt].src;
}
/*↑画像の置き換え関数↑*/
/*↓漢字一覧の読み取り↓*/
function csv2Array(filePath) { //csvﾌｧｲﾙﾉ相対ﾊﾟｽor絶対ﾊﾟｽ
var csvData = new Array();
var data = new XMLHttpRequest();
data.open("GET", filePath, false); //true:非同期,false:同期
data.send(null);
var LF = String.fromCharCode(10); //改行ｺｰﾄﾞ
var lines = data.responseText.split(LF);
for (var i = 0; i < lines.length; ++i) {
var cells = lines[i].split(",");
if (cells.length != 1) {
csvData.push(cells);
}
}
return csvData;
}
var list = csv2Array("kanji.csv")
/*↑漢字一覧の読み取り↑*/
/*↓漢字をランダムに選択して表示↓*/
var num;
var i = 0;//問題番号/カウント
var t = 0;//2進数・問題/解答の決定
var k = 0;//2進数・画像切り替え時の調整変数
var s = 0;//2進数・背景画像切り替え時の調整変数
function change() {
var Q = document.getElementById('question')
if (i%10==0 && k==0 && i>0){
changeIMG()
Q.textContent = i + "問完了！"
k=1
s=0
}
else if (t == 0) {
if (s==0){
changeIMG2()
s=1
}
i++
var length = list.length
num = Math.floor(Math.random() * (length)) + 1;
Q.textContent = i + "-" + list[num][0];
t = 1
k=1
} else {
Q.textContent = i + "-" + list[num][1];
t = 0
k=0
}
}
/*↑漢字をランダムに選択して表示↑*/
document.addEventListener('click', change)
</script>
</body>
</html>
途中でSとかKとかの変数が出てくるのはなんとなく無駄な感じがします・・・
もっといい案はないでしょうか？
プレビュー
まあ、これからいろいろ追加機能とかつけていくかもです。