実験の最後に今回のデータをまとめてグラフに表示する方法を紹介します。研究用というよりは，授業などでのデモ用を想定していますが，誤フィードバックで自尊感情を操作するという場合にも利用できるかもしれません（あなたの成績は平均以下ですとグラフ表示など）。なお，Scriptsと外部ライブラリを利用するので難易度は高めです。

使用するライブラリ

グラフ表示をするためにJavaScriptライブラリを使用します。グラフ表示用に使えるライブラリはいくつか存在していますが，ここではchart.jsを利用します。

Chart.js

もし，エラーバーを表示したい場合はchart.jsのエラーバー表示用プラグインも利用します。

GitHub - datavisyn/chartjs-plugin-error-bars: Error Bars Chart.js Plugin

ライブラリの読み込み

今回はCDNで読み込むので<!-- import chart.js-->から始まる3行のコードを全体設定のHTMLに追加しておきます。

<head>
  <meta charset="utf-8">
  <title>Experiment</title>
  <!-- viewport setup -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- lab.js library and experiment code -->
	<!-- import chart.js-->
  <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js>"></script>
  <script src="<https://cdn.jsdelivr.net/npm/[email protected]/build/index.umd.min.js>"></script>
  ${ header }
</head>

グラフ描画用のデータの用意

データは実験結果から自身で取得する必要があります。グラフの描画よりも，こちらの方が面倒かもしれません。

データの抽出

データの抽出については，正答率であれば，任意のコンポーネントの任意の列名（例えば，choice試行のcorrect列）に格納されているデータを配列として取得すればよいでしょう。以下のコードで可能です。

//コンポーネント名（試行名）
const rowName = "choice"

//列名（従属変数名)
const colName = "correct"

//データを抽出
const ds = this.options.datastore
let yourData = ds.extract(colName, rowName)

まず，dsという変数に実験のデータ（this.options.datastore）を代入しています。そして，ds.extract(colName, rowName)で，任意のコンポーネント（rowName）と列（colName）に当てはまるデータをすべて抽出しています。今回はそれぞれ，choiceというコンポーネントとcorrectという列名を指定してます。抽出されるデータにコンポーネント名や列名は含まれずにデータのみになります。グラフ描画には平均値などの代表値を使うと思うので，後ほど計算が必要となります。

正答率のようにコンポーネントと列名だけでデータを抽出できる場合はよいのですが，正答試行の反応時間のように，コンポーネント名と列名と列名という3つ以上の条件で規定されるデータの抽出は複雑になります。

整理すると，正答率の計算に必要なデータは，以下の2条件の指定で抽出できます。

  1. コンポーネント（試行）名
  2. 正誤を示した列名（correctなど）

一方で，平均正反応時間の計算に必要なデータは，正反応をした試行だけで反応時間を平均しなければいけないため，以下の3条件での指定が必要です。

Powered by Fruition