チュートリアル1: 簡単なアンケート

GO-E-MONを使用して簡単なアンケートを作成するチュートリアルです。GO-E-MONで必要なタスクの作成から配布までの一連の流れを、アンケートの作成を通して確認してみましょう。

全体の流れ

このチュートリアルでは、以下の手順でアンケートタスクを作成します：

タスクの作成 - 新規タスクを作成
タスク名の設定 - タスクに名前を付ける
コードの記述 - アンケートのHTMLとJavaScriptを記述
コードの実行 - 動作確認
コードの動作確認 - デバッグタブでログを確認
説明文の設定 - タスクの説明を追加
配備 - 他のユーザーがアクセスできるように公開
実施確認 - 収集されたデータの確認

作成例

実際の動作を確認するためのサンプルです。 https://goemon.cloud/t/pEOFwNvphPAN1fySjR8n

タスクの作成

GO-E-MONダッシュボード https://goemon.cloud にアクセスし、新規タスクの追加 ボタンをクリックします。

タスク名の設定

newTitleというタスクが作成されますので、タスク名を変更します。タスク名右の編集ボタンをクリックします。タスク名を入力します。タスク名はENTERキーで確定できます。

コードの記述

タスクとして実行する JavaScript コードを記述します。ここでは、以下のような簡単なアンケートを実装してみます。

3つの設問に対して5つの選択肢(ラジオボタン)
回答送信ボタンでアンケート終了
全ての設問を選択するまで回答送信ボタンはグレーアウト(無効化)

ラジオボタンや回答送信ボタンはHTMLを使って記述します。HTMLで記述された要素の振る舞いはjQueryを使って記載します。ここでは、以下のようなコードをコードタブに記述します。編集内容が失われないように保存ボタンをクリックして定期的に編集内容をサーバーに保存しましょう。

 /**
  * ユーザインタフェースの作成
  */
 const panel = $("<div></div>")
   .css({ width: "80%", margin: "auto" } /*幅80%, 中央寄せ*/);
 
 // 設問1
 const question1 = $("<div></div>")
   .css({ display: "flex", padding: "16px" })
   .append($("<div>設問1の問いかけ</div>").css({ "margin-right": "auto" } /*問いかけと回答1の間に余白*/))
   .append($("<div><input type='radio' name='question1' value='answer1'/>回答1</div>"))
   .append($("<div><input type='radio' name='question1' value='answer2'/>回答2</div>"))
   .append($("<div><input type='radio' name='question1' value='answer3'/>回答3</div>"))
   .append($("<div><input type='radio' name='question1' value='answer4'/>回答4</div>"))
   .append($("<div><input type='radio' name='question1' value='answer5'/>回答5</div>"));
 panel.append(question1);
 
 // 設問2
 const question2 = $("<div></div>")
   .css({ display: "flex", padding: "16px" })
   .append($("<div>設問2の問いかけ</div>").css({ "margin-right": "auto" } /*問いかけと回答1の間に余白*/))
   .append($("<div><input type='radio' name='question2' value='answer1'/>回答1</div>"))
   .append($("<div><input type='radio' name='question2' value='answer2'/>回答2</div>"))
   .append($("<div><input type='radio' name='question2' value='answer3'/>回答3</div>"))
   .append($("<div><input type='radio' name='question2' value='answer4'/>回答4</div>"))
   .append($("<div><input type='radio' name='question2' value='answer5'/>回答5</div>"));
 panel.append(question2);
 
 // 設問3
 const question3 = $("<div></div>")
   .css({ display: "flex", padding: "16px" })
   .append($("<div>設問3の問いかけ</div>").css({ "margin-right": "auto" } /*問いかけと回答1の間に余白*/))
   .append($("<div><input type='radio' name='question3' value='answer1'/>回答1</div>"))
   .append($("<div><input type='radio' name='question3' value='answer2'/>回答2</div>"))
   .append($("<div><input type='radio' name='question3' value='answer3'/>回答3</div>"))
   .append($("<div><input type='radio' name='question3' value='answer4'/>回答4</div>"))
   .append($("<div><input type='radio' name='question3' value='answer5'/>回答5</div>"));
 panel.append(question3);
 
 // 回答送信
 const button = $("<div></div>")
   .append($("<button id='submit' disabled>回答送信</button>"));
 panel.append(button);
 
 // panelを実験画面に登録
 context.root.append(panel);
 
 /**
  * 処理の定義
  */
 // ID submit を持つボタンが押された場合の処理
 function submitButtonClicked() {
   // 全設問の回答を取得
   const question1 = $("input[name=question1]:checked").val();
   const question2 = $("input[name=question2]:checked").val();
   const question3 = $("input[name=question3]:checked").val();
   
   // 回答データの作成
   const answer = {
     answers: [question1, question2, question3],
   };
   // 結果送信
   // 1つ目の引数はこのログの概要
   // 2つ目の引数は詳細なログ
   context.finish("アンケートに回答しました。", answer);
 }
 
 // submitButtonClickedをID submitのボタンのクリック処理として登録
 $("#submit").click(submitButtonClicked);
 
 // ラジオボタンが押された場合 - 各設問全てに回答済みであればボタンのdisabled属性を外す
 function radioButtonUpdated() {
   // 全設問の回答を取得
   const question1 = $("input[name=question1]:checked").val();
   const question2 = $("input[name=question2]:checked").val();
   const question3 = $("input[name=question3]:checked").val();
   if (question1 && question2 && question3) {
     // 全設問選択済み
     $("#submit").attr("disabled", false);
   } else {
     // 未選択
     $("#submit").attr("disabled", true);
   }
 }
 
 // 全てのラジオボタンにチェック処理を割り当て
 $("input[type=radio]").change(radioButtonUpdated);

コードの実行

コードを記述したら、はじめるボタンをクリックして実行してみましょう。

以下のようにアンケートが表示されるはずです。

もし、上記のように動作しない場合や、再度はじめから実行したい場合は、右上の再読み込みボタンを押します。

コードの動作確認

アンケートに回答したら、どのようなログが送信されたか確認してみましょう。デバッグタブから確認することができます。送信されたログは スクリプトを終了しました ログから内容を確認できます。また、スクリプトの誤りなどでエラーが発生した場合は、デバッグタブから警告・エラーを確認することができます。

説明文の設定

タスクの説明を設定します。説明文 タブに以下の文字列を記述します。説明文の記述にはMarkdownを使用することができます。

 簡単なJavaScriptを使ってアンケートを記述してみたものです。
 
 [チュートリアル1: 簡単なアンケート](https://scrapbox.io/cogtask-me/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB1:_%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88)で
 紹介しているサンプルです。
 
 紹介文はMarkdownで記述することができます。**太字**や*斜体*などをテキストにより記述することができます。

すると、開始時の画面に以下のように説明文を表示することができます。あらかじめ実施に必要な注意事項などを記載するのに利用してください。

配備

以上でタスクに必要な情報は定義できました。ただし、このままではタスク作成者しか試すことはできません。作成したタスクを他のユーザからも参照できるようにすることを配備と呼びます。

配備タブの配備ボタンを押すことで、タスク作成者以外のユーザが最新のタスクを試すことができるようになります。配備を実施したら、タスクへの参加に記載されているURLか、QRコードをユーザーに配布してください。これにより、ユーザーはこのタスクを実施することができるようになります。

タスクのJavaScriptや説明文を変更したあとは、必ず配備ボタンを押して他のユーザーにも最新版を利用可能にする必要があります。

実施確認

タスクがユーザーにより実施されると、タスク提供者のPersonaryの cog-pds-log チャネルに実施記録が格納されます。Personaryを自身のアカウントと紐付けていると、以下のように実施記録が送信されます。Personaryのデータ分析についてはPersonaryデータの分析を参照してください。