Demonstration on extending_the_pageview_feature_to_page_section_based_presentation

1/22
Introduction Related Work Web Application Demonstration Conclusion and Future Work
Demonstration on Extending The Pageview
Feature to Page Section Based: Towards
Identifying Reading Patterns of Users
Fajar Purnama 1, Alvin Fungai 1, Tsuyoshi Usagawa1
1Graduate School of Science and Technology, Kumamoto University
fajar@st.cs.kumamoto-u.ac.jp, f.alvin@cs.kumamoto-u.ac.jp,
tuie@cs.kumamoto-u.ac.jp
November 9, 2016
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
The Seventh International Conference on Science and Engineering (ICSE) 2016

2/22
Outline
Introduction
Related Work
Web Application
Demonstration
Conclusion and Future Work

3/22
Online with Information Communication Technology (ICT)
Access Information Anywhere Anytime
Interract Through Social Media
Information in Form of Audio and Video
Take Courses Online

4/22
Posibility of Online Analytics (below are examples)
Pageviews of a Webpage [1]
Watch Statistic of a Youtube Channel
Browsing Behaviour Timestats [2]
Webpage Visitors Analytics by Piwik

5/22
Example Analysis on Online Learning
Data:
contents viewed
discussions posted
assignments submitted
quizzes attempted
scores
From [3] shows the learning patterns of
those who passes and fails on a course.
From [4] states that content management
will aﬀect how active students on online
course, for this case the number of post on
discussion forum rises when assignments
and quizzes were handed out.

6/22
Limitation
Problem
Current data can answer what, when, and where a web page is
viewed but cannot answer how the web page is viewed.
Proposal
Extend the pageview feature by being able to monitor as far as
each sections of the page.
Objective
Demonstrate a web application that can track the date and
duration viewed on sections of a page, ultimately resulting into a
reading pattern.

7/22
Related Work
In ICT Industry
Browser History
Statistical Pageviews
Timeline Pageviews
Tracking User Mouse Clicks
Scrolls and Keyboard Types
In Learning Analytics
Online Book Framework
Finger Trail Learning System
(FTLS) [5]

8/22
The Architecture

9/22
Main Coding Concept
1: <form i d= s e c t a c t i o n=”thewebAPI”
2: onmouseleave=”submitFunction ( s e c t )”>
3: <div i d= s e c t onmouseenter=”startCount ( s e c t )”
4: onmouseleave=”stopCount ( s e c t )”>
5:
6: <input type=”t e x t ” i d=”date<sect >” name=”date”>
7: <input type=”t e x t ” i d=”duration <sect >” name=”d u r a t i o n”>
8:
9: Section Contents
10:
11: </div> </form>
Embed Javascript on Hypertext Markup Language (HTML) Page
onmouseenter: Upon mouse pointer enter, start the timer.
onmouseleave: Upon mouse pointer leave, stop the timer.
(The onmouseleave on the form tag is to submit the value (date and duration)
to the Web API upon leaving, on this work is written in Java)

10/22
Dynamic Insertion Algorithm
Input : parent node : parent node i n html body ;
s e c t i o n n o d e : parent node as s e c t i o n i d e n t i f i e r ;
parent node name : the name of the parent node ;
p a r e n t n o d e l e n g t h : t o t a l number of parent node ;
d e f i n e d s e c t i o n n o d e n a m e : name of the node s e c t i o n n o d e ;
d e f i n e s e c t i o n n o d e l e n g t h : t o t a l number of s e c t i o n n o d e ;
1: i = 0; j = 0;
2: c r e a t e t r a c k e r c o d e ( i ) ;
3: i n s e r t t r a c k e r c o d e ( i ) b e f o r e parent node ( j ) ;
4: j = j+1 /∗go to next parent node because c u r r e n t parent
5: node i s now t r a c k e r c o d e ∗/
6: w h i l e p a r e n t n o d e l e n g t h > d e f i n e s e c t i o n n o d e l e n g t h +1 do
7: /∗ This p r o c e s s r e p e a t s u n t i l a l l parent node i s c l a d with
8: t r a c k e r code ∗/
9: i f parent node name ( j ) == d e f i n e d s e c t i o n n o d e n a m e do
10: i = i +1 /∗move to next t r a c k e r c o d e ∗/;
11: c r e a t e t r a c k e r c o d e ( i ) ;
12: i n s e r t t r a c k e r c o d e ( i ) b e f o r e parent node ( j )
13: j = j +1;
14: end i f
15: move parent node ( j ) i n t o t r a c k e r c o d e ( i ) as c h i l d
16: /∗ the number of parent node d e c r e a s e s and j i s c u r r e n t l y
17: p o i n t i n g to the next parent node ∗/
18: end w h i l e

11/22
Dynamic Insertion Algorithm Illustration
1: <h1> s e c t i o n 1 <h1>
2: <p> content 1 <p>
3:
4: <h1> s e c t i o n 2 <h1>
6:
7: <h1> s e c t i o n 3 <h1>
1: <form . . . . . . > <d i v . . . . . . >
2:
3: </form> <div>
4:
5: <h1> s e c t i o n 1 <h1>
7:
8: <h1> s e c t i o n 2 <h1>
10:
11: <h1> s e c t i o n 3 <h1>

12/22
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
4:
5: </form> <div>
6:
8:
9: <h1> s e c t i o n 2 <h1>
11:
12: <h1> s e c t i o n 3 <h1>
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <h1> s e c t i o n 2 <h1>
10:
11: <h1> s e c t i o n 3 <h1>

13/22
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <form . . . . . . > <d i v . . . . . . >
9:
10: </form> <div>
11:
12: <h1> s e c t i o n 2 <h1>
14:
15: <h1> s e c t i o n 3 <h1>
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <form . . . . . . > <d i v . . . . . . >
9:
10: <h1> s e c t i o n 2 <h1>
11:
12: </form> <div>
13:
15:
16: <h1> s e c t i o n 3 <h1>

14/22
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <form . . . . . . > <d i v . . . . . . >
9:
10: <h1> s e c t i o n 2 <h1>
12:
13: </form> <div>
14:
15: <h1> s e c t i o n 3 <h1>
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <form . . . . . . > <d i v . . . . . . >
9:
10: <h1> s e c t i o n 2 <h1>
12:
13: </form> <div>
14:
15: <form . . . . . . > <d i v . . . . . . >
16:
17: </form> <div>
18
19: <h1> s e c t i o n 3 <h1>

15/22
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <form . . . . . . > <d i v . . . . . . >
9:
10: <h1> s e c t i o n 2 <h1>
12:
13: </form> <div>
14:
15: <form . . . . . . > <d i v . . . . . . >
16:
17: <h1> s e c t i o n 3 <h1>
18:
18: </form> <div>
19:
1: <form . . . . . . > <d i v . . . . . . >
2:
3: <h1> s e c t i o n 1 <h1>
5:
6: </form> <div>
7:
8: <form . . . . . . > <d i v . . . . . . >
9:
10: <h1> s e c t i o n 2 <h1>
12:
13: </form> <div>
14:
15: <form . . . . . . > <d i v . . . . . . >
16:
17: <h1> s e c t i o n 3 <h1>
19:
20: </form> <div>

16/22
Application Programming Interface (API)
Input
Get parameters from submitted form in representation
interface.
Connect to database server.
Create database if not already.
Create tables if not already.
Put parameter values gotten into the tables.
Output
Connect to database server.
Choose database.
Get Data.
Analyze (beyond the scope of this work)

17/22
Snapshot Demo
The timer on ﬁrst section starts as the mouse cursor enters it.

18/22
Snapshot Demo
The timer on ﬁrst section stops as the mouse cursor leaves it and
starts on second section as the mouse cursor enters it.

19/22
Snapshot Result
Purnama Fajar reads section 1 for 6 seconds, then moves to
section 2 and reads for 10 seconds, then moves to section 3 and
reads for 7 seconds, and so on.
Full Source Code:
https://github.com/0fajarpurnama0/Section_Based_Page_View

20/22
Conclusion and Future Work
Conclusion
Extension of pageview feature that tracks date and time of
sections.
Track reading patterns of online users.
New possibility for researchers on related ﬁeld.
Future Work
Existing webpage implementation (currently only on simple
HTML)
Further evaluation issues such as appearance, compatibility,
and resource consumption.

21/22
Reference
[1] http://www.histats.com/viewstats/?sid=3383017&ccid=406
[2] http://www.wips.com/news/detail/26/time-stats-phenomenal-
chrome-extension
[3] M. Wen and C. P. Ros, Identifying Latent Study Habits by
Mining Learner Behavior Patterns in Massive Open Online Courses,
In Proc. 23rd ACM International Conference on Conference on
Information and Knowledge Management., pp. 1983-1986, 2014.
[4] D. Nandi, M. Hamilton, J. Harland and G. Warburton, How
Active are Students in Online Discussion Forums?, In Proc.
Thirteenth Australasian Computing Education Conference (ACE
2011)., pp. 125-134.
[5] K. Maruya, J. Watanabe, H. Takahashi and S. Hashiba, A
learning system utilizing learners active tracing behaviors, In Proc.
Fifth International Conference on Learning Analytics And
Knowledge., pp. 418-419, 2015.

22/22
Thank you
Any comments or questions?

Demonstration on extending_the_pageview_feature_to_page_section_based_presentation

Recommended

Recommended

More Related Content

Similar to Demonstration on extending_the_pageview_feature_to_page_section_based_presentation

Similar to Demonstration on extending_the_pageview_feature_to_page_section_based_presentation (20)

More from Fajar Purnama

More from Fajar Purnama (13)

Recently uploaded

Recently uploaded (20)

Demonstration on extending_the_pageview_feature_to_page_section_based_presentation