https://github.com/maxpleaner/flashcards
simple html / javascript flashcard system
https://github.com/maxpleaner/flashcards
Last synced: 8 months ago
JSON representation
simple html / javascript flashcard system
- Host: GitHub
- URL: https://github.com/maxpleaner/flashcards
- Owner: MaxPleaner
- Created: 2016-02-17T20:28:24.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-17T21:33:36.000Z (over 10 years ago)
- Last Synced: 2025-01-29T12:15:19.346Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#### Setup
Depends on jQuery and the `flashcards.js` script.
Require these in HTML page and then initialize with:
```html
$(function(){Flashcards.begin()})
```
#### Example
Clone the repo and open `flashcards.html` to see an example.
Note that this includes some styles.
#### HTML elements used by flashcards.js:
`` (section header, preceeds section content)
`
` (section content, contains answers)
`` (answer)
#### Customization
In `flashcards.js`, the following defaults can be changed:
```javascript
{
answerButtonClasses: "p, b",
openallButtonClasses: "p, .openall",
baseClass: ".flashcards",
}
```
#### Understanding the options
For `answerButtonClasses` and `openallButtonClasses`, buttons are
automatically created and put before the specified element on the page.
`answerButtonClasses` elements (`
` and ``) will have "toggle" buttons
automatically added before them.
`openallButtonClasses` elements (`
`, `.openall`) have an `open all` button
added. This button will toggle all of the answers or sections which the
`openallButtonClasses` element contains.
Some examples from `flashcards.html` to explain `openallButtonClasses`:
- The `.openall` contains many `
` sections, and therefore
there will be a button to toggle all of the `
` sections at once.
- For each `
`, a button is added to toggle all the `` elements which
it contains
#### Additional HTML structure to follow
Some struture needs to be followed in the HTML:
- `baseClass` needs to wrap everything
- Section content is the first (`
`) sibling of the section header (``)
- An answer is not linked to a question other than being next to it on the page.
- Some new lines are automatically added after answers.