【jsPsych】僕の同意画面 #CSS

僕が作ったjsPsychの同意画面をこちらに置いておきます。

改変しながら是非使ってください。

こちらから実際の画面を見ることができます(2ページあります)。
スマホでもみれますが、文字やボタンが小さくなってしまいます。
https://takat0-ch.github.io/jsPsych-agreement/

1ページ目はsurvey-multi-select pluginを使って、同意できるのであれば、チェックボックスにチェックを入れてもらうことで次の画面に進むことができるようになっています。

2ページ目もほとんど同じですが、それぞれの項目番号の前にもチェックボックスを入れています。

classってなに？
CSSってなに？
については別記事で解説します。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>agreement</title>
    <script src="https://unpkg.com/jspsych@7.2.1"></script>
    <script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.1.0"></script>
    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.1.0"></script>
    <link href="https://unpkg.com/jspsych@7.2.1/css/jspsych.css" rel="stylesheet" type="text/css" />
    <link href="addition.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>

<script>

    const jsPsych = initJsPsych({
        on_finish: function () {
            jsPsych.data.displayData();
            jsPsych.endExperiment('以上で実験は終了です。ご協力ありがとうございました。<br>このままブラウザを閉じてください。');
        }
    });

    const fullscreen = {
        type: jsPsychFullscreen,
        message: '<p>フルスクリーンモードにします。</p>',
        button_label: ['次へ'],
        fullscreen_mode: true
    };

    const end_fullscreen = {
        type: jsPsychFullscreen,
        fullscreen_mode: false
    };

    const agreement1 = {
        type: jsPsychSurveyMultiSelect,
        questions: [
            {
                prompt: "実験のご協力に同意いただける方は下記のチェックボックスにチェックを入れ、次へをクリックしてください。<br>同意いただけない方はそのままウィンドウを閉じてください。",
                options: ['<b>以上について説明を読み、理解したので本研究に研究協力者として参加することに同意する。</b>'],
                required: true
            }
        ],
        preamble: '<header class = "header">-------の検討  研究説明書</header>' +
            '<div class = "agreenment">' +
            '<p class ="title">1. 実験の目的および内容</p>' +
            '<p class = "contents">この実験は、-------について調べることを目的としています。この実験はあなた個人の性格や能力などを調査することを目的としたものではありません。</p>' +
            '<p class = "title">2. 実験の方法</p>' +
            '<p class = "contents">本研究はwebブラウザ上で行う実験で、画面上に提示される--------課題を行っていただきます。-----------という課題です。所要時間は00分程度です。</p>' +
            '<p class ="title">3. 実験に伴う危険性及び不利益について</p>' +
            '<p class = "contents">実験を行い、モニターを見続けることで目の疲れや肩こりなど一時的に疲労やストレスを感じる可能性がありますが、身体や精神に恒久的な影響が生じる心配は一切ありません。また、もし万が一負担や不快感などを感ずることがあったら、あなたの意志で自由に休憩を取ることが可能であり、実験をいつでも中止することができます。休憩及び実験の中止はいつ、いかなる理由でも可能です。また、休憩、実験中止、不参加に伴う不利益は一切生じません。</p>' +
            '<p class ="title">4. 研究結果の使われ方</p>' +
            '<p class = "contents">実験の結果は将来、学術論文や学会発表などを通じ公表される可能性があります。ただし、その際も参加者の何十人の代表値（平均値など）のみが公表され、どのような形であれ、研究協力者の個人のデータが単独で公表される可能性はありません。本研究では、再現性問題への配慮、研究の透明化の観点から取得した研究データをオープンアクセスとします（論文等で公開します）。オープンアクセスとしたデータについては、各研究協力者のデータにランダムにIDを付与して公開しますのであなたの個人情報と関連づけられることは一切ありません。</p>' +
            '<p class ="title">5. 結果のフィードバック</p>' +
            '<p class = "contents">結果のフィードバックは本研究が終了した後、20xx年 x月からx年間--------において行います。また，結果には研究協力者個人を特定できるようないかなる個人情報も掲載いたしません。</p>' +
            '<p class ="title">6. プライバシーの保護</p>' +
            '<p class = "contents">実験ではキー押し反応と反応にかかる時間が記録されますが、データは全て匿名で扱われ、研究者以外があなたのデータを直接見ることはできません。さらに、データから個人が特定できる情報は一切記載しません。研究データ収集後は当該データを記録メディアでのみ保管します。研究期間終了後においては、研究者の管理の下にある鍵の掛かる保管庫で10年間保管され、その後、物理的に破壊するなどの措置を用いて復元不可能な状態にします。なお、オープンアクセスとした公開データについては、10年目以降も公開を続けるものとします。</p>' +
            '<p class ="title">7. 研究協力の自由及び同意の撤回について</p>' +
            '<p class = "contents">研究への参加はあなたの自由意志によって決められるものであり，強制ではありません。本研究に参加しないことによる不利益や同意の撤回に伴う不利益はありません。同意の撤回は実験中、実験を中断することで行うことができます。実験終了後は同意を撤回できないことをご了承ください。</p>' +
            '<table class = "contact"><tr><th>連絡先</th><th>専修大学 -------</th></tr>' +
            '<tr><th>実験者</th><th>専修大学大学院文学研究科心理学専攻 小山貴士</th></tr>' +
            '<tr><th>指導教員</th><th>------- 教授</th></tr>' +
            '<tr><th>E-mail</th><th>---@gmail.com</th></tr>' +
            '<tr><th>電話番号</th><th>000-000-0000 (-------)</th></tr>' +
            '<tr><th>住所</th><th>〒000-0000 神奈川県川崎市多摩区----- 0-0-0 (----研究室)</th>' +
            '<tr><th>ホームページ</th><th><a href="https://researchmap.jp/takato_oyama">https://researchmap.jp/takato_oyama</a></th></tr></table>' +
            '</div>',
        button_label: ['次へ']
    };
    const timeline = [];

    timeline.push(fullscreen);
    timeline.push(agreement1);
    timeline.push(end_fullscreen);

    jsPsych.run(timeline);

</script>
</html>

以下のようにすればチェックボックスを追加できます。

<p class ="title"><input type="checkbox" required>1. 実験の目的および内容</p>

cssは以下のようにしました。

addition.css

.jspsych-display-element {
    background-color: black;
    color: white;
}

.header {
    text-align: center; 
    font-size: 25px; 
    margin-top: 100px;
    margin-bottom: 50px; 
    font-weight: bold;
}

.agreenment {
    margin: auto;
    width: 1000px;
}

.agreenment p {
    text-align: left;
    font-size: 20px;
    margin: auto;
}

.title {
    font-weight: bold;
}

.contents {
    text-indent: 1rem;
    padding-bottom: 25px;
}

.contact {
    margin: auto;
    margin-top: 20px;
    width: 750px;
    font-size: 18px;
    border: 4px solid;
    border-color: white;
    border-radius: 8px;
    text-align: left;
    padding: 10px 15px;
}

input[type=checkbox] {
    transform: scale(2);
    margin: 20px;
  }

(全部にclass名つける必要はないよなぁ。。liにしたほうがいいのかなぁ。まあいいか。)