Block-based coding - Coding: A Practical Guide - Subject ...

Want to code without typing (virtually) anything? Block-based coding means that instead of typing a coding language, you drag and drop jigsaw- ... SkiptoMainContent LibrarySubjectGuidesCoding:APracticalGuideBlock-basedcoding SearchtheseGuides Search Coding:APracticalGuideBlock-basedcoding HomeIntroductiontocodingCodinglanguagesToggleDropdownBlock-basedcodingPythonHTMLandCSSJavaScriptProcessingandp5.jsGoogleAppsScriptRSpreadsheets?!TroubleshootingyourcodeDesigningforusersVersioncontrol Block-basedcoding Wanttocodewithouttyping(virtually)anything? Block-basedcodingmeansthatinsteadoftypingacodinglanguage,youdraganddropjigsaw-likepiecestogethertobuildthingsusingtoolslikeScratchorThunkable. Howdoesblockbasedcodingwork? Block-basedcodingworksbydraggingtogether'blocks'ofcodetomakeprogramsthatcandothings.Therewillbearangeofdifferentkindsofblocksthatcanbeused,andoftenthesehavehints(aswithajigsaw)onwhichwillfittogether. BelowisanexampleofsomecodefromThunkable,atoolthatallowsyoutomakesimpleapps.Thedifferentcoloursoftheblocksshowtheirdifferentfunctions:theyellowblockisan'event',lookingforwhenabuttonisclicked,andthenthepurpleblockconnectedtoitisasoundblock,andwillplayasoundwhentoldtobytheyellowblock. AnexampleofThunkablecodetoplayasoundwhenabuttonispressed. Featuresofblock-basedcoding WhetheryouuseScratch,Thunkable,oranotherblock-basedcodingtool,theytendtohavesimilarfeatures,mostlybasedaroundcodingconceptsthatyou'llfindintypedcodinglanguagesaswell. Theyalltendtorevolvearoundtwoelements:creatingthevisualinterfacethattheuserwillinteractwith,andputtingtogethertheblocksthatmakeupthecode. Designingtheinterface Whetheryou'remakingagame,anapp,oranythingelse,you'redesigningitwithsomeoneinmind,andthey'llneedawayofinteractingwithit.Thisistheinterfaceandhasdifferentnamesdependingonthetoolyou'reusing:inScratch,forexample,it'scalledthe'stage',whereasThunkableusesdifferent'screens'inamainDesignarea. You'llneedtodesignthevisualsandanyfeaturesthatneedtoexistintheinterface.Thesemightbethingstheuserneedstoclickon(likebuttons),visualelements(likebackgrounds),orcontent(liketext).Thinkaboutwheretheseneedtoappear,whattheyneedtolooklike,andifyouneedtosetanythingelse(likewhetherornottheyappearatfirst). Makingthecoderun Wheneveryou'recreatingcodetomakeacomputerdosomething,itdoesn'tjustknowwhattodo:italsoneedstoknowwhentodoit.Codehastoberun,whichisonewayofsayingthatthecomputerfollowsthoseinstructions,andusuallythisisdonebytellingthecomputeraruleforwhenitshouldrun. Inblock-basedcoding,thistendstobeusingeventblocks,whichareblocksthattellthecomputerwhich'event'mustoccurforthecodetorun.Theseeventsarelikelytobethingsliketheuseropeningtheapp,pressingabutton,orusinganotherfeature. Soyoumighthaveablockthatsays'whenbuttonispressed'andthenyoucanconnectotherblockstoitthatsaywhathappenswhenthatbuttonispressed. Thunkable Thunkableisablock-basedcodingtoolforcreatingsimpleinteractiveapps,suchaslittlegames.Itcanalsobeusedtoaddfeaturesliketext-to-speechandimagerecognition,asithasblockswithspecificfeatures. It'sgoodforprototypingideasandthinkingaboutwhatyoumightneedtomakeanappwork,withouthavingtolearnoneofthecodinglanguagesusedtodevelopapps. It'salsousefulforthinkingabouthowyoumakeanappfunctionalforyourusers,asyoucanlivetestyourappwithinyourwebbrowsertotryoutthefeaturesyougiveit. FullThunkableslidesonGoogleSlides KeyfeaturesofThunkable Thunkablehastwosections:DesignandBlocks. Designiswhereyoucreatetheuserinterfaceforyourapp:whattheuserseesandinteractswith.Dragcomponentslikebuttons,labels,andtextentryfieldsontothescreensandcustomisetheattributesofthesesotheylookhowyouwant. Blocksiswhereyoucreatethecodethattellsyourapphowtofunction.Draganddropblockstogethertoformcode,setsofinstructionsforthecomputer. Whenyou'reworkinginDesign,you'lladdcomponentstoscreens,whicharethedifferentscreensuserswillseeintheapp(abitlikedifferentwebpages).You'llalsoneedtoaddnavigationcomponents,eitherthroughthebuilt-innavigatoroptionsorbycodingbuttonssotheywillgotoanotherscreen. Whenyou'reworkinginBlocks,therearedifferentcategoriesofblocksthatcanbeputtogether.Theshapesandcolourssuggestionwhatkindofblocktheyareandwhichotherblockstheymightbeabletoconnectto. UIcomponentsblocksareonesthatcontrolthecomponentsyouaddedintheDesignsection.Forexample,youmightfindblocksthatallowyoutotellthecomputerwhattodowhenabuttonispressedortogetthetextenteredinatextentryfield. ControlblocksallowyoutocontrolwhatthecodedoesusingcommoncodingcommandslikerepeatingactionsandmakingIFdecisions. Variableblocksarehowyoucancreatevaluesthatarestoredinthecomputer'smemoryandreferencedbytheirname.Thesecanbeanyvalueyouneedtouseagaininyourcode,likeascoreorwhatauserentered. GroupsofblockslikeMath,Text,Lists,andColorblocksarehowyoucanworkwithdifferentkindsofvalues,likedoingcalculations,manipulatingtextandlistsofvalues,andchangingcolours. AppFeaturesblocksallowyoutoaccessmoreadvancedfeaturesforyourapptouse,likegeneratingorrecognisingspeechoraccessingthedevice'scamera. DesigningtogowithourThunkableworkshop,theseexercisesgetyoubuildingadualpurposeappthatcansaywhatausertypesandalsotranslatewhattheytype-withouttypinganycode! Thunkableexercises Scratch Scratchisablockbasedcodingtooldesignedforbeginnersandeducationcontexts,whichallowsyoutocreategames,animations,andinteractivestories. Scratchallowsyoutocontrolthingsonthescreen,suchasgettingthespritetomoveorasoundtoplay. TouseScratch,yousignupforafreeaccountonScratch'swebsiteandthenstartbuildingcodeinyourwebbrowser.Youcancreateyourowncodingprojectsorviewand'remix'otherpeople'stoseehowtheywork. Scratchhassomeofitsowntutorials,oryoucanuseourScratchmaterialsbelowtogetstartedusingit. FullCodingwithScratchslidesonGoogleSlides CodingwithScratchcheatsheet(andguidetoblocks) IfyouwanttotryoutfirstlookingatScratchprojects,tryingoutbuildingone,andthenthinkingupyourownideas,thisScratchexercisesheetwillgiveyouthepromptstomovefromexploringothercreationstomakingyourown. CodingwithScratchexercises Elsewhereonthepage,you'llfindtheresourcesandexercisesforlearningScratchandThunkable,ifyouwanttotryouteitherofthem. Ifyouwanttotryoutblock-basedcodingwithacreativefocus,we'vealsodevelopedasessionforcreatingapointandclickgameinScratch.Workthroughtheslidesandthenusethewalkthroughtocreateagamethatyoucanthenstarttoadaptifyouwant! 'Createagame'slides HowtocreatetheLibraryHuntergameinScratch Whattodonext Onceyou'vehadagolearningScratchorThunkable,youmightwanttobuildmorecomplexthingswiththem,ormoveontoatypedcodinglanguage. Bothtoolshavetheirowntutorials,whichgetharderindifficultyandareworthtryingout.Otherwebsitescanhavefreetutorialsandcoursestoo,sometimesaimedathowtoteachthetoolstochildren. Oryoumightwanttoapplyyourknowledgetoanothercodinglanguage.Checkouttheothercodinglanguagesonthisguideandthinkaboutwhatyouwanttodowithcoding.YoumightwanttofurtheryourgamesbybuildingthemnotinScratch,butinsomethingelse.OnFutureLearnthere'safreecourseonhowtomovefromusingScratchtousingPythonwhichmightgiveyousomeideas. IfThunkablemadeyoumoreinterestedinmakingapps,youmightwanttoresearchonlinewhichcodinglanguagesmighthelpyoumakethekindofappyou'reinterestedin.Lotsofcommoncodinglanguagesarealsousedforappdevelopment. <>