オンライン学習のためのインタラクティブな演習のコンストラクタ

はじめに


現代世界の生活は動的に発展しており、テクノロジーが出現して消滅し、私たちのスキルはそれらによって時代遅れになります。 20年前、Windows APIの機能を覚えておく必要がありましたが、今では多くの専門家がそれが何であるかさえ知らず、これが機能を妨げることはありません。 まったく異なる経験を必要とする他のテクノロジーが前面に出てきました。 たとえば、Java Script、HTML 5、CSS。 10年後には、別の考え方である他のテクノロジーやツールが、それに取って代わる可能性が最も高くなります。 したがって、今日の変化する世界での学習プロセスは継続的で、ますます激しくなっています。 これは、現代の専門家にとって必要不可欠です。











以前のように




現在、知識を得るための新しい方法があります-ウェビナーとビデオチュートリアル、さまざまなビデオコース。 これに伴い、書籍の関連性は失われていません。スマートフォンや図書館で知識を得る方法を幅広く選択できるようになりました。 もちろん、これらの方法は、対話性と快適さの程度が異なります。

古き良き本には、「セキュリティの質問」というセクションがあります。 なぜ必要なのですか? 事実、学習の重要なポイントはセルフテストです。 なぜなら、人は、自分が学習した教材を正しく学習したかどうかを独立して知ることができるからです。 また、制御の質問に答える瞬間に、完了したものを批判的に過大評価し、新しいビジョンと視点を開き、トレーニングの効果を大幅に高めることも重要です。

ブロックに特化したメカニクスに関する本の章を読んだと想像してください。 この章の終わりにはどのような質問がありますか? 例:

ブロックはどの要素で構成されていますか?

チェーンホイストとは何ですか?

おそらくタスクは章に添付されるでしょう。 例:

タスク条件:







図に示すシステムでは、ケーブルで接続されたブロックと重りがあり、右端の負荷の質量は700グラムで、ブロックの質量は100〜600グラムです。 システムはバランスが取れており、静止しています。 商品m1、m2、m3の質量を見つけます。 ケーブルの質量、摩擦、伸びは無視できます。 ちなみに、これはかなり興味深いタスクです。解決したい場合は、さらに答えが出るので、これ以上見てはいけません。

調べて確認するために、本の最後を見て答えを見てみます。 したがって、私たちは読んだものを批判的に分析し、単に資料を読んだ場合よりもずっとよく記憶されるでしょう。 自己テストは知識を強化します。



今(今日)




しかし、進歩はまだ止まっておらず、今では、電子書籍を読んで、会うこともできます。

たとえば、検証演習:







ここでわかるように、すべてがはるかに視覚的で高速です。 すべてのウェイトを所定の位置にドラッグする必要があります。 同時に、私たちはすぐに答えの正しさを見つけ、答えのあるページを探してページをめくる時間を無駄にしません。 非常に重要なことは、私たちの関心が引き続き主題分野に集中することです。



そのような運動をする方法




そのような運動を行う方法は? ここでは、一般に、4人が必要です。

1.エクササイズの本質を明確にし、選択肢に答える、主題分野の専門家(この場合は物理学者)が必要です。

2.エクササイズに適切な外観を与えるデザイナーが必要です。

3.コードを作成するWebプログラマーが必要です。

4.この演習がすべてのブラウザーなどで適切に機能することを確認する品質管理(QC)スペシャリストが必要です。

演習の開発プロセスは次のとおりです。







1.スペシャリストが問題の本質を定式化し、紙にペンでエクササイズの図を描きます。

2.デザイナーは、適切な外観を与えます。

3.プログラマーが演習を実施します。

4. QCはエクササイズをチェックし、コメントを作成して、エクササイズをプログラマに返します。 手順3〜4を数回繰り返します。

5.次に、フィールド監督手順の一環として、設計者はエクササイズの外観についてコメントし、ステップ3〜5が数回繰り返されます。

6.次に、スペシャリストが接続し、エクササイズの本質がすべての変遷の背後で失われているかどうかを確認します。 一般に、手順3〜6は数回繰り返すこともできます。

その後のみ、写真を電子書籍に公開したり、DVDに書き込んだりできます。

したがって、このプロセスには非常に長い時間がかかることがわかります。



未来




私たちのツールのアイデアは、対象分野の専門家がそのような演習を直接作成することであったため、ツールをできるだけシンプルにすることにしました。 この段階では、4つの主要な演習タイプをサポートしています。

要素をドラッグして、要素を互いに一致させます。

テキストギャップ、手動テキスト入力。

並べ替え、並べ替え。

シングル、マルチ選択。

ただし、システムのすべての機能を検討するわけではありません。

ウェイトのバランスを取るエクササイズを作成してみましょう。 もちろん、まずは適切なサイズの写真が必要です。 デザイナーにそれを描くように依頼します。







次に、ツールに移動して、ドラッグアンドドロップなどの新しいエクササイズを作成します







タスクに関するすべての情報が1か所に収まるように、演習のタイトルに質問を直接紹介します。







次に、画像をエディターにロードします。







次に、ウェイトをドラッグできる場所をマークする必要があります。 これを行うには、疑問符を描くための3つの「長方形」タイプのコントロール要素とテキスト要素が必要です。







各長方形にはBehaviorプロパティが必要です。 このプロパティは「drop-target」に設定する必要があります。 残っているのは、ケトルベル画像をロードし、ドロップ要素の値を動作としてそれらに設定し、それらに正しいターゲットを設定することです。







これで、テストモードで演習を失う可能性があります。







できた!!! 本に挿入できます。



実装




このようなツールを実装するために、AngularJSテクノロジーとBreeze.JSの一般的な組み合わせが選択されました。 このアプローチにより、AngularJSを使用するディスプレイとBreeze.JSを使用するサーバー側で同時に同期される1つのデータモデルを持つことができます。 このようなアプローチは、すべての複雑さがクライアントレベルに焦点を当てており、アプリケーションのすべての層に「広がる」わけではないため、そのような決定にとって非常に自然です。 ここではソリューションアーキテクチャの詳細については説明しませんが、次の記事で説明します。 実装中に発生した興味深い問題について説明します。

重要な点は、アプリケーションがサーバー側のクライアントモデルへのすべての変更をすぐに保存することです。 したがって、アプリケーションの操作には、操作のシーケンスが重要です。 たとえば、アイテムを追加してすぐに削除するとします。 この場合、順序に違反している場合、まず存在しない要素を削除してエラーを取得します。 この問題を解決するために、breeze.savequeuing.jsと呼ばれるbreezeの拡張機能があります。

ただし、このライブラリを使用すると、次の問題が発見されました。Breezeは、サーバーに格納されたばかりの値でクライアントモデルのエンティティの状態を更新します。 したがって、単位時間あたりの変更数が多いと、サーバー上の保存の遅延の結果として、クライアント上のエンティティの状態が以前の状態に戻る可能性があります。 もちろん、クライアントモデルの2つのコピーを作成し、エンティティのフィールドを選択的に上書きして、保存イベントを簡単に処理できます。 ただし、この場合、そよ風を使用することの本質は失われます。 クライアントとサーバーの共通データモデルの作成。

幸いなことに、breezeは一種の拡張性をサポートしています(実際にはbreeze.savequeuing.jsがそのように実装されています)。したがって、breeze.savequeuing.jsの「上」で機能する独自の拡張機能を作成できます。 。

それを行う方法。 まず、updateTargetFromRaw関数をオーバーライドします。



EntityType.prototype.enableSaveWithNoResultUpdate = function () { this._updateTargetFromRaw = EntityType.prototype._updateTargetFromRawNoResultUpdate; };
      
      







この関数のコードは非常に長いため、コードの一部をコメントに置き換えました。



  EntityType.prototype._updateTargetFromRawNoResultUpdate = function (target, raw, rawValueFn) { var overwrite = /*   ,       */; this.dataProperties.forEach(function (dp) { var rawVal = rawValueFn(raw, dp); if (rawVal === undefined) return; var dataType = dp.dataType; var oldVal; if (dp.isComplexProperty) { // } else { var val; if (overwrite) { //   breeze.js,    } else { if ((dp.isPartOfKey || !tp || (tp === dp.defaultValue))) { //   breeze.js,    } } } }); // ... }
      
      







もっと詳しく分析してみましょう。 まず、この関数の呼び出しコンテキスト(this)は何ですか。 コンテキストは、エンティティメタデータを含むオブジェクトです。 さらに、この関数は3つのパラメーターを受け入れます。

target-更新する必要がある(または必要ではない)エンティティ。

raw-サーバーから返された「生の」データ。

rawValueFnは、生データからプロパティの値を抽出できる関数です。 上書き== falseの場合、つまり エンティティを更新する必要はありません。1つの重要な場合を除き、何もしません-プロパティがキーの一部である場合。 なぜこれが重要なのですか? 新しいエンティティを追加するとき、キーは空であり、その値はサーバーに保存した後にのみ表示されるためです。 サーバーに保存した後、クライアントに保存する必要があります。 overwrite == trueの場合、通常の方法でエンティティを保存します。

もちろん、最終的にはすべてが正常に機能し、正常に機能しました。



達成したこと


私たちにとって最も重要なことは、インタラクティブなエクササイズを作成する時間を短縮し、人件費を削減することでした。 エクササイズの設計プロセスは次のようになります。







ご覧のとおり、大幅に最適化されています。 演習の作成に関与した4人のうち2人を除外することができました。 エクササイズの絵を描くデザイナーと、エクササイズの作成に携わる主題分野の専門家だけが必要です。 さまざまなブラウザでの運動動作をテストする時間のかかる作業もなくなります。 したがって、作成に費やされる時間は数倍に短縮されます。

ITソリューションが実際の生活を変革し、それを少し簡単にするのにどのように役立つかを見るのは常に素晴らしいことです。



All Articles