Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
744 lines (692 loc) · 49.3 KB
/
Copy pathindex.html
File metadata and controls
744 lines (692 loc) · 49.3 KB
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The title and the description are what a search result shows, and
most of what a search engine matches the page against, so they
say what people search for and not only the name. The social
tags below keep the name alone. -->
<title>The Abyss Test · Free Science-Based Personality Test</title>
<meta
name="description"
content="A free, anonymous personality test from the University of Sussex. Discover your personality traits, your archetype, how you think and how you see the world."
/>
<!-- The one address search engines should file every link to the test
under, whatever its query says (?source=, ?start=, a shared
?card=), so that one page is ranked rather than many near-copies
of it. Added by a script and not written as a tag for the og:url
reason below: Facebook can read a rel=canonical in the markup as
the address being shared, and its crawler runs no script, while
Google's renders the page and reads a canonical added this way. -->
<script>
document.head.append(
Object.assign(document.createElement("link"), { rel: "canonical", href: "https://realitybendinglab.com/TestYourself/" }),
)
</script>
<!-- What a link to the test unfurls into on social media and in chats.
Read by crawlers that run no script, so it is the same for every
link whatever its query says; a level with a preview of its own
is reached through an entry page under start/ instead, which
forwards here with ?start=. The image wants an absolute address,
and is made from assets/preview/card.html by make.py beside it.
There is no og:url on purpose: Facebook treats it as the address
being shared, which would take ?source= and ?start= off the link. -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="The Abyss Test" />
<meta property="og:title" content="The Abyss Test" />
<meta
property="og:description"
content="The science-based assessment of deep personality: research-grade measures, immediate results, entirely anonymous."
/>
<meta property="og:image" content="https://realitybendinglab.com/TestYourself/assets/preview/card.jpg?v=2" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The Abyss: the science-based assessment of deep personality" />
<meta name="twitter:card" content="summary_large_image" />
<!-- The A of the name over the wheel behind it, on the dark blue of the
water: the hero's twelve petals in their colours, stronger than on
the page so they survive sixteen pixels, and the A drawn as a path,
since a favicon cannot count on a serif being there to set it in.
Written into the page rather than fetched: there is nothing to build
here, and a file for sixteen pixels is a file too many. -->
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a2250'/%3E%3Cstop offset='1' stop-color='%23070b1c'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.45' stop-color='%23c9d1ee'/%3E%3Cstop offset='1' stop-color='%237d88b8'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23070b1c' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23070b1c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23b)'/%3E%3Cg fill-opacity='.42' stroke='%23b9a6ff' stroke-opacity='.35' stroke-width='.8' stroke-linejoin='round'%3E%3Cpath d='M32 33L27.9 14.3A19.1 19.1 0 0 1 36.1 14.3Z' fill='%235b3fd6'/%3E%3Cpath d='M32 33L39.7 8.7A25.5 25.5 0 0 1 49.2 14.2Z' fill='%23a58bff'/%3E%3Cpath d='M32 33L43.1 22.8A15.1 15.1 0 0 1 46.4 28.5Z' fill='%236d4be0'/%3E%3Cpath d='M32 33L53.0 28.4A21.5 21.5 0 0 1 53.0 37.6Z' fill='%23c3a8ff'/%3E%3Cpath d='M32 33L58.6 41.4A27.8 27.8 0 0 1 52.5 51.8Z' fill='%237c5cff'/%3E%3Cpath d='M32 33L43.8 45.8A17.4 17.4 0 0 1 37.2 49.6Z' fill='%239d7bf0'/%3E%3Cpath d='M32 33L37.1 56.2A23.8 23.8 0 0 1 26.9 56.2Z' fill='%236a3fc2'/%3E%3Cpath d='M32 33L27.8 46.3A13.9 13.9 0 0 1 22.6 43.3Z' fill='%23b89cff'/%3E%3Cpath d='M32 33L17.0 46.7A20.3 20.3 0 0 1 12.6 39.1Z' fill='%238455e8'/%3E%3Cpath d='M32 33L6.5 38.6A26.1 26.1 0 0 1 6.5 27.4Z' fill='%23a07ae8'/%3E%3Cpath d='M32 33L16.5 28.1A16.2 16.2 0 0 1 20.0 22.0Z' fill='%237448d1'/%3E%3Cpath d='M32 33L16.7 16.3A22.6 22.6 0 0 1 25.2 11.4Z' fill='%238a6cff'/%3E%3C/g%3E%3Ccircle cx='32' cy='33' r='29' fill='url(%23h)'/%3E%3Cpath d='M30.6 8.5L34.2 8.5L48.6 49.5L53 50.5L53 53L39.5 53L39.5 50.5L42.3 49.8L38.9 40L23 40L19.4 49.8L22.5 50.5L22.5 53L11.5 53L11.5 50.5L15.6 49.8ZM31 17.7L37.6 36.5L24.2 36.5Z' fill='url(%23a)' fill-rule='evenodd'/%3E%3C/svg%3E"
/>
<!-- Three sheets, in cascade order: the shell everything is built on,
then the landing screen, then everything that shows a result. -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/intro.css" />
<link rel="stylesheet" href="css/results.css" />
</head>
<body data-screen="intro">
<!-- The name of the test, over every screen it is taken on, and the way
into the About panel: who is behind it and who to write to. -->
<header class="banner" id="banner">
<button class="banner__title" id="about" aria-expanded="false" aria-haspopup="dialog">The Abyss Test</button>
</header>
<!-- The account, where the link asks for it (`?account`): top right, and
drawn as the hub's dashboard draws it (`drawAccount`, app.js), so it
reads as the same thing in both places. It goes to the dashboard,
where an account is made or signed into and the lab's other apps
are, in the same tab: the run is kept as it goes, so leaving it
there is leaving it as a closed tab would, and "Carry on" on the
dashboard brings it back. -->
<a class="me" id="account" href="../me/?account" hidden></a>
<!-- The bar down the left: the other half of the gauge. Where the gauge
says how far down the descent has got, this says what it has turned
up — it opens with nothing on it but the way into the profile, and
every level finished mints a badge onto it, a crop of the figure
that level closed on. Built and filled by renderShelf. -->
<aside class="shelf">
<button class="shelf__link" id="profile" aria-expanded="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3l7.8 4.5v9L12 21l-7.8-4.5v-9z" />
<path d="M12 7.6l3.8 2.2v4.4L12 16.4l-3.8-2.2V9.8z" />
<path d="M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9" />
</svg>
<span>Profile</span>
</button>
<div class="shelf__badges" id="badges" aria-label="The levels you have finished"></div>
</aside>
<!-- The bar down the right: the way into each level and into the panels,
and the descent itself running along the edge the page sits against.
The levels are the milestones on it — the point each one is finished
is where its button sits. Both this and the banner are hidden on the
landing screen, so the title has the page to itself. -->
<aside class="sidebar">
<!-- The readout at the head of the gauge: how deep, written by
renderDepth. It sits over the top of the line rather than above
it, so the line itself starts at the banner's lower edge. -->
<div class="sidebar__gauge" title="How far down you have got">
<span class="sidebar__gauge-word">Depth</span>
<span class="sidebar__depth" id="depth"></span>
</div>
<div class="sidebar__descent">
<div class="sidebar__line" id="descent-line" aria-hidden="true"><span class="sidebar__fill" id="descent-fill"></span></div>
<!-- What the descent passes on the way down: a pin each, filled
in by buildSidebar. Under the stops, so a level is never
covered by one. -->
<div class="sidebar__marks" id="marks" aria-label="Landmarks"></div>
<nav class="sidebar__levels" id="levels" aria-label="Your descent"></nav>
</div>
</aside>
<main id="app">
<!-- intro: the title, then the consent form, which has to be read to
the end before the test will open -->
<section class="screen screen--active" id="screen-intro">
<div class="hero" id="hero">
<!-- Inside the iris, a wheel: what the descent is for, charted
faintly behind the name, its petals dealt out clockwise as it surfaces.
It is the archetypes' wheel in twelve shades of violet, and
it is nobody's result — the lengths are made up. -->
<div class="hero__iris" aria-hidden="true">
<svg class="hero__web" viewBox="-102 -102 204 204">
<defs>
<radialGradient id="hero-hole" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="100">
<stop offset="0" stop-color="#020308" stop-opacity="0.660" />
<stop offset="0.125" stop-color="#020308" stop-opacity="0.632" />
<stop offset="0.25" stop-color="#020308" stop-opacity="0.557" />
<stop offset="0.375" stop-color="#020308" stop-opacity="0.451" />
<stop offset="0.5" stop-color="#020308" stop-opacity="0.330" />
<stop offset="0.625" stop-color="#020308" stop-opacity="0.209" />
<stop offset="0.75" stop-color="#020308" stop-opacity="0.103" />
<stop offset="0.875" stop-color="#020308" stop-opacity="0.028" />
<stop offset="1" stop-color="#020308" stop-opacity="0.000" />
</radialGradient>
</defs>
<circle class="web__ring" r="33.3" />
<circle class="web__ring" r="66.7" />
<circle class="web__ring" r="100.0" />
<path class="web__petal" style="--petal: #5b3fd6; --i: 0" d="M0 0L-14.4 -64.4A66.0 66.0 0 0 1 14.4 -64.4Z" />
<path class="web__petal" style="--petal: #a58bff; --i: 1" d="M0 0L26.3 -84.0A88.0 88.0 0 0 1 59.6 -64.8Z" />
<path class="web__petal" style="--petal: #6d4be0; --i: 2" d="M0 0L38.3 -35.2A52.0 52.0 0 0 1 49.6 -15.6Z" />
<path class="web__petal" style="--petal: #c3a8ff; --i: 3" d="M0 0L72.2 -16.1A74.0 74.0 0 0 1 72.2 16.1Z" />
<path class="web__petal" style="--petal: #7c5cff; --i: 4" d="M0 0L91.6 28.7A96.0 96.0 0 0 1 70.7 65.0Z" />
<path class="web__petal" style="--petal: #9d7bf0; --i: 5" d="M0 0L40.6 44.2A60.0 60.0 0 0 1 17.9 57.3Z" />
<path class="web__petal" style="--petal: #6a3fc2; --i: 6" d="M0 0L17.9 80.0A82.0 82.0 0 0 1 -17.9 80.0Z" />
<path class="web__petal" style="--petal: #b89cff; --i: 7" d="M0 0L-14.4 45.8A48.0 48.0 0 0 1 -32.5 35.3Z" />
<path class="web__petal" style="--petal: #8455e8; --i: 8" d="M0 0L-51.5 47.4A70.0 70.0 0 0 1 -66.8 20.9Z" />
<path class="web__petal" style="--petal: #a07ae8; --i: 9" d="M0 0L-87.8 19.6A90.0 90.0 0 0 1 -87.8 -19.6Z" />
<path class="web__petal" style="--petal: #7448d1; --i: 10" d="M0 0L-53.4 -16.7A56.0 56.0 0 0 1 -41.2 -37.9Z" />
<path class="web__petal" style="--petal: #8a6cff; --i: 11" d="M0 0L-52.8 -57.4A78.0 78.0 0 0 1 -23.3 -74.4Z" />
<!-- The middle is a hole: dark at the centre, gone by the petals' tips. -->
<circle class="web__hole" r="100" fill="url(#hero-hole)" />
</svg>
</div>
<!-- Who stands behind the study, so the case for taking it is
not just the page's own word for it. -->
<div class="hero__logos">
<span class="hero__logo"><img src="assets/logo_sussex.svg" alt="University of Sussex" /></span>
<span class="hero__logo"><img src="assets/logo_researchplus.png" alt="ResearchPlus" /></span>
<span class="hero__logo"><img src="assets/logo_rebel.png" alt="Reality Bending Lab" /></span>
</div>
<h1 class="hero__mark" aria-label="The Abyss Test">
<span class="hero__the" aria-hidden="true">The</span>
<span class="hero__title" aria-hidden="true">Abyss</span>
</h1>
<p class="hero__sub">The Science-based Assessment of Deep Personality</p>
<p class="hero__meta">
Research-grade measures <i aria-hidden="true">·</i> immediate results <i aria-hidden="true">·</i> entirely anonymous
</p>
<!-- A run left partway through on this device, offered back:
filled in and uncovered by app.js (`offerResume`) and
only when there is one. -->
<div class="resume" id="resume" hidden>
<p class="resume__head">Welcome back</p>
<div class="resume__ways">
<button class="btn" id="resume-go">Continue where you left off</button>
<button class="btn btn--ghost" id="resume-drop">Start again</button>
</div>
</div>
<a class="hero__cue" href="#gate"><span>Scroll to descend</span><i aria-hidden="true"></i></a>
</div>
<!-- The first thing under the title: the reason for the whole
thing, put better than the page puts it. -->
<figure class="creed">
<blockquote>Until you make the unconscious conscious, it will direct your life and you will call it fate.</blockquote>
<figcaption>Carl Jung</figcaption>
</figure>
<!-- Why it is worth the twelve minutes, before the form that
has to be read to get past it. -->
<section class="why">
<div class="why__case">
<p class="gate__step">Why do this</p>
<h2 class="why__heading">Know thyself.</h2>
<p class="why__lede">
We know surprisingly little about ourselves, and rarely stop to think about it. This test is a chance to spend a
few minutes looking inward, to consider how you think, feel and behave, and to see how that compares with other
people.
</p>
<ul class="why__points">
<li>
<b>You get told what it means.</b> Every level you finish opens a chart, and a reading of where you sit
compared with other people.
</li>
<li><b>Measured, not guessed.</b> The questionnaires are validated instruments, and the scores are real.</li>
<li>
<b>100% science, 0% commercial.</b> No ads, no fees, and your answers are never sold or used for commercial
applications.
</li>
<li><b>Ethically designed for you.</b> Built to the top academic research ethics standards.</li>
<li><b>Anonymous.</b> No IP addresses, cookies or personal information are collected.</li>
</ul>
</div>
<!-- A taste of the far end: the figures the levels close on,
one at a time, drawn from the same stand-ins a locked
level is, so none of them is anybody's result. Filled
and cycled by `showcase()` in app.js. -->
<div class="why__show" aria-hidden="true">
<div class="why__frame" id="why-frame"></div>
<p class="why__caption">Examples of feedback you will get</p>
</div>
</section>
<div class="gate" id="gate">
<p class="gate__step">Before you begin</p>
<h2 class="gate__heading">Information and consent</h2>
<!-- Modelled on the University of Sussex consent sheet the MINT validation study ran with
(ER/MB2021/2's): same headings in the same order, and the six
consent statements kept as the committee's own wording rather than reworded, since that
is what a reviewer reads for. What is written around them describes this study — see
`ethics/mint_followup/application_draft.md`, whose Project Description it has to keep
agreeing with. It is the approved text (reference 2026-2817-3620, October 2026), so a
change to it wants an amendment first. The duration is the time rewarded (30 minutes, two SONA credits, set on 4 October
2026), which the core's 20 to 25 minutes fits inside with room for slower participants.
**One of the six is no longer the committee's wording**, and it had to change: the third
said withdrawal was impossible "once I have completed it", which was true while the file
went at the end and stopped being true in September 2026, when answers began going out as
they are given (see **Where it goes** in AGENTS.md). The point of no return is now the
first answer rather than the last, and the paragraph above the statements says so in
plain words. A reviewer should be told this one was amended and why. -->
<div class="consent" id="consent" tabindex="0" role="region" aria-label="Consent form">
<!-- The one logo repeated from the row above: this is the
letterhead of the document itself, not another trust
signal, so only the study's own institution belongs
here. -->
<img class="consent__logo" src="assets/logo_sussex.svg" alt="University of Sussex" />
<h2>Informed Consent</h2>
<h3>Invitation to take part</h3>
<p>
Thank you for considering taking part in this study, conducted by Dr Dominique Makowski from the University of
Sussex and his team (see contact information below). Taking part is entirely up to you, and you can decide not
to without giving a reason.
</p>
<h3>Why have I been invited, and what will I do?</h3>
<p>
The aim of this study is to validate a questionnaire measuring interoception. Interoception refers to the
sensing, interpretation and processing of internal bodily signals (e.g., feeling changes in the way one's heart
beats). You will answer a series of questions on screen, one at a time, mostly by picking a point on a scale:
first a few questions about yourself, then questionnaires about the sensations you notice in your body, plus
other measures which help us contextualize your answers, such as your mood and health over the past weeks and
months.
</p>
<!-- A paragraph written `data-project` is shown on that timeline's runs alone
(app.js). `mint` has a core and a debrief after it; `all` has neither, so its
runs are told they can stop after any level and are debriefed at the foot of the form. -->
<p data-project="mint">
That first part takes <b>about 30 minutes</b> and is the whole of the study. If you are taking part for course
credit or payment, it is awarded for finishing it. You will then be told that you have finished, and offered the
choice of carrying on through further questionnaires if you would like to.
<b>That second part is entirely optional</b>, carries no additional credit or payment, and you can stop anywhere
in it.
</p>
<p data-project="all" hidden>
The test is made of levels of a few minutes each, and after the first you choose which to take next. Each ends
with results of its own, so you can stop whenever you want.
</p>
<p>
Please make sure that you are attentive and in a quiet environment, and that you have the time to complete it in
one go. You must be 18 or older to take part.
</p>
<h3>What will happen to the results and my personal information?</h3>
<p>
The group results of this research may be written into a scientific publication. Your anonymity will be ensured
in the way described in the consent information below. Please read this information carefully and then, if you
wish to take part, please acknowledge that you have fully understood this sheet, and that you consent to take
part in the study as it is described here.
</p>
<p>
<b>Your answers are recorded as you give them</b>, rather than only at the end: each one is sent for storage the
moment it is given. This means that if you stop partway through, or close the tab, the answers you have already
given are kept and may be used in the research. Because the study is anonymous, there is no way to find your
answers again afterwards, and so no way to take them back.
</p>
<p>
We ask for the day you were born only to work out your star sign for the feedback. It is removed, or reduced to
the star sign it gives, before any data are made public.
</p>
<p>
The feedback you are shown along the way is for interest only. It is generated from brief questionnaires scored
against reference values, and it is not a diagnosis, an assessment or advice. If you are worried about your
mood, your health or anything the questions bring up, please speak to your doctor or another qualified
professional.
</p>
<h3>Consent</h3>
<ul>
<li>
I understand that by pressing Start below I am agreeing to take part in the University of Sussex research
described here, and that I have read and understood this information sheet.
</li>
<li>
I understand that my participation is entirely voluntary, that I can choose not to participate in part or
all of the study, and that I can withdraw at any stage without having to give a reason and without being
penalised in any way (e.g., if I am a student, my decision whether or not to take part will not affect my
grades).
</li>
<li>
I understand that my answers are recorded as I give them, and that since the study is anonymous, it will be
impossible to withdraw my data once it has been given, whether or not I finish the study.
</li>
<li>
I understand that some of the questions ask about intimate matters (such as sexuality and bodily functions)
or sensitive topics related to mental health (such as hallucinations and thoughts about death), and that I
can stop at any point if I would rather not answer them.
</li>
<!-- A statement written `data-block` is shown only on a run that asks that block
(app.js). The sexuality level is asked by no battery, so a run holds it only when
a link brings it (`?start=sex`), and is told so before agreeing to anything. Not
approved wording: the level is not in the ethics application. -->
<li data-block="sex" hidden>
I understand that this study includes <b>explicit questions about my sex life</b>, such as what turns me on
and what I have done, and that I can answer "I'd rather not say" to any of them or stop at any point.
</li>
<li>
I understand that my personal data will be used for the purposes of this research study and will be handled
in accordance with Data Protection legislation. I understand that the University's Privacy Notice provides
further information on how the University uses personal data in its research.
</li>
<li>
I understand that my collected data will be stored in a de-identified way. De-identified data may be made
publicly available through secured scientific online data repositories.
</li>
<li>
By participating, I agree to follow the instructions and provide honest answers. If I do not wish to
participate, or don't have the time, I can simply close my browser.
</li>
</ul>
<p>
For further information about this research, or if you have any concerns, please contact Dr Dominique Makowski
(<i>D.Makowski@sussex.ac.uk</i>)
<!-- The Sussex form names the researcher running the study beside the supervisor: the
student submitting the application (September 2026). -->
and/or Asel Tohlukov (<i>at775@sussex.ac.uk</i>). This research has been approved
(2026-2817-3620) by the Faculty Research Ethics Committee: Science, Engineering and Technology (F-REC)
(<i>frecsemset@sussex.ac.uk</i>). The University of Sussex has insurance in place to cover its legal liabilities
in respect of this study.
</p>
<!-- The debrief, for a run with no interim to give it (`all`): the interim's own
(content/block_interim.js), in the present tense, without what the form above
already says. A change to one wants the other. -->
<div data-project="all" hidden>
<h3>About this study</h3>
<p>
This study is validating a new questionnaire of <b>interoception</b>: how you sense and make sense of the
signals from inside your body, such as your heartbeat, your breathing or your stomach, which have been linked to
emotion, self-awareness and well-being. The other questionnaires show how it relates to personality, mood,
health and views of AI, and the questions about your body are answered on circles or on a slider, drawn at
random, to find out whether the way a question is answered changes the answer. The results you are shown
describe your answers: none of them is a diagnosis.
</p>
<p>
If anything in the test brings up something difficult, the
<a href="https://www.samaritans.org/" target="_blank" rel="noopener">Samaritans</a> (116 123, free, day or
night) and <a href="https://www.mind.org.uk/" target="_blank" rel="noopener">Mind</a> (0300 123 3393) are there
to listen, and so are the University of Sussex's
<a href="https://student.sussex.ac.uk/wellbeing/" target="_blank" rel="noopener">health and wellbeing
services</a> for its students.
</p>
</div>
</div>
<p class="consent__hint" id="consent-hint">Scroll to the end of the form to continue.</p>
<button class="btn" id="start" disabled>Read the form to begin</button>
</div>
</section>
<!-- survey -->
<section class="screen" id="screen-survey">
<p class="instructions" id="instructions" hidden></p>
<h2 class="text" id="text"></h2>
<div class="scale" id="scale">
<span class="anchor anchor--left" id="anchor-left"></span>
<!-- What this is to a screen reader is set per item by
renderScale: a radiogroup for a choice, a group for a
multi, no role for a field or a curve. -->
<div class="options" id="options" aria-labelledby="text"></div>
<span class="anchor anchor--right" id="anchor-right"></span>
</div>
<!-- A briefing: a pause inside a level, in place of the
question and its scale. What the next stretch of the
descent is about, and nothing to answer. Filled in by
renderBriefing. -->
<div class="briefing" id="briefing" hidden>
<div class="briefing__body" id="briefing-body"></div>
<button class="btn" id="briefing-go">Continue</button>
</div>
<!-- Or, under the briefing that ends an interlude while a fork
is still to fill the place after it, the levels offered
in place of its button, as a level screen offers them.
Filled by renderBriefing. -->
<div class="level__room">
<div class="level__paths briefing__paths" id="briefing-paths" hidden></div>
</div>
<div class="survey__foot">
<button class="btn btn--ghost" id="back">← Previous</button>
<!-- How few answers are left before the level opens, once
there are few enough to count. Written by
renderCountdown. -->
<p class="survey__countdown" id="countdown" aria-live="polite" hidden></p>
</div>
</section>
<!-- level complete: the header, then the sections it opened, one
after another, and the way on at the bottom of them -->
<section class="screen" id="screen-level">
<div class="level">
<h1 class="level__title" id="level-title"></h1>
<p class="level__name" id="level-name"></p>
</div>
<div id="level-results"></div>
<div class="level__foot" id="level-foot">
<!-- Keep your results: adding an email to the anonymous
account the run is kept on, on the dashboard, where
the link asks for an account and where it is offered
(`drawKeep`, app.js). -->
<div class="keep" hidden>
<p class="keep__title">Keep your results</p>
<p class="keep__text">Add an email, and come back to them, and to the levels still ahead, from any device.</p>
<div class="keep__actions">
<a class="btn keep__go" href="../me/?account&keep">Keep my results</a>
<button class="btn btn--ghost keep__later" type="button">Not now</button>
</div>
</div>
<!-- a blurred taste of the next level, filled by renderTeaser -->
<div class="level__next" id="level-next" hidden></div>
<!-- or, where the run forks, a taste of each of the levels
offered with a way into any of them, filled by
renderFork; the one button below is put away -->
<div class="level__fork" id="level-fork" hidden>
<div class="level__fork-head">
<p class="level__next-word">What next?</p>
<p class="level__fork-note">Choose the next part of yourself you want to test.</p>
</div>
<div class="level__room">
<div class="level__paths" id="level-paths"></div>
</div>
</div>
<button class="btn" id="level-continue">Continue the test →</button>
</div>
</section>
<!-- done: nothing left to answer, so the whole web is the screen -->
<section class="screen" id="screen-done">
<div class="profile" id="profile-done">
<p class="level__eyebrow">Descent complete</p>
<h1 class="profile__title">Your General Profile</h1>
<div class="chart">
<svg class="profile__web" viewBox="0 0 440 290" role="img" aria-label="Spider chart of your dimensions"></svg>
</div>
<div class="profile__legend"></div>
<p class="chart__note profile__note"></p>
<section class="share">
<div class="share__actions">
<button class="btn share__download">Download your card</button>
<button class="btn btn--ghost share__copy">Copy share link</button>
</div>
<p class="share__note"></p>
</section>
<!-- the same offer, at the end of the run (`drawKeep`) -->
<div class="keep" hidden>
<p class="keep__title">Keep your results</p>
<p class="keep__text">Add an email, and come back to them, and to the levels still ahead, from any device.</p>
<div class="keep__actions">
<a class="btn keep__go" href="../me/?account&keep">Keep my results</a>
<button class="btn btn--ghost keep__later" type="button">Not now</button>
</div>
</div>
<div class="profile__foot">
<!-- Whether the answers got where they were going. Written by
`saved()` in app.js once DataPipe has answered. -->
<p class="save__note" id="save-note" role="status"></p>
<!-- Hidden unless the send fails. The run goes to
DataPipe as it is answered and again whole at the
end, so there is nothing for a participant to keep
— but if none of that got through, the answers are
still in the page and this is the way out. Only
`saved("failed")` uncovers it. -->
<button class="btn btn--ghost" id="download" hidden>Download responses (.json)</button>
</div>
</div>
</section>
<!-- somebody else's card, opened from a shared link -->
<section class="screen" id="screen-card">
<div class="visit">
<p class="level__eyebrow" id="visit-eyebrow">Shared with you</p>
<h1 class="visit__title" id="visit-title">A profile from the Abyss</h1>
<div class="card" id="visit-card"></div>
<p class="lede" id="visit-note"></p>
<button class="btn" id="visit-start">Take the test yourself</button>
</div>
</section>
</main>
<!-- The water that breaks across the middle of the screen when a level is
finished. The level is put together behind it as it crosses. -->
<div class="curtain" id="curtain" role="presentation" hidden>
<div class="curtain__splash" aria-hidden="true"></div>
<div class="curtain__words">
<h2 class="curtain__title" id="curtain-title"></h2>
<p class="curtain__depth" id="curtain-depth"></p>
</div>
</div>
<!-- Asked when a reload picks up a run kept in this browser: carry on
with it, or, for somebody else at the same screen, begin afresh.
`welcomeBack` in app.js. -->
<div class="welcome" id="welcome" hidden>
<div class="welcome__card" role="dialog" aria-modal="true" aria-labelledby="welcome-title">
<p class="welcome__step">Welcome back</p>
<h2 class="welcome__title" id="welcome-title">You are where you left off</h2>
<div class="welcome__ways">
<button class="btn" id="welcome-go">Continue where I left off</button>
<button class="btn btn--ghost" id="welcome-again">Not you? Take the test from the start</button>
</div>
</div>
</div>
<!-- The line the test is named after, shown once, on the way in. -->
<div class="gaze" id="gaze" role="presentation" hidden>
<div class="gaze__eye" aria-hidden="true"><span class="gaze__pupil"></span></div>
<blockquote class="gaze__quote">
<span class="gaze__line">And if you gaze long into an abyss,</span>
<span class="gaze__line">the abyss also gazes into you.</span>
</blockquote>
<!-- Only the crossing fills this: what the threshold meant. The
way in is a quotation and wants nothing explaining it. -->
<p class="gaze__said" id="gaze-said" hidden></p>
<p class="gaze__by">Friedrich Nietzsche</p>
<p class="gaze__skip">Click anywhere to continue</p>
</div>
<!-- Panels, over the screen rather than instead of it. The strip of the
page left showing beside a panel closes it, as does Escape. -->
<div class="overlay" id="overlay">
<div class="overlay__scrim" id="scrim"></div>
<!-- one level's results, opened from — and closed back into — its
mark on the rail -->
<section
class="panel panel--left panel--summoned"
id="panel-results"
role="dialog"
aria-modal="true"
aria-labelledby="results-title"
>
<header class="panel__bar">
<div class="panel__head">
<h1 class="panel__title" id="results-title"></h1>
<!-- Where in the water the level was finished, or how much
of it is still to answer. Written by openResults. -->
<p class="panel__sub" id="results-sub"></p>
</div>
<button class="panel__close" data-close aria-label="Close">
<svg viewBox="0 0 14 14" aria-hidden="true"><path d="M2.5 2.5l9 9M11.5 2.5l-9 9" /></svg>
</button>
</header>
<div class="panel__body">
<div id="results-body"></div>
</div>
</section>
<!-- profile -->
<section class="panel panel--right" id="panel-profile" role="dialog" aria-modal="true" aria-labelledby="profile-title">
<header class="panel__bar">
<h1 class="panel__title" id="profile-title">Your profile</h1>
<button class="panel__close" data-close aria-label="Close">
<svg viewBox="0 0 14 14" aria-hidden="true"><path d="M2.5 2.5l9 9M11.5 2.5l-9 9" /></svg>
</button>
</header>
<!-- The same profile the last screen shows, so both are drawn by
class rather than by id: whichever one is handed to
renderProfile is the one that gets the web. -->
<div class="panel__body">
<p class="lede">All the scores currently available</p>
<div class="profile" id="profile-panel">
<div class="chart">
<svg class="profile__web" viewBox="0 0 440 290" role="img" aria-label="Spider chart of your dimensions"></svg>
</div>
<div class="profile__legend"></div>
<p class="chart__note profile__note"></p>
<!-- The two ways of taking the web above with you. The card
itself is only drawn when one of them is pressed. -->
<section class="share">
<div class="share__actions">
<button class="btn share__download">Download your card</button>
<button class="btn btn--ghost share__copy">Copy share link</button>
</div>
<p class="share__note"></p>
</section>
</div>
</div>
</section>
<!-- about, opened from the name on the banner: the landing page's
three logos and a few lines, so a card in the middle rather
than a drawer -->
<section class="panel panel--about" id="panel-about" role="dialog" aria-modal="true" aria-labelledby="about-title">
<header class="panel__bar">
<h1 class="panel__title" id="about-title">About</h1>
<button class="panel__close" data-close aria-label="Close">
<svg viewBox="0 0 14 14" aria-hidden="true"><path d="M2.5 2.5l9 9M11.5 2.5l-9 9" /></svg>
</button>
</header>
<div class="panel__body">
<div class="about__logos">
<img src="assets/logo_sussex.svg" alt="University of Sussex" />
<img src="assets/logo_researchplus.png" alt="ResearchPlus" />
<img src="assets/logo_rebel.png" alt="Reality Bending Lab" />
</div>
<p class="about__text">The Abyss is a platform for questionnaires developed at the Reality Bending Lab.</p>
<p class="about__contact">
For inquiries, contact <a href="mailto:D.Makowski@sussex.ac.uk">D.Makowski@sussex.ac.uk</a>
</p>
</div>
</section>
</div>
<!-- The one file on the page that is not ours: DataPipe's client, which
the answers are sent through. It is kept in the repository rather
than fetched from a CDN, so that the code a participant runs is the
code that was reviewed. Nothing below reads it at load; `app.js`
asks for it by name when the test begins. -->
<script src="js/vendor/datapipe-client.js"></script>
<!-- The participant's account on the lab's hub (a copy of
RealityBending/me's client, edited there and not here), a pilot
asked for by `?account` alone. Before resume.js, which lets go of
the account's copy of the run whenever it lets go of its own. -->
<script src="js/account.js" data-app="abyss"></script>
<!-- A run left partway through and kept in this browser, and the seed
every draw of the run comes off: it has to be known before the
timeline draws anything, so it comes before content/. -->
<script src="js/resume.js"></script>
<!-- How a question is written, then the running order, then the blocks
of questions themselves — a file each — then everything that reads
a score back, then the engine that hands itself to it. A block with
no tag here does not exist; one the timeline does not name exists
but is never asked. -->
<script src="content/timeline.js"></script>
<script src="content/block_demographics1.js"></script>
<script src="content/block_demographics2.js"></script>
<script src="content/block_demographics3.js"></script>
<script src="content/block_fipi.js"></script>
<script src="content/block_singles.js"></script>
<script src="content/block_mint.js"></script>
<script src="content/block_mood.js"></script>
<script src="content/block_health.js"></script>
<script src="content/block_hexaco.js"></script>
<script src="content/block_regulation.js"></script>
<script src="content/block_hitop.js"></script>
<script src="content/block_bait.js"></script>
<script src="content/block_primals.js"></script>
<script src="content/block_archetypes.js"></script>
<script src="content/block_icar.js"></script>
<script src="content/block_opinions.js"></script>
<script src="content/block_sex.js"></script>
<script src="content/block_hyborian.js"></script>
<script src="content/block_dark.js"></script>
<script src="content/block_lies.js"></script>
<script src="content/block_deeds.js"></script>
<script src="content/block_wronged.js"></script>
<script src="content/block_emoreg.js"></script>
<script src="content/block_interim.js"></script>
<script src="content/block_closing.js"></script>
<script src="content/block_UNUSED.js"></script>
<script src="js/draw.js"></script>
<script src="js/snapshot.js"></script>
<script src="js/figures/soma.js"></script>
<script src="js/figures/theories.js"></script>
<script src="js/figures/archetype.js"></script>
<script src="js/figures/wheel.js"></script>
<script src="js/figures/sea.js"></script>
<script src="js/figures/climb.js"></script>
<script src="js/figures/reasoning.js"></script>
<script src="js/figures/heads.js"></script>
<script src="js/figures/stance.js"></script>
<script src="js/figures/kinks.js"></script>
<script src="js/figures/volcano.js"></script>
<script src="js/figures/hyborian.js"></script>
<script src="js/figures/balance.js"></script>
<script src="js/results.js"></script>
<script src="js/app.js"></script>
</body>
</html>