-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (124 loc) · 7.3 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
<!doctype html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="assets/waitchatter-icon16.png">
<meta charset="utf-8">
<title>WaitChatter</title>
<meta name="description" content="WaitChatter">
<meta name="author" content="Carrie Cai">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/paper.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
</button>
<a class="navbar-brand" href="#">WaitChatter </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<img class="icon" src="assets/waitchatter-icon48.png"></img>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#help">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron divider">
<h3>Learn a new language while you IM.</h3>
<p>WaitChatter is a Chrome extension for GChat that delights you with interactive vocabulary exercises while you're waiting for your conversation partner to respond.</p>
<p><a class="btn btn-primary btn-lg" href="#install">INSTALL NOW</a></p>
<video poster="assets/waitchatter-demo-preview.png" width="640" height="480" controls>
<source src="assets/waitchatter-demo.mp4" type="video/mp4">
</video>
</div>
<a name="install"></a>
<div class="jumbotron color-jumbotron">
<div>
<h2>Install</h2>
<div class="col-md-4">
<p>1. If you have Google Hangouts enabled, <b><a href="#helprevert">revert to Google Chat</a></b> in 3 simple steps. (You can go back to Hangouts at anytime.)</p>
<img class="installimg" src="assets/instructions-1a.png">
</div>
<div class="col-md-4">
<p>2. <b><a href="https://chrome.google.com/webstore/detail/waitchatter-deployment/imhhakfkpbennknchchgkpgpcnjcmddc" target="_blank"> Download the Chrome extension</a></b> and refresh Gmail. Your chatboxes should now display a learning panel. Try an exercise! <a id="morehelp" class="btn btn-sm btn-default" href="#help">more help</a></p>
<img class="installimg" src="assets/instructions-2.png">
</div>
<div class="col-md-4">
<p>3. <b>Click on the chat bubble icon</b> on the right end of the URL box to track your progress and set your language (to French or Spanish).</p>
<img class="installimg" src="assets/instructions-popup.png">
</div>
</div>
<br/>
</div>
<a name="about"></a>
<div class="jumbotron divider left-align">
<h2>About WaitChatter</h2><br/>
<h3>FAQ</h3>
<p><b>What is <span class="terminology">wait-learning</span>?</b></p>
<p>People often want to learn a language but can't find time. WaitChatter is based on the idea of <span class="terminology">wait-learning</span>. It makes use of time you spend waiting for your IM buddy to respond to teach you a foreign language. <br/><br/>
<p><b>What language does WaitChatter teach?</b></p>
<p>WaitChatter currently teaches basic vocabulary in Spanish and French, and assumes your native language is English, but we hope to support other languages in the future.</p>
<br/>
<p><b>What information does WaitChatter access?</b></p>
<p>For your privacy, this public version of WaitChatter does not pull any vocabulary words from your chat conversations, and does not log any content from your chats. It does track how many times you answer the learning exercises and what vocabulary words you have answered correctly so that it can select the best word to quiz you on next.</p><br/>
<p>Because your vocabulary is stored only in your browser, clearing "Hosted app data" in Chrome will also clear your vocabulary progress.</p>
<br>
<h3>Publications</h3>
<p>Read more about WaitChatter in our published paper: <br/><br/>
<a href="http://people.csail.mit.edu/ccai/publications/Cai_WaitLearningFull.pdf" target="_blank">Wait-Learning: Leveraging Wait Time for Second Language Acquisition</a><br/>
Carrie J. Cai, Philip J. Guo, James R. Glass, and Robert C. Miller.<br/>
ACM Conference on Human Factors in Computing Systems (CHI) 2015</p><br/>
<br>
<h3>Contact</h3>
<p>WaitChatter was built by <a href="http://people.csail.mit.edu/ccai/" target="_blank">Carrie Cai</a> and is part of ongoing research in the <a href="https://groups.csail.mit.edu/uid" target="_blank">User Interface Design group</a> at <a href="https://www.csail.mit.edu" target="_blank">MIT CSAIL</a>.</p>
<p>Please email <a href="mailto:[email protected]">[email protected]</a> with any questions or concerns. If you would like to be informed of future improvements to WaitChatter, <a href="https://docs.google.com/forms/d/1ZBUjyeCRcEg0nkjdl2cZerKunTdXvh_cXXuIxsVLDlc/viewform" target="_blank">sign up here</a>.</p>
</div>
<a name="help"></a>
<div class="jumbotron">
<h2>Help</h2><br/>
<p><b>WaitChatter isn't appearing under my chatbox.</b></p>
<a name="helprevert"></a>
<p>1) Are you currently using Google Hangout?
To use WaitChatter, revert to GChat:</p>
<img id="help-revert" src="assets/help-revert.png"></img><img id="help-revert" src="assets/help-revertextension.png"></img><br/>
<p>2) Do you have chat-related Google Labs items?
Using a Google Labs items that changes the appearance of your GChat could interfere with WaitChatter appearing correctly.</p>
<br/>
<p>3) Is your chatbox maximized ("popped out" of the screen)?
WaitChatter only works on chatboxes that haven't been maximized.</p><br/>
<br>
<br>
<p><b>WaitChatter's keyboard shortcut (⌘J or Alt-J) isn't working.</b></p>
<p>You might have an outdated version of WaitChatter or multiple WaitChatter extensions. First, go to chrome://extensions by typing it into your url box. In the bottom right corner of the page, click "Keyboard shortcuts." Focus into this box, then hit ⌘J (Mac) or Alt-J (Windows/Linux) on your keyboard.</p>
<img src="assets/help-shortcut.png"></img></p><br/>
<br>
<br>
<p><b>"Click to learn" isn't triggering a learning exercise.</b></p>
<p>To avoid distracting you, WaitChatter prevents exercises from triggering in multiple chatboxes, so you might already have another active exercise in another chatbox. If that's not the case, refreshing the page may fix the problem.</p><br/>
<a name="helpprogress"></a>
<br>
<br>
<p><b>How can I see my vocabulary progress or set the language to learn?</b></p>
<p>Click on the chat bubble icon in your Chrome browser on the right end of the URL box.
</p><br/>
<img src="assets/help-progress.png"></img></p><br/>
<a name="helpmoreshortcuts"></a>
<br>
<br>
<p><b>What keyboard shortcuts are available?</b></p>
</p><br/>
<img src="assets/help-moreshortcuts.png"></img>
</div>
<div class="jumbotron divider small-text">
<p>This site was built by <a href="http://anjren.com" target="_blank">Anji Ren</a> and <a href="http://people.csail.mit.edu/ccai/" target="_blank">Carrie Cai</a>.</p>
</div>
</body>