付録４―１

散布図PCIモジュール
操作マニュアルVer.1.0

2022年3月25日

データアクセス株式会社

目次
1. はじめに .................................................................................................................................... 2
2. TAO への散布図 PCI のインストール ......................................................................................... 3
3. オーサリング ............................................................................................................................. 6
3.1. 散布図問題アイテム作成/編集の全体の手順 .................................................................... 6
3.2. 散布図問題用の既存アイテム選択または新規アイテム作成 ............................................ 6
3.3. 散布図 PCI のドラッグ＆ドロップ～散布図問題で使用する CSV ファイルのアップロード
73.4. 散布図の各種設定 ............................................................................................................ 10
3.5. プレビュー ....................................................................................................................... 14
3.5.1. 複数の散布図の表示 ................................................................................................. 15
3.5.2. 外れ値の扱い ............................................................................................................ 17
3.5.3. ブラウザのリロード ................................................................................................. 193.6. 多言語対応 ....................................................................................................................... 20
4. 操作ログ .................................................................................................................................. 214.1. 操作ログの取得・表示 ..................................................................................................... 214.2. 操作ログの見方 ................................................................................................................ 22
4.2.1. データのチェックボックスの操作のログ ................................................................ 22
4.2.2. グラフに対する操作のログ ...................................................................................... 23
4.2.3. [リセット]ボタンの操作のログ ............................................................................... 24
4.2.4. [グラフを追加][グラフを削除]ボタンの操作のログ .............................................. 25
5. おわりに .................................................................................................................................. 26

11. はじめに
本書は、「教科「情報」の CBT 試験を TAO で実施するための PCI に関する調査研究業務（データ活用問題）」に基づき行った研究開発業務において開発した PCI の内、表形式で示されたデータを散布図で分析して解答を導き出すような問題（選択肢式など）の、散布図を作成する PCI（以下、「散布図 PCI」と言います）の操作説明書です。

2

2. TAO への散布図 PCI のインストール
TAO に散布図 PCI をインストールする手順を説明します。
具体的には、TAO 上で以下の操作を行って、散布図 PCI を TAO オーサリング画面の CustomInteractions 欄に追加して下さい。
① TAO にログインしてアイテム編集画面を開き、任意のアイテムを選択して「オーサリング」をクリックして下さい。

② Custom Interactions 欄を開き、「カスタム操作の管理」をクリックして下さい。

3

③ 「インタラクション追加」をクリックして下さい。

④ 散布図 PCI の ZIP ファイルをドラッグ＆ドロップするか、「参照」してファイル選択し、「アップロードする」をクリックして下さい。

4⑤ 以上の操作手順により、Custom Interactions 欄に散布図 PCI のアイコンが表示されます。

5

3. オーサリング
以下の操作について、順に説明します。
✓ 散布図問題アイテム作成/編集の全体の手順✓ 散布図問題用の既存アイテム選択または新規アイテム作成✓ 散布図 PCI のドラッグ＆ドロップ～散布図問題で使用する CSV ファイルのアップロード✓ 散布図の各種設定✓ プレビューによる受験者画面表示の確認
3.1. 散布図問題アイテム作成/編集の全体の手順
以下の手順により、散布図問題のアイテムを作成/編集します。
（１） TAO のアイテム画面にて、既存アイテムを選択または新規アイテムを作成（２） 新たに散布図問題を作成する場合、オーサリング画面にて散布図 PCI を問題作成エリアにドラッグ＆ドロップし、散布図問題で使用する CSV ファイルをアップロード（３） 散布図の各種設定を行い、適宜プレビューで確認
3.2. 散布図問題用の既存アイテム選択または新規アイテム作成
TAO にログインし、TAO のアイテム画面にて、散布図問題用の既存アイテムを選択するか、新規アイテムを作成し、「オーサリング」をクリックして下さい。

6

散布図問題を作成するオーサリング画面が表示されます。以下では、散布図問題を新たに作成する場合の操作手順を説明します。
※作成済みの散布図問題アイテムの編集も可能です。その場合は 3.4 をご覧下さい。

3.3. 散布図 PCI のドラッグ＆ドロップ～散布図問題で使用する CSV ファイルのアップロード
散布図問題を新たに作成する場合の散布図 PCI のドラッグ＆ドロップ～散布図問題で使用する
CSV ファイルアップロードまでの操作手順を説明します。
尚、CSV ファイルは以下の条件を満足する必要があります。この条件を満たさないファイルをアップロードした場合、散布図 PCI の動作を保証しません。
✓ CSV ファイルの文字コードは UTF-8 であること✓ 先頭行はカラム名であること✓ 先頭行のカラム数と 2 行目以降のデータ数が一致すること
この手順が済んでいる既存アイテムの編集を行う場合は、3.4 をご覧下さい。
① Custom Interactions 欄の散布図 PCI のアイコンを問題作成エリアにドラッグ＆ドロップして下さい。ドラッグ＆ドロップ後の表示画面は下表の 4 エリアに分かれています。
No.

エリア名

説明(a)

問題表示エリア

設問及び(b)(c)を含む問題アイテムを表示する(b)

基データ表示エリア

散布図用にアップロードしたデータを表示する(c)

散布図表示エリア(d)で設定した条件に基づいた散布図を表示する(d)

散布図表示条件設定エリア

使用するデータや散布図の表示条件を設定する

7

② スタイルエディタ部基本プロパティの「CSV ファイル」の「参照」をクリックして、散布図で使用するデータとなる CSV ファイルをアップロードして下さい。

8アップロードが成功すると、CSV ファイルに含まれるデータが問題表示エリアの基データ表示エリアに表示されています。

9

3.4. 散布図の各種設定
散布図 PCI は、問題出題時に１つの散布図を予め表示することができます。
オーサリング画面のスタイルエディタ部基本プロパティでは、CSV ファイルのアップロードや問題出題時に予め表示する散布図を含め、散布図の各種設定が可能です。
オーサリング画面を図 1 に示します。設定内容を適宜保存しながら設定作業を行って下さい。
尚、問題作成エリアでは散布図の操作、設定はできません。

図 1

散布図のオーサリング画面

スタイルエディタ部の基本プロパティで設定可能な項目を表 1 に示します。
表 1 の No.欄の➀～⑮は図 1 の➀～⑮に対応しています。
用途欄は各項目の用途を以下の A～C で分類して表示し、項目名欄は日本語表記とカッコ内に英語表記しています。
A:散布図全体に関わる項目
B:問題の出題時に予め表示する散布図を設定する項目
C:受験者が散布図を作成する際の選択肢を設定する項目
表 1
No.

用途➀

A➁

A

スタイルエディタ部基本プロパティで設定可能な項目
項目名

説明

CSV ファイル

散布図で使用するデータ（基データ）を(CSV file)CSV ファイルで設定する

データ名

アップロードした基データの受験者画面
10

備考➂A

(Raw data caption)

での表示タイトルを設定する

散布図名

受験者画面に表示する散布図タイトルを(ScatterPlot

設定するcaption)④

B/C

データ除外欄表示

チェックボックスにチェックを入れるこ表示等の詳(Plot Excludable)とにより、受験者が外れ値を操作可能とな

細は 3.5.2

る。チェックを入れた場合、さらに以下をを参照のこ選択可能と・ チ ェ ッ ク 項 目 を 表 示 (Show checkeditems):受験者画面に表示する基データの左端にチェック入りのチェックボッ
クスを配置し、チェックを外すことにより外れ値として処理する・チェック項目を非表示(Hide checkeditems): 受験者画面に表示する基デー
タの左端にチェックなしのチェックボックスを配置し、チェックを付けることにより外れ値として処理する
⑤

B

グラフ形式

受験者画面に予め表示するグラフのタイ(Graph Type)

プを散布図(Scatter Plot)とバブルチャート(Bubble Chart)から選択して設定する

⑥

B

X軸

受験者画面に予め表示する散布図の X 軸(X axis)

項目をプルダウンメニューから選択して設定する

⑦

B

Y軸

受験者画面に予め表示する散布図の Y 軸(Y axis)

項目をプルダウンメニューから選択して設定する⑧B

グループ別表示

受験者画面に予め表示す散布図のグルー(Group Setting)プ分け項目をプルダウンメニューから選択して設定する⑨

B

バブルサイズ

受験者画面に予め表示する散布図をバブ(Bubble Chart Value)

ルチャートで表示する場合（⑤でバブルチ
ャート選択時）、バブル表示の対象をプルダウンメニューから選択して設定する

⑩B/C

相関係数

受験者画面での相関係数の表示条件を下(a)(b)のチ(Correlation

記の項目毎のチェックボックスにチェッェックパタ

Coefficient)

クを付けることによって設定する

ーンによる

11

・表示(Show):チェックを付けると受験者

受験者画面画面に表示する散布図に相関係数を予

表示は表 2

め表示する (a)を参照のこ・受験者が操作可能(Editable by Test-とtaker):チェックを付けると受験者が散布図で相関係数の表示/非表示の操作が可能になる(b)
⑪

B/C

回帰直線

受験者画面での回帰直線の表示条件を下(c)(d)のチ(Regression Line)

記の項目毎のチェックボックスにチェッェックパタ

クを付けることによって設定するーンによる・表示(Show):チェックを付けると受験者

受験者画面画面に表示する散布図に回帰直線を予

表示は表 3

め表示する (c)を参照のこ・受験者が操作可能(Editable by Test-とtaker):チェックを付けると受験者が散布図で回帰直線の表示/非表示の操作が可能になる(d)⑫B/C

決定係数(R²)

回帰直線を表示する設定（(c)または(d)の(e)(f)のチ(Coefficient

チェックボックスにチェックが入った状ェックパタof Determination)態）時に、受験者画面での決定係数の表示ーンによる条件を下記の項目毎のチェックボックス

受験者画面にチェックを付けることによって設定す

表示は表 4るを参照のこ・表示(Show):チェックを付けると受験者と画面に表示する散布図に決定係数を予め表示する (e)・受験者が操作可能(Editable by Testtaker):チェックを付けると受験者が散布図で決定係数の表示/非表示の操作が可能になる(f)
⑬
⑭

A
A

配色

表示する散布図のプロットの色合いをプ(Color Scheme)

ルダウンメニューから選択して設定する

操作ログの記録

チェックボックスにチェックを付けるこ(Store operation log)とによって受験者の散布図の操作ログを取得することができる⑮

A

レスポンス識別子

操作ログのカラム名を設定する(Response identifier)12

表 2 チェックボックスの設定に基づく受験者画面での相関係数の表示
受験者が操作可能(Editable by Test-taker)
表示

チェック(Show) 付き

チェック付きチェックなし・相関係数を受験者画面に予め表示

・相関係数を受験者画面に予め表示

・受験者による相関係数の表示/非・受験者による相関係数の表示/非表示の操作可チェックなし表示の操作不可・相関係数を受験者画面に表示しない・相関係数を受験者画面に表示しない

・受験者による相関係数の表示/非表示の操作可
表 3 チェックボックスの設定に基づく受験者画面での回帰直線の表示
受験者が操作可能(Editable by Test-taker)
表示

チェック(Show) 付き
チェックなしチェック付きチェックなし・回帰直線を受験者画面に予め表示

・回帰直線を受験者画面に予め表示

・受験者による回帰直線の表示/非・受験者による回帰直線の表示/非表示の操作可

表示の操作不可・予め回帰直線を受験者画面に予め・回帰直線を受験者画面に表示しな表示しないい・受験者による回帰直線の表示/非表示の操作可
表 4 チェックボックスの設定に基づく受験者画面での決定係数の表示
受験者が操作可能(Editable by Test-taker)
表示

チェック(Show) 付き

チェック付きチェックなし・決定係数を受験者画面に予め表示

・決定係数を受験者画面に予め表示

・受験者による決定係数の表示/非・受験者による決定係数の表示/非表示の操作可チェックなし表示の操作不可・決定係数を受験者画面に予め表示
しない・決定係数を受験者画面に表示しな
い・受験者による決定係数の表示/非表示の操作可

13

3.5. プレビュー
オーサリング画面で「プレビュー」をクリックすることにより、スタイルエディタ部で設定した内容に基づく受験者画面の表示や操作をプレビュー画面で確認することができます。
プレビュー画面での動作や操作は受験者画面でも同じ動作、操作となります。
また、プレビュー画面で実施した操作の内容は、オーサリング画面の問題作成エリアやスタイルエディタ部の設定内容には反映されません。

14

表示されたプレビュー画面の「閉じる」をクリックすると、オーサリング画面に戻ります。ア
イテムの編集作業を継続できます。

3.5.1. 複数の散布図の表示
グラフ下部の「グラフを追加」をクリックすることにより、新たな散布図を直下に表示します。
「グラフを削除」をクリックすることにより、当該散布図を削除します。
尚、散布図は、スタイルエディタ部の基本プロパティで予め問題に表示する設定を行った散布図を含め、最大 4 つまでプレビュー画面と受験者画面に表示できます。

15

16

3.5.2. 外れ値の扱い
スタイルエディタ部基本アクティビティの「データ除外欄表示(Plot Excludable)」のチェックボックスにチェックを入れると、受験者は散布図にて外れ値の操作が可能になります。
（１）「チェック項目を表示(Show checked items)」にチェック時
オーサリング画面とプレビュー画面の基データ表示エリアに、基データの左端にチェック入りのチェックボックスを配置します。チェックボックスのチェックを外すことにより外れ値として処理します（図 2、図 3）。

図 2

オーサリング画面基データ表示エリア

図 3

プレビュー画面基データ表示エリア（２）「チェック項目を表示(Show checked items)」にチェック時
オーサリング画面とプレビュー画面の基データ表示エリアに、基データの左端にチェック入りのチェックボックスを配置します。チェックボックスにチェックを入れることにより外れ値17

として処理します（図 4、図 5）。

図 4

オーサリング画面基データ表示エリア

図 5

プレビュー画面基データ表示エリア

散布図のグラフ上で外れ値を選択すると、基データ表示エリアに該当データをハイライトして表示します。該当データの左端のチェックボックスのチェックを外す（またはチェックを入れる）ことで、そのデータを外れ値としてグラフから除くことができます（図 6）。

18図 6

外れ値の処理（「チェック項目を表示(Show checked items)」にチェック時）

また、外れ値として除いたデータを元に戻したい場合には、基データ表示エリアの該当データの左端のチェックボックスにチェックを入れる（またはチェックを外す）ことで、そのデータはグラフに再表示されます。
3.5.3. ブラウザのリロード
プレビュー画面でクリック可能であるべきボタンがクリックできない状態となった場合（例えば、複数の散布図を限度数まで表示していないのに「グラフを追加」ボタンをクリックできなくなった場合）、画面のリロード（[Ctrl]＋[F5]）をお試し下さい。

19

3.6. 多言語対応
散布図 PCI は日本語と英語の表示が可能です。
オーサリング画面スタイルエディタ部アイテムプロパティの「言語」のプルダウンメニューから表示言語を選択して下さい。
Japanese を選択すると日本語で、それ以外を選択すると英語で表示します。

20

4. 操作ログ
受験者の散布図操作ログの取得・表示の操作と、操作ログの見方について説明します。
4.1. 操作ログの取得・表示
オーサリング画面の基本プロパティ「Store operation log」のチェックボックスにチェックを入れた場合、以下の手順で操作ログを表示、出力できます。
① TAO の「結果」表示画面で対象の試験を選択して、「View」をクリックしてください。

② 操作ログを JSON 形式で画面上に表示します。「CSV エクスポート」ボタンクリックにより、CSV ファイルに出力できます。尚、出力した CSV ファイルの文字コードは UTF-8 であることに留意して下さい。

21

4.2. 操作ログの見方
4.2.1. データのチェックボックスの操作のログ•operationo"hideElement"
要素を非表示にする

o"showElement"
要素を表示する•name"muteCheckbox"•valueCSV のカラム名 => 値 の連想配列
カラム名が ＿ID＿ の値はシリアル番号です。

•例）[{"operation": "hideElement","name": "muteCheckbox","value": {"氏名": "瀬治山 啓之",
"身長 [cm]": 167.83,"体重 [kg]": 62.86,"性別": "男性","年齢": 20,"__ID__": 4},"datetime": "2022-02-04 19:10:58+09:00"},{"operation": "showElement","name": "muteCheckbox","value": {"氏名": "瀬治山 啓之",
"身長 [cm]": 167.83,"体重 [kg]": 62.86,"性別": "男性","年齢": 20,
22

"__ID__": 4},"datetime": "2022-02-04 19:11:33+09:00"},]
4.2.2. グラフに対する操作のログ[グラフ ID]は "graph1","graph2","graph3","graph4" のいずれか•

operation"change"•nameo[グラフ ID].graphType1..4
散布図(value = 'scatter') or バブルチャート(value = 'bubble')のラジオボ
タンo[グラフ ID].xAxis
x軸o[グラフ ID].yAxis
y軸o[グラフ ID].groupBy
グループ設定o[グラフ ID].bubbleValue
バブル値o[グラフ ID].showRegressionLine
回帰直線を表示する(value = true | false)o[グラフ ID].showCorrelationCoefficient
相関係数を表示する(value = true | false)

•

value
設定値

•例）
[{
"operation": "change","name": "graph1.xAxis","value": "身長 [cm]","datetime": "2022-02-04 19:11:45+09:00"},23

{"operation": "change","name": "graph1.yAxis","value": "体重 [kg]","datetime": "2022-02-04 19:11:46+09:00"},{"operation": "change","name": "graph1.groupBy","value": "性別","datetime": "2022-02-04 19:11:48+09:00"},{"operation": "change","name": "graph1.showRegressionLine","value": true,"datetime": "2022-02-04 19:11:51+09:00"},{"operation": "change","name": "graph1.showCorrelationCoefficient","value": false,"datetime": "2022-02-04 19:11:52+09:00"},{"operation": "change","name": "graph1.graphType1","value": "bubble","datetime": "2022-02-04 19:39:25+09:00"}]
4.2.3. [リセット]ボタンの操作のログ•

operation"resetGraph"•name"resetButton"24•valuetrue

•

例）
[
{
"operation": "resetGraph","name": "resetButton","value": true,"datetime": "2022-02-04 19:41:34+09:00"}]

4.2.4. [グラフを追加][グラフを削除]ボタンの操作のログ•

operationo"showGraph"[グラフを追加]o"hideGraph"[グラフを削除]

••

name
o

"addGraphButton"o"removeGraphButton"

value
対象のグラフ ID•例）[{"operation": "showGraph","name": "addGraphButton","value": "graph2","datetime": "2022-02-04 19:46:38+09:00"},{"operation": "hideGraph","name": "removeGraphButton","value": "graph2","datetime": "2022-02-04 19:46:40+09:00"}
25

]

5. おわりに
散布図 PCI の入手方法については、大学入試センターにお問合せ下さい。

26