Web Storage を用いた学習システムの雛型

Web StorageとJSONを用いた学習システムの雛型プログラムを作りました。

 

本記事は、以下の記事の続き記事になります。

  • Web Storage の試作プログラム
  • Web Storage とJSON の試作プログラム

今回の試作プログラムは前回と比べて、学習画面を俯瞰する「ナビゲータ」機能を追加しました。

また、プログラム全体を見直し、試作プログラムとしての完成度を高めました。

  • ナビゲータ機能の追加
  • 試作プログラムの完成度向上

 

雛型プログラムの仕様

仕様
  • 学習画面が「初級」と「中級」の2画面ある
  • 「初級」修了者のみ「中級」に進める
  • 学習記録が残る
  • 学習記録は消去できる
  • ナビゲータ機能がある

 

動きの確認

 

 

  1.  [Lesson Start]ボタンをクリック
    レッスンA ページに移動
  2.  [Practice!]ボタンをクリック
    1回カウント:数字が0から1に変化
  3.  [Navigator]ボタンをクリック
    各レッスンの状態を確認
    ・レッスンA:未修了(NG)、練習回数(1):クリック可
    ・レッスンB:未修了(NG)、練習回数(1):クリック不可
  4.  [Lesson A]ボタンをクリック
    レッスンA ページに移動
  5.  [Practice!]ボタンを、4回クリック
    5回カウント:数字が5に変化
  6.  [Navigator]ボタンをクリック
    各レッスンの状態を確認
    ・レッスンA: 修了(OK)、練習回数(5):クリック可
    ・レッスンB:未修了(NG)、練習回数(1):クリック可
  7.  [Lesson B]ボタンをクリック
    レッスンB ページに移動
  8.  [Practice!]ボタンを、5回クリック
    5回カウント:数字が5に変化
  9.  [Navigator]ボタンをクリック
    各レッスンの状態を確認
    ・レッスンA: 修了(OK)、練習回数(5):クリック可
    ・レッスンB: 修了(OK)、練習回数(5):クリック可
  10.  [Remove All Lesson Data]ボタンをクリック
    Lesson の得点が残っていないことを確認

 

試作プログラムを作るため、Web Storage とJSON を利用しています。

Web Storage に関しては、記事「Web Storage の試作プログラム」に詳細を記述しました。
Web Storage の詳細は記事「Web Storage の試作プログラム」をご参照ください。
JSON に関しては、記事「Web Storage とJSON の試作プログラム」をご参照ください。

 

 

データ構造

 

JSONを用いて、以下のデータ構造としました。

 

Web Storageへの保存

上記データ構造は、以下の形をしています。

{ key : value }

 

key とvalue は、それぞれ以下となります。

(注)上記value は、配列(Array)です。

 

Web Storage はデータを、key とvalue のペアとして保存します。

上式で与えられるkey とvalue をペアとして、Web Storage に保存しました。

 

 

 

各レッスンのデータ構造

各項目の意味は以下の通りです。

  • lessonNo: レッスン番号
  • workable: レッスンが学習可能か否か(true / false)
  • pass: レッスンを修了したか否か(true / false)
  • count: レッスンの練習回数

 

例1. initialLessonArray

例1. は、レッスンデータの初期値です。 データの意味は以下となります。

  • 初級コース:レッスン番号:0、学習可能 、未修了、練習回数:0
  • 中級コース:レッスン番号:0、学習不可能、未修了、練習回数:0

(注)中級コースは「初級コース修了」により、学習可能になります。

 

 

雛型プログラム

 

ユーティリティ

Web Storage のアクセス、JSON 関連のプログラムです。

  • プログラム名: utilWSneo.js

 

utilWSneo.js

 

utilWSneo.js の説明

utilWSneo.js は、記事「Web Storage とJSON の試作プログラム」でのutilWS.js とほぼ同じです。

詳細は、記事「Web Storage とJSON の試作プログラム」をご参照ください。

 

ここでは、各関数の機能などを簡単に説明します。

定数・グローバル変数

  • KEY: Web Storage にデータを保存する際のKey。”lessonData789”
  • lessonArray: レッスンの進捗状況を保存する配列
  • initialLessonArray: レッスン進捗状況の初期値

 

各関数

  • createWebStorageData()
    • Web Storage にinitialLessonArray を保存
    • lessonArray の初期化
  • readWebStorageData()
    • Web Storage からlessonArray にレッスンデータ読込
  • writeStorageData()
    • lessonArray からWeb Storage にレッスンデータ保存
  • removeWebStorageData()
    • Web Storage からレッスンデータ消去

 

 

初級ページ

2頁ある学習ページの初級ページです。

プログラム名: lessonA.html

 

lessonA.html

 

lessonA.html の説明

JavaScriptファイルの読込み

lessonA.html の6 行目、19 行目で、以下のプログラムを読込んでいます。

  • utilWSneo.js: Web Storage、JSON 関連の関数
  • commonFunc.js:各レッスンページに共通の関数

 

body部

 

Fig.1 lessonA.html の画面

 

lessonA.html の各要素は、Fig.1 を参照してください。

 

<input>要素は2個、タイプはボタンです。

各ボタンは、クリックすると以下のプログラムが動きます。

  • [Practice!]ボタン: lessonDriver()
  • [Navigator]ボタン: navigator.html

 

<output>要素は2個あります。

それぞれ、以下の情報をテキスト表示します。

  • 各レッスンの練習回数
    • Fig.1 での使用例: 「6」
  • Web Storage の使用状況
    • Fig.1 での使用例: 「Local Storage: use now」

 

 

 

定数

  • BORDERLINE: レッスンA 修了に必要な練習回数
    • 例. レッスンA は、練習5回で修了(修得済み)
  • LESSON_NO: レッスンの通番
    • 例. レッスンA は、レッスン番号が0 番
  • FINAL_LESSON: 最終レッスンか否か
    • レッスンA は、次(レッスンB)があるので、最終レッスンではない

 

lesson() 関数

lessonA.html の本体です。

コメントアウトしている部分に、具体的な「レッスンの内容」を記述します。

16 行目、「true」を返すことで、レッスンA が「1 回カウント」されます。

 

 

 

 

中級ページ

2 頁ある学習ページの中級ページです。

  • プログラム名: lessonB.html

 

lessonB.html

 

lessonB.html の説明

lessonB.html は、基本的にlessonA.html と同じプログラムです。

lessonB.html と、lessonA.html の違う部分にラインマークしました。

 

8 行目から10 行目まで

BORDERLINE: レッスンB のボーダーライン、「5」

LESSON_NO: レッスンB のレッスン番号は、「1」

FINAL_LESSON: レッスンB が最後のレッスンなので、「true」

 

13 行目から15 行目まで

レッスンB でレッスンする具体的内容を記述します。

今回は雛形なので何も記述していません。

 

22 行目

ページの表題を、「Lesson A」から「Lesson B」に変更しました。

 

 

Fig.2 lessonB.html の画面

 

レッスンページに共通のプログラム

LessonA.html とLessonB.html において、共通するプログラムを集めました。

  • プログラム名: commonFunc.js

 

commonFunc.js

 

commonFunc.js の説明

グローバル変数

  • input_element: [Practice!]ボタン
  • output_element: [Practice!]ボタン横のテキスト表示エリア
    • Fig.2 での使用例、「7」
  • outputWS_element: [Navigator]ボタン下のテキスト表示エリア
    • Fig.2 での使用例、「Local Storage: use now」

 

 

lessonDriver()関数

機能: レッスンが1 回終わったら、カウンター(練習回数)に1 を足す。

処理: 以下の処理を順次実行

  1. Web Storage からレッスンデータをlessonArray に読込
  2. レッスンが1 回終われば(lesson()関数の返り値が、true)、カウンターに1 を足す
  3. レッスン状況を判断する(judgeLesson)
  4. カウンターの値(練習回数)を画面表示
  5. lessonArray をWeb Storage に保存

 

judgeLesson() 関数

機能:

  • カウンター(練習回数)がBORDERLINE 以上ならば、レッスン修了とする。
  • 次のレッスンがあれば、そのレッスンを学習可能にする。

 

setDisabled() 関数

機能: レッスンが学習可能(workableがtrue)ならば、[Practice!]ボタンをクリック可能にする。

 

setLessonData() 関数

機能: setDisabled()関数とwriteLessonData()関数を動かす。

 

window.onload = function() 関数

機能: オンロード後、ページを初期設定する。

  1. Web Storage が使用可能かチェック
  2. Web Storage からlessonArray にデータを読込
  3. setLessonData() 関数を動作

 

 

ナビゲータ

レッスンの進捗状況を表示するナビゲータ・ページです。

  • プログラム名: navigator.html

 

navigator.html

 

navigator.html の説明

 

body部

Fig.3 navigator.html の画面

 

navigator.html の各要素は、Fig.3 を参照してください。

<input>要素は3 個、タイプはボタンです。

各ボタンは、クリックすると以下のプログラムが動きます。

  • [Lesson A]ボタン: lessonA.html
  • [Lesson B]ボタン: lessonB.html
  • [Remove All Lesson Data]ボタン:removeLessonData()

 

<output>要素は3 個あります。

それぞれ、以下の情報をテキスト表示します。

  • レッスンA の練習状況
    • Fig.3 での使用例: 未修了「NG」、練習回数「2」
  • レッスンB の練習状況
    • Fig.3 での使用例: 未修了「NG」、練習回数「0」
  • Web Storage の使用状況
    • Fig.3 での使用例: 「Local Storage: use now」

 

定数

navigator.html の8 行目

  • LESSONS: 練習ページの数、今回は「2」

 

removeLessonData() 関数

機能: Web Storage からレッスンデータを消去する。

処理: 以下の処理を順次実行

  1. removeWebStorageData() 関数を動作
  2. lessonArray を初期化
  3. setLessonData() 関数を動作

 

setDisabled(i) 関数

機能: 各レッスン(A/B)が学習可能(workableがtrue)ならば、[Lesson A/B]ボタンをクリック可能にする。

引数: i 番目のレッスン

 

setLessonData() 関数

機能: setDisabled(i)関数とwriteLessonData(i)関数を動かす。

 

window.onload = function() 関数

機能: オンロード後、ページを初期設定する。

  1. Web Storage が使用可能かチェック
  2. Web Storage からlessonArray にデータを読込
  3. setLessonData() 関数を動作

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。