Beginner App Inventor Sushi Cards

  • CoderDojo Foundation

    Hi everyone! We’ve just released the Beginner App Inventor Sushi Cards. These are aimed to tie in with this month’s CoderDojo Girls focus as they’re aimed at both a platform (mobile apps) and a style of coding (narrative-driven) that have historically been popular with girls in the movement. Check them out and let us know what you think!

  • Hi, Steve from the Ashbourne Dojo here. First post in the forums :-O

    Given that these Sushi Cards relate to a quiz app I just thought you might be interested in a quiz web app I developed. I tried to keep it simple as I could so there’s no responsive media queries or funky-looking HTML meta data etc. The live link is on Mozilla Thimble [] … and the code lives at []

    If you’re on a monitor the Thimble build was designed and is best viewed in Chrome Dev Tools view with iPhone 6 as the viewing device. Feel free to download and mess about with the GitHub code if you like (it’s a remix of a Decoded tutorial anyway…)

    The MIT Sushi Cards look great by the way. I’m quite interested in these as I use App Inventor a good bit for teaching Mobile Technologies QQI modules…I’m gonna work through the Sushi Cards with my daughter (10) sometime this week and see how we get on. She already has some questions written about her favourite TV shows :-)

  • CoderDojo Foundation

    @Steve-Kinsey Sounds great Steve. I checked out your quiz web app. It works great, but I clearly need to revise my knowledge of capitals :laughing:

    Definitely let us know how your daughter gets on with them. You might also be interested in checking out our guide for parents/guardians, aimed at supporting CoderDojo Girls. Let us know what you think and if you have any feedback or tips to improve it :)

  • @Nuala-Nic-Éil Thanks for the feedback Nuala, much appreciated :-)
    As for revising your knowledge of capitals, I deliberately included lesser-known / tricky capitals rather than the more obvious ones. There’s no restrictions on downloading the files from the public GitHub repository I linked though so anyone is welcome grab the files and can then easily edit the HTML in Notepad++ or Brackets or whatever to change the questions, answers and even subject to suit any audience age group or topic. All the colours, fonts, sizes and other style settings can also be easily edited from the CSS file without messing with the overall JavaScript functionality of the app.
    I need to tidy up and simplify the CSS file a little but other than that it’s pretty-much cooked.
    I also want to recreate this quiz app in MIT App Inventor as at the moment I use the web app with my QQI Level 5 class here in Whitehall College but would like students to then progress and develop the same quiz app in MIT and ultimately Android Studio at QQI Level 6. Developing the same project as a web app using Notepad++ / Brackets, then as an actual app using MIT and then stepping up to the fully-fledged / industry standard Android Studio IDE would be great…
    The level 5 students really get a kick out of uploading their app and getting it ‘live’ via Mozilla Thimble, which I think is a great resource that could potentially offer a lot for us at CoderDojo IMO. Being able to actually get a functioning URL for web sites and/or web apps without all the hassle of sorting domain names and hosting is great, I think our kids would really buzz off actually getting their web design work on a functioning ‘live’ URL, and thankfully the whole process and user interface is extremely simple, clear, intuitive and user-friendly. Brilliant resource (although not being able to share Mozilla Thimble URLs on Facebook is a bit annoying tbh).
    Anyway, this is turning into a bit of a book so I’d better stop.
    I’ll hopefully work through the new MIT stuff with my daughter over the weekend and will have a look at the parents/guardians guide too.
    Thanks again Nuala

  • @Nuala-Nic-Éil So my daughter and I had great fun working our way through the new Sushi cards, they worked very well :-) Admittedly some parts were quite challenging for her and I had to give her a few pointers, but she stuck at it and was delighted to get her quiz app working. She now wants to add some more questions and add some nice colours and what have you, so the fact she wants to return and add to her quiz shows that the Sushi cards worked…

    One thing she really enjoyed was using the little Backpack feature in Blocks view. It looks kinda cute, is easy to use and is actually extremely useful for an app such as this where there are many similar blocks of code on, for example, answer buttons.

    After running her app for the first time she also thought that a button to restart the quiz would be good, so we just added a button to ScoreScreen which whebn clicked uses the .ClearTag TinyDB block (so the ‘score’ variable gets wiped on quiz restart) and then loads Screen1. A useful addition I thought, and only a few blocks (even less if you use the .ClearAll block, which would do the trick too).

    Anyway, all good and a very pleasant evening coding with my lovely daughter so many many thanks.

  • @Nuala-Nic-Éil In terms of actually using MIT as a teacher/mentor there are a couple of things I’ve found really useful. Firstly students seem to really enjoy using a QR Code Reader to both connect the AI Companion and/or Build using the QR code. It’s only a little thing, but it just adds to the buzz of building and installing on an actual hardware device (which if at all possible I would say is far more rewarding and fun than using an emulator).

    The other thing would be Mobizen, which is an absolute gem for casting your Android screen to desktop to data projector. Free, Windows or Mac (Beta version at the moment for Mac but it works a treat) and easily the smoothest Android screen mirror out there (I’ve tried them all at this stage).

    Might not be so relevant to Dojos but with more advanced MIT classes that I’m prepping for a step up to Android Studio I also use a Java IDE (Netbeans / JCreator / Eclipse etc) and ask learners to replicate elements of their MIT back-end / blocks in simple Java Classes. These are standalone and don’t link in any way to the MIT app, but are a good way to encourage moving from drag and drop blocks-based programming to text-based IDEs. The programmatic thinking and logic that MIT Blocks fosters is fantastic though, I think it’s a great resource.

    Oops, speak of the devil, Java class at 4 o’clock, better run…

  • Hi Philip,
    I tried out the app beginners sushi card myself yesterday. I am an absolute beginner with respect to App development and worked through the steps and delighted with myself for my app creation ( I used your example). I used the emulator and I think this could cause confusion, it I was to predict issues in the session, but I got it solved. The next time I will try to use an android device.
    I will introduce this to my ninjas as a follow on to the HTML activity they are doing at the moment. They have been coding a quiz website and I think the app development would be a great progression especially as they have the content established. Thanks!

  • CoderDojo Foundation

    @Steve-Kinsey Hey Steve, thanks for the suggestion regarding using the QR code. At our Dojo the kids actually do build using a QR code and try it out & show it to others using android devices. We purchased two cheep phones for the Dojo so that those without android phones/devices, or those who don’t want to use their personal devices can use the Dojo ones.

    @Philip-Harney wanted to prioritise the emulator to keep it as accessible as possible, as the emulator is free, but android devices are not.

    Mobizen looks really cool, I actually would love to try it out with my own phone but there is no windows app available :face_palm_tone1:

    Regarding the Java IDE; That sounds interesting, always cool to hear of good ways to encourage other kids to move on from drag and drop blocks-based programming to text-based IDEs. I know it is something a lot of children and therefore Dojos are interested in. I’ve heard IDEs can be counter-intuitive to learning Java though if people don’t already have a good grasp of it.

    Anyone else have any experience using a Java IDE (Netbeans / JCreator / Eclipse or other) in a Dojo setting ?

  • CoderDojo Foundation

    @Amanda-O-Keeffe that is great to hear that you got on well with it :D @Philip-Harney will be delighted! I’m very excited to hear how the ninjas get on. Yea I really think if you have android devices that the kids are more engaged as they can show it to others on their phone/device and they love the novelty of using QR codes and their app being linked to it. :)

    Are there many ninjas from your Dojo planning their Coolest Projects ideas yet? :slight_smile:

  • @Nuala-Nic-Éil Hi Nuala. Cheers for the reply. Sorry to hear there’s no Mobizen for Windows phones, it really is a great bit of kit! As for IDEs and encouraging kids to move on from drag and drop blocks-based environments, particularly in a Dojo setting…I haven’t used Netbeans, JCreator or Eclipse in a Dojo, only in work with older age group PLC learners. I wouldn’t see them as being the ideal next step from a drag and drop coding environment such as Scratch or MIT App Inventor anyway to be honest. There are far better stepping stones out there IMO. I’ve been using the Arduino IDE with great success in the Ashbourne Dojo lately. It’s a very user-friendly and lightweight IDE compared to the likes of Eclipse etc, easy to work with and I’ve found that because the kids are using their code to actually make stuff do stuff on circuits they’ve put together themselves the code just makes more sense to them. After working through a few basic Arduino sketches and circuits it becomes very easy to pinpoint what certain bits of code are actually doing, getting around your very valid point about the counter-intuitive nature of heavier and more bloated full-on Java IDEs like NetBeans, JCreator, Eclipse etc. Nine times out of ten when we look at code on the data projector and I ask “Which line of code is turning the LED on? Which line is turning it off?” etc, they know, they get it!
    I’ve been doing a lot of prep work with BBC Micro:Bit boards lately too, and think these could be an amazing resource for Dojos…gonna test drive them in the Ashbourne Dojo real soon. For one thing the boards are much cheaper than Arduino (I’ve picked up 8 so far on eBay, working out at around €15 each), they have electronics components and sensors surface mounted on the board so learners can make stuff do stuff right out the box (there’s a 5x5 LED matrix, 2 push buttons, compass, accelerometer…) and there’s a really professionally done support site with a comprehensive set of fun lessons to work through and a variety of code-based editors ranging from blocks right up to full text MicroPython. I’ll be using the lovely little Mu MicroPython code editor in the Dojo though…it’s even more user-friendly than Arduino IDE and is styled with a minimal amount of big chunky toolbar buttons to work with, aimed squarely at (young) beginner programmers. In fact I’d say that these Micro:Bit boards, the support site and the Mu code editor are perfectly-tailored for our Dojo age group…I genuinely think there could be a lot in these little board for us!
    Is anyone else out there in DojoLand using these Micro:Bits?
    Anyway, gotta run…cheers Nuala

  • @Nuala-Nic-Éil Oh, before I go…the MIT Sushi Cards came in very handy putting together the App Inventor version of my capitals quiz app (GitHub link at the end), particularly regarding using a database to deal with score data. There’s ten question screens in here with a score tally element at the bottom of each screen. I also added a start screen, finished / final score screen and an answers screen.
    Interestingly I discovered that when you get past 10 screens App Inventor warns you that you have exceeded the allowed number of screens! You can still add screens however but are advised to download / export versions of your .aia file as you go just in case something goes wrong. Thankfully nothing went wrong but saving versions is sound advice and a good habit to get into I reckon. The only thing I did notice was that as you go past ten screens previewing and live editing gets a little more sluggish, I guess as you’re working App Inventor a little harder than normal, but it wasn’t too bad and once the finished app was properly installed on my Android phone it worked perfectly :-)
    Anyway, as always if anyone wants to use, change, break and/or generally mess about with this MIT project then please feel free…that’s kinda what it’s there for. I’ve also linked a little distance converter and compass app I put together to play around with using an OrientationSensor component :-)

    (as it says in the GitHub readme file, just download the .aia file and then in your MIT account ‘Projects’, ‘Import project (.aia) from my computer…’)

  • CoderDojo Foundation

    @Amanda-O-Keeffe Great to hear you got through them It is easier to use an Android device if you have one to hand, and I do point out both options, but I don’t want to push the use of an Android device over the emulator as they cost money that many Dojos/Ninjas may not have. If it’s any consolation, I actually developed the series mostly using the emulator and found that it was slow, but perfectly serviceable.

  • CoderDojo Foundation

    @Steve-Kinsey Yeah, using multiple screens for this kind of app isn’t exactly optimal. Really, it should be one screen and some code that cycles the questions and answers out of a database or a list. I made the decision not to show that method as it requires too many concepts (arrays, loops, potentially linking information across multiple arrays, or using objects or associative arrays) that are above a Beginner level.

  • @Philip-Harney yeah that would all be a bit much for a beginner group for sure. To be honest though aside from the warning box that pops up when you create any new screen after your tenth and a (very) slightly more sluggish preview / live edit process it was absolutely fine going past ten screens. A bigger issue was managing and formatting 13 screens, but again not too much of a headache provided you work in a logical and organised way.

    I employed a ‘cycle through questions’ technique in the web app version of the quiz linked below, but no database, just JavaScript / JQuery .hide and .show controlling which questions are hidden or shown on screen…

    Cheers Philip :-)

  • @Steve-Kinsey Hi Steve, I saw you mention Microbits, I’ve got a few here and I am tinkering with them. Find them a lot of fun and the buttons and LED matrix make for some good use. I have to explore the site and the content a little more but will update once I do this.

  • @Pete-O’Shea Hi Pete. Yeah, love the Micro:bits!!! From a teaching and learning perspective the amount, quality and depth of support activities on the site is fantastic. I’ve worked my way through all of the activities and documentation at this stage and there’s tonnes on there that we could use in our Dojos IMO. I didn’t try out any of the online editors at the site as I went with the Mu code editor, but I like the way they have a number of different options ranging from blocks-based right through to text and even a touchscreen-friendly option. They really did a great job all round, kudos to BBC and Microsoft, played a blinder.
    I haven’t used the Micro:bits in the Ashbourne Dojo yet as I’m focussing on Arduino at the minute, but will bring in the Micro:bits shortly and get busy.
    I’d love to know how you get on if you start using them yourself in the meantime though :-)

Log in to reply

Looks like your connection to CoderDojo Forum was lost, please wait while we try to reconnect.