[Javascript]受験生だから漢字練習のフラッシュカードを作ってみる

18600 ワード
JavaScript monaca JavaScript テキストリンク

いよいよ受験本格シーズンです！！
というわけで、僕の最も苦手な漢字について、フラッシュカードを作りました。
（どこでもできるように・・との考えから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とかの変数が出てくるのはなんとなく無駄な感じがします・・・
もっといい案はないでしょうか？

プレビュー

まあ、これからいろいろ追加機能とかつけていくかもです。