Code Monkey home page Code Monkey logo

touchtypie's Introduction

t o u c h t y p i e

github-actions github-release

A touch-typing trainer.

https://play.touchtypie.com/

touchtypie

Philosophy

Touch-typing enables one to be in flow while interfacing with a computer.

In contrast to reading alone, typing while reading engages the visual, linguistic, and especially motor (coordinative, tactile) faculties, which enhances understanding and memory.

Development

Available as vscode tasks.

docker-compose up
# Site now available on http://localhost:8080

Alternatively, if you need to disable caching when working behind a reverse proxy:

docker-compose -f docker-compose.traefik.yml up
# Site now available on http://localhost:8080

The project started out simple, but grew just enough to require a custom frontend framework. Most parts of are is still in pure HTML, CSS, JS.

Practice resources

Here are some resources (libraries, collections, and books) you may like to use for practice:

FAQ - Practice

Keyboard navigation?

Use the ESC key to navigate between Home and Environment (i.e. settings).

In Environment:

  • Use the TAB key to navigate between settings.

  • Use ARROW keys to navigate between dropdown entries.

  • Use ENTER or SPACE keys to select or toggle settings.

Q: What are the red boxes in the Trainer's speech?

The red boxes in the Trainer's speech are indications of errors present in the Student response.

Q: How to practice on my own texts?

Ensure each text you want to practice is available as a URL.

In touchtypie, go to Environment, and click + beside BOOKS, paste a URL and hit enter. Do this for each URL you want to practice.

To save your practice environment, see this answer.

Note: You may like to use the official practice resources for practice, see here.

Q: How to save the practice session?

To save the practice session, go to Environment, and under FAVORITE click:

  • L button to favorite the current Library with your custom settings
  • C button to favorite the current Collection with your custom settings
  • B button to favorite the current Book with your custom settings

A touchtypie URL is saved to your clipboard. You may now bookmark, save, or share that touchtypie URL to practice anytime you want.

Q: How to practice on my own URL?

See this answer.

Q: I get a red exclamation mark when I add a URL.

Check that the URL is valid. Invalid URLs cannot be fetched.

If the URL is indeed valid, the failure to fetch the URL is because that website is protecting that resource from being shared. See this answer. You may try another URL.

Q: Why can't I use any URL as a book (i.e. practice text)?

The browser is subject to a policy called Cross-Origin Resource Sharing (CORS) which limits the browser from consuming resources from a website other than the current website (i.e. touchtypie).

In order for the browser to consume resources of another website, that website's server must return a HTTP header access-control-allow-origin: *. However we have no control over that website's server.

Hence, the solution is to host our library, collection and book file(s) ourselves. This can easily be done by using Github Pages as discussed in this answer, or uploading to your own web server.

Alternatively, another solution is to use a proxy server which fetches the content of that page directly, and returns the content with a HTTP header access-control-allow-origin: *. This can be done by using Cloudflare Workers.

Q: How to practice on custom book(s)?

See this answer.

Q: How to practice on custom collection(s)?

Ensure each collection you want to practice is available as a URL.

In touchtypie, go to Environment, and click + beside COLLECTIONS, paste a collection URL and hit enter. Do this for each collection you want to practice.

To save your practice environment, see this answer.

Q: How to practice on custom library(s)?

Ensure each collection you want to practice is available as a URL.

In touchtypie, go to Environment, and click + beside LIBRARIES, paste a library URL and hit enter. Do this for each library you want to practice.

To save your practice environment, see this answer.

FAQ - Environment

Q: What is libraries?

All of the available libraries for practice. Use the + to add a custom library.

Q: What is collections?

All of the available collections for practice. Use the + to add a custom collection.

Q: What is books?

All of the available books for practice. Use the + to add a custom book.

Q: What is playmode?

The playmode defines how the next book will be retrieved. Much like how a next song is played in a media player.

There are 4 playmodes:

  • shuffleglobal - Shuffle across libraries.
  • shuffle - Shuffle within a collection.
  • repeat - Cycle within a collection.
  • repeatone - Repeat the current book.

The default playmode is shuffleglobal.

Q: What is meditation?

As its name implies, meditation declutters the touchtypie user interface to help the Student reach a state of meditation - a state of singularity of the Mind on the book.

Q: What is perfection?

As its name implies, perfection enforces that the Student response (what is typed) must match the Trainer's speech (what is shown) for progress to be made in a book training session.

When perfection is turned on, the book training session starts from scratch. In perfection, errors continue to be tracked in statistics.

Q: What is jumble?

As its name implies, jumble simply jumbles the words present in a book.

Q: What is scramble?

As its name implies, scramble simply scrambles the characters present in a book.

Q: What is statistics?

As its name implies, statistics simply shows statistics summaries on the Home scene.

Even when statistics is turned off, it continues being collected. Statistics are collated into a virtue at the end of each training session.

Q: What is ambience?

As its name implies, ambience is the background of the training setting.

Q: What is virtue?

As its name implies, virtue is the measure of a Student's performance for a particular training session.

A global virtue is a measure of a Student's overall performance across all training sessions.

Q: What is favorite?

As its name implies, a favorite is a touchtypie URL that is copied to your clipboard containing your training settings, which you may save, bookmark, or share with others to practice on one particular book or books.

FAQ - Terminology

Q: What is a book?

A book is a URL. Its content is the content at that URL.

Q: What is a collection?

A collection is a URL. Its content is a list of book URLs.

Q: What is a library?

A library is a URL. Its content is a list of collection URLs.

Q: Who is the Trainer?

The Trainer is the touchtypie who prepares training sessions for you.

Q: What is the Trainer's speech?

The Trainer's speech is the text displayed for you to read and type.

Q: Who is the Student?

The Student is the player of touchtypie who is you.

Q: What is the Student's response?

The Student's response is the text you typed.

Q: What is Home?

Home is the main scene of touchtypie where the Trainer and Student are.

Q: What is Environment?

Environment is the settings scene of touchtypie.

FAQ - Advanced

Q: How to practice on custom book(s)?

Supply GET query parameter book_ids=<URL> (URL-encoding is not required) when accessing touchtypie. For example:

https://play.touchtypie.com?book_ids=https://touchtypie.github.io/touchtypie-libraries/books/keyboard-qwerty-letters.txt

To practice on multiple books, use multiple GET query parameter book_ids=<URL> separated by &. For example:

https://play.touchtypie.com?book_ids=https://touchtypie.github.io/touchtypie-libraries/books/keyboard-qwerty-letters.txt&book_ids=https://touchtypie.github.io/touchtypie-libraries/books/keyboard-qwerty-numbers.txt

Q: How to practice on custom collection(s)?

To practice on one collection, use GET query parameter book_collection_ids=<URL> (URL-encoding is not required) when accessing touchtypie. For example:

https://play.touchtypie.com?book_collection_ids=https://touchtypie.github.io/touchtypie-libraries/collections/keyboard-qwerty.txt

To practice on multiple collections, use multiple GET query parameter book_collection_ids=<URL> separated by &. For example:

https://play.touchtypie.com?book_collection_ids=https://touchtypie.github.io/touchtypie-libraries/collections/keyboard-qwerty.txt&book_collection_ids=https://touchtypie.github.io/touchtypie-libraries/collections/plants.txt

Q: How to practice on custom library(s)?

To practice on one library, use GET query parameter book_library_ids=<URL> (URL-encoding is not required) when accessing touchtypie. For example:

https://play.touchtypie.com?book_library_ids=https://touchtypie.github.io/touchtypie-libraries/libraries/daily.txt

To practice multiple libraries, use multiple GET query parameter book_library_ids=<URL> separated by &. For example:

https://play.touchtypie.com?book_library_ids=https://touchtypie.github.io/touchtypie-libraries/libraries/daily.txt&book_library_ids=https://touchtypie.github.io/touchtypie-libraries/libraries/nature.txt

Q: How to create a custom library, collection, or book?

Simply put, a library, a collection, or a book is a .txt file, available as a URL.

  • Library contains collection URL(s), one entry per line.
  • Collection contains book URL(s), one entry per line.
  • Book contains text

An easy way to host library, collection, and book files is to use Github Pages, by:

  1. Creating a new repository
  2. Enabling Github Pages in repository settings on the master or gh-pages branch
  3. Committing library, collection and book files to the repository's master or gh-pages branch
  4. Each file will be available as https://yourname.github.io/your-repository/<file.txt>, where <file.txt> is the name of the committed file.

Once your library URL is up, in touchtypie, go to Environment, click + beside libraries dropdown box, and paste the URL of the library and press enter. The library will be retreived and the practice will start. You may also share the library with others to practice on.

Basic example

For instance, you want to create a library about nature.

  • The library URL will be https://yourname.github.io/your-repository/nature.txt.
  • A collection URL will be https://yourname.github.io/your-repository/plants.txt.
  • A book URL will be https://yourname.github.io/your-repository/apple.txt.

Content of https://yourname.github.io/your-repository/nature.txt library (contains collection URLs, one entry per line).

https://yourname.github.io/your-repository/plants.txt

Content of collection https://yourname.github.io/your-repository/plants.txt (contains book URLs, one entry per line).

https://yourname.github.io/your-repository/apple.txt

Content of book https://yourname.github.io/your-repository/apple.txt:

An apple tree grows apple fruits, which are nice to eat.
Apples are said to keep one healthy.
An apple a day keeps the doctor away.

See this library in the official touchtypie-libraries repository.

Advanced example

For instance, you want to create a library about animals

  • The library URL will be https://yourname.github.io/your-repository/animals.txt.
  • A collection URL will be https://yourname.github.io/your-repository/dog.txt.
  • A collection URL will be https://yourname.github.io/your-repository/cat.txt.
  • A book URL will be https://yourname.github.io/your-repository/cocker-spaniel.txt.
  • A book URL will be https://yourname.github.io/your-repository/poodle.txt.
  • A book URL will be https://yourname.github.io/your-repository/ragdoll.txt.
  • A book URL will be https://yourname.github.io/your-repository/persian.txt.

Content of library https://yourname.github.io/your-repository/animals.txt (contains collection URLs, one entry per line).

https://yourname.github.io/your-repository/dog.txt
https://yourname.github.io/your-repository/cat.txt

Content of collection https://yourname.github.io/your-repository/dog.txt (contains book URLs, one entry per line).

https://yourname.github.io/your-repository/cocker-spaniel.txt
https://yourname.github.io/your-repository/poodle.txt

Content of collection https://yourname.github.io/your-repository/cat.txt (contains book URLs, one entry per line).

https://yourname.github.io/your-repository/ragdoll.txt
https://yourname.github.io/your-repository/persian.txt

Content of book https://yourname.github.io/your-repository/cocker-spaniel.txt

Cocker spaniels are the cutest of all dogs.
They have long droopy ears.

Content of book https://yourname.github.io/your-repository/poodle.txt

Poodles are so cute, they look like plushies.
They have short and curly fur.

Content of book https://yourname.github.io/your-repository/ragdoll.txt

Ragdolls are the cutest all all cats.
Their fluff make them look like plushies.

Content of book https://yourname.github.io/your-repository/persian.txt

Persian are the most exotic of all cats.
They carry thmeselves with class.

See this library in the official touchtypie-libraries repository.

Q: Can it be easier to create a library?

It is part of the roadmap to support fetching of .json files as libraries. This will eliminate the need for creating multiple .txt files for libraries, collections, and books.

touchtypie's People

Contributors

leojonathanoh avatar

Watchers

 avatar

touchtypie's Issues

Add word scrambling

Current

Word scrambling unsupported.

Expectation

Word scrambling supported.

select element click event behavior inconsistent across browser and OS

Current

select element click event behavior inconsistent across browser and OS

Expectation

select element (or its equivalent) click event behavior consistent across browser and OS

Discussion

On Macos, on firefox, the click event fires on a click of a select element value, but not on the unopened select element.
On Macos, on safari, both click events do not fire.

The environment components, especially those with select elements, have a mechanism for determining if a user is in interaction with a component, or has ended interaction with a component. Without the firing of the initial click event, there is misdetection of user interaction state, and ESC key to toggle out of environment back to home scene might not work correctly.

Arguably, it is not often that one uses mouse and keyboard for navigation, but for the sake of power users who use both for navigation, this bug should be fixed asap.

UPDATE: Upon second thought, because of the inconsistency of select element behavior across browsers, it might be better to replace it with a custom dropdown element with a search capability. The custom dropdown element click events will work perfectly.

Split second lag on new book

Current

Split second lag on new book

Expectation

No split second lag on new book

Discussion

Occurs especially when there are many books in a library.

Mobile firefox not rendering body background fully, leaving white background at bottom.

Bug

Footer component is a white background

Mobile firefox not rendering body background fully, leaving white background at bottom.

Expectation

Footer component is not a white background

Mobile firefox rendering body background fully

Discussion

This is probably due to elements in the footer having 0px in height, and margins on the footer element being used.

Also, some browsers have issues with rendering the finalmost element with a margin-bottom.

Update: This is probably a bug on mobile firefox when using background-attachment: fixed. While user scrolls on a body with background-attachment: fixed, somehow firefox renders the body element's height starting from the top of the address bar instead of the usual from the bottom of the address bar, resulting in a "suspension" of the body's background leading to the backgroundless gap at the bottom of the viewport, which at first glance appears to be related to the footer element, but not actually so.

Update: Upon further reading, when using background-attachment: fixed, every time a scroll event occurs, the browser would have to re-render the background in relation to all elements in the element styled with background-attachment: fixed. This can also lead to "flashes of unstyled background", especially so on mobile browsers where the browser is heavily optimized to suppress repeated re-rendering events.

Solution

Use min-height with background, and not background-attachment.

Wait for a fix for mobile firefox.

Do not use background-attachment, so that mobile firefox will not suffer the bug. Also, use a dedicated element the app background, which will only re-rendered on resizes (i.e. position: fixed with background).

UPDATE: #83 solves the present issue for mobile firefox, but creates Flashes of Unstyled Background (FLUB) for mobile safari.

UPDATE: #84 is not really a substitute for #83, since in #84 the background is no longer fixed (i.e. the background scrolls along with the scrolling).

Since #83 and #84 have issues, it is better to postpone fixing this issue.

Second resize event not refreshing UI

Current

Second resize event not refreshing UI

Expectation

Second resize event refreshes UI

Discussion

This can be reproduced, by starting the app in landscape viewport, pressing F12 (developer tools) which resizes the viewport to a portrait or <13:10 viewport (first resize), then pressing F12 again to get back to landscape viewport (second resize). The portrait or <13:10 viewport media queries are preserved, which should not be.

This can simply be reproduced by starting the app in portrait or <13:10 viewport (developer tools open) then pressing F12 to close developer tools where the viewport is now landscape. resize event fires, but media queries are not taking effect.

Update: This is indeed a strange bug, because css media queries are not being applied when closing developer tools.

Update: The cause was Firefox's Responsive Design Mode being on by accident. See: #91 (comment)

Data-binding for environment ambiences does not update UI

Current

Data-binding for environment ambiences does not update UI

Expectation

Data-binding for environment ambiences does update UI

Discussion

As with #132, using &ambience=sea does not load the app with the sea ambience, although the ambience model is updated in Memory.environment.ambience. This is because there is no data-binding between the ambience UI choices, the app background, and the Memory.environment.ambience model.

Trainer Speech untruncated if book text is long leading to poor performance

Current

Trainer Speech untruncated if book text is too long for good performance

Expectation

Trainer Speech truncated if book text is too long for good performance

Discussion

Since #218 was implemented, when loading a book text of 4.6M characters long (400k+ lines, one word per line) touchtypie/touchtypie-libraries#20, the app completely hangs. This is because a a few million character elements have to be created for the Speech.

The solution is to truncate the Trainer Speech when the book text exceeds a certain character length where performance degradation is likely to be experienced, e.g. 50k.

However, the Student loses the ability to review / read the entire book text during practice.

Trainer speech is too long when a speech line contains too many characters

Current

Trainer speech is too long when a book line contains too many characters.

Expectation

Trainer speech is not too long when a book line contains too many characters.

Discussion

Currently, the trainer's speech shows 5 lines of a book - two lines before and after the cursor (current line).

However, when one or more book lines are long (taking uo up several lines of trainer speech when text-wrapped), the entire speech can be very long and overflow off screen, such that the student can no longer follow the trainer's speech.

Solution

Adjust trainer speech depending on available viewport width and height.

Detect dimensions of trainer speech element and that of an individual speech character, to determine the maximum number of characters that would be able to fit into the trainer speech element. Pass that character limit to Bubble.getPeekIndices() as maxLength.

Add theme buttons

Current

No theme buttons

Expectation

Theme buttons. Some static, some random.

  • Terminal theme
  • Dark them
  • VSCode theme?
  • Random theme

Make scaling more mobile friendly

Current

App scales to viewport width.

Expectation

App scales to viewport width by default, but scales to viewport height when viewport height > viewport width.

Discussion

Currently, the web app is designed primarily for desktop / tablet devices in landscape mode. It makes sense because touchtyping can only really be acquired on hard keyboards, and does not apply to primarily soft keyboards devices such as phones or tablets used in portraint mode.

Nevertheless, it is possible to support portrait orientation, it will need just a few media queries in css to scale pretty well. As for trainer speech length, that will have to be determined based on viewport width and available viewport height (i.e. depending on whether the soft keyboard is active or not).

Media queries do not apply to print devices

Current

Media queries do not apply to print devices

Expectation

Media queries apply to print devices

Discussion

As discussed in #91, media queries currently do not apply to print devices. To make it look better across all media devices, media queries should support all of them.

Update: The accidental change in #100 actually implemented this as a side effect. See #91

No app splash screen

Current

No app splash screen

Expectation

App splash screen

Discussion

This helps guide a new user.

Autocomplete in mobile browsers firing on new book

Current

Autocomplete in mobile browsers firing on new book

Expectation

Autocomplete in mobile browsers not firing on new book

Discussion

Autocomplete fires on an ENTER key in mobile OSes generally.

This can be problem, especially when a book ends with a newline (i.e. LF).

Specifically, when an ENTER triggers the completion of a book and the start of the new book, if autocomplete is enabled on a browser, that same ENTER key will trigger autocompletion to inject the autocompleted text into the Student response at the start of the new book.

Reproduction

Not sure how to reproduce this with 100% certainty on mobile.

To reproduce this, hit the last character to trigger book completion, and immediately hit enter before the next book starts. If enter is done quickly enough before the start of the next book, the autocompleted text is injected in the student response of the next book.

In general, if the browser lags between books, then the hitting of enter after book completion will inject autocompleted text in the student response upon the start of the next book. Hence, this issue might be related to #61

Solution

Ensure the student response is cleared after autocompletion event.

Consider changing environment to use full viewport instead of a popup frame

Current

Environment pops up.

Expectation

Environment uses the full screen estate.

Discussion

Using the full screen estate keeps the user experience simpler, and keeps the markup simpler too. Also, there will be more space for the content and possibly better layouts.

EDIT: This will be easier now that #29 is done.

Saving URL to customized training session not supported

Current

Saving URL to customized training session not supported

Expectation

Saving URL to customized training session supported

Discussion

Should be as simple as clicking on a button to save the URL to the clipboard. That URL now represents a customized training session.

Scenes should be layered, and not replaced

Current

Scenes are replaced with display: none on inactive scenes.

Expectation

Scenes are not replaced with display: none on inactive scenes.

Discussion

Use position: fixed and z-index: -1 to hide scenes. This preserves layout, and any state of the element to be preserved.

Edit: Having the elements hold state is generally a bad practice.

No meditation mode

Current

No meditation mode

Expectation

Meditation mode

Discussion

In meditation mode, the UI is kept as clean as possible, such that there is one and only one thing for the student to focus on - typing the trainer's truth.

Perhaps, when toggling meditation mode on, statistics, footer, header (brand) might be hidden. Or perhaps, if only statistics should be hidden, then environment statistics toggle should be renamed to meditation and logic reversal applied.

Trainer speech LF characters not showing except the cursor's

Bug

Trainer speech LF characters not showing except the cursor's.

Expectation

Trainer speech LF characters show.

Discussion

This is apparent when playing the keyboard-qwerty-numbers.txt (book contains LF at the end). But the Trainer speech LF does not show up until the Student cursor reaches it.

Customization of number of Trainer Speech lines not supported

Current

Customization of number of Trainer Speech lines not supported

Expectation

Customization of number of Trainer Speech lines supported

Discussion

This should not be difficult to make. However, there will be cases where the desired number of lines will not be shown due to limitations of how the speech "peek" is determined. E.g.

  • see #50, if speech line is too long for the bubble, the speech maximum boundaries are set to that line's boundaries. This is the only foreseen bug that will be experienced.

EDIT: Upon second thought, if the UI is well designed, the user should not have to customize it.

.json configuration not supported

Current

.json configuration not supported

Expectation

.json configuration supported

Discussion

This might mean supporting both the .txt and .json variants. .json will be more portable but not as human editable and not friendly to non-technical users, since they won't know how to create their books as .json.

Related #88 where a .json book URL in GET parameter would be supported.

See #110 (comment)

ESC key toggles out of environment even when select elements are focused

Current

ESC key toggles out of environment even when select elements are focused

Expectation

ESC key does not toggle out of environment even when select elements are focused

Discussion

When select elements are focused, ESC key should close their menu, and not trigger a toggle out of the environment scene. This case was no covered in #86.

TAB key in Student response unignored

Current

TAB key in Student response unignored

Expectation

TAB key in Student response ignored

Discussion

If a student presses the TAB key accidentally, the practice should keep going instead of being interrupted due to the browser focusing elsewhere on the browser's UI.

However, the TAB key is important for accessibility of those who cannot use the mouse.

Non-amendable dictation mode unsupported

Current

Non-amendable dictation mode unsupported

Expectation

Non-amendable dictation mode supported

Discussion

What is now "perfection" mode is really just an amendable student response (editable textarea element) which is only accepted if the response fully matches the trainer speech.

Perhaps, perfection needs to be redefined as a non-amendable mode, where the student can and must only respond with the correct response to proceed between characters. In such a case, the UI can be simpler, where the student's response is overlayed over the trainer's speech until all of the trainer's speech is matched by the student response. The textarea element can be preserved, but it is always emptied on keydown|keyup and its color: transparent, to create the UI experience.

Trainer speech flashes a full book content upon returning from environment scene

Bug

Trainer speech flashes a full book content upon returning from environment scene

Expectation

Trainer speech does not flashes a full book content upon returning from environment scene

Discussion

Related to #58, where somehow on mobile browsers, transitioning between home and environment fires the resize event which re-renders the trainer speech.

Possible cause

When the menu button is pressed in the environment scene, the browser fires a resize event, and the a speech component's resize callback s responsible for detecting trainer character width, see #38, but because the home scene uses display: none, the detection might fail and subsequently lead to wrong determination of speech character width.

Update

The bug does not seem to be happening anymore. Could have been a browser bug which disappeared after reopening the mobile browser.

The bug is reproduced exactly as described above.

Trainer speech showing too many lines when book text < 100 characters

Bug

Trainer speech showing too many lines when book text < 100 characters

Expectation

Trainer speech not showing too many lines when book text < 100 characters

Discussion

Only happens when there are many newlines in the book with text < 100 characters.

This can be a problem because the student response is too far down to see the trainer speech.

Poor performance of scramble on long texts

Current

Poor performance of scramble on long texts

Expectation

Good performance of scramble on long texts

Discussion

On long texts (10000 characters or more), scramble takes up to a few seconds.

The Scramble mode is used for practicing typing random characters. The book text only needs to contain unique characters (or perhaps some repeated characters), and shouldn't be long.

Hence the problem might be avoided by using short books with Scramble mode with Repeat 1 mode.

Escape key unused

Current

Escape key unused

Expectation

Escape key used for toggling between home and environment scenes.

Some properties of State object mutated to getters and setters

Current

Some properties of State object mutated to getters and setters

Expectation

No properties of State object mutated to getters and setters

Discussion

While it is convenient to mutate State object, the habitual mutation of State object can make it difficult if a lot of its properties are mutated to getters and setters. Instead app controllers should handle state and update the State object.

Scrollable Trainer's speech not supported

Current

Truncated Trainer's speech

Expectation

Scrollable Trainer's speech

Discussion

Currently, the Trainer's speech is truncated when it exceeds 5 Trainer Speech lines in non-meditation (depending on viewport width and speech character width) or 10 Trainer Speech lines in meditation.

For truncation:

  • Minimal DOM changes (more CPU / memory)
  • Simple markup which does not require scrollable frames.

Against truncation

  • Unverifiable book content. Without the full text the book text cannot be visually verified by the Student.
  • Unintuitive. Most new Students would expect that the entire book's text to be shown, or at least for all the text to be shown within a scrollable frame.
  • Unreviewable. Students may want to review, speed read, or run through the book content for familiarization or contextualization before the practice.

Hence, Trainer Speech should show the entire book text within a scrollable frame, while scrolling naturally depending on the cursor of the Student's progress.

Disable perfection by default

Current

Perfection on by default.

Expectation

Perfection off by default.

Discussion

Not everybody aims for perfection. This makes it simpler to play for new players.

Favorite of library or collection unsupported

Current

Favorite of library or collection unsupported

Expectation

Favorite of library or collection supported

Discussion

As of #211, a favorite, despite that defined in #144, is a touchtypie configuration of the current book serialized as a URL. However, students may also want to favorite a specific library or collection. Perhaps the favorite section under Environment could contain three buttons: library, collection, book which allows student to intuitively be able to get a touchtypie URL containing their favorite library / collection / book along with all other environment settings.

Performance on long book texts is poor

Current

Performance on long book texts is poor

Expectation

Performance on long book texts is not poor

Discussion

Performance on long book texts is poor e.g. >=10000 characters.

Related: #240 #249 #7 #251

As suggested in #249, there needs to be a way to update the Trainer Speech with less changes in the DOM, to ensure Response and Speech performance does not stutter.

A possibility is to break up the book text into chunks of 10000 characters. Each chunk will correspond to a HTMLElement / HTMLTextElement. On book init, the Speech element is updated with these elements. Upon each Response, Trainer Speech feedback is only generated for the current chunk (i.e. zone the Response cursor is in) and only the corresponding HTMLElement updated. In such an implementation, there is only at most 10000 character elements updated in the DOM on each Response event, which should greatly enhance App responsiveness for long book texts.

  • One downside is that the Student will not be able to view Speech feedback in peripheral chunks.
    • However, arguably this downside only applies to non-perfection, since in perfection the Speech never shows more than one error (i.e. error at the cursor).

Separate the UI into two scenes: home and environment

Current

UI is one scene.

Expectation

UI is broken down into individual home and environment scenes.

Discussion

Currently the entire app is under one main scene. This makes it difficult to read and follow as the app grows.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.