-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (111 loc) · 7.99 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<!-- Prevent incorrect caching of js, css, or html files, by explicitly storing no cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<link rel="stylesheet" href="css.css?version=420">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Chart.bundle.min.js"></script>
<script src="https://d3js.org/d3.v5.js"></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script type="text/javascript" src="main.js"></script>
<title>Hearing test</title>
</head>
<body>
<div id="navigationbar" class="navbar">
<div id='navbar-topcenter' class="centered title"> Temporal Resolution Hearing Test
</div>
<div id='navbar-topright' class="centered navbartextspace">
<h6 class="centered navbartext" style="float:left;">
by
<a href="https://www.haroldgroenenboom.nl/" target="_blank">Harold Groenenboom</a>
&
<a target="_blank">Nick Verbeek</a>
</h6>
<div class="vl" style="float:left;background-color:black;"> </div>
<h6 class="centered navbartext" style="float:left">
in collaboration with:
University of the Arts Utrecht
&
Golden Hearing LUMC.
</h6>
</div>
<div id='navbar-topleft' class="" style="left:1px; width:19vw">
<h6 class=" navbartext" style="float:left;">
v1.3
</h6>
</div>
</div>
<!------------------ NAVIGATION BAR ---------------------->
<div id="inhoud" style="height:calc(100% - 75px);">
<div id="startscreen" class="visible">
<div id="intro" style="height=100%">
<div class="maininhoud">
<p id="startscreen_dynamicText" style="color:Red;" onclick="switchPage()">Please wait till all sounds have been loaded</p>
<p>This experimental test will test your <i>temporal resolution</i>
Consecutive instrument notes will be played in a rapid succession. You have to answer how well you can distinguish these individual notes.
At the end of the test you will get an indication on how well you can distinguish sounds on different playback frequencies. Results of this test should be combined with results from accurate Temporal Resolution tests. With this combined information we hope to gain more insight on the impact of temporal hearing loss.<br><br>
Notes:
Since this test is experimental and is still under development results shouldn't be interpreted as being correct, for this more research is required. For a proven indication of temporal hearing loss we recommend using a <i>GAP detection test</i>. The outcomes of this test will be used to see if hearing tests in normal listening enviroments can add value to the already existing clinical tests with analytical sounds.<br><br></p>
</div>
</div>
</div>
<!--------------------- STARTSCREEN ---------------------->
<div id="calibration" class="invisible" >
<div class="simpleoffset"></div>
<h3 class="centered">Calibration</h1>
<p style="left:7%;width:86%;position:relative">You will hear a sound of someone rubbing their hands before their nose. In order calibrate the listening experience, please rub your hands before your nose and adjust the volume inside your headphones untill the volumes match.<br> <br> </p>
<div class="centered" style="position:relative;height:30vh;left:10%;width:80%;background-color:hsl(180, 68%, 94%);">
<div class="range-slider" style="top:5%;height:20%;width:90%;position:absolute;background-color:hsl(180, 68%, 90%);">
<h4 class="centered sliderlabel"> volume </h4>
<input class="range-slider__range centered" type="range" id="volume" min="0" max="2" value="1" list="gain-vals" step="0.01" data-action="volume">
</div>
<div class="centered" style="top:33%;height:66%;position:absolute">
<button id="calib_button" style="position:relative;" type="button" class="button" onmousedown="calibrationAudio.togglePlayback(this,3);">Play</button>
<button type="button" class="button" onclick="switchPage('calib')">Continue</button>
</div>
</div>
</div>
<!--------------- CALIBRATION ------------------->
<div id="likert" class="invisible likert centered">
<div>
<div class="simpleoffset"></div>
<h3 id="testTitle" class="centered">Hearing test</h3>
<p>How well can you distinguish the individual notes of the played instrument? </p>
<div id="likertbuttons" style="display:contents;">
<button id="likert_0_button" type="button" class="button buttonOff" onmousedown="likertButtonClicked(this, 0)">Not at all</button>
<button id="likert_1_button" type="button" class="button buttonOff" onmousedown="likertButtonClicked(this, 1)">Poor</button>
<button id="likert_2_button" type="button" class="button buttonOff" onmousedown="likertButtonClicked(this, 2)">Neutral</button>
<button id="likert_3_button" type="button" class="button buttonOff" onmousedown="likertButtonClicked(this, 3)">Decent</button>
<button id="likert_4_button" type="button" class="button buttonOff" onmousedown="likertButtonClicked(this, 4)">Very good</button>
</div>
<div style="display:block;margin-top:40px;">
<!-- <button id="next_file_button" type="button" onclick="nextTest();" disabled="disabled"">Next sound</button> -->
<button id="play_sound_button" type="button" class="button" onmousedown="instrument.togglePlayback(buffers, 3, true);ambience.togglePlayback(buffers, 3, true)">Stop sound</button>
<audio id="likert_audio_control" class="invisible">
Your browser does not support the audio element.
</audio>
<!-- <button id="show_results" type="button" onclick="switchPage('show results')">Show results</button> -->
</div>
</div>
</div>
<!---------------------- TEST ---------------------->
<div id="results" class="invisible results">
<div class="simpleoffset"></div>
<h3 id="resultsTitle" class="centered">Results</h3>
<p class="centered">Results are shown on this graph. As of this moment we have not yet analyzed any incoming results from users, so nothing substantial can yet be concluded about the quality of this test.</p>
<div>
<text id="how_to_change_text_in_html" class="topleftinbox invisible"></text>
<div id="results_table" class="toprightinbox invisible">
</div>
</div>
<canvas id="myChart" width="200" height="100" class="absolute">
<p>Hello Fallback World</p>
</canvas>
</div>
<!--------------------- RESULTS -------------------->
</div>
</body>
</html>