アプリづくり

休みで暇なので勉強ができるアプリを作ってみました。

大体のpcの環境でも動くように今回はhtmlとcss、javascriptを使って作りました。

テストをしたのはChrome、iphone上のSafari、Edgeです。

使い方

ダウンロードはこちらから。

drive.google.com

アクセスして右上のダウンロードボタンを押すとダウンロードできます。

ダウンロードをしたら解凍してください。

実行するにはpcが必要です。

windows pcの場合はhttps://www.vector.co.jp/soft/dl/winnt/net/se381431.htmlをダウンロードして実行します。

実行したら追加ボタンを押してダウンロードしたファイルを選択し、待ち受けを開始します　ボタンをクリックします。

クリックしたら　左上にあるポート番号を確認して(デフォルトは80)

実行したpc上ではhttp://localhost:80にアクセスします。

別の端末上で見るときは　http://実行したpcのIPアドレス:80　にアクセスします。

後ろの :80 というのがポート番号です。

macは持ってないのでやってないですかターミナルで下のように実行してください。

cd 解凍したファイルのある場所

python -m SimpleHTTPServer 80

macの場合2行目の一番最後の数字の80がポート番号です。

後はhttp://localhost:80やhttp://実行したpcのipアドレス:80にアクセスしてください。

アクセスすると青い画面にファイル名が表示されるのでクリックしてください。

すると下のような画面にたどり着きます。

初期状態で表示されている問題は小学5年生の理科です。

スマホでアクセスすると下のようになります。

使い方は簡単でときたい問題をクリックし、答えを選択するか入力して答え合わせをクリックします。ポップアップが出て正解か不正解かを知らせてくれます。

トップ画面の右上には正解率が表示されます。

リセットするには履歴を削除すればリセットされます。

pcで見ると右上に問題を編集というボタンがあります。(スマホにはありません)

アクセスすると問題を追加、削除できます。

タイトル、問題文、回答方法を決め、入力すると　回答を入力できるようになります。

選択式にした場合は選択肢の区切りに"、"を使います。

入力するとリアルタイムで選択肢が追加されるので答えとなるものをクリックします。

次のページを作るや、問題を追加して戻るをクリックすると問題が追加されます。

問題を削除するには削除したい問題をクリックし削除をクリックします。

変更がすべて済んだら編集したファイルをダウンロードをクリックし、ダウンロードされたファイルを解凍したzipファイルの中のmondai.csvと置き換えます。

ページを再読み込みすれば表示されます。表示されない場合は Ctrl + F5　キーを押します。