Tutorial

オンライン学習を評価するためのクイズ・アプリを作成する

オンライン学習者のコース教材に対する理解度を簡単にテストする

Save Like

著者 SPENCER KRUM
公開日 2020年3月27日

コロナウイルスや COVID-19 のパンデミック対策として学習とコラボレーションの舞台がオンラインに移っている今、開発者に求められているのは、遠隔学習を可能にするマイクロサービスを構築することです。例えば遠隔学習の一環として、講師は学生がオンライン課程の教材をどれだけ理解しているかについて、その習熟度を評価できるようでなければなりません。

このチュートリアルでは、学習者の習熟度を評価するシンプルなクイズ・アプリを構築する方法を紹介します。このアプリの主な利点は、その柔軟性にあります。このスターター・キットに変更を加えれば、小論文アプリや成績評価アプリなどの他の教育用ツールにも簡単に変換できます。

Loopback は、特定のアプリケーションに応じたデータ API を迅速に構築するためのオープンソース・ツールです。アプリケーションの目的が何であれ、Loopback を使用すれば、データを処理するコードではなくアプリケーション・ロジックを迅速に作成できます。

クイズ・アプリのインターフェース

このチュートリアルのコードと関連ファイルは、チュートリアルに付随する GitHub リポジトリー内にあります。

学習の目的

このチュートリアルを完了すると、Loopback で生成したアプリと React フロントエンドを使用する、シンプルなサンプル・クイズ・アプリケーションの作成方法を習得できます。

前提条件

このサンプルの中核となるのは、Loopback ユーティリティーから生成されるコードです。ちなみに、ここでは現在非推奨となっているバージョン 3.0 の Loopbackライブラリーを使用しています。その理由はアプリを簡単に起動するためですが、最新の機能とセキュリティーの更新を利用するには Loopback バージョン 4 にアップグレードすることをお勧めします。

所要時間

このチュートリアルの所要時間は約 30 分です。

アーキテクチャー図

クイズ・アプリのアーキテクチャー図

  1. ユーザーがサイトにナビゲートします。
  2. ユーザーに、React フロントエンドである Web サイトが表示されます。
  3. (a) ユーザーが Express アプリ内でアクションを実行します。(b) LoopBack で生成されたコードにより、Express アプリ内で必要なタスクが実行されます。
  4. 変更が PluggableDB 内に保存されます。

1. 環境をセットアップする

このスターター・キットを最大限活用するには、独自の Loopback アプリを作成することをお勧めします。あっという間に作成できます！

一方、このアプリを起動するには、以下の手順に従う必要があります。(注: 事前に作成されたデータと React ビルドを使用する場合は、以下のクイックスタート・ガイドをご覧ください。)

  1. 以下のコマンドを実行します。

    npm install
npm serve

  2. API が起動したら、https://localhost:3000/explorer にアクセスして Swagger API エクスプローラーを表示します。そこから、API へのデータの追加をすぐに開始できます。

    Swagger API エクスプローラー - データの追加

  3. 以下の JSON blob を使用してクイズを作成します。

    {
 "author": "Scientist's Limited",
 "title": "Eight Science Questions You Don't Know the Answer to",
 "pass_pct": 0.8
}

    Swagger API エクスプローラー - クイズの作成

  4. 以下の JSON blob を使用して質問を作成します。

    {
  "question_text": "Which immobile ground unit has the longest range?",
  "answers": [
    "Siege Tank",
    "Spore Colony",
    "Photon Cannon",
    "Bunker (Marines"
  ],
  "correct_answer_index": 0,
  "quizId": 1
}

    Swagger API エクスプローラー - 質問の作成

2. アプリのフロントエンドを作成する

アプリのフロントエンドのコードには、React というユーザー・インターフェース用ライブラリーが使用されています。React を使ったことがない場合、あるいはもっとシンプルなものを使用したい場合は、Bootstrap や jQuery などのツールを使用して同じ結果を達成することもできます。フロントエンドのコードがいったんコンパイルされると、Loopback によって生成された Express アプリがそのフロントエンドに対応します。

フロントエンドのコードをビルドしてインストールするには、以下のコマンドを実行します。

cd frontend
npm install
SKIP_PREFLIGHT_CHECK=true npm run build
# this creates a build in build/
rm -fr ../public/*
cp -r build/* ../public/

3. IBM Cloud 上にデプロイする

これは標準的な Express アプリケーションなので、これをホストするには Cloud Foundry と Kubernetes のどちらでも使用できます。このアプリケーションには Dockerfile が含まれています。

  • Cloud Foundry を使用してデプロイする場合は、この手順に従います。

  • Kubernetes を使用してデプロイする場合は、deployment/deploy.yaml 内に含まれているマニフェストを使用します。注: Ingress を使用する場合、クラスターの Ingress サブドメインを含めた Ingress ホスト名を入力する必要があります。以下はその一例です。

```
$ ibmcloud ks cluster get --cluster nibz-falco-test-2 | grep Ingress
Ingress Subdomain:              nibz-falco-test-2-5290c8c8e5797924dc1ad5d1b85b37c0-0000.us-east.containers.appdomain.cloud
```

クイックスタート・ガイド

以上のステップをすべて省いて、極めて 短時間で開始するには (もちろん最初に上記のステップをひと通り学んでいただくことを願いますが)、プリロード済みのデータとビルド済みのフロントエンド・コードを使用できます。

```
npm install
cp examples/data.db data.db
cp -r examples/public/* public/
npm start
```

まとめ

このチュートリアルで理解できたように、学生の習熟度を評価するアプリは簡単に作成して構成できます。また、このクイズ・アプリを他の教育の要件に適応させるのも簡単です。現在、教育現場はオンライン教育という前例のない大きな転換期を迎えています。このチュートリアルを完了した今、皆さんには、その転換に教師と学生が遅れを取らないようサポートする、シンプルで柔軟なツールを作成するために必要な知識がすべて揃っています。

関連性の高いコンテンツ

Blog Post

新型コロナウイルスに関する2020年のCall for Codeグローバル・チャレンジ

2020年3月20日
Tutorial

動画トランスクリプト生成サービスを構築する

2020年3月27日
Tutorial

仮想クラスルーム環境を作り上げる

2020年3月27日