AppLab

App Lab is a programming environment where you can make simple apps. Design an app, code in JavaScript with either blocks or text, then share your app with Teacher or Student Peers. The big limitations of App Lab, that makes it simple, is that the HTML and CSS are not available to developer/student coder, thus it is not directly transportable to an independent Web server.

To start, please create a code.org account and click the link

Exploring App Lab

  • Go ahead and take a look at the interface, discuss with a partner what features you see.

Console

In the code toolbox click variables and look at: console.log(“message”) Drag this into your workspace. You can change the message if you would like

  • The message does not print in the app. Where does it print?
  • Why would it be useful to have a print statement that the user does not see?

Elements

Make sure you are in design mode and select the elements to drag into the app. Take a look at the changeable attributes of each elements. You can use the workspace to change these manually or you can try to change the attributes with a line of code.

  • In the code toolbox click UI controls. There are multiple functions that can affect the elements. Go ahead and play around with the different elements and see what you can do.
    • Share something interesting you found with your partner.
    • How can you keep track of all the elements you created?

Development and Design Activity

Here are some key requirements for this Activity…

  • Design and Development activity will start by reviewing a running example application
  • After review students will design a quiz, 3 question at a minimum. Be sure that a Development design is ready before you start coding
  • After design students will explore the App Lab programming environment
  • Students will then work in Pair Programming format and alternate in roles of Driver and Navigator.
  • At conclusion, pairs will go through a series of reviews.

Review Running Example

This is an example of an incomplete program.

  • What could you do to improve this program?

Design

Come up with your own idea for 3 question quiz. You will be creating your own quiz with a partner on a topic of your choice. The most important thing you do before coding is to PLAN. Make an outline of the quiz you would like to create before you do any coding, do this in your Blog!!!

  • When you are done:
    • Share your program with the class here
    • Class programs can be found here

Hacks

The Hacks on this assignment is described in the information above.

  • Blog your “design”, “successes”, discoveries, challenges. For “design”, and “successes” try to blog according to Create Performance Task skills and rubric.
    • Program Purpose and Function
    • Data Abstraction
    • Managing Complexity
    • Procedural Abstraction
    • Algorithm Implementation
    • Testing
  • If you finish your quiz early, try coming up with a different concept or idea for an app you think could work within App Lab. Remember to make a plan before you start any coding.