Image Occlusion in Browser v3

Create image occlusion in browser for Desktop and iOS devices v12 or later.

Anki Image Occlusion app used to create normal and combine cloze anki cards for reviewing and studying flashcards in Anki software (spaced repetition flashcard app). Anki decks created using genanki-js, sql.js, FileSaver.js, JSZip and svg.js JavaScript library. It creates ready to import decks for Anki and AnkiMobile.

Use version 3 of this project because version 1 and version 2 of this project deprecated. Read more

QuickStart

Open following website in browser and start creating image occlusion decks.

https://krmanik.github.io/image-occlusion-in-browser/v3/index.html

Anki Occlusion for AnkiDroid source code and apk moved here https://github.com/krmanik/Anki-Occlusion.

Create Anki decks in five steps

1. Select image to editor window
2. Draw rectangles, ellipses, polygons or textbox
3. Add notes to decks
4. Download the decks
5. Import in Anki

Tutorials / Features

• Create image occlusion anki deck inside browser
• Download ready to import deck
• Create multiple cards in same deck
• Create rectangles
• Create ellipse
• Create textbox
• Create polygon
• Create normal cloze
• Create combine cloze
• Change color of masks
• Undo / Redo feature

Demo

Faq ?

How to change question and answer rectangles mask color?

Go to settings and put valid hex color.

View hex color example https://www.materialpalette.com/colors

How to group cloze with different color?

1. Draw rectangles
2. Go to settings and change question mask color
3. Click top right image button, then click rectangles. It will change rectangles color. The rectangles with new color will be added to list.
4. Again click top right image button to stop adding rectangles to list.
5. Click done to add data to AnkiDroid.
6. Repeat from step 2 to step 5 for creating group cloze with different color.

How to group cloze with different color in same cloze ?

1. Draw rectangles
2. Select group cloze button (top right) add rectangles to list.
3. Change question mask color from settings
4. Select more rectangles to list
5. Finally click done button to add notes data to AnkiDroid

View demo

How to view version 1 and version 2 of this project?

View version2.md

Contributions

This is implemented using javascript. It has bugs and issues. Any contributions to improvement of codes and features will be appreciated.

View updates

Changelog.md

License

View License