-
Notifications
You must be signed in to change notification settings - Fork 1
/
tutorial.html
54 lines (52 loc) · 2.31 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
<div class="row">
<div class="col-md-12">
<div id="modal" class="modal hide fade">
<div class="modal-header">
<h3>Tagging sounds tutorial</h3>
</div>
<div id="0" class="modal-body" style="display:none">
<p><strong>Hi!</strong> This is a <strong>demo project</strong> that shows how you can do sound pattern recognition on audio files the PyBossa framework in Crowdcrafting.org.
</p>
</div>
<div id="1" class="modal-body" style="display:none">
<p>The project is really simple. It loads a sound from <a href="http://www.freesound.org">Freesound</a> and asks you this question: <strong>Tag this sound clip</strong></p>
<p>Each sound clip has two handles on top the spectrum. Drag them to select the area of the sound where the idenfied sound is happening (i.e. a dog barking):
</p>
<img src="http://i.imgur.com/X7ZEIJf.png" class="img-responsive"/>
<p>When you select an area, an input box will appear and you will be able to write the type of sound that you have identified:</p>
<img src="http://i.imgur.com/uabrQZ0.png" class="img-responsive"/>
<p>Then, submit the tag and load another sound clip!</p>
</div>
<div class="modal-footer">
<a id="prevBtn" href="#" onclick="showStep('prev')" class="btn">Previous</a>
<a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Next</a>
<a id="startContrib" href="../taggingsounds/newtask" class="btn btn-primary" style="display:none"><i class="icon-thumbs-up"></i> Try the demo!</a>
</div>
</div>
</div>
</div>
<script>
var step = -1;
function showStep(action) {
$("#" + step).hide();
if (action == 'next') {
step = step + 1;
}
if (action == 'prev') {
step = step - 1;
}
if (step == 0) {
$("#prevBtn").hide();
}
else {
$("#prevBtn").show();
}
if (step == 1 ) {
$("#nextBtn").hide();
$("#startContrib").show();
}
$("#" + step).show();
}
showStep('next');
$("#modal").modal('show');
</script>