11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 1/15

ImageOcc2.0addonAddimageocclusioncapabilitiestoAnki

ImageOcclusion2.0UserManualAuthorContact:tmbb@campus.ul.pt

ImageOcc2.0addonAddimageocclusioncapabilitiestoAnki

ImageOcclusion2.0UserManualIntroductionBasicusage

StepbyStepinstructionsMeaningofthebuttons

AdvancedUseAddingImagesfromtheclipboardBeyondRectanglesEdittheimagebeforeplacingthemasksFurtherreading

ChangingDefaultOptionsHelpPlansforthefutureFAQ:

IntroductionThisaddonallowsyoutoaddimageocclusioncardstoAnki.Imageocclusioncardsarelikeclozedeletionswithgraphics.Ingeneral,youhidepartsofanimage,andduringtherepetitionsyoumustguesswhatthehiddenpartis.ImageOcclusionsarediscussedinthesupermemowebsite.

Inpractice,youwilloftenhaveanimagewithlabels,andyouwillhidethelabelswhichyouwanttoguessduringtherepetitions.Becauseanimageisworth1000words(thisarejustoneof38cardsgeneratedatoncefromtheoriginalimage):

Question:

http://www.supermemo.com/articles/flow.htm#Occlusion%20test

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 2/15

Answer:

BasicusageTheaddonisverysimple.Inthenoteeditor,anewbuttonhasappeared,containingthetextImageOcclusion(ignorethecutepanda,thelightningbolticonandthegreyandbluesnowflakesnearthefieldstheyarefromsomeofmyotheraddons.Ifyouarecurious,pleaseseecheckthese:panda,lightningbolt,snowflakes).

https://ankiweb.net/shared/info/45911888https://ankiweb.net/shared/info/491274358https://ankiweb.net/shared/info/2819760111

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 3/15

ToaddnewImageOcclusioncardstoyourcollection,clickthatbutton.Youwillbeaskedtochooseanimagefiletogeneratecardsfromit.Choosethefile,andanewwindowwillappear,withanimageeditorcontainingtheimagereadyforyoutoedit.YougenerateImageOcclusioncardsbydrawingshapes(ormasks)overtheoriginalimage.Thereareseveralshapesyoucandraw,andyoucangroupshapestogethertocovernoncontiguouspartsoftheimage.Inthevastmajorityofcasesyouwillwanttouserectangles.

Let'sseehoweverythingisprocessedfromthebeginning:

StepbyStepinstructions

1Openthenoteeditor(byclickingAddinthedeckbrowser,forexample)

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 4/15

2ClicktheImageOcclusionbutton

3Choosetheimagefileyouwanttouse(IchoseanimagefromNetter'satlas,depictingadeepdissectionofthemusclesofthethigh).

Youcanalsouseanimagefromtheclipboard.

4Animageeditorwillappear.

Besidesshowingtheeditingarea,thecurrentversionallowsyoutosupply(optionally,ofcourse):

1.Header:isshownabovetheimageswhenstudying2.Footer:isshownbelowtheimagewhenstudying3.Tags:areaddedtothenotes.ThisishowyousupplytagstotheImageOcclusioncards.Changingthetagsintehnoteeditordoesn'taffectthetagsoftheImageOcclusioncards.

Youcanalsoselectthedecktowhichyourcardswillbeadded,byclickingthebuttonatthebottom.ThisbuttonworksjustliketheChooseDeckdialogintheAnkinoteeditor.

Theseimagesdon'tshowthesefeaturesbecausetheyarefromthepreviousversion.Theyhavenotbeenupdatedduetolackoftime.

http://www.amazon.com/Atlas-Human-Anatomy-Student-Consult/dp/1416059512

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 5/15

5Youcannowstarttodrawrectanglesoverthelabelsyouwanttohideinyourimage.

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 6/15

6Theinitialtoolistherectangletool,soyoucanstartdrawingrectanglesrightaway.Therectanglesareinitiallysettowhite,butthecolorcanbechangedinthecolorpanelinthebottomofthescreen.Therectangletoolismarkedwithanarrowinthefollowingscreenshot:

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 7/15

7Repeatforalllabels

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 8/15

8Nowthatalllabelsarehidden,youmustaddthecardstoAnki.Toaddthecards,youclickoneofthefollowingbuttons(theirmeaningwillbediscussedlater):

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 9/15

9Atooltipwillappeartellingyouhowmanycardshavebeenadded.

Congratulations:youhaveaddedyourfirstimageocclusionnote.

MeaningofthebuttonsTherearetwobuttons:

1.Nonoverlapping (Mnemonic:noticethatthetwoshapesdon'toverlap)

2.Overlapping (Mnemonic:noticethatthetwoshapesoverlap)

NonOverlappingThisbuttoniscallednonoverlappingbecauseitgeneratescardsinwhichthereisnooverlappinginformation.

Thisisbecausethequestionsideofthecardshidesalllabels,hidingthelabeltheuserissupposedtoguessinadifferentcolor,andtheanswershowsonlythatlayer(andnoneoftheotherlayers).Thisisthesameasshowingaclozedeletionsentencewithallpartshidden,whileaskingonlyforoneofthem.Forexample:

Question:

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 10/15

Answer:

OverlappingThisbuttoniscalledoverlappingbecauseitgeneratescardsinwhichthereisoverlappinginformation.Thisisbecausethequestionsideofthecardsshowsalllabelsexceptfortheonetheuserissupposedtoguess,andtheanswershowsalllabels.Thisisthesameasshowingaclozedeletionsentencewithonlyoneclozefortheusertoguess.Forexample(comparewiththepreviousone):

Question:

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 11/15

Answer:

WhichonedoIuse?Thatdependsonthematerialyou'readding,aswelasyourpersonalpreferences.

Ibelievethatforimagesthatconsistofadrawingwithsomelabelspointingtopartsoftheimage,nonoverlappingimageoclcusionisbetter,becauseitdeprivestheuserofcluesthatmighthelphimtoanswertheanswercorrectlywithoutbeingreallysure.Auserthatcanseealllabelsexceptforonemighteasilybeabletoguessthemissingone.Despitethisconjecture,Ihavenodatashowingthesuperiorityofeithermethodinthissituation.

Inimageswherecontextiscritical,likeadiagramrepresentingabiochemistrycycle(e.g.Krebscycle),inchichthecompoundscomeoneaftertheother,youhavetouseoverlappingimageocclusion.Youcan'tguessthethatalabelishidingcompoundB,forexample,unlessyoucanseethatitcomesfromAandbecomesC.

HereisanexampleofoverlappingimageocclusionbeingusedonadiagramoftheKrebscycle:

Question:

http://en.wikipedia.org/wiki/Citric_acid_cycle

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 12/15

Answer:

Withnonoverlappingimageocclusionyouwouldhavetomemorizetheplaceoffumaricacidinthisspecificdrawingofthecycle.Withoverlappingimageocclusion,youhaveonlytomemorizewhichcompoundcomesfromsuccinicacidandturnsintomalicacid,whichisexactlyourgoal.

AdvancedUseAddingImagesfromtheclipboardIfyouhaveanimageintheclipboard(ascreenshot,forexample),whenyouclicktheImageOcclusionbutton,theaddonwillnotaskyouforafilename,andwillusetheimageintheclipboard.Theimagewillbeclearedfromtheclipboardimediatelyafterappearingintheimageeditor.Ifclearingtheclipboardisinconvenientforyou,dropmealineandIwillmakethiscustomizable.

BeyondRectanglesAlthoughthepreviousdiscussionusedrectanglesasanexample,youcanuseanykindofshapes,orevenagroupofshapestohidepartsoftheimage.Usingagroupofshapesmightbeusefulifyouwanttohidetwononcontiguouspartsoftheimage.Seethislinkforaturorialontheuseoftheeditor,whichincludesinstructionsonhowtogroup/ungroupobjects.

HereisanexampleofusingagroupoftworectanglestohidetwodifferentchemicalcompoundsintheKrebscycle:

Question:

http://ehmdunque.altervista.org/i-informatica/manuali/Short_intro_SVG-edit.html

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 13/15

Answer:

WhydidIchoosetohidethematthesametime?Well,anyonewhoknowssomebiochemistryknowsthatifyouseeNAD+inonesideofachemicalreaction,NADHwillappearontheotherside(notalways,butincrediblyofteninhumanmetabolism).Ifyouareshownoneofthem,guessingtheotherrequiresnoknowledgeofthespecificchemicalreactionyouarestudying.WewanttotestourknowledgeoftheKrebscycle,andnotwhetherornotweknowabasicruleofthumb,andsowehidebothcompundsatthesametime.Becausethesetwocompoundsaresocloselyassociatedatthisstage(tounderstandtheKrebscycleyouneedtoknowthebasics,namelywhatNAD+andNADHare),thepairworksasasinglechunk,andwearenotcontradictingtheminimuminformationprinciple.

EdittheimagebeforeplacingthemasksYoucanedittheimagetobeforehidethemasks.Theeditorcontainsasidepanelnamedlayers.Ifyouclickthewordlayers,itwillappear.Bydefault,theShapeslayerisactive,whichmeansthatwhateveryoudrawisinterpretedasamasktohidepartoftheimage.

http://www.supermemo.com/articles/20rules.htm#Build%20upon%20the%20basicshttp://www.supermemo.com/articles/20rules.htm#minimum%20information%20principlehttp://en.wikipedia.org/wiki/Chunking_%28psychology%29

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 14/15

However,ifyouselectthePicturelayer(byclickingit),youwillbeabletodrawovertheimageinawaythatisnotinterpretedasmaskshidingtheimage.Whenyouwanttodrawthemasks,youjustselecttheShapeslayeragain.

FurtherreadingFordocumentationonhowtousetheeditor,seetheofficialwebsite.

ChangingDefaultOptionsAsofthecurrentversion,youcanchange:

thedefaultcoloroftherectanglesintheeditor[defaultvalueiswhite].Pleasenotethatyoucanalsochangetherectanglecolorintheeditoritself.

thecoloroftherectanglethatappearsinthequestion[defaultvalueisred,asintheexamplesshown].Youcan'tchangethisoptionintheeditor.Tochangeconfigurethisoptions,gototheTools>ImageOcclusion2.0(options)menu,asshowninthepicture:

Thefollowingwindowwillappear:

http://code.google.com/p/svg-edit/

11/3/2015 ImageOcclusion2.0

http://tmbb.bitbucket.org/imageocclusion2.html 15/15

ClicktheChooseColorbuttons,andyouwillbepresentedwithacolorpalettefromwhichyoucanchooseacolor.

HelpYoucanaccessthishelpfromthehelpmenuofAnki'smainwindow:

PlansforthefutureBeingabletoupdateimageocclusionnotes,whilepreservingsomeofthereviewhistory.Suggestionsareacceptedanddeeplyappreciated.

FAQ:Whatisthiseditoryou'reusing?itissvgedit,ajavascripteditorthatisavailableintheofficialwebsite.Noneofthecorecodehasbeentouched,andonlyanextensionhasbeenwritten.

Whereistheplacetogotoknowmoreaboutthiseditor?Youcangototheofficialwebsite.Itcontainslotsofdocumentation,andcangiveyouideasonhowtousethefullpowerofsvgedittoyourimageocclusionworkflow(Ihavetosaythatinmyopinionmostofthetimenothingbeatstheoldrectangle).Thistutorialisalsoveryhelpful.

Sometimes,theeditorrefusestoappearcorrectly.Why?Pleasemakesureyouhavethemostcurrentversionoftheaddon,whichyoucandownloadfromtheankiwebpage.

CanIaddimagesfromtheclipboard?YESYOUCAN!:)

Ihaveanotherquestion!Contacttheauthor:tmbb@campus.ul.pt

ProjectismaintainedbytmbbPageusestactilethemebyJasonLong(slightlymodifiedbytmbb)

http://ehmdunque.altervista.org/i-informatica/manuali/Short_intro_SVG-edit.htmlhttps://bitbucket.org/tmbbhttps://twitter.com/jasonlonghttp://code.google.com/p/svg-edit/http://code.google.com/p/svg-edit/https://bitbucket.org/tmbbhttps://ankiweb.net/shared/info/282798835http://tmbb.bitbucket.org/bak/ImageOcc2.0-gh-pages/English.html#clipboard