Giter Club home page Giter Club logo

skola's Introduction

Skola

Skola

An early project aiming to create a web-based spaced repetition flash card app like anki. View a demo here.

Current state of the project:

  • normal / double-sided and cloze cards
  • rich text content (html)
  • learning algorithm with using fsrs.js (implementation of free spaced repetition scheduler)
  • card managing tool (to be improved upon)
  • light / dark / system mode

What doesn't work (yet)?

  • image occlusion
  • audio
  • today view
  • statistics
  • spotlight search like feature
  • caching for offline usage

Goals:

  • open source and free
  • user-friendly, intuitive design
  • fun and rewarding experience
  • responsive design optimized for mobile and desktop experience
  • storing data locally (using IndexedDB) in the future also syncing
  • PWA and caching for offline usage (possibly usage of Notification API)
  • customizability

Technologies:

  • Typescript
  • React
  • Mantine React
  • Data storage in the browser using dexie.js (IndexedDB)

Motivation

Many students and other learners use spaced repetition tools, mainly Anki. Anki is very useful, but it has an overall offputting user interface that is often unintuitive und doesn't reward the user for learning. Other alternatives are costly or closed source. If you are interested, you are very welcome to contribute to this project. If you have any questions or suggestions, please go ahead by creating an issue or starting a discussion.

Bildschirmfoto 2024-02-21 um 02 30 53 Bildschirmfoto 2024-02-21 um 02 30 28 Bildschirmfoto 2024-02-21 um 02 30 03

skola's People

Contributors

dependabot[bot] avatar emerzh avatar h16nning avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

emerzh

skola's Issues

Improving the add cards experience

Adding cards is a pretty bare-bones experience right now, for several reasons. Plans to improve it:

  • Add a shortcut / translations to change card type
  • When changing card type try to transfer contents of input fields.
  • #125
  • Add a fixed footer and move the add cards button there
  • Add an history option to quickly go back to the previously created cards and edit them. Might be enough to refer to NoteManagerView with creationDate set.
Bildschirmfoto 2024-03-12 um 23 16 37
  • Add a new line floating menu to accompany the bubble menu. Consider removing the toolbar after this.

Maybe

  • Add the import cards button here too
  • Dont't show double sided card as a selectable option in card type dropdown. Instead have a simple checkbox like "Test from both sides" or so

Cloze card preview

As mentioned in #63, the cloze card preview does look a little ugly. I think we could just remove the {{::}} stuff

Sound Card

It's probably not a priority... even for me :p

but I stumble upon this https://jessicalieb.itch.io/birdlingo ... and thought hey, but this (is nice) should be a flashcard deck 🤔 ...

and it seems anki as one 😲 ...
so why not have some sound support... this could be "easy" since we have attachments already ...

Rewrite of card leaning / scheduling and migration to FSRS

This is a big one.

The current implementation of learning and scheduling needs a complete rewrite because it is pretty messy and buggy.

Right now the SM2 algorithm is used. It is relatively old (I think 1987). Recently the free open-source algorithm Free Spaced Repetition Scheduler (FSRS) has been released. It is significantly more accurate than SM2 and based on scientific research. Ankis newest version offers a switch to this scheduler as well. There is already a JS implementation and another person is working on a Typescript version.

Additional explanation on the algorithm

I figured a rewrite would be a good opportunity to switch to FSRS.

Image occlusion cards

  • similar implementation to cloze cards
  • save image and position / width of divs in a shared value
  • only safe reference to specific div in card

Menu in Notebook view

Hello @h16nning 👋
I see you are playing with combo; sorting & stuff in notebook view...

to takes from mochi :p
i kinda like the "options" there... allthough it's obviously "a lot" of options, maybe we don't need all that now

Capture d’écran 2024-02-14 à 20 14 42 maybe in combination with sort options? Capture d’écran 2024-02-14 à 20 15 06

i was thinking for us, cool starting options could be:

  • show all side
  • show sub decks
  • sort options like you did

App icon

Create an app icon and show in the sidebar

Move subdecks

@eMerzh Now that we have an alternative way in place to access lower-order decks, the subdeck section could be moved. However, on smaller screen we still need some access to it. Do you have any idea where to put it?

Header Bar on mobile

As discussed in #8 navigation is still limited without the sidebar, so a header of some sort is needed.

Contents

  • hamburger icon (collapse / open sidebar)
  • back button (forward button too?)
  • move respective three dot option menus from different views to top right

React Router: Should have a queue.

On first update, only on mobile devices (not screen-size dependent):

React Router caught the following error during render Error: Should have a queue. This is likely a bug in React. Please file an issue.

Sanitize content in dangerouslySetInnerHTML

As the workflow warns, maybe dangerouslySetInnerHTML is problematic...

I don't think it does matter so much right now but maybe DOMPurify is an option to be future-proof

Save creation date

  • Save the creation date (and possibly the last edited date)
  • Make it possible to search by creation date
  • Show cards in learning view sorted by creation date

Fix the hard option

The option hard in learning does nearly exactly the same as the again option. The option hard shouldn't reset the interval to 0 if the card as already been repeated correctly for multiple times.

Better keyboard support

  • correct tab order when creating new cards (don't tab into controls toolbar)
  • hotkey to trigger actions (e. g. "space" to trigger learn and "n" to add cards on DeckView) using mantine use-hotkeys

"Duplicate" cards

Related cards will appear each on their own which can lead to duplicate entries seemingly appearing multiple times.

Relevant in spotlight search (#63) and notebook.

Fonts sometimes don't load correctly

@merzh

After #67 local fonts aren't always loaded correctly and will resort to system default sans-serif / serif.

This doesn't always happen, actually quite inconsistently, usually after multiple page reloads after each other.

Reproced it in chromium-based, webkit-based and firefox browsers.

Console logs

chromium:
Bildschirmfoto 2024-02-22 um 21 05 13

firefox:
Bildschirmfoto 2024-02-22 um 21 11 04

I haven't figured out yet why it occurs. I suppose something with vites static imports?

Overhaul settings

  • Settings should save their contents in local storage or using dexie.js (db.settings)
  • Possible settings
    • light / dark mode preference
    • user name

deleteDeck doesn't work correctly

If deleteDeck is called for a deck which has sub decks it won't remove the id of the deck itself from the parent's subdecks list.

Try solving this by using Promise.all.

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.