-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
175 lines (159 loc) · 12.2 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html language="en">
<head>
<meta charset="utf-8"/>
<meta name="description" content="the intelligent vocabulary builder"/>
<meta name="keywords" content="vocabulary,english,sat2,sat1,gre,toefl,vocab,satI,satII"/>
<meta name="google-site-verification" content="EaOAupp3KuP8PYT0JWc9uGzk3Olm8im-9c_ihYKjruE" />
<meta property="fb:admins" content="7933606"/>
<meta name="application-name" content="vocowl"/>
<meta name="author" content="Pathikrit Bhowmick"/>
<title>vocowl</title>
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cyborg/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/intro.js/0.4.0/introjs.min.css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42001818-1', 'vocowl.com');
ga('send', 'pageview');
</script>
</head>
<body ng-controller="VocowlCtrl">
<div class="config" ng-cloak>
<article>
<header>
<h1>
vocowl
<a href="" ng-click="user.settings.mute = !user.settings.mute; pronounce()" ng-init="user.settings.mute = false"
rel="tooltip" data-toggle="tooltip" title="Toggle Sound" data-placement="right">
<i ng-class="user.settings.mute ? 'icon-volume-off' : 'icon-volume-up'"></i>
</a>
</h1>
</header>
<p>Choose word list:</p>
<div class="btn-group" ng-model="user.settings.currentDic" ng-init="user.settings.currentDic = 'sample'" bs-buttons-radio data-intro='Choose your word list here. We have hand-picked words in vocowl by parsing questions that have shown up in GRE, TOEFL, SAT I and SAT II examinations in the past 10 years.' data-step='7'>
<button type="button" class="btn" value="Top-500 TOEFL" ng-disabled="!paid()">Top-500 TOEFL</button>
<button type="button" class="btn" value="TOEFL" ng-disabled="!paid()">TOEFL</button><br/>
<button type="button" class="btn" value="SAT I" ng-disabled="!paid()">SAT I</button>
<button type="button" class="btn" value="SAT II" ng-disabled="!paid()">SAT II</button><br/>
<button type="button" class="btn" value="Top-1000 GRE" ng-disabled="!paid()">Top-1000 GRE</button>
<button type="button" class="btn" value="GRE" ng-disabled="!paid()">GRE</button><br/>
<button type="button" class="btn" value="sample">Sample</button>
<button type="button" class="btn" value="full" ng-disabled="!paid()">All</button>
</div>
<p ng-hide="paid()">a sample 50-word list is available for free. for the full list of words, please login and buy vocowl+ for $10</p>
<footer>
<h5 ng-show="authenticated()">{{user.email}}</h5>
<h1>
<a class="btn btn-danger" ng-hide="authenticated()" href="" ng-click="login()">Login</a>
<a class="btn" ng-show="authenticated()" href="" ng-click="logout()">Logout</a>
<a class="btn btn-success" ng-show="!paid()" href="" ng-click="charge()">Buy Vocowl+</a>
<br/><br/>
<a href="" rel="tooltip" data-toggle="tooltip" title="Help" ng-click="walkthrough()" data-intro='Congratulations! You are now ready to use vocowl! You can retake this tour anytime by clicking here. Please do not forget to leave feedbacks and share vocowl with your friends!' data-step='8' data-position='top'><i class="icon-question"></i></a>
<a href="mailto:[email protected]?sqs_title=Contact Us" rel="tooltip" data-toggle="tooltip" title="Contact Us"><i class="icon-envelope"></i></a>
<a href="" ng-click="reset()" ng-enabled="user.words && user.words.length > 0" rel="tooltip" data-toggle="tooltip" title="Reset Progress"><i class="icon-trash"></i></a>
<a id="love" rel="tooltip" data-toggle="popover, tooltip" href="" data-placement="top" title="Share Vocowl"><i class="icon-heart"></i></a>
</h1>
</footer>
</article>
</div>
<div class="meny-arrow"></div>
<div class="main">
<div id="finished" ng-show="state === 'finish'" ng-cloak>
<p><b>Congratulations, you have finished the {{user.settings.currentDic}} word list!</b></p>
<img ng-src="{{state === 'finish' ? owlImage : ''}}" height="271" width="271">
<p>To learn more words, <span ng-hide="user.settings.currentDic === 'full'">you can <a href="" ng-click="showSidebar()">choose</a> another word lists
or </span><a href="" ng-click="reset()">reset</a> to start over.</p>
<div id="share">
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_linkedin_counter"></a>
</div>
</div>
</div>
<div id="introModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>welcome to vocowl</h3>
</div>
<div class="modal-body">
<p>
we have curated a list of the top-5000 most frequent and challenging words that have appeared in the <em>GRE</em>, <em>SAT</em> and <em>TOEFL</em> exams in the past 10 years
and designed a smart vocabulary building system that intelligently generates questions based on your recent responses
</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" ng-click="walkthrough()">show me how to use vocowl</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">okay!</button>
</div>
</div>
<a id="welcomeLaunch" href="#introModal" class="hover" href="" role="button" data-toggle="modal"><i class="icon-question icon-4x"></i></a>
<div id="flashcard" ng-init="state = 'loading'" ng-cloak ng-show="state === 'firstShow' || state === 'fullShow' || state === 'answer'">
<span id="word" ng-click="pronounce()" ng-class="user.settings.mute ? '' : 'hover'" data-intro='This is the word you are learning. You can click on it to repeat the pronunciation.' data-step='1'>{{challenge.word}}</span>
<div style="display: none">
<button id="fullShowBtn" ng-click="state = 'fullShow'"></button>
<audio id="pronouncer" ng-src="{{challenge.word ? audioUrl() : ''}}"></audio>
<audio id="correctSound" src="correct.mp3"></audio>
<audio id="incorrectSound" src="incorrect.mp3"></audio>
</div>
<ol id="choices" data-intro="Your choices show up here. The 2nd and 3rd choices show up after a delay to give you time to think. You can either click 'I don't know' right away or hit any key to immediately show all choices." data-step='2'>
<li><span id="c1" ng-click="choose(1)" ng-class="choiceClass(1)" ng-show="showChoices(1)" data-intro='Click here (or press 1) if you do not know the word.' data-step='3'>1) {{challenge.c1}}</span></li>
<li><span id="c2" ng-click="choose(2)" ng-class="choiceClass(2)" ng-show="showChoices(2)" data-intro='Click here (or press 2) if you think this is the definition of the word. Based on your recent responses we intelligently prepare the next flashcard.' data-step='4'>2) {{challenge.c2}}</span></li>
<li><span id="c3" ng-click="choose(3)" ng-class="choiceClass(3)" ng-show="showChoices(3)" data-intro='Click here (or press 3) if you think this is the definition of the word. You may have to get a word right multiple times before we are sure you know it and we stop showing it again.' data-step='5'>3) {{challenge.c3}}</span></li>
</ol>
<div id="tally" ng-show="state === 'firstShow' || state === 'answer'">
<span id="check" ng-show="state === 'answer' && correctChoice()">✓</span>
<span id="cross" ng-show="state === 'answer' && !correctChoice()">✗</span>
<p>
<span ng-click="state = 'fullShow'" class="hover" ng-show="state === 'firstShow'">[showing choices in <span id="countdown"></span> or press any key]</span>
<span ng-click="next()" class="hover" ng-show="state === 'answer'" id="next">[press any key for next word]</span>
</p>
</div>
</div>
<div id="progressbar" ng-show="state !== 'loading'" data-intro='Track your progress here.' data-step='6' data-position='top'>
<span id="total">{{progress('total')}}% complete</span>
<div class="progress" ng-cloak>
<div class="bar" ng-style="{'width': progress('progress') + '%'}" rel="tooltip" data-toggle="tooltip" bs-tooltip="progress('progress') + '% in progress :-\\'"></div>
<div class="bar bar-success" ng-style="{'width': progress('correct') + '%'}" rel="tooltip" data-toggle="tooltip" bs-tooltip="progress('correct') + '% learned :-)'"></div>
<div class="bar bar-warning" ng-style="{'width': progress('dunno') + '%'}" rel="tooltip" data-toggle="tooltip" bs-tooltip="progress('dunno') + '% learning :-|'"></div>
<div class="bar bar-danger" ng-style="{'width': progress('incorrect') + '%'}" rel="tooltip" data-toggle="tooltip" bs-tooltip="progress('incorrect') + '% incorrect :-('"></div>
</div>
</div>
<div class="loading" ng-show="state === 'loading'"><i class="icon-spinner icon-spin icon-4x"></i></div>
</div>
<!---------------------------------------------------------------------------------------------------------------->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
<script src="http://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://cdn.firebase.com/v0/firebase-auth-client.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angularFire/0.1.0/angularfire.min.js"></script>
<script src="http://cdn.jsdelivr.net/meny/1.2/meny.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/1.6.1/jquery.countdown.min.js"></script>
<script src="app.js" defer></script>
<script src="https://login.persona.org/include.js"></script>
<script src="http://api.webshell.io/sdk/js?key=177e5f601d1826f250ebae3c31f388ec"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/intro.js/0.4.0/intro.min.js"></script>
<script defer>
// TODO: Make sharing work (http://support.addthis.com/customer/portal/articles/381263-addthis-client-api)
setTimeout(function() {
$.getScript('https://checkout.stripe.com/v2/checkout.js');
$.getScript('https://squaresend.com/squaresend.js');
//TODO: $.getScript('http://api.webshell.io/sdk/js?key=177e5f601d1826f250ebae3c31f388ec');
$.getScript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51b93bef4bd3bd5b&domready=1', function() {
var addthis_config = {data_ga_tracker: 'UA-42001818-1' };
var addthis_share = {url: 'vocowl.com', title: 'Vocowl', description: 'Vocowl is awesome!'};
addthis.init();
$('.addthis_toolbox').append('<iframe src="http://ghbtns.com/github-btn.html?user=pathikrit&repo=vocowl&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="152px" height="30px"></iframe>');
});
}, 8025); // lazy load share buttons after 8 seconds?
</script>
</body>
</html>