はるですブログ
HARU's blog

素人がプログラミングを使って
こどもの成績を向上させるブログ
中学1年

【中1英単語アプリその1 (PROGRAM 1)】素人が教科書に合わせた英単語アプリ作りました。単語の暗記に役立ててください。

もくじ
  • 解説はなし、とにかく試そう!
  • 参考
  • コード中身
  • まとめ

解説はなし、とにかく試そう!

このブログではじめて、勉強アプリ作りました。

とにかく試してみてください。

英単語001

参考

今回の単語帳を作るにあたって、以下のサイトを参考にさせていただきました。大変わかりやすく、私みたいな素人でもかんたんに書けちゃいました。

JavaScript ばかり勉強して、学校の勉強をおろそかにしてはいけません。英単語の暗記も Webでやりましょう!?

TATSUYA’s Home Page
イヌでもわかるJavaScript講座

また、単語は中学校のテキストである、開隆堂さんのSunshineの章に合わせています。

同テキストを使われている学校の生徒さんは、テストの直前対策などにも使えると思います。

コードの中身


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>英単語001</title>
    </head>
    <body>
        
       <button style="width:100%;height:100px;; padding:20px;font-size:40px;">PROGRAM 1(p.14〜p.17)</button>
        
        
        <script>
            const myQA = [            // 問題テーブル
                "りんご"          , "apple",
                "かばん、袋"        , "bag",
                "ケーキ"          , "cake",
                "猫"              , "cat",
                "市、都市"        , "city",
                "犬"              , "dog",
                "たまご"          , "egg",
                "晩、夕方"        , "evening",
                "さかな"          , "fish",
                "巨人"            , "giant",
                "少女"            , "girl",
                "家"            , "house",
                "インターネット"            , "Internet",
                "アイスクリーム"            , "ice cream",
                "ジュース"            , "juice",
                "かぎ"            , "key",
                "ライオン"            , "lion",
                "牛乳"            , "milk",
                "名前"            , "name",
                "鼻"            , "nose",
                "オレンジ"            , "orange",
                "ペン"            , "pen",
                "クイズ"            , "quiz",
                "部屋"            , "room",
                "6"            , "six",
                "太陽"            , "sun",
                "テニス"            , "tenis",
                "おじ"            , "uncle",
                "制服"            , "uniform",
                "バレーボール"            , "volleyball",
                "腕時計"            , "watch",
                "黄色"            , "yellow",
                "動物園"            , "zoo",
            ];

            let myScore = 0;
            let myNowCnt  = 0;                     // 問題を出すテーブルカウンタ
            const myLastCnt = 10;       // 問題の数
            let myHit = 0;	// 正解数のカウンタ
            let myQAno    = new Array(myQA.length / 2);   // 問題の順番テーブル
            

            function myQuesInit(){             // 問題テーブルのシャッフル
                for (let i=0; i< myQA.length / 2; i++) myQAno[i] = i; // 0~myLastCnt-1を順次セット
                for (let i=0; i<500; i++){             // 500回 myQAno の内容をシャッフルする
                    let my1 = Math.floor( Math.random() * (myQA.length / 2) ); // 0~myLastCnt-1 を決める
                    let my2 = Math.floor( Math.random() * (myQA.length / 2) ); // 0~myLastCnt-1 を決める
                    let myBackup = myQAno[my1];     // myQAnoのmy1番目とmy2番目の内容を入れ替える
                    myQAno[my1] = myQAno[my2];
                    myQAno[my2] = myBackup;
                }
            }
            
            function myQues(){
                if ( myNowCnt==0 ) myQuesInit();                 // 問題をシャッフル
                let myA = prompt("\n問題 : "+myQA[myQAno[myNowCnt]*2],"");
                if ( myA != null ){                              // キャンセルボタンでない?
                    if ( myA == myQA[myQAno[myNowCnt]*2+1] ){     // スペル正解?
                        myHit++;
                    }else{                                        // スペル間違った?
                        alert("はずれ! 答えは "+myQA[myQAno[myNowCnt]*2+1]+" です!");

                    }
                    
                    if (myNowCnt==myLastCnt-1){                // 問題終わった?
                        myNowCnt=0;
                        let myScore = Math.floor(myHit*100/myLastCnt);	
                        alert("問題終了です\n"	
                        +myLastCnt+"問中"+myHit+"問正解。点数は"+myScore+"点です。");	
                        myNowCnt=0;	
                        myHit=0;	
                    }else{                                     // 次の問題へ
                        myNowCnt++;
                        myQues(); 
                    }
                }else{                                   // キャンセルボタン押した
                    myNowCnt=0;
                    myHit = 0;
                    alert("勉強中断 お疲れ様でした!");
                }
            }
            
            document.querySelector('button').addEventListener('click', () => {
                myQues();
            });
         
          </script>
    </body>
</html>

まとめ

ようやくこのブログのテーマである、勉強アプリを作ることができました。

説明は雑ですが、とにかく子供にやる気の起きる勉強をさせることが目的です。

スマホアプリなどと違って、WEBアプリは、ダウンロードすることなく、ブラウザ上で手軽に動くことができますね。

また、英単語を覚えるのにも役立ちますが、タイピングの練習にも使えると思います。

これから、しばらくは単語帳を整備していきたいです。

それではまた次回へ!

ABOUT ME
はる
はる
45歳。3児の父。ごく普通のサラリーマン。 趣味は広く浅く。 プログラムもかじった程度。
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA