[Javascript] 수험생이기 때문에 한자 연습의 플래시 카드를 만들어 보자

18690 단어 자바스크립트monaca
드디어 수험 본격 시즌입니다! !
그래서 내 가장 서투른 한자에 대해 플래시 카드를 만들었습니다.
(어디에서나 할 수 있도록 ···의 생각으로부터 Monaca로 앱화했습니다)
당연히, 수험 공부중의 숨막히기로서의 프로그래밍이므로, 제작 자체는 간단합니다.

kanji.csv
うずまき,渦巻き
せんたく,洗濯
おんびんに済ませる,穏便
ようけい業,養鶏
つめを切る,爪
かいこんする,開梱
おだやかな天気,穏やか
映画のかんとく,監督
・
・
・

Excel에서 중3에서 배운 한자를 모두 내보내 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라든지의 변수가 나오는 것은 어쩐지 쓸데없는 느낌이 듭니다・・・
더 좋은 방법은 없습니까?

미리보기





글쎄, 앞으로 여러가지 추가 기능과 함께 갈 것입니다.
[monaca][onsenui][AngularJS][ui-router]onsenui/ui-router 최소 프로젝트
C# 프로그램에서 워드 문서를 만들고 편집하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage