-
Notifications
You must be signed in to change notification settings - Fork 1
/
tutorialfull.html
47 lines (46 loc) · 2.75 KB
/
tutorialfull.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
<!DOCTYPE html>
<html>
<head>
<title>Tutorial for Accessible PencilCode Prototype</title>
<!-- Twitter Bootstrap CSS [3.3.7] (Bootstrap CDN) +SRI -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="client.css">
</head>
<body lang="en">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h1>Accessible PencilCode <small>Prototype</small></h1>
</div><!-- .col-xs-6 -->
<div class="col-xs-6">
<p class="lead">Tutorial: Full version</p>
</div><!-- .col-xs-6 -->
</div>
<div class="row">
<div class="col-xs-12">
<h2>Binaural spatialization check</h2>
<p>Please ensure the test subject has stereo headphones on before conducting this check.</p>
<button class="btn btn-default" id="nestopen">Nesting opening</button>
<button class="btn btn-default" id="nestclose">Nesting closing</button>
<h2>Block selection - Exercise 1</h2>
<p>Now you will hear a few earcons, or abstract sounds. Please match the earcon you feel best goes with one of the actions: identify category, select category, identify block, or select block. You can replay the earcons as many times as you want, but try and complete the task as quickly and accurately as possible.</p>
<p>Please turn off your screen reader at this point. After you have tabbed through four buttons, turn your screen reader back on.</p>
<button class="btn btn-default" id="a">Earcon A - Identify category</button>
<button class="btn btn-default" id="b">Earcon B - Identify block</button>
<button class="btn btn-default" id="c">Earcon C - Select category</button>
<button class="btn btn-default" id="d">Earcon D - Select block</button>
<p>This concludes the earcon testing portion.</p>
<h2>Proceed to the simulation webpage</h2>
<p><a href="https://jeffw16.github.io/accessible-pencilcode-foundation/index.html">Simulation webpage</a>.</p>
</div>
</div><!-- .row -->
</div><!-- .container -->
<!-- jQuery [3.2.1] (Google Hosted Libraries) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Twitter Bootstrap [3.3.7] (Bootstrap CDN) +SRI -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- howler.js [2.0.4] (CDNJS) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.4/howler.min.js"></script>
<script src="client-tutorial.js"></script>
</body>
</html>