-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
400 lines (318 loc) · 19.4 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>LectureScape | Data-Driven Lecture Video Interface</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css">
<style>
body {
background-color: #4f5352;
color: white;
font-family: "Lato";
}
.jumbotron {
background-color: #222;
}
h1,h2,h3,h4 {
color: #1de5c7;
}
h1 {
margin-top: 50px;
}
img {
margin-top: 10px;
}
/* http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 2em;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe.demo{
/*zoom: 0.15;*/
-moz-transform:scale(0.85);
-moz-transform-origin: 0 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0;
}
a {
color: #1de5c7;
}
a:hover {
color: #1de5c7;
text-underline-style: none;
}
/* ==========================================================================
Publications
========================================================================== */
.pub-section{
margin-left: 0;
}
.publication .author{
font-weight: bold;
}
.publication .title{
font-weight: bold;
font-size: 15px;
}
.publication .venue{
font-style: italic;
margin-right: 5px;
}
.publication .toappear{
font-style: italic;
margin-right: 5px;
}
.publication .material{
margin-left: 3px;
margin-right: 3px;
}
.publication{
margin-left: 0;
}
.publication li {
line-height:18px;
margin-bottom: 14px;
/*margin-left:-10px;*/
font-size:12px;
list-style-type:none;
}
.award{
background-color: crimson;
color: #fff;
padding-left: 0.5em;
padding-right: 0.5em;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar-lecturescape">
<!-- Static navbar -->
<div class="navbar navbar-default navbar-fixed-top navbar-lecturescape" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LectureScape</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Overview</a></li>
<!-- <li><a href="#lecturescape">Interface Overview</a></li> -->
<li><a href="#feature-timeline">2D Timeline</a></li>
<li><a href="#feature-search">Enhanced Search</a></li>
<li><a href="#feature-summary">Visual Summary</a></li>
<li><a href="#people">People</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>LectureScape</h1>
<h4>Data-Driven Interaction Techniques for Improving Navigation of Educational Videos</h4>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 teaser">
Millions of learners today are watching videos online, using platforms such as Khan Academy, Coursera, edX, and YouTube.
As thousands of learners interact with the same video content, their click behaviors lead to collective interaction patterns.
These patterns might indicate points of confusion, interest, and importance.
Our insight is to leverage this large-scale interaction data to improve the navigation of educational videos.
LectureScape is a video player powered by a set of data-driven video interaction techniques, enhancing the video timeline, text search, and visual summarization.
<br/><br/><br/>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/1kONuVn4Nzk?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="row subsection">
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="lecturescape">LectureScape Interface</h1>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
LectureScape introduces a set of techniques that augment existing video interface widgets, including: a 2D video timeline with an embedded visualiza- tion of collective navigation traces; dynamic and non-linear timeline scrubbing; data-enhanced transcript search and key- word summary; automatic display of relevant still frames next to the video; and a visual summary representing points with high learner activity.
</div>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-12"> </div>
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12">Annotated Screenshot</h3>
<img class="col-lg-8 col-md-8 col-sm-10 col-xs-12 img-responsive" src="img/overall-web.png">
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-12"> </div>
<!-- <h3 class="col-md-12 col-sm-12 col-xs-12">Interactive Demo</h3>
<div class="col-md-12 col-sm-12 col-xs-12">
<a href="http://juhokim.com/toolscape/tochi-supplement/files/watch_1_52.html" target="_blank">Demo: Video Timeline</a>
<br/>
<a href="http://juhokim.com/toolscape/tochi-supplement/files/list.html?iid=1" target="_blank">Demo: Storyboard Summarization</a>
</div>
-->
<!-- <h3 class="col-md-12">Demo: Video Timeline</h3>
<div class="col-md-12">
<iframe class="demo" width="100%" frameborder="0" height="600px" src="http://juhokim.com/tochi-supplement/watch_1_52.html"></iframe>
</div>
<h3 class="col-md-12">Demo: Storyboard Summarization</h3>
<div class="col-md-12">
<iframe class="demo" width="100%" frameborder="0" height="600px" src="http://juhokim.com/tochi-supplement/list.html?iid=1"></iframe>
</div> -->
</div>
<div class="row subsection">
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="feature-timeline">2D, Rollercoaster Timeline</h1>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
LectureScape includes the roller coaster timeline, to help learners identify and navigate to important parts of the video.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div>
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Rollercoaster Timeline</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
Unlike a traditional linear timeline, the rollercoaster timeline is 2D with an embedded visualization of second-by-second navigation frequency of all learners and resulting interaction peaks.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/rollercoaster.png">
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Phantom Cursor</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
It also modifies the timeline dragging behavior by creating a sense of friction while dragging the playhead around peaks.
As a result, frames near the peaks are exposed longer, and are easier to precisely navigate to.
We achieve this effect by temporarily hiding the real cursor, and
replacing it with a phantom cursor that moves slower than the real cursor within peak ranges.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/phantomcursor.png">
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Personal Watching Traces</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
In addition to collective watching traces, LectureScape also keeps track of personal watching traces
and visualizes in real-time the segments of the video that the current learner has watched.
Clicking on a generated segment replays that segment.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/trace.png">
</div>
<div class="row subsection">
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="feature-search">Enhanced in-video search</h1>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
LectureScape uses interaction data to better support searching for relevant information inside of a video.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div>
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Popularity-based Ranking</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
When the learner types in a search query, the search timeline appears below the video. It visualizes the positions of search results, as well as the relative importance of each. Our search algorithm rewards results in sections of the video where more learners watched.
Hovering on a search result displays the transcript sentence that contains the search term.
Clicking on the result plays the video starting at the beginning of the sentence, to give the learner more context.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/search-overall.png">
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Word Cloud</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
The word cloud at the top of the video displays automatically-extracted topics for the current section.
These topics provide a keyword summary and helps learners recognize and remember the main topics discussed.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/wordcloud.png">
</div>
<div class="row subsection">
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="feature-summary">Visual Highlights</h1>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
LectureScape presents a strip of visual highlights below the video to enable a quick overview of important points.
These are the frames frequently watched by other learners.
Clicking on a frame plays that point in the video.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div>
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Personal Bookmarks</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
The learner can also bookmark their own frame of interest and add notes,
which is then added to the highlights stream below the video.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/bookmark.png">
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><span class="glyphicon glyphicon-chevron-right"> </span>Pinning Relevant Frames</h3>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-12">
In educational videos, instructors often refer to concepts and formulas introduced earlier in the video,
but the referred slides are no longer be available on screen.
LectureScape automatically pins a relevant frame next to the video for quick reference.
Our pinning algorithm picks a frame that is relevant and includes content watched by many others.
Learners can also manually pin any frame of their interest.
</div>
<img class="col-lg-6 col-md-6 col-sm-8 col-xs-10 img-responsive" src="img/pin.png">
</div>
<div class="row subsection">
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="people">People</h1>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul>
<li class="people"><a href="http://juhokim.com/" target="_blank">Juho Kim</a> (MIT CSAIL)</li>
<li class="people"><a href="http://pgbovine.net/" target="_blank">Philip J. Guo</a> (University of Rochester)</li>
<li class="people"><a href="http://people.csail.mit.edu/ccai/website/" target="_blank">Carrie J. Cai</a> (MIT CSAIL)</li>
<li class="people"><a href="http://groups.csail.mit.edu/sls/people/daniel.shtml" target="_blank">Shang-Wen (Daniel) Li</a> (MIT CSAIL)</li>
<li class="people"><a href="http://www.eecs.harvard.edu/~kgajos/" target="_blank">Krzysztof Z. Gajos</a> (Harvard EECS)</li>
<li class="people"><a href="http://people.csail.mit.edu/rcm/" target="_blank">Robert C. Miller</a> (MIT CSAIL)</li>
</ul>
</div>
</div>
<div class="row subsection">
<h1 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="resources">Resources</h1>
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="publications"><span class="glyphicon glyphicon-chevron-right"> </span>Publications</h3>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="publication">
<li><div class="title"><a href="http://juhokim.com/files/UIST2014-LectureScape.pdf">Data-Driven Interaction Techniques for Improving Navigation of Educational Videos</a></div><div class="authors">Juho Kim, Philip J. Guo, Carrie J. Cai, Shang-Wen (Daniel) Li, Krzysztof Z. Gajos, Robert C. Miller</div><span class="venue">UIST 2014.</span></li>
<li id="P13"><a name="P13"></a><div class="title"><a href="http://juhokim.com/files/CHI2014-Workshop-Peaks.pdf">Leveraging Video Interaction Data and Content Analysis to Improve Video Learning</a></div><div class="authors"><span class="author">Juho Kim</span>, Shang-Wen (Daniel) Li, Carrie J. Cai, Krzysztof Z. Gajos, Robert C. Miller</div><span class="venue">CHI 2014 Workshop on Learning Innovation at Scale.</span><span class="material"><a href="http://www.slideshare.net/mcpanic/chi2014-workshop">(slides)</a></span></li>
<li id="C7"><a name="C7"></a><div class="title"><a href="http://juhokim.com/files/LAS2014-Peaks.pdf">Understanding In-Video Dropouts and Interaction Peaks in Online Lecture Videos</a></div><div class="authors"><span class="author">Juho Kim</span>, Philip J. Guo, Daniel T. Seaton, Piotr Mitros, Krzysztof Z. Gajos, Robert C. Miller</div><span class="venue">Learning at Scale 2014.</span><span class="material"><a href="http://www.slideshare.net/mcpanic/las2014-talk/">(slides)</a></span><span class="material"><a href="http://dl.acm.org/citation.cfm?id=2566237">(acm dl)</a></span></li>
<li id="C6"><a name="C6"></a><div class="title"><a href="http://juhokim.com/files/LAS2014-Engagement.pdf">How Video Production Affects Student Engagement: An Empirical Study of MOOC Videos</a></div><div class="authors">Philip J. Guo, <span class="author">Juho Kim</span>, Rob Rubin</div><span class="venue">Learning at Scale 2014.</span><span class="material"><a href="http://dl.acm.org/citation.cfm?id=2566239">(acm dl)</a></span></li>
<li id="P12"><a name="P12"></a><div class="title"><a href="http://juhokim.com/files/Quanta2014-MOOCScape-Poster.pdf">Interaction Peaks and Data-Driven Interfaces for Online Lecture Videos</a></div><div class="authors"><span class="author">Juho Kim</span></div><span class="venue">Quanta 2014 Workshop Poster.</span></li>
</ul>
</div>
</div>
<div class="row subsection">
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="media"><span class="glyphicon glyphicon-chevron-right"> </span>Media Coverage</h3>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul>
<li><a href="http://www.forbes.com/sites/peterhigh/2014/08/11/mit-team-turns-6-9-million-clicks-into-insights-to-improve-online-education/" target="_blank">MIT Team Turns 6.9 Million Clicks Into Insights To Improve Online Education</a> (2014.08.11 | Forbes)</li>
<li><a href="http://www.ecampusnews.com/top-news/mooc-learning-767/" target="_blank">Learning from MOOC mistakes, one click at a time</a> (2014.08.05 | eCampus News)</li>
<li><a href="http://bostinno.streetwise.co/2014/07/31/how-do-online-learners-watch-videos-lecturescape-mits-youtube-for-moocs-516442/" target="_blank">MIT-Spun 'YouTube for MOOCs' is Solving a Major Problem Plaguing Online Education</a> (2014.07.31 | Bostinno)</li>
<li><a href="http://newsoffice.mit.edu/2014/what-69-million-clicks-tell-us-about-how-fix-online-education" target="_blank">What 6.9 million clicks tell us about how to fix online education</a> (2014.07.28 | MIT News Office)</li>
</ul>
</div>
</div>
<div class="row subsection">
<h3 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="resource"><span class="glyphicon glyphicon-chevron-right"> </span>Where to get it?</h3>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>LectureScape will be released as a free tool for anyone to try out.</div>
<!--<div><a href="">Github repo</a></div>-->
<div>The Github repository and live demo will be posted here soon.</div>
</div>
</div>
<hr>
<footer>
<p>Juho Kim | for questions, please email <a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<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-1145660-2', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>