JoaquimStr.github.io/meditation.html at main · JoaquimStr/JoaquimStr.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
  <head>
    <title>ASD project</title>
    <script src="jatos.js"></script>
    <script src="jspsych/jspsych.js"></script>
    <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
    <script src="jspsych/plugin-html-keyboard-response.js"></script>
    <script src="jspsych/plugin-image-keyboard-response.js"></script>
    <script src="jspsych/plugin-html-button-response.js"></script>
    <script src="jspsych/plugin-preload.js"></script>
    <script src="jspsych/plugin-sketchpad.js"></script>
    <script src="jspsych/plugin-survey-text.js"></script>
    <script src="jspsych/plugin-survey.js"></script>
    <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
    <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.0.0"></script>

    <style type="text/css">
      .jspsych-btn{margin: 10px;}
      .jspsych-content-wrapper{width: 90%;}
      .jspsych-content-wrapper p, h3{text-align: left;}
      .jspsych-content-wrapper input[type="text"], textarea{width: 100%;}
      .jspsych-content{width: 100%;}
     </style>

  </head>
  <body></body>

  <script>

      /* initialize jsPsych */
      var jsPsych = initJsPsych({
          show_progress_bar: true,
          override_safe_mode: true,
          on_finish: () => jatos.endStudy(jsPsych.data.get().json())
      });


      /* create timeline */
      var timeline = [];

      /* add time stamp to each trial */
      jsPsych.data.addProperties({
        timestamp: Date.now()
      });

      /* participant ID */
      var ppn_form = {
        type: jsPsychSurveyText,
          questions: [
            {prompt: 'Enter your participant ID:'}
          ]
        }
      timeline.push(ppn_form)

      /* define instructions */
      var instructions = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: `
          <p> Welcome to your daily meditation session! </p>
          <p> On the next screen you will be asked to follow recorded instructions. After that you will be asked a few questions regarding how you felt during the meditation session. </p>
          <p> For this, we will use a grid which you will use to indicate the intensity of each experience across time. </p>
          <p> Please start drawing from the start of the meditation until the timepoint when the meditation ends. </p>
          <p> Please press any key to continue. </p>
        `,
        post_trial_gap: 1
      };
      timeline.push(instructions);

      /* preloads stimuli automatically */
      var preload = {
          type: jsPsychPreload,
          auto_preload: true, // automatically preload the image and audio files
          audio: ['sounds/MeditationTrack.mp3']
      }
      timeline.push(preload)

      var audio = ['sounds/MeditationTrack.mp3'];

      var audiomeditation = {
        type: jsPsychAudioKeyboardResponse,
        stimulus: audio,
        choices: "ALL_KEYS",
        prompt: '<p>Please listen to the audio and follow the instructions.</p>',
        response_ends_trial: true,
        trial_ends_after_audio: true,
        response_allowed_while_playing: true
      };
      timeline.push(audiomeditation);

        /* setup retrospective experience traces for phenomenology */
      var experiencediary = '<p style="text-align:left;font-size:30px;font-weight:bold;"> Meditation session </p>'
      var desc = '<p style="text-align:left;font-size:20px;">Question '
      var description = experiencediary +
                            '<p style="text-align:left;font-size:20px;"> Please describe what your experience was like using the following ratings: <br> </p>' +
                            desc
      /* var pd = ': To which extent... ' */

      var items = [
          { item: description + '1: How aware were you of the activities of your mind?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '2: How alert did you feel during the meditation?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '3: How bored did you feel over the course of the meditation?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '4: How effortful did the meditation feel over time?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '5: Were you actively generating the content of your experiences, or watching passively?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '6: How focused or distracted were you on the task you were doing?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '7: How aware were you of the physical sensations of your body - for example your breath or heartbeat?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '8: Were you seeking for specific senses (touch, taste, sound, etc.)?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '9: How physically tense did you feel, referring to specific parts of the body as well as the whole body?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '10: How much were you worrying about present and future events (e.g., scenario planning)?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '11: How much were you worrying about past events (e.g., ruminating, replaying interactions)?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '12: How stressed did you feel throughout the meditation?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '13: Extra dimension:</p>', img: 'img/verymuch_notatall_meditation.png'}
          ]

      var quality = {
          timeline: [
          {
            type: jsPsychSketchpad,
            prompt_location: 'abovecanvas',
            canvas_width: 757,
            canvas_height: 435,
            canvas_border_width: 2,
            prompt: jsPsych.timelineVariable('item'),
            background_image: jsPsych.timelineVariable('img')
          },
          ],
          timeline_variables: [
          { item: description + '1: How aware were you of the activities of your mind?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '2: How alert did you feel during the meditation?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '3: How bored did you feel over the course of the meditation?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '4: How effortful did the meditation feel over time?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '5: Were you actively generating the content of your experiences, or watching passively?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '6: How focused or distracted were you on the task you were doing?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '7: How aware were you of the physical sensations of your body - for example your breath or heartbeat?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '8: Were you seeking for specific senses (touch, taste, sound, etc.)?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '9: How physically tense did you feel, referring to specific parts of the body as well as the whole body?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '10: How much were you worrying about present and future events (e.g., scenario planning)?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '11: How much were you worrying about past events (e.g., ruminating, replaying interactions)?</p>', img: 'img/verymuch_notatall_meditation.png'},
          { item: description + '12: How stressed did you feel throughout the meditation?</p>', img: 'img/verymuch_notatall_meditation.png'}
          ]
      }

      var subject_id; // value is set during the experiment

      timeline.push(quality);
      /*jsPsych.run(timeline); */

      var extra_dimension = {
        type: jsPsychSurvey,
        pages: [
          [
            {
              type: 'html',
              prompt : "Question 13: Please indicate below what extra dimension you would like to add, if any, then click on <strong>Finish</strong> to access the sketchpad.</p>", img: "img/verymuch_notatall_meditation.png"
            },
            {
              type: 'text',
              prompt: "Enter the extra dimension here:",
              name: 'Extra',
              required: false
            },
          ]
        ],
      };

      timeline.push(extra_dimension);

      var last_sketch = {
          timeline: [
          {
            type: jsPsychSketchpad,
            prompt_location: 'abovecanvas',
            canvas_width: 757,
            canvas_height: 435,
            canvas_border_width: 2,
            prompt: jsPsych.timelineVariable('item'),
            background_image: jsPsych.timelineVariable('img')
          },
          ],
          timeline_variables: [
          { item: description + '13: Extra dimension:</p>', img: 'img/verymuch_notatall_meditation.png'}
          ]
      }

      timeline.push(last_sketch);

      /* start the experiment */
      jatos.onLoad(() => {
        jatos.addAbortButton();
        jsPsych.run(timeline);
      });

  </script>
</html>