TELL-OP for language learning: design & implementation
U. Giessen, Germany
Learner Language, Corpus Linguistics and Mobile Learning Workshop
TALC 2016
http://www.tellop.eu/tell-op-workshop/
2. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 1
ABOUT US
MATTIA ZAGO
MAIN DEVELOPER
Departamento de Ingeniería de la
Información
y las Comunicaciones
University of Murcia
Pascual
Pérez-Paredes
Departamento de Filología Inglesa
Gregorio
Martínez Pérez
Departamento de Ingeniería de la
Información y las Comunicaciones
Pilar
Aguado
Departamento de Filología Inglesa
Carlos
Ordoñana
Departamento de Filología Inglesa
Purificación
Sánchez Hernández
Departamento de Filología Inglesawebs.um.es/mattia.zago
3. ABOUT US
And who I am
USE CASES
How it is working?
DESIGN
A “material” choice
DEVELOPMENT
The engineering point of view
2
THE AGENDA FOR TODAY
TELLOP APP
Available Platforms
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN
DEMO
The prototype
8. HOW IT IS WORKING
DASHBOARD
TASK
HISTORY
FEATURED
EXERCISES
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 7
9. HOW IT IS WORKING
DASHBOARD
EXERCISE
HISTORY
FEATURED
EXERCISES
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 8
CROSS-AVAILABLE
FUNCTIONALITIES
SEARCH
REQUEST UPDATE
SETTINGS
USER PROFILE
EXTRA FEATURES
WORD OF THE DAY
TIPS AND QUOTES
11. FEATURED EXERCISE
Each user
will receive a list
of exercises
depending
on its level
and language
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 10
12. TASK HISTORY
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 11
Permits to
see and interact
with all the
previous tasks
13. TASK HISTORY
Permits to
see and interact
with all the
previous tasks
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 12
TAP ON
ANY
ELEMENT
14. PRACTICE
TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 13
Type and Level
Title
Description
User Input
Real-time Stats
Submit the
text to our
server for a
deeper
analysis
15. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 14
ANALYZE THE RESULT
Related
Ratio and Indices
K-Frequency
Comparison Chart
Single Word
Exploration
TAP ON A
WORD
21. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 20
USER MANAGEMENT
The main TellOP
website is in
charge of the
user
management.
i.e. users must
register online
and not through
the application
https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2
oAuth2 Authentication Mechanism
22. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 21
TEXT ANALYSIS DATA FLOW
USER APP SERVER
Featured Exercises
Solution
Text
TextReal-time Stats
Results
Processed Results
Processed Results
Explore Term
TELLOP
DB
Request User Data
User Profile
Lex
Tutor
Term Term
Results Collins
Term
Results Stands4
Processed Results
Term information
23. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 22
CONTROL FLOW
START
Our server receives the
text to analyze
Submit on
LexTutor
Ratios and Indices
K-Families
Distribution
K-1 Family
Words List
24. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 23
K-FAMILIES ANALYSIS
START
Our server receives the
text to analyze
Submit on
LexTutor
K-Families
Distribution
User Global Profile
TellOP
User
Database
Exercise Profile
Average Profile for
selected level
Language
Profile
Provider
Compare
BarChart
26. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 25
K-FAMILY WORD LISTS
START
Our server receives the
text to analyze
Submit on
LexTutor
K-1 Family
Words List
Ki Family
Words List
END
Select a Family
No Families Left
Separate
Functional
Words
Ki Family
Functional
Words List
27. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 26
SINGLE WORD EXPLORATION
Ki Family
Functional
Words List
Word 1 User selects a word
Available
Functionalities
Explore Context
(preceding and
following words)
Explore
Synonyms
Explore
Definitions
Explore
Idioms
Explore
Grammar
Explore
Collocations
28. TELLOP BETA PROTOTYPE - TALC 12 - GIEßEN 27
FUTURE WORKS
SOCIAL
TABLET
OPTIMIZED
INTERFACES
ADVANCED
SEARCH
IMPORT
EXERCISE
PERSONAL
ACTIVITIES
SPEECH
RECOGNITION
Good afternoon,
I’m Mattia Zago and I will introduce you the beta prototype of the TellOP application
I am a PhD student from the University of Murcia and I represent the development team for this project.
Our agenda for today starts with a brief description of the technology used in order to implement the prototype,
Then we will continue with an overview of the main functionalities
The design choices and
The technical solutions adopted for the user input analysis
Please do not hesitate to interrupt me for any question
According to the last statistical data, Android OS covers more than 80% of all mobile devices.
We decided to implement the application for the three major operative systems: Android, iOS and Windows Universal.
However, if we look at the tablet market share, the situation changes, in fact Windows Universal grow to almost 20%.
For that reason we choose to develop the application for the top-three operative system.
In order to achieve this result and maximize the outcome we choose the Xamarin technology for our application.
Xamarin is multiplatform framework based on the Microsoft dotNET middleware, the idea behind this product is “write once, run everywhere AND be native”
Essentially we designed and implemented a cross platform application, without losing all the benefits given by the native implementation
---------------------------
Let’s then start with the first look on smartphone control flow
Let’s then start with the first look on smartphone control flow
Right after the login page, which will be discussed later, a generic user lands on his personal dashboard.
CLICK
The most important part of the dashboard is the TASK history, where all the previous solved and uncompleted exercises are available
CLICK
Secondly the user can retrieve from our server a list of featured exercises, divided by CEFR (siː iː ef ˈɑː(r)) levels, in this case, A2 and B2.
------------------------------
From here, several side-functionalities are available, for example search, updates, user profiles etc.
Moreover, the dashboard presents every day a different quote, tips or word in order to increase the user knowledge and vocabulary
From here, several side-functionalities are available, for example search, updates, user profiles etc.
Moreover, the dashboard presents some extra functionalities such as the word of the day or a tip or a quote that aim to increase the user knowledge of the language or simply his vocabulary
-------------
Clearly one of the most important side-functionality is the ability to search terms
Clearly one of the most important side-functionality is the ability to search terms,
Which means that the application must aggregate results from several sources in order to retrieve definitions, synonyms, grammar behavior and general idiomatic form
This page is available from any screen inside the application, the user just need to tap on the corresponding search icon (indicate top icon)
--------------
The second most important page is without any doubt the featured exercises list
The second most important page is without any doubt the featured exercises list
In here a selected subset of tasks is presented to the user, according to their level and capabilities
The same happens in the history page, in here the user can find all the previous solved and uncompleted exercises
CLICK
In both pages any item is clickable
CLICK
And leads to the practice page
The same happens in the history page, in here the user can find all the previous solved and uncompleted exercises
CLICK
In both pages any item is clickable
CLICK
And leads to the practice page
[…] And leads to the practice page.
This page represent the main user input mechanism, and consist in
CLICK
Several information about the exercise (such as type and level, title and description) plus a series of real time statistics.
Specifically we presents to the user the most-accurate-as-possible counter for names, adverbs, adjectives and verbs.
As you can notice the search icon is clearly visible in the action bar.
When completing the exercise the user can submit the result to our server for the analisys
universal and simple elements
specific keylines: circle, square, rectangle, orthogonals, and diagonals
Key lights create directional shadows, and ambient light creates soft shadows.
Content is displayed on material, in any shape and color.
Help users navigate your app by designing clear layouts with distinct calls to action.
Give users confidence in knowing where they are in your app and what is important. Use color, shape, text, and motion to communicate what is happening.
Functional capabilities among all screen size, properly optimized