Mizunok5

クラウドソーシングサービス×oTreeでのオンライン実験

普段から私は、クラウドソーシングサービスとoTreeで作った実験プログラムを使ってオンライン実験をしています。クラウドソーシングサービスで参加者を募集してoTreeでの実験プログラムへのリンクにアクセスしてもらい、実験プログラムの最後に表示されるコードを入力してもらうことで謝礼を支払います。つまり、参加者の募集と謝礼の支払いをクラウドソーシングサービスで、実験課題と入力用コードの表示をoTreeで行っているということです。

マッチング不成立問題

しかし、グループで相互作用ををするタイプの実験をするときに、困ることがあります。それは、なかなか参加者のマッチングが成立しない場合があることです。例えば、4人グループで行う実験で最後の一人がなかなか来ないと、先に来た3人は実験課題が始められず、ずっと待つことになってしまうわけです。

その対策として、以前はマッチング待機画面を用意して「5分以上マッチングが成立しない場合は連絡してください、謝礼をお渡しするためのコードを送ります」とお伝えしていたのですが、必要以上に連絡をお願いするのもよくないですし、手動だと安定しないので、自動で謝礼支払い用のコードが表示されるようにしました。

画面見本

※ 静止画だとわからないですが、黒丸部分がアニメーションになっていて、動きます。

方法: 時間が経過したらメッセージを表示するJavescriptのついたWaitページを用意する

matchingWait.html

oTreeで使うテンプレートとして、こちらのコードをmatchingWait.htmlとして追加します。

static→templatesの中に新しいhtmlファイルmatchingWait.htmlを追加します。

{{ block content }}
<div id="wait-text">
    他の参加者が来るのを待っています。5分経っても4人の参加者がマッチングしなかった場合は、謝礼をお渡しするためのコードを自動で表示します。
</div>
<div class="spinner" id="spinner">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
</div>
<script type="text/javascript">
    function startCountdown() {
        var countdownEnd = localStorage.getItem('countdownEnd');
        if (!countdownEnd) {
            countdownEnd = Date.now() + 5* 60 * 1000; // 5分後のタイムスタンプを保存
            localStorage.setItem('countdownEnd', countdownEnd);
        }

        var interval = setInterval(function() {
            var now = Date.now();
            var timeLeft = countdownEnd - now;

            if (timeLeft <= 0) {
                clearInterval(interval);
                clearInterval(refreshInterval); // リフレッシュを停止
                document.getElementById('wait-text').innerText = '5分以内にマッチングしませんでした。【数字】0000　をクラウドソーシング側にご入力いただければ、謝礼をお支払いします。入力後、こちらの画面は閉じていただいて構いません。この度は誠にありがとうございました。';
                document.getElementById('spinner').style.display = 'none'; // アニメーションを停止
                localStorage.removeItem('countdownEnd');
            }
        }, 1000);
    }

    // ページがリロードされてもタイマーを保持
    startCountdown();

    // 5秒ごとにページをリフレッシュ
    var refreshInterval = setInterval(function() {
        location.reload();
    }, 5000);
</script>

<style>
    .spinner {
        width: 40px;
        height: 40px;
        position: relative;
        margin: 100px auto;
    }

    .double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #333;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
        animation: sk-bounce 2.0s infinite ease-in-out;
    }

    .double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    @-webkit-keyframes sk-bounce {
        0%, 100% { -webkit-transform: scale(0.0) }
        50% { -webkit-transform: scale(1.0) }
    }

    @keyframes sk-bounce {
        0%, 100% { 
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 50% { 
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }
</style>
{{ endblock }}

ポイントは、5秒おきにリフレッシュしているところです。これをしないと、マッチングが成立したのにも関わらず画面がこのページのまま自動で切り替わらないという問題が起こりました。

また、<style>~<style>の部分は、待っているときのアニメーションを表示させるためだけのコードなので、別になくてもいいです（上の画面見本の黒い〇の部分です）。

iniy.py　Pages部分での設定

作ったテンプレートを読み込むように設定しています。

# PAGES

class matchingWait(WaitPage):

    def is_displayed(player):

        return player.round_number == 1

    template_name = 'matchingWait.html'

    def after_all_players_arrive(group: Group):

懸念点: サーバーへの負荷

懸念点として、「5秒ごとにリフレッシュする」という動作がどれくらいサーバーに負担をかけるのかがわかっていません。

少なくともこの間の実験では、Herokuサーバーの
dyno: Standard x2
Postgress Standard 7
同時接続: 100人
で、問題はありませんでした。

必要なもの

oTreeで実験を作っていく前に、そのために必要なコンピュータの環境について紹介します。

1. Python oTreeはPythonがベースになっているので、Pythonが必要です。
2. oTree これがないと始まりません。※先にPythonを入れてから入れます
3. エディタ (なんでもいい) 実験を編集していくときに必要です。エディタと呼ばれるツールであればなんでもいいですが、VS Code が軽くて使いやすくおすすめです。
4. Powershell/コマンドプロンプト/ターミナル (どれでもいい) ※ 元々入っていますので、新しく入れる必要はありません。

1. Pythonのインストール

oTreeはPythonがベースになっているので、Pythonが必要です。

https://kinsta.com/jp/knowledgebase/install-python/　こちらの記事が、Windows、Mac、Linuxそれぞれについて書いてくださっていてわかりやすかったです。

注意: Python2.xと3.xがありますが、oTreeは3.xにしか対応していません。3.xを入れてください。

既に入っている/入れ終わったら2.oTreeのインストールに進みます。

2. oTreeのインストール

コンピュータに元々入っている、PowerShell/コマンドプロンプト/ターミナルを開きます。コンピュータ内のアプリの中から探してください。WindowsにはPowerShellとコマンドプロンプト、Macにはターミナルが入っています。

PowerShell/コマンドプロンプト/ターミナルが開けたら、oTreeをインストールするためのコードを入力し、実行します (エンターキーで実行できます)。

pip3 install -U otree

3. エディタ

実験を編集していくときに必要です。エディタと呼ばれるツールであればなんでもいいですが、VS Code が軽くて使いやすくおすすめです。https://code.visualstudio.com/download　こちらからインストールできます。

コンピュータ内にoTree用の場所を用意する

必要なものがインストールできたら、コンピュータ内に、oTreeで作った実験 (プロジェクト) を保存するようの場所を作ります。

※ 本項は、ディレクトリ構造にあまり詳しくない方向けです。ご自身で場所を指定できる方は読み飛ばしていただいて大丈夫です。

「ディレクトリ？場所？なにそれ？」という方は、Cドライブ直下にoTree用の場所を用意することをおすすめします。理由は、パス名 (ファイルがどこにあるかの住所みたいなものです) が短くて済み、問題が起こりにくいためです。

では早速やってみましょう。

Cドライブを開きます。

その中に「ユーザー」というフォルダがあるので開き、さらに自分のユーザー名のフォルダを開きます。

そこに、「oTree」というフォルダを作ります。

これで、oTreeで作った実験 (プロジェクト) の置き場ができました！

oTreeの実験の作り方・編集の仕方

oTreeプロジェクトを作ってみよう

oTreeで作った実験は、下図のように実験全体の「プロジェクト」とプロジェクト内の「アプリケーション」がある、という階層構造になっています。

プロジェクトは実験全体、アプリケーションはその中のひとつひとつの実験課題です。例えば、(1)事前質問紙→(2)最後通牒ゲーム→(3)事後質問紙という実験をしたい場合、その3つを別々のアプリケーションして作ることになります。

では、プロジェクトを作ってみましょう。さっき作った「oTree」のフォルダ内にプロジェクトを作りたいので、「oTree」フォルダへ移動します。Powershell/コマンドプロンプト/ターミナル で、

cd otree 

と入力し、実行してください。そのあと、oTreeプロジェクトを作る指示

を入力し、実行します。「otree startproject 〇〇」という指示は、「〇〇という名前のotreeプロジェクトを作ってね！」という意味です。

otree startproject sampleproject 

実行すると、Include sample games? (y or n): と聞かれますが、今回はn (NO) と答えます。ちなみにyにすると、サンプルのアプリケーションが大量に入ります。

Include sample games? (y or n): n

【発生しうる問題】

Macの場合に、ターミナルに管理者権限がないことでうまくプロジェクトを作成できない問題が生じることがあります。「Mac ターミナル 権限」等で調べると解決法が出てきます。

エディタでプロジェクトを確認

プロジェクトができたかどうか確認するために、作ったプロジェクトをエディタ (VS Code) で見てみましょう。

VS Codeを開いて、File→Open Folderで、先ほど作った「sampleproject」を開きます。

確認すると、色々なファイルが自動で作られていると思います。

なかでも重要なのが、下図のsettings.pyファイルです。

settings.pyファイルをいじることで、

• どの順番でどのアプリケーションを参加者にやってもらうかの設定
• 言語の設定
• ゲーム内で得た通貨と実際の謝礼額の対応の設定

など、ゲーム全体の設定を行います。

oTreeのアプリケーションを作ってみよう

次に、プロジェクトの中にアプリケーションを作ってみます。先ほど述べたように、アプリケーションは一つ一つの実験課題 (例: 事前質問紙、最後通牒ゲーム、事後質問紙) のことです。

「sampleproject」というプロジェクトの中にアプリケーションを作るために、Powershell/コマンドプロンプト/ターミナルに戻って、「sampleproject」フォルダへ移動します。

cd sampleproject

※ ここで「パスが存在しない」というエラーが出る場合は、一回Powershell/コマンドプロンプト/ターミナルを閉じて場所が元に戻ってしまったのが原因なので、もう一度 cd otree で「otree」のフォルダに移動してから、cd sampleproject を実行してください。

#パスが存在しないというエラーが出る場合
cd otree
cd sampleproject

「sampleproject」に移動できたら、アプリケーションを作る指示

otree startapp samplegame

を入力し、実行します。プロジェクトを作るときと同じように、otree startapp 〇〇は、「〇〇という名前のアプリケーションを作ってね！」という意味です。

エディタでアプリケーションを確認

うまくアプリケーションができていれば、「sampleproject」の中に「samplegame」ができていて、さらにその中に「init.py」、「MyPage.html」、「Results.html」があるはずです。

oTreeではこれらのページをいじることで実験を作ります。具体的には、

• init.py: どんな実験をするか、実験課題の挙動について設定する場所。
• .htmlのファイル: 実験画面の見た目を編集する場所。必要な画面の数だけ増やすことができます。

以上が、

• oTreeで実験を作ってみたいけど、何から始めればいい？
• どこでoTreeの実験の中身を編集すればいい？

という話になります。閲覧くださりありがとうございました！

はじめに

COVID-19感染拡大防止のため、社会心理学実験の授業がオンライン開講になりました。そこで、例年グループでトランプを使って行っていた廃棄物処理ゲーム ( Hirose et al., 2004) の授業回をオンラインでもできるよう、ゲームをoTreeで作りました。コードを全て載せています。

メソッドget_others_in_group() (https://otree.readthedocs.io/en/latest/multiplayer/groups.html)は、自分以外のグループメンバーを取得します。
それを使って、結果のフィードバック画面に他プレイヤーの選択と利得が表示される公共財ゲームを作りました。

オンライン経済実験ツールoTreeで作った実験をサーバーにアップして、データをとることができたのでまとめておきます。※Windowsです。
oTree Hubを使う方法と、使わない方法の二つを紹介します。
実験全体ができていて、otree devserverで確認ができていて、あとは外部からアクセスして使えるようにしたいだけの状況を想定しています。

これを作ります

本記事は、Online Psychological Experiment Advent Calendar 2020 9日目の記事としてアップされたものです。

社会学・社会心理学書籍のなかでお勧めなものをいくつかピックアップしてみました(学部1年生に向けて書いたものです)。