App Inventor Basic

app-inventor-official-logo

Skill Level: Basic Level

Badges Earned: App Inventor Basic

Description: If you’ve ever used Scratch- you’re in luck. With App Inventor 2, you can create and publish your very own Android App! Quest has its own store in the Google Play store. For this first time, you can get your feet wet, by running a few of the App Inventor tutorials, and testing your app on a real phone.

What you’ll need:

  1. http://ai2.appinventor.mit.edu
  2. http://appinventor.mit.edu/explore/ai2/beginner-videos.html
  3. An Android Phone with the AI Companion App. (if you don’t have this, a student or teacher is bound to have an Android device nearby.
  4. The App for the Android: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=en

Part 1: Get Making! 

Open http://ai2.appinventor.mit.edu and sign in with your Google Account. Choose one of the beginner apps to make over at this link: http://appinventor.mit.edu/explore/ai2/beginner-videos.html. Watch the overview videos, and pause, and start them as often as needed. There are four beginner apps to get moving on, so choose one (or TWO).

Part 2: Finishing Up and Publishing

For this app, let’s not publish it in the Google Play store, but upload the APK file to Google Drive.  To do this, you’ll need to download the .APK File. Go to Build—>  Save .APK to my computer.

Screen Shot 2016-03-30 at 8.52.27 AM

Then go to drive.google.com and upload your .apk file.

In Drive, click on the file, and choose the share icon on the top choices.

skitch

Make sure that “Anyone with the Link” can open the file, then COPY that link. You’ll use that link as evidence for your badge!

skitch-1

Final Step! Create a quick demo video. Use the Google Drive link and the video as evidence of completion! Now you’ll have 2 pieces of evidence!

Estimated Time: One to two class periods.

Some tips along the way: Take video of your final project, and get an instructor to visually check out your project, if you can. Always create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

6c59c6a5c4d25e768e19b4d3eead44f1_13

 

Wearables Basic

Image via Lauren Dehrone on YouTube
Image via Lauren Dehrone on YouTube

Skill Level: Basic Level

Badges Earned: Wearables Basic

Description: For this badge, you’re going to get the LilyPad Arduino up and running. We recommend that you get your Arduino Basic badge FIRST. Go here and get that now. It will really help you grasp what you’re doing with the LilyPad. Basically, you’re going to do do two things here. Upload and run the Blink Sketch on the LilyPad, then you’re going to power the LilyPad independently with a Coin Cell battery. Now let’s get started!

Part 1: Watch this overview, which will take you through this process:

Part 2:  Get yourself over to a PC or Mac to use your Arduino IDE. Things you’ll need: 

  • You’ll also need a standard mini USB cable and an FTDI board.

The FTDI Board looks like this:

LilyPadFTDI

You can use Codebender.cc or the Arduino Software, but you must use a PC or Mac, because the LilyPad requires a special driver for the FTD1 Driver. Once you open either the Arduino software or the Codebender environment, make sure it’s set for LilyPad Arduino w/ ATMega328 and whatever port you’re using on your computer.

On Codebender.cc:

Screen Shot 2016-03-29 at 9.02.54 AM

For PCs, you’ll most likely see COM3 or COM5 as a port. Macs are a bit different.

On Arduino software:

skitch-1

Part 3:  Attach an LED to LilyPad Arduino like this. 

LilyPad-LED-connection

Upload your code to the LilyPad. Copy the code below, and paste it into your code environment. Upload. If the LilyPad LED blinks, it works! 

/*
* LilyPad sample code, blink an LED attached to pin 5
*/
int LED1 = 5; // LED is connected to digital pin 5
void setup()
{
pinMode(LED1, HIGH);
}

void loop() // run over and over again
{
digitalWrite(LED1, HIGH); // set the LED on
delay(1000); // delay for 1 second
digitalWrite(LED1, LOW); // set the LED off
delay(1000); // delay for 1 second
}

Part 4: Adding a Power Supply! 

You can add a power supply with a AA battery box. Watch this video below to see how to unplug from the computer and run your Arduino to make it independent:

 

Final Step! Create your video, and now you have 2 pieces of evidence for your Arduino Basic badge!

Estimated Time: One to two class periods.

Some tips along the way: Take video of your final project, and get an instructor to visually check out your project, if you can. Always create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

7c865707c5d1a0f62c98afeff04c9c79_13

 

Arduino Basic

47185-arduino

Skill Level: Basic Level

Badges Earned: Arduino Basic

Description: For this badge, you’re going to dip your toes into programming the Arduino UNO. You’ll start by simulating programming an Arduino microcontroller. How do you do that? Before you even pick up any hardware you’re going to use 123d.circuits.io and use this free, online tool to create and publish your first Arduino program!

Part 1: Go to 123d.Circuits.io, and Log in with an AutoDesk account. 

This could be your own Autodesk account (or the class Tinkercad Account will work). Log in, then watch this 5 minute walk through.

Part 2: Publish Your Arduino Simulation! 

To earn this badge, you will need to share your Arduino Simulation. Once you are done creating the simulation, name it:

Once you’ve named it, go back to your library, and click on your new published circuit. Copy the URL and SAVE that link. You’ll need that link for evidence of your badge.

Part 3: Now do it for REAL

Now that you’ve created your Arduino circuit, snag an Arduino Kit, and run the software on the device. Your kit should have:

  • Arduino Uno
  • A Breadboard
  • A 220 ohm resistor
  • An LED
  • A few jumper cables

Follow the rest of these directions on the Arduino website. You can also find the code for the Arduino here: https://www.arduino.cc/en/Tutorial/Blink

Part 4:  

Upload your software using Codebender. Plug the Arduino Uno into your Chromebook, and then open Codebender and “Let’s Go.”  You’ll may notice the Blink code is pre-loaded! The challenge with Codebender is the make sure that you choose the correct port on your Chromebook for connectivity. Use this graphic to connect your LED and transistor? (Question: on the LED which one is the positive and which is negative?)

ExampleCircuit_bb

Final Step! Create your video, and now you have 2 pieces of evidence for your Arduino Basic badge!

Estimated Time: One to two class periods.

Some tips along the way: Take video of your final project, and get an instructor to visually check out your project, if you can. Always create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

f968b6a5dea100d401a2f14514758519_13

Minecraft Level 3: Programming Turtles

 

Skill Level: Level 3

Badges Earned: Minecraft Level 3

Description: Level 1 & 2 barely scratch the surface on what is possible with Minecraft. In level 3 you will explore Minecraft Computer Science capabilities using the ComputerCraftEdu Mod.

Background Info: ComputerCraftEdu expands on ComputerCraft adding a Beginner’s Turtle which is simpler to use.

Installing the Mod:

What are Turtles: Check out the trailer below for an introduction to these little robots. Think of them as Spheros for Minecraft!

Programming the Turtles: Click here to view a tutorial series on Beginner Turtles.

NOTE: On video 5 “Taking It Further”, the video mentions the coding editor. This is a preferred method for the more advanced coders as it can be faster to type commands than drag and drop. If it sparks your interest and you want to experience what “real” coding is, you can find a reference of commands available (API – application program interface) by clicking here.

What’s it going to be?

Your job is to brainstorm and find innovative ways to solve a problem using Turtles. As a starting point, think of how we use robots in the real world to solve problems. Then share it! Create a YouTube Screencast of your demo, using Screencastify for Chrome.

As Always, Fill Out a Challenge Proposal

Ideas:  Think outside the box. Who is your audience? Has anyone done this before? If so, how is your idea different? Could this be a service learning project or idea?

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Create a video “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

 

Minecraft Level 3 Badge

Virtual Reality: Create a Virtual Room Using Blender

Image via Wikimedia
Image via Wikimedia

Skill Level: Level 3

Badges Earned: Virtual Reality Level 3

Description: Now- big deal here. You’re going to create a 3 dimensional room using Blender, which is available for PC or Mac. Blender is animation program that allows you to create Hollywood-style special effects with 3D. Now- with Google Cardboard- we can export those experiences, upload them to YouTube for viewing in Google Cardboard.

How awesome is that?

Part 1: Get Your Idea ON! Fill Out a Challenge Proposal

So- you need to create a simulated room- what’s it going to be?  And how is it going to solve a problem? How does Virtual Reality solve problems? That’s going to be your question to help you as you create your Challenge proposals.

Fill That Out Now! 

Part 2: Getting Started with Blender

You’ll need a PC or a Mac, and a GREAT idea! Now that your idea is good, start digging in on the Blender Tutorial. You don’t have to go through the whole thing, if you think you’re getting the hang of it.  YouTube also has some great getting started tutorials, if you want to find one of your own.

Getting Started with Blender (link)

Part 3: Create a Room with Blender

There are many tutorials for Blender, and some are going to be way more complicated than others. Here’s a couple of links that will get you started, but keep in mind- they move FAST. Don’t forget to pause, rewind, and ASK question when to have them.

Blender Architecture Tutorials. Use these to help you create your room. Keep it simple.

Create a Never Ending Room in Blender (subway).  This one moves quite fast, but if you pause, you should still be able to follow along. It’s a little more advanced, but the instructor does explain everything very well.

Part 4: Add some basic animation to your room. 

This tutorial shows you how to create a basic moving ball. You can certainly get more creative, but this should give you the knowledge to get moving on an animation of your own. What will it be?

Part 5: Export Your 3D Animation to for YouTube:

Part 6: Upload to the Quest STEAM Channel- and test it out! 

This is what a final Blender Animation looks like in 3D video:

When you have Google Cardboard, you’ll need to get the app:

Android: https://play.google.com/store/apps/details?id=com.google.samples.apps.cardboarddemo&hl=en

iPhone: https://itunes.apple.com/us/app/google-cardboard/id987962261?mt=8

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Always create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

a2b70e78836494df378afb7b66bafd33_13

 

 

Virtual Reality Level 1: Create Your Own Google Cardboard

Screen Shot 2015-09-07 at 11.55.08 PM

Skill Level: Level 1

Badges Earned: Virtual Reality Level 1

Description: This is going to be so exciting! You get to make Google Cardboard. What is Google Cardboard? Google Cardboard is Google’s VR headset. Virtual Reality! We’re going to put all the components together to make one headset. This will take you through some basic laser cutting too (nice).

Small pre-requisite. You must go and get this badge first. You’ll have to create a simple object on the laser cutter first.

624282b742376feb7edaa1a57727e8d9_13

Part 1: Cardboard Overview

At the bottom if this page, it outlines everything you’ll need to make Cardboard.

Part 2: Cutting Cardboard. 

Before you create anything, fill out a Challenge Proposal. What problem would your cardboard solve? How can you distinguish yours from others?

Now, you’ve got to go back to a PC with Corel Draw and import these files for printing on the laser cutter. Remember that these are in millimeters. Here are your files.  Download this Corel Draw file for use on an Epilog Laser Cutter. 

Part 3: Get Ready to Cut

Set the Epilog for corrugated cardboard.

Part 4: Fold it. 

This will be tricky.You may need to look at our sample. Gather your rubber band and magnets, and you’re almost ready. This video shows you how to fold it:

 

Part 5: What next? 

When you have Google Cardboard, you’ll need to get the app:

Android: https://play.google.com/store/apps/details?id=com.google.samples.apps.cardboarddemo&hl=en

iPhone: https://itunes.apple.com/us/app/google-cardboard/id987962261?mt=8

Part 6: Final part: 

Upload a demo video to the Quest Steam Channel, and talk about how you made this, and what you might use it for.

Discover some 360 degree video here

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Always create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

3967c9b800fad5207a60fced55337607_13

 

Computer Science Level 3: Create a Javascript Interactive

 

Screen Shot 2015-12-11 at 10.20.15 AM

Skill Level: Computer Science Level 3

Badges Earned: CS Level 3

Description: To earn your Computer Science Level 2 badge, you will need to complete one course in Codecademy.com and create an Javascript Interactive. This course is Javascript Basics You can preview the course here. One you’re done, you’ll use Mozilla’s Thimble website to create your choice of a number of Javascript interactives. Upload your evidence of completion for both the course (Codecademy profile link) and link to your thimble project, and you’re done!

[Note: if you already HAVE your Javascript badge- great! All you’ll need to do is go on to Part 2. Woo hoo!

Part 1:

Go to www.codecademy.com, sign up/in with Google, and start your learning adventure- now! Complete the Javascript course- and ask questions along the way. This can be done from anywhere (not just during STEAM time).

Part 2:

Go to https://thimble.mozilla.org/ and sign up (using your Google Account).

Now- choose one of the following fun Javascript interactives to complete:

Back to School Postcard. 

Homework Excuse Generator 

For each of these, to get your instructions, click on the Tutorial tab. It will walk you through each project.

Some tips along the way: Always document your process. Take pictures, screenshots, and video, if you can. Why? We suggest creating a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges.

Now go get your badges!

56fb28287e5241079386c7993349ad14_13  9ea0fddcb46418d2355b20fabb691f50_13

Computer Science Level 2: Create an HMTL Interactive

Screen Shot 2015-12-11 at 10.32.16 AM

Skill Level: Computer Science Level 2

Badges Earned: CS Level 2

Description: To earn your Computer Science Level 2 badge, you will need to complete one course in Codecademy.com and create an HTML Interactive. This course is HTML and CSS  You can preview the course here. One you’re done, you’ll use Mozilla’s Thimble website to create your choice of a number of HTML and CSS interactives. Upload your evidence of completion for both the course (Codecademy profile link) and link to your thimble project, and you’re done!

[Note: if you already HAVE your HTML/CSS badge- great! All you’ll need to do is go on to Part 2. Woo hoo!

Part 1: 

Go to www.codecademy.com, sign up/in with Google, and start your learning adventure- now! Complete that course- and ask questions along the way. This can be done from anywhere (not just during STEAM time).

Part 2: 

Go to https://thimble.mozilla.org/ and sign up (using your Google Account).

Now- choose one of the following HTML / CSS interactives to complete:

Keep Calm on Carry on Remix

Create Your Own Comic

My Six Word Summer Remix

For each of these, to get your instructions, click on the Tutorial tab. It will walk you through each project.

Some tips along the way: Always document your process. Take pictures, screenshots, and video, if you can. Why? We suggest creating a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges.

Earn Your Badges: When you’re done. you’ll earn the badges below:

Now, go get your badges! 

e0b339fcc2d1fc20b16da065523be5c2_137bf43f91cf09c9ca0380f6c4709a5fcf_13

 

Minecraft Level 1: Build Your Own World

Image via http://superminepod.com/
Image via http://superminepod.com/

Skill Level: Level 1

Badges Earned: Minecraft Level 1

Description: Can a Minecraft world solve a problem? Your job is to create one that does. Does it re-create an ancient civilization? Does it recreate a locale that could help firefighters or EMTs find escape routes? Could your Minecraft world use invention to create a solution to a third world problem? 

What’s it going to be?

Your job is to brainstorm, design, and build that world. Then share it! Create a YouTube Screencast of your world, using Screencastify for Chrome.

As Always, Fill Out a Challenge Proposal

Step 1:  Go to MineCraft EDU on a PC, go to the C: drive Minecraft EDU Folder. Start Launcher.

Step 2: From there, click Start Minecraft Edu. Login Mode: Minecraft EDU. Put in your name. Direct Connect.

Step 3: Build! Have fun and ask questions!  You can use circuits in this version of Minecraft- so the ability to be really creative is at your fingertips.

Ideas:  Think outside the box on this one. Think about audience. Who is this world for? Could this be a service learning project or idea?

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Create a video “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

95ba0fa5fba9d7413f4e7405fcaeb7a1_13

Web Development 3: Creating (and Hosting) HTML Pages from Scratch

Screen Shot 2015-09-08 at 10.51.26 PM

Skill Level: Level 3

Badges Earned: Web Development Level 3

Description: Creating cracker jack HTML pages is one thing. Creating and hosting your own website is another thing. For this next project, we’ll create a website, and host it in the cloud. We’ll use Shiftedit for this on a Chromebook.

Before you create anything, fill out a Challenge Proposal.  If you’re creating a website- what purpose will it serve? Who will the audience be?

 

Part I: Log into Shiftedit with your Google username:

https://shiftedit.net/login#

Screen Shot 2015-09-08 at 11.21.44 PM

 

 

 

 

 

 

 

Part II: Create a new “Site.” 

Screen Shot 2015-09-08 at 11.20.06 PM

Part III: Choose Google Drive as a place to save your files. Server Type. 

Screen Shot 2015-09-08 at 11.20.15 PM

The next part will take a while as it brings in all of your Google Drive folders.

Part IV: Create a new Page using HTML. Use the little plus (+) button. 

Screen Shot 2015-09-08 at 11.34.39 PM

Now- this is the challenge. Create your HTML page, and incorporate many of the elements you’ve used before:

  • Images
  • Color
  • Text
  • More that one page
  • Video?

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

3e61fe17fedf9c8397f2e7bac3724f23_15