flashcard

    0.0.2 • Public • Published

    Flashcard

    Hacker-friendly flashcard compiler.

    Motivation

    Flashcards take too long to make. A lot of the process can be automated. Let's create a language around flashcard creation thats easy to read, open, flexible and supports lots of different kinds of media.

    But... why?

    I'm learning spanish right now. I'm trying to be systematic about it:

    • Start with a list of 1,000 or so most commonly used conversational words (http://en.wiktionary.org/wiki/Wiktionary:Frequency_lists)
    • Learn spanish words by associating them to the image they represent, rather than the english translation. (http://www.towerofbabelfish.com/Tower_of_Babelfish/The_Method.html)
    • Use audio to master pronuncian

    Design

    I wanted a flexible way to slurp in a lot of the web's media with very little prior information. I decided that urls to resources was the easiest way to do this. However, many times you cannot eke out the type of media just from the url (e.g. google's speech api).

    So this compiler visits each url supplied and uses the response's content-type to determine how to represent each url. No, this compiler is not meant to be fast.

    The goal of the language is to make it very easy to write automated scripts to generate great flash cards.

    Installation

    npm install flashcard
    

    Usage

    var flashcard = require('flashcard');
    flashcard('hola---hello');

    Language

    ===

    Represents the end of one card, the start of the next

    ---

    "Flips" the card. The back side of the card.

    url

    URL to a media resource. Flashcard currently supports: images, audio, youtube, and regular links to html pages.

    text

    Text is anything that isn't a url. Flashcard this text to markdown and supports code blocks.

    Empty lines don't matter except when you're in a text block (ie. in between paragraphs)

    Example

    hola
    http://fc04.deviantart.net/fs39/i/2008/363/6/4/Wave_Hello_by_8darkened8eclipse8.jpg
    http://translate.google.com/translate_tts?q=hola&tl=es
    ---
    hello
    http://translate.google.com/translate_tts?q=hello&tl=en
    ===
    gracias
    http://us.123rf.com/400wm/400/400/yeyen123rf/yeyen123rf1210/yeyen123rf121000262/15840661-thank-you-blackboard-sign-thank-you-written-with-chalk-on-black-chalkboard.jpg
    http://translate.google.com/translate_tts?q=gracias&tl=es
    ---
    thank you
    http://translate.google.com/translate_tts?q=thank%20you&tl=en
    ===
    

    Compiles to:

    <div class="card">
      <div class="front">
        <div class="text">
          <p>hola</p>
        </div>
        <img src="http://fc04.deviantart.net/fs39/i/2008/363/6/4/Wave_Hello_by_8darkened8eclipse8.jpg">
        <audio src="http://translate.google.com/translate_tts?q=hola&tl=es"></audio>
      </div>
      <div class="back">
        <div class="text">
          <p>hello</p>
        </div>
        <audio src="http://translate.google.com/translate_tts?q=hello&tl=en"></audio>
      </div>
    </div>
    <div class="card">
      <div class="front">
        <div class="text">
          <p>gracias</p>
        </div>
        <img src="http://us.123rf.com/400wm/400/400/yeyen123rf/yeyen123rf1210/yeyen123rf121000262/15840661-thank-you-blackboard-sign-thank-you-written-with-chalk-on-black-chalkboard.jpg">
        <audio src="http://translate.google.com/translate_tts?q=gracias&tl=es"></audio>
      </div>
      <div class="back">
        <div class="text">
          <p>thank you</p>
        </div>
        <audio src="http://translate.google.com/translate_tts?q=thank%20you&tl=en"></audio>
      </div>
    </div>

    Special Thanks

    This was my first attempt at building a DSL. TJ's https://github.com/visionmedia/css-whitespace was really helpful.

    Keywords

    none

    Install

    npm i flashcard

    DownloadsWeekly Downloads

    2

    Version

    0.0.2

    License

    none

    Last publish

    Collaborators

    • mattmueller