JoaquimStr.github.io/instructions.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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="style.css" rel="stylesheet" type="text/css" />

  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      box-sizing: border-box;
      width: 100%;
      height: 100vh;
      margin: 0;
    }

    img.two {
      height: 50%;
      width: 50%;
    }

    .container {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
        -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
        -moz-column-gap: 10px; /* Firefox */
        column-gap: 10px;
        padding: 10px;
    }

    .container div {
      width: 100%;
      display: inline-block;
      background: white;
      border: 3px solid black;
      box-sizing: border-box;
      text-align: center;
      margin-bottom: 10px;
    }

    .container img {
      width: 100%;
      height: auto;
      vertical-align: middle;
    }

      /* Add a black background color to the top navigation */
    .topnav {
      background-color: #333;
      overflow: hidden;
    }


    .topnav {
      overflow: hidden;
      background-color: #30795d;
    }

    .topnav a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: white;
    }

    .topnav a.active {
      background-color: #95e6b4;
      color: white;
    }

    .topnav .search-container button {
      float: right;
      padding: 6px 10px;
      margin-top: 8px;
      margin-right: 16px;
      background: #ddd;
      font-size: 17px;
      border: none;
      cursor: pointer;
    }

</style>
</head>
<body>

<div class="topnav">
  <a href="index.html">Home</a>
  <a class="active" href="instructions.html">Instructions</a>
  <a href="eegheadband.html">Using the Dreem EEG headband</a>
  <a href="signup.html">Start of study</a>
  <a href="signout.html">End of study</a>
  <a href="contact.html">Contact</a>
</div>


<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-left: 2rem;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

</style>
</head>
<body>

<div style="padding-left:16px">

  <h2>Task overview</h2>

  <p>We will give you an overview of the most important tools in the study and how to use them.</p>
  <p>You can select 14 experiment days within a time period of three weeks. If anything prevents you from adhering to the schedule, please let the experimenter know. </p>

  <h2>Task descriptions</h2>

  <p>In addition to the questionnaires at the start and end of study, the study contains four main tasks for each experiment day (ideally before going to bed):
    <ul>
      <li> <strong> Activity diary: </strong> Please fill out the activity diary before going to bed. </li>
      <li> <strong> Daily experience traces: </strong> Please fill out experience ratings indicating the intensity of experience components retrospectively for the day. </li>
      <li> <strong> Meditation task: </strong> This is a short meditation you can do whenever you prefer during the day. </li>
      <li> <strong> Night recordings and sleep diary: </strong> Please use the EEG headband to record brain activity every night during sleep. You are also asked to fill a sleep diary every morning. </li>
    </ul>
  </p>
</div>

<button class="accordion">Activity diary</button>
<div class="panel">
  <p> We would like you to describe what your daily activities are. </p>
  <p> <strong> What to do?</strong> You are asked to document your daily activities over the course of an entire day in a short diary. To fill out the activity diary, please click on the link in the "Home" tab of the study portal. </p>
  <p> <strong> When?</strong>  The activity diary needs to be filled out every evening before going to bed.</p>
  <p> <strong> How?</strong>  Please give a short overview about your activities over the day. Write down the time interval, the kind of activity you have done (e.g. going for a run, walking, doing sports classes) and the intensity linked to the activity you were doing. To fill out the activity diary, please click on the link in the "Home" tab of the study portal.  </p>
</div>

<button class="accordion">Daily experience traces</button>
<div class="panel">
  <p>We use a novel method called retrospective experience tracing to rate the intensity of different aspects of subjective experience across time.
    Each experience trace maps the intensity of an experience component against time. </p>
  <p><strong> What to do?</strong> You are asked to document how your experiences started and developed over the course of the entire day beginning from when you woke in the morning until the time before going to bed at night.
    Each experience trace is headed by a question such as "How aware were you during the day of what was going on in your mind?".
    To answer this question, you can draw the intensity of their experience in time on a 24h time scale.
    <br><br><strong>Example of a retrospective experience trace measuring awareness intensity</strong><br>
    <br><img class="two" src="img/rating.png" width="1190px" height="652px" alt="Rating"><br>
    You can leave gaps during times when you were sleeping. However, please indicate your experience when you were supposed to be sleeping but could not sleep.
  </p>
  <p><strong> When?</strong> Please take the time to complete the daily experience traces before going to bed in the evening, when the memory of your experiences from the day is still fresh. </p>
  <p> <strong> How?</strong>  To fill out the retrospective daily experience traces, please click on the link in the "Home" tab of the study portal. </p>
</div>

<button class="accordion">Meditation task</button>
<div class="panel">
  <p>We want to know how meditation influences your daily subjective experience. </p>
  <p><strong> What to do?</strong> Each meditation task will last around 20 minutes, including short instructional breaks between each section. Prior to your first meditation, listen to the first few minutes of the audio meditation guide to familiarise yourself with the structure of the session. After each meditation, report your experience by drawing on the graphs.
    Before each session, ensure that you are in a comfortable environment, undisturbed, with a place to sit comfortably for the next 20 minutes. Place the dreem headset on your head and launch the dreem mobile app. According to the instructions given by the app, ensure that the headset rests appropriately and with good contact to your scalp.
  </p>
  <p><strong> When?</strong> Please perform the meditation task once a day for a minimum of 7 days. Ideally, you can perform the meditation task when you fill out the daily experience diary and ratings before going to bed. </p>
  <p> <strong> How?</strong>  To perform the meditation task, please click on the link in the "Home" tab of the study portal. </p>
</div>

<button class="accordion">Night recordings and sleep diary </button>
<div class="panel">
  <p> We would like to record brain data during sleep to examine which brain activity is linked to social stress and sensory sensitivity in autism. </p>
  <p> <strong> What to do?</strong> Please put on the EEG headband before going to bed and leave it on during the night.
       When you wake up in the morning, turn off the headband and charge it using the magnetic charger provided.
       Data are only uploaded to a cloud while the headband is charging, so it is important to charge the headband after every use.
       You are also asked to fill a <strong>sleep diary</strong> every morning to report how well you slept.
  </p>
  <p> <strong> When?</strong> Please wear the EEG headband during the night following an experiment day. </p>
  <p> <strong> How?</strong> Follow <a href="eegheadband.html">these instructions</a> to learn how to use the Dreem headband. </p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
</body>
</html>