apayrus/ula-react-native

DEPRICATED. Universal learning app. Template for an app, that you can easily fill with your content and run your own educational app.

DEPRICATED. Please visit https://github.com/apayrus/ula

ULA -- Universal Learning App

ULA is a template for an educational app (android/iOS/web).

You should:

• prepare text in markdwon, as simple as you write articles for blog
• put files into specific folders (e.g.chapterId/subchapterId/images)

And you get:

• interactive app, something between Duolingo and Coursera.

The template is open sourced and has free license.

At the moment, we have four types of materials, combining that you can create a great learning process for the user.

richText	richMedia

fileCard	exercise

Material types

richText

It is a screen with rich formatted blog like explanations.

You can use standard markdown: headers, bold, italic, blockquotes, images.

In addition to markdown you can add videos and audios from local files, network links and youtube.

You can add into text sounded words (they will play on click on them) and quizzes, with auto check user answer for correctness.

For more info: Material type: richText

richMedia

In richMedia you can join media file and subtitles into phrasal player with parallels texts: original and translation. It works for both: audio and video.

You can watch active phrase while playing, play particular phrases, change speed of playback etc.

Also you can organize your subtitles in a chat like manner, with avatars and speaker names.

In next versions we have planned: quizes with timestamp, that will appear on some point of playback and drill/dictation mode.

For more info: Material type: richMedia

fileCard

With this kind of material you can organize multiple files (images+sounds) into flash cards or phrasebook.

Then you can use them in exercises.

For more info: Material type: fileCard

exercise

Exercises are build on top of richMedia and fileCard material types.

They provide user with activities, like:

• listen to the audio, and write what you have heard
• read the text and choose correct translation
• look at image and order words
• e.t.c. and all possible combinations of those kind of exercises.

After each exercise app gives to user feedback: was his answer right or wrong.

For more info: Material type: exercise

Conclusion

If you have content like

• texts
• translations
• images
• audios
• videos
• subtitles

and you want to organize them into interactive educational app, something between Duolingo and Coursera, without coding -- you should try ULA.

The app will be avaliable on:

• android
• iOS
• web (site, SPA, PWA)

What's next?

Read about how Navigation works in ULA.

ula-react-native's Issues

Drawer/ToC sign "completed/read"

When you have many materials, it is good to have a sign/checkbox about is it almost read or not.
May be it will appear automatically (after opening? listening to the end?)
or may be you by your hands will do that?

node scripts auto run on build

• generate js-object content from markdown,
• #3 generate map of images and audios,

// - [ ] run all scripts automatically, before `expo start`

localization interface

All words, used in the interface, should be placed in the localization module.

on the main page user will see 2 sets of languages:

• content is available on these languages...
• interface is available on these languages...

But at first all interface will be in English

add: App asks user to download (cache) all externall resources

On first run we can count all external files (.mp3, mp4), that app uses.
And order to user to download them all, for using offline.

lack of translation causes an error

if in translation less words/phrases than in original, it causes errors (doesn't exist) - should add default value

SMM

• Write article about the project and share it on:
  • Medium.com
  • vc.ru
  • habr.com
• Record Video and share on:
  • youtube

Quiz: put incorrect answer statistics into local storage

When user interacts with quizzes and exercises we should save that process into AsyncStorage, so that teacher can check who was guessing the answers, and who was learning carifully.

• 1. on incorrect answer, write it into Storage, increasingly
• 2. when correct answer was given, stop increase error counting

universal file structure

• design/choose file structure and naming convention for assets: images and audios, connected with markdown text
• write documentation
• fill example

node script to make assets map (audios and images)

React-Native cant access to files with dynamic generated names. We should write it before using files like this:

export default {
    '004_01': require('./004_01.jpg'),
    '004_02': require('./004_02.jpg'),
}

For don't do it manually, write a script, that make it from filenames in /assets folder

Exercises: after complete all, open page with progress statistic

After user have completed all exercises:

• open page with results, as in games: how many words did have you read, translated, listened etc...
• highlight all errors, like work on errors, so you can improve your knowledge for next time.
• add images (in addition to text, translation and audio). Look at image and choose right answer from texts etc...
• add ability to combine multiple things together, like image+text, or image+audio, etc... (we should design markup for it)
• make hidden materials, if you want user exercise with them, and didn't see answers before. Hidden material eg oneLineOneFile, just makes connection originalText-translationText-Image-Audio --> so then you can generate from them exercises. And you don't want to show this material in non exercise format...
• user input tolerance -- design and implement separate module. First: case insensitivity, punctuation and spaces ignoring. Some rules are general for any language, and some -- specific for the particular language, like ignore stress in Russian, or diacritics in Arabic.

rename of subchapters (###, h3) causes bugs

At first there was words and phrases, but when someone aims to add other subchapters, like grammar, exercise, app doesn't work

PhrasesBlock: ScrollView smoth scrollTo

For now PhrasesBlock scrolling while playing media happens too fast.
I tried decelerationRate it didn't help.

Drawer/TOC add filter/order/search for episodes/titles

When you have content, related to dates, or without straight ordering as in book, you want to have the ability to sort items in different ways.
May be today you want to see new materials first and tomorrow -- the oldest ones.

bugs after release 1.0.0

• #13

• #14

• #15

• #16

SoundedWord (inText) -- add animation on click

TouchableOpacity makes proper animation, but it turns all text inside to view (with some margins or paddings and no wrap words).
Animation is looking good but position inside other text -- not good.
When I added onPress to Text -- position is ok, but there is no animation on click.

localization content

• file structure (/content/content.en_US.md)
• markdown example - the same as content.md (clone it before and rename)
• manage languages - list existing ones on the main page, and choose one of them
• appearance in the app - switcher translation on/off on ChapterScreen and Drawer
• show translation in drawer (heading)

About page

• component screen
• course info
• ulla info
• link in drawer

interactivity [inText]: Put soundedWords into formatted text (markdown)

Design parser for put sounded words inside paragraph of text. For example, with #nameOfSoudFile before it:

You can click on this word #001-001 soundedWord and it will be played

• #001-001 - not shown for user (only in code for author)
• #001-001 - is a file name from a specific folder, like inTextWords. Instead of number in file name can be text of word.
• soundedWord - styled not as other words around.
• When user click on soundedWord, it sounds.

inText: links internal and external

to other materials inside app
to pages in Internet

in text
as a button (subType) with all button params (icon, color, size)

do not turn off the application when the screen turns off, play in background

autogenerate translationsMap, and assets if folder doesn't exist

• /assets/translations.js auto generate after generateContent - should improve script
• errors if assets folder and files in it doesn't exist (generateContent can't make files, if they don't exist) - should recursive write file?

release 1.0.0

• #1 custom beautifull drawer
• #2 parse markdown to js object
• #3 node script to make assets map (audios and images)
• #5 global styles related to language
• #7 universal file structure

custom beautifull drawer and home page

Drawer:

• custom component for drawer
• logo image
• heading

Home:

• book name
• author
• level (a1-c3)
• website

interactivity [inText]: map markdown tokens <--> react-native-elements (tags/components)

marked.js splits .md file into:

1. big parts (like h1, h2, p, ul)
2. small parts - tokens: strong, em, del ...

In react-native-elements we have only component (tag) with different styles. We should write styles for each of marked.js tokens.

hyphen causes unexpected <ul>

hyphen sign (-) causes <ul> and this rows doesn't appear in lessons (pages) - should replace it to short tire, at the beginning of row

markdown validation... (can't parse with some empty strings etc)

When you change content file on other computer, without prettier and its autocorrection (adds empty strings after headers etc), some of data will be not parsed.

global styles related to language

• font-family
• font-size
• writing direction

parse markdown to js object

• write script that parses makdown to js object
• refactore code to understand this js object

We shoud get:

• content of each lesson
• heading of whole book

inText images -- as subType

customizable images from assets or uri
[image | ...params]

Params - align, size, link

Avatars/Voices section in Media contentType

In Media contentType there is ##timing or ##phrases section, where you can put subtitles. Actually it is contentSubType.
Also in subtitles you can specify <Voice /> -- who is talking particular phrase, in webvtt way, like: <v Rob>.

Add in that way another subType: avatars/voices where in yaml like format you can specify avatars of speakers.

## voices
Rob: https://facebook.com/rob3913/images/photo.jpg
Neil: images/avatars/Neil.png 

ideas inspired by 6 min english

Extra params (add to each chapter):

• date
• description
• image
• pdf
• href, etc

Extra navigation.
When there is lots of random materials, we need more abilities to search, sort, navigate, check as completed:

• main page -- table of content with toolbar: sort by, search
• isCompleted - input inside chapter
• isCompleted - show in Table of Content (ToC)
• order by completed
• order by date
• search (only title / full text)
• tags (for each chapter)

Distribute all content via API
When materials updates regularly, it is good to deliver them through API endpoints, not by updating local text...

• API endpoint for the list of materials
• API endpoin for the single episode
• push notification for new episode

Other:

• thesaurus - is a text pair as: word - description (with contentType inText)
• exercise with thesaurus (parse inText in extra way, to make pairs word-description, and then play with them (randomize)