TableofContents

1.1Aboutthisseries1

1.2Gettingsetup2

1.3Creatingaquestion3

1.4Checkinganswers4

1.5Multiplequestions5

1.6Wrappingup6

I'mlearning:AppInventor

BEGINNERAPPINVENTOR

1

ThesecardsaregoingtointroduceyoutoAppInventor.You'regoingtogetthechanceto:

learntobuildappsforAndroidphonesandtablets

buildaquizthatkeepsscoreastheplayergoesthroughit

useanyquestionsandanswersyoulike,maybeaboutyourfavouriteband,asport

youplay,moviesoratvshowyoulove.I'mgoingtodomineondogs(Ilikedogs).

You'llendupwithsomethingthatlookslikethis(thoughyoucanplayaroundwith

coloursandaddingimagestobrightenitupifyoulike!).

1

Ifyouwanttofollowalongwithme,you'rewelcometo,ifnotthenwhereverIhaveadog

themedquestion,you'llhavetocomeupwithyourownquestion,therightanswer,and

someanswersthatsoundright!Ifyou'regoingtomakeyourownquiz,haveathinkabout

thatnowandmaybebrainstormoutsomeideaswiththeotherNinjasinyourDojoabout

whatkindofquestionsyoushouldhave.

2

AboutthisseriesI'mlearning:AppInventor

BEGINNERAPPINVENTOR

2

Onceyou'velearnedthesetechniques,youcanapplythemtocreatemorethanjusta

quiz!Thesesamecodingtoolscanbeusedtomakeacompleteinteractivestory,orto

buildacalculator,orawholebunchofothercoolapps.

3

AboutthisseriesI'mlearning:AppInventor

BEGINNERAPPINVENTOR

3

Beforeyoucandoanything,you'regoingtoneedanaccountontheAppInventorwebsite.

Gotodojo.soy/appinv-startandthenclickonthe"Createapps!"buttonatthetop-rightof

thescreen.

1

ThewebsitewillaskyoutosigninwithaGoogleaccount.Ifyoudon'thaveone,you'll

needtocreateoneoruseyourparent/guardian'saccount.2

OnceyouhavesignedinwithaGoogleaccount,AppInventorwillshowyouoptionsto

eithersetupanAndroiddevice(aphoneortablet)oranemulator(afake,simulated,

Androiddevice)onyourcomputer.

3

YoumayneedamentoratyourDojotohelpyouwiththisnextstep!Dependingon

whatyouhavepersonally,oravailableatyourDojo,youmayneedtoinstalltheemulator,

setupyourowndeviceoraDojodevice,ordonothingatall(iftheDojoalreadyhas

devicessetup).Ifyouneedtodoeitherkindofsetup,clickontheappropriatelinkand

followtheAppInventorteam'sinstructions.Onceyou'vedonethat,comebacktothe

SushiCards.

4

Right!Nowyou'reallsettogo!TimetocreateyourfirstAndroidapp!5

GobacktoAppInventorinyourbrowserandclickonthe"Startnewproject"button,atthe

topleftofthescreen.6

GettingsetupI'mlearning:AppInventor

BEGINNERAPPINVENTOR

4

Callyourproject"MyQuizApp"andclick"OK"7

You'llseeascreenlikethisone,andyou'rereadytogetcoding!8

YoucanseethattheAppInventorDesignerviewisbrokenintofourkeysections:

Palette—fromwhichyoupickthecomponentsyouwillusetobuildyourapp

Viewer—whereyoucanseetheappyouareworkingon,rearrangeandselect

components

Components—whereyoucanseealistofthecomponentsinyourappandtheir

relationshipstoeachother

Properties—whereyoucanseeandchangethepropertiesofthecomponentyou

haveselectedatthemoment

Thereareotherbuttonsandevenanotherview,butthisisallyou'llbeusingrightnow.

9

GettingsetupI'mlearning:AppInventor

BEGINNERAPPINVENTOR

5

First,dragaLabelcomponentintotheviewertouseforyourquestion1

TomakethisLabelhavethequestionyouwanttoaskinitfirstselectitbyclickingonit,

eitherintheViewerortheComponentssection.Now,inthePropertiessection,lookfor

Text(youmayhavetoscrolldown)

ChangethetextintheTextboxtoyourquestion.I'mgoingtogowith"Whatbreedisthe

world'slargestdog?"butyoucanpickanyquestionyoulike.Maybeaskwhatthefirst

songabandreleasedwas,orthescoreinthelastWorldCupfinal!

2

Ofcourse,whatgoodisaquestioniftheplayerdoesn'thaveachancetoanswer?Now

it'stimeforyoutoaddafew!DragfourButtonsfromthePaletteintotheViewer,then

selecteachofthemandchangetheTextinthePropertiessectionsothatoneofthemis

therightanswerandtheotherthreearewronganswers.Beastricky,orasfunny,asyou

likewiththem!

3

CreatingaquestionI'mlearning:AppInventor

BEGINNERAPPINVENTOR

6

Whatyouendupwithshouldlookalittlelikethis:

It'saGreatDane,bytheway!Checkhimout:dojo.soy/big-dog

4

CreatingaquestionI'mlearning:AppInventor

BEGINNERAPPINVENTOR

7

AndroidappsaremadeofScreens.You'vecreatedyourfirstquestionononeScreenand

you'regoingtowanttoaddmore.You'llputthemonnewscreens,butyouneedawayof

keepingscorebetweenthosescreens.Onthiscard,you'llbeaddingaTinyDBdatabase

tokeepthescorein,andsomecodetomarktherightanswer!

1

First,inthePaletteunderStoragefindtheTinyDBcomponentanddragitontothe

Viewer.Youwon'tseeanythingnewthere,butTinyDB1shouldappearinthe

Componentssection.

2

Nowit'stimetostartputtingtogetherthecodethatwillpoweryourquiz!Inthetoprightof

thescreen,clickontheBlocksbuttontoaccesstheblocksview.3

JustlikethepreviousDesignerscreen,thisBlocksscreenhassections:

Blocks—whereyoupickcodeblocks

Viewer—whereyoudragyourcodeblockstoassemblethem

4

CheckinganswersI'mlearning:AppInventor

BEGINNERAPPINVENTOR

8

Therearelotsofkindsofcodeblocks,butyou'rejustgoingtoneedafewofthemfornow.

IntheBlockssection,clickonwhicheverbuttonmatchestherightanswertoyour

question.Forme,itwasButton1.GrabtheWhenButton1.Clickdoblockanddragitonto

theviewer.

5

NowclickonTinyDB1andchoosethecallTinyDB1.StoreValueblock.Dragitintothe

lastblockandthengototheBuilt-inblocksgrabthepiecesfromMathandTexttomake

itlooklikethis:

6

Finally,updatethetextvalueto"score"andthenumberto1,likethis:

Whatyou'vedoneisstoredthevalue1(asinonepointforarightanswer)underthelabel

"score"intheTinyDBdatabase.Youcanpullitbackoutandchangeitonlaterscreens.

Thisway,youcankeepscorethroughouttheapp,nomatterhowmanyquestionsyou

add!

7

CheckinganswersI'mlearning:AppInventor

BEGINNERAPPINVENTOR

9

Nowyou'vegotyourfirstquestionandyou'regivingtheplayerapointforarightanswer.

Toaddanotherquestion,you'llneedtoswitchbacktoDesignerviewandclickonthe

AddScreen...buttoninthetopmenubar.

1

Nameyournewscreenwhateveryoulike.Idecidedtobeunimaginativeandleaveitas

Screen2fornow!2

Yournewscreenwillbeblank.AddaLabelwithyournextquestionandfourButtonswith

answers,justlikeonthelastscreen.DragaTinyDBontoosoyoucangetthatscore

valueyoustored!I'veaskedwhatdogsaremostcloselyrelatedto(it'swolves!)butyou

pickwhateverworksforthequizyou'rewriting.

3

Inthiscase,myrightanswerwasonButton3butthecodetochangethescorehastobe

alittleclevererhere,sinceyou'vefirstgottogetthevalueofscorebeforeyoucanadd1

toitandstoreit.Also,sincetherewillonlybeavaluethereiftheplayergottheright

answeronthelastscreen,youneedtosetadefaultvalueifthere'snothingthere.Soadd

somecodeintheBlocksviewthatlookslikethis(remembertousetherightButtonfor

yourrightanswer!):

4

MultiplequestionsI'mlearning:AppInventor

BEGINNERAPPINVENTOR

10

Great!ButhowdoplayersgetfromScreen1toScreen2?Youneedtogobackto

Screen1andgivethemaway!ToswitchscreensclickontheScreen2buttonandpick

Screen1fromthedrop-downmenu.

5

Now,fromtheBuilt-inblocks,taketheopenanotherscreenscreenNameControlblock

andaTextblockandaddthembelowthescorecode,likethis(ifyou'vechangedyour

screenname,you'llneedtousethatwhereI'veused"Screen2"):

6

Ofcourse,thatonlyworksifButton1isclicked.Youneedtoaddasimplerblockforallthe

otherbuttons(thewronganswers)likethis:7

Bycreatingmorescreens,andaddingthesesamekindsofblocksthatpointtothenext

screeneachtime,youcancreateanendlessnumberofquestions,andkeepscore

throughout!Gomakeoneortwomorequestionscreensfollowingthestepsonthiscard.

8

MultiplequestionsI'mlearning:AppInventor

BEGINNERAPPINVENTOR

11

Nowthatyou'refinishedaddingquestionsandconnectingscreens,youneedawaytotell

theplayerhowtheydid!1

Createonemorescreencalled"ScoreScreen"withnothingbutaLabelonit.Youalso

needtodragtheTinyDBonsoyoucanaccessthescore.2

NowswitchtotheBlocksviewand,usingblocksfromtheScoreScreen,Label1,Text,

TinyDB1andMathsections,putthistogether:3

YoushouldnowbeabletogototheConnectmenuandchoosetheemulatororother

connectiondeviceyousetupfortestingyourapps(youmightneedamentor'shelphere!)

andseehowyourcodeworksrightnow!

4

WrappingupI'mlearning:AppInventor

BEGINNERAPPINVENTOR

12

That'sit!You'vegotaquizthatwillkeepscoreacrossallitspages,nomatterhowmany

youadd,andwilltelltheplayerhowtheydidattheend.Nicework!Checkoutthenext

cardforafewideasonwhatelseyoucandowithwhatyouknownow!

5

Nowyouknowhowtobuildthisquiz,whatelsecanyoudowiththiscode?Onthiscard,

I'mgoingtogiveyouafewideasbutyoucanalwayscomeupwithsomethingcooler.6

Whataboutaninteractivestory?Youcanusethesameblocksyouusetomovefromone

screentothenexttomovearoundscreensbasedonusers'decisions.Youcancreatea

storywhere,forexample,youcandecidetoturnleftorrightataforkintheroad.Ifyou

mapitoutonpaperfirst,youcancreateacomplexbranchingstorywithloadsofdifferent

characters,secrets,andendings!

7

Youcanbuildanappthatgivesinformationondifferentscreens,connectedwithbuttons,

aboutanythingyou'reinterestedin!YoucantryaddinganImagecomponenttothescreen

anduploadingpicturestoo.Icouldbuildanotherdog-themedapp,withpicturesand

informationaboutdifferentbreeds!

8

WrappingupI'mlearning:AppInventor

BEGINNERAPPINVENTOR

13