-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
107 lines (88 loc) · 3.47 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PAGE TITLE HERE</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/cbc-puzzle.css" />
<script src="js/cbc-puzzle.js"></script>
<script type="application/json" id="source-data-0">
{"audio":"audio/1.oga", "data":[{"text":"a monk","start":0,"end":2.0798117906708677},{"text":"asked bosan","start":2.020145,"end":4.158367159158264},{"text":"what is buddha","start":4.098217621829132,"end":7.9083767608165285},{"text":"masagin","start":10.983062,"end":15.03684761164566},{"text":"tosan says","start":7.9083767608165285,"end":10.974676349158264}]}
</script>
<script>
document.addEventListener( "DOMContentLoaded", function( event ) {
var startDate = new Date( Date.parse( "October 24, 2011" ) ).getDate();
var day = window.location.href.match( /day=([0-9]+)/ );
if ( day ) {
day = day[ 1 ];
}
else {
day = new Date().getDate() - startDate;
if ( day < 0 ) {
day = 0;
}
} //if
document.getElementById( "day" ).innerHTML = "Day: " + day;
var chosenJSON = document.getElementById( "source-data-" + day ).innerHTML,
startTime = Date.now(),
timerDiv = document.getElementById( "timer" ),
timerInterval = -1,
playButton = document.getElementById( 'play' ),
statusMessage = document.getElementById( 'status-message' ),
tweetButton = document.getElementById( 'tweet' ),
submitButton = document.getElementById( 'submit' );
var order = window.location.href.match( /order=([0-9\-,]+)/ );
if ( order && order.length > 0 ) {
order = order[ 1 ];
}
var cbc = new CBCPuzzle({
audio: "audio",
source: "wordMix",
target: "wordTarget",
json: chosenJSON,
ready: function() {
document.getElementById( "loading-overlay" ).style.display = "none";
},
order: order
});
tweetButton.addEventListener( 'click', function( e ) {
statusMessage.innerHTML = "day=" + day + "&order=" + cbc.getCurrentOrderURL();
}, false );
playButton.addEventListener( 'click', function( e ) {
cbc.play();
}, false );
submitButton.addEventListener( 'click', function( e ) {
if ( cbc.submit() ) {
statusMessage.innerHTML = "You win! ( " + timerDiv.innerHTML + ")";
clearInterval( timerInterval );
}
else {
statusMessage.innerHTML = "Try again :(";
}
}, false );
timerInterval = setInterval( function() {
var elapsedTime = ( Date.now() - startTime ) / 1000,
minutes = Math.floor( elapsedTime / 60 ),
seconds = Math.floor( elapsedTime - minutes * 60 ),
minutesString = minutes > 9 ? minutes : "0" + minutes,
secondsString = seconds > 9 ? seconds : "0" + seconds,
timeString = minutesString + ":" + secondsString;
timerDiv.innerHTML = timeString;
}, 1000 );
}, false );
</script>
</head>
<body>
<h3 id="day"></h3>
<div id="puzzleWrap">
<div id="wordMix"></div>
<div id="wordTarget"></div>
<div id="timer"> </div>
<div id="play"><a href="#">Listen to Audio</a></div>
<div id="tweet"><a href="#">URL</a></div>
<div><a href="#" id="submit" class="submit">Submit</a></div>
<div id="loading-overlay"><span>Loading...</span></div>
</div>
<h1 id="status-message"></h1>
</body>
</html>