-
Notifications
You must be signed in to change notification settings - Fork 1
/
tutorial.html
56 lines (56 loc) · 4.23 KB
/
tutorial.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
<!DOCTYPE html>
<html>
<head>
<title>Tutorial for Accessible PencilCode Foundation</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>Foundation</small></h1>
</div><!-- .col-xs-6 -->
<div class="col-xs-6">
<p class="lead">Tutorial</p>
</div><!-- .col-xs-6 -->
</div>
<div class="row">
<div class="col-xs-12">
<p>Welcome to the Accessible Pencil Code simulation. This tutorial will walk you through this simulation's auditory cues, as well as the procedure for tasks you will be asked to complete.</p>
<p>To navigate through this tutorial and the simulation while your screen reader is off, use the tab key. To select blocks while your screen reader is off, press the enter key.</p>
<p>This simulation will use three different forms of auditory cues. You will hear them being used in different orders, but all together at a time. The first is speech from your screen reader. This simulation will use regular screen reader speech to indicate Pencil Code functions.</p>
<p>The second form of auditory cue is earcons. These are synthesized musical sounds. We will teach you how to use this simulation's earcons shortly. To indicate the category or block you are focused on, press the question mark key. This should be the key immediately to the left of the right-side shift key.</p>
<p>The third and final form is spearcons. These are sped-up speech. They should be as self-explanatory as speech. Let us know later if you have issues understanding any of the three audible cues.</p>
<p>When you are using spearcons, we recommend turning off your screen reader. At this time, spearcon sounds will conflict with screen reader directions.</p>
<!-- <p>We will now conduct earcon training. There will be buttons for you to click. Listen to what the earcons stand for, then press the buttons to hear the actual earcons.</p> -->
<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" onclick="javascript:play('identifycategory')">Earcon A</button>
<button class="btn btn-default" onclick="javascript:play('selectcategory')">Earcon B</button>
<button class="btn btn-default" onclick="javascript:play('identifyblock')">Earcon C</button>
<button class="btn btn-default" onclick="javascript:play('selectblock')">Earcon D</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>
<script>
// show "Move" blocks on page load (jQuery.ready();)
$(update_block_list( 'category-1' ));
$(update_program_sequence( 'example' ));
</script>
</body>
</html>