{"id":20401808,"url":"https://github.com/bpevs/flashcard.js","last_synced_at":"2025-10-25T21:35:08.275Z","repository":{"id":222566563,"uuid":"757755539","full_name":"bpevs/flashcard.js","owner":"bpevs","description":"Tools for building and interacting with sets of flashcards","archived":false,"fork":false,"pushed_at":"2024-07-29T02:30:38.000Z","size":198,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T01:43:36.251Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-14T22:54:22.000Z","updated_at":"2024-07-27T03:46:40.000Z","dependencies_parsed_at":"2024-11-15T04:52:01.152Z","dependency_job_id":"56d8ce9f-68d9-4846-8255-2fa3a9290705","html_url":"https://github.com/bpevs/flashcard.js","commit_stats":null,"previous_names":["bpevs/language_flashcards","bpevs/flashcard-utils","bpevs/flashcard.js"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/bpevs/flashcard.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpevs%2Fflashcard.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpevs%2Fflashcard.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpevs%2Fflashcard.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpevs%2Fflashcard.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpevs","download_url":"https://codeload.github.com/bpevs/flashcard.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpevs%2Fflashcard.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006064,"owners_count":26084026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T04:51:50.489Z","updated_at":"2025-10-11T03:07:50.827Z","avatar_url":"https://github.com/bpevs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flashcard Utils\n\nFlashcard Utils is a set of utilities to make it easier to create apps around study flashcards. It provides structure so that you can focus on content, algorithms, ui, or whatever makes your idea unique!\n\n## Importing\n\n### Deno\n\nIf using **Deno**, you can simply import from [jsr.io](https://jsr.io/@flashcard)\n\n```\nimport { Deck, Note, Template } from 'jsr:@flashcard/core'\n```\n\n\u003cbr /\u003e\n\n### Node\n\nIf using **node.js**, you will have to add jsr to your package.json registries. Add this line to the project's .npmrc file or the global one.\n\n```\n@jsr:registry=https://npm.jsr.io\n```\n\nAnd then install packages via:\n\n```\nnpm install @jsr/flashcard__core\n```\n\n## Examples\n\n### Flashcard code structure\n\n```js\nimport { Deck, Note } from 'jsr:@flashcard/core'\nimport { sm2 } from 'jsr:@flashcard/schedulers'\n\nconst deck = new Deck({\n  id: 'my-fruit-deck',\n  name: 'Fruits in English and Spanish',\n  desc: 'But only the ones I like',\n  content: { fields: ['Emoji', 'English', 'Spanish'] },\n})\n\ndeck.addNote('🍓', { Emoji: '🍓', English: 'strawberry', Spanish: 'fresa' })\n\n// Add templates for different visual representations of a Note\ndeck.addTemplate('Reading', '\u003ch1\u003e{{Spanish}}\u003c/h1\u003e', '{{English}}')\ndeck.addTemplate('Speaking', '\u003ch1\u003e{{Emoji}}\u003c/h1\u003e', '{{Spanish}}')\n\n// If you are building an app that needs card selection, you can\n// use a pre-built scheduler (like Supermemo 2), or make your own!\ndeck.scheduler = sm2\n\n// `getCurrent` here selects a card using the `sm2` algorithm\nconst currCard = deck.getNext()\ncurrCard.answer(2)\n```\n\n### Import Decks\n\nYou can parse various data sources to import your decks, or store them in readable formats. You can also export decks!\n\n```js\nimport { fromJSON, fromTSV, toAPKG } from 'jsr:@flashcard/adapters'\n\n// Import and export from JSON string\nconst resp = await fetch('/my-deck.json').then((resp) =\u003e resp.json())\nconst deckA = fromJSON(resp)\n\n// Import and export from TSV\nconst deckB = fromTSV(\n  `\n  Emoji\tEnglish\tSpanish\n  🍎\tapple\tmanzana\n  🍊\torange\tnaranja\n  🍋\tlemon\tlimón\n`,\n  {\n    meta: {\n      id: 'fruits-veggies-español',\n      name: 'Frutas y Verduras',\n      desc: 'A deck of English/Español fruits and veggies',\n    },\n  },\n)\n\n// You can even export into an Anki deck (but no importing quite yet)\nDeno.writeFile('my-deck.apkg', await toAPKG(deckA))\n```\n\n# Components\n\nWe also have web components for creating your own app! Use them in your Javascript framework of choice.\n\n```jsx\nimport { FlashCard } from 'jsr:@flashcard/components'\n\ncustomElements.define('flash-card', Flashcard)\n\nexport default function MyComponent() {\n  const currCard = deck.getNext()\n  const { question, answer } = currCard.render()\n  return (\n    \u003cdiv\u003e\n      \u003cflash-card\n        question={question}\n        answer={answer}\n        flipped={false}\n        onClick={() =\u003e /* insert logic here */}\n      /\u003e\n      \u003cbutton onClick={() =\u003e currCard.answer(0)}\u003eFail!\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e currCard.answer(3)}\u003eDecent!\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e currCard.answer(5)}\u003ePerfect!\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### More Examples\n\nYou can see more examples [in the examples directory](./examples)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpevs%2Fflashcard.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpevs%2Fflashcard.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpevs%2Fflashcard.js/lists"}