Flashcards in Drafts

Actions - Share What You've Made
1

For a while now I have been using Drafts as my main note taking app, and copying notes out to use in various flashcard apps. However, I realised I could save time by creating a rudimentary flashcard review system within Drafts itself.

I’m very much a Javascript novice, and this has been a learning project for me. I cobbled together this action by looking at other example actions, and occasional Googling. Right now it functions pretty much as I would like, but I would be keen to hear any suggestions for improvements to the code itself (e.g. is there a more elegant solution to incorporating the CSS styling than the very long string it currently uses?), or the functionality of the action (e.g. are tags the best way to keep track of the review date and mastery count, or is there a better approach I’m missing?)

The main action is called review flashcards, and convert to flashcard is a supplementary action.

Review Flashcards

Tags

  • This action uses three types of tag:
    • flashcard: used to identify notes that are to be reviewed as flashcards
    • reviewYYYYMMDD: used to keep track of the date when flashcards are due
    • masteryX: used to calculate when the next review date will be

Making Flashcards

  • turn any note into a flashcard by adding the three tags listed above, e.g. flashcard, mastery1 and review20200716
  • the action convert to flashcard will add these tags automatically
  • use the line break (---) to split the flashcards into different sides
    • sides will be revealed one at a time
    • there is no limit to the number of sides a flashcard can have

Reviewing Flashcards

  • when this action is run, it will find all notes with the flashcard tag and a review date tag that is on or before the current date
  • if you select “remembered”, the mastery count will be doubled
  • if you select “forgot”, the mastery count will be halved (down to a minimum of 1)
  • the new mastery count indicates the number of days before the next review
    • e.g. after remembering a card with the mastery2 tag on 20200716, the tag will be updated to mastery4, and the review date tag will be updated to review20200720
    • e.g. after forgetting a card with the mastery2 tag on 20200716, the tag will be updated the mastery1, and the review date tag will be updated to review20200717

Convert to Flashcard

Adds the following tags to the current note:

  • flashcard
  • reviewYYYYMMDD – the current date
  • mastery1
4 Likes
2

Here’s how the flashcards look when reviewed:

image
image1398×1485 41.1 KB

3

image
image1405×1482 82.6 KB

4

Does this action create a flash card in the Anki iOS app?

5

The OP does say it is doing it all within Drafts, and doesn’t mention Anki at all as a prerequisite.

To see what it is doing you can download and try it :wink:

6

Nope: it replicates some of the functionality of apps like Anki without leaving Drafts.

For my own personal usage, I don’t require many of the specific features of Anki. All I really need is to be presented with some of my notes on a repetition-spaced schedule so that I don’t forget all about them, and that’s what this action does!

7

Hey,
That’s a great idea.
I will try it and come back to you with a feedback.
Thought I have to confess I am not a JavaScript pro (only a pro software engineer)
But we will see…
Felix

8

I got the first steps into understanding your code.
The actions are great! That’s what I was waiting for.

About the Stylesheet question

  • use a local/cloud file uns drafts like so:

    // CSS styling from file
    // create a local file in App documents
    let fmLocal = FileManager.createLocal(); // Local file in app container
    let stylesheet = fmLocal.readString("/_css/flash_card.css")

But this has to be created with a file action or a script action
I did a simple file action:

  • name : setup_flashcards
  • steps 1
    • file_name: flash_card.css
    • folder: _css
    • Template: your Stylesheet string

Is this what you where looking dir?

More about the file manager on https://scripting.getdrafts.com/classes/filemanager

1 Like
9

the better solution is to put the files int iCloud

// CSS styling in icloud
let fmCloud = FileManager.createCloud(); 
let stylesheet = fmCloud.readString("/_css/flash_card.css")

image
image828×1792 75.2 KB

Topic: Code Improvement Suggestions

Source Code Style is always a compromise
Always ask yourself does this also work for me

  1. Tags:
    I would prefer Tag names to be separated with an extra underscore for readability (mastery_5, review_20200621,…)

  2. Common constants and functions:
    I would define a basic drafts action, that defines the core variables and constants (use const keyword instead of let for constant definition) and define it as the first step in both of the actions

  3. Dates:
    I would suggest an iso date 2020-06-20 this can be generated with Date(now).getISOString().slice(0,10)
    (The slice is to only use the date but not the time)

  4. API:
    Maybe the functions could be integrated to a class … I would have to check this later

  5. HTML Display:
    The content should be reset after any other card … Or a auto scroll could do the trick with (too) long flash card stacks ((I over did it with a very long drafts note with more than 20 flash cards))

Please feel free to comment this.
You did a great job with your scripts
I would never have the time to create TGIF Ron scratch. Let’s improve it together if you like

Sincerely Felix from Germany

1 Like
10

Awesome – this is really helpful, thank you! It will take me a while to process it all, but I’m excited about applying these suggestions to a new and improved version of the action.

11

I found a great solution for working with files so we could

  • move the css to _css/flash_card.css
  • move the core functions to _js/library.js and import it via an separate (pre) action script
    ((all script actions of draft action will be usable for other script actions — global context))
12

Updated with a few changes:

1.01

  • added autoscroll on pressing the “flip” button
  • added dark mode
  • tweaked heading font sizes
  • moved CSS into a separate step for clarity
13

@dhaysom thanks for this great set of actions - really fired up to use it.

Unfortunately the action convert to flashcard | Drafts Action Directory is not setting the tags permanently after it is run.

It appears

draft.update();

needs to be added to the end of the script.

For reference: (Tags disappear after running an action)

1 Like