App Inventor: Lab 2 – Simple Calculator

Download 16.91 Kb.
NameApp Inventor: Lab 2 – Simple Calculator
A typeDocumentation

Name: ____________________________ Date: _________________________

App Inventor: Lab 2 – Simple Calculator

A. Notes

Developers often need to modify both text and numeric data.
Number Systems
Numeric data is represented using the binary (base 2) number system within every computer. Since binary numbers of any significant value require a large number of digits we represent numeric values using base 10 or decimal numbers within App Inventor instead of using binary numbers.
Math operators
Every programming language provides a base set of math operators. The basic math operations can be found in the Math drawer in the Blocks Editor.
It is important to remember that the fundamental Mather operation order of precedence applies in App Inventor.
BEDMAS – Brackets, Exponents, Division, Multiplication, Addition, Subtraction

In App Inventor we use nested blocks instead of brackets. This will become more important in later labs.
Text operators
The App Inventor text methods are located in the Text drawer in the Blocks Editor. New strings can be created using App Inventor text methods (join or make text). There are many other methods available that you may wish to explore.

B. Learning Objectives

In this lab you will learn how to use:

  • Components

    • Basic

      • TextBox – obtain input from users

      • Label – display output to users

    • Screen Arrangements

      • VerticalArrangement – position GUI components vertically

      • HorizontalArrangement - position GUI components horizontally

      • TableArrangement - position GUI components in a grid / table

    • Other Stuff

      • TextToSpeech – convert text to speech for output to the user

  • Blocks/Methods

    • Math library

      • addition / subtraction / multiplication / division

    • Text library

      • make text – alternative block for joining any number of text strings

C. Application Description

This project involves designing a simple calculator. Input will be provided as two (2) different text boxes for the numbers being evaluated.

The user should be able to perform addition, subtraction, multiplication and division operations.
When the operation button is pressed the following output should be given:

  • answer should be displayed on the screen

  • answer should be spoken "The answer is "

  • operator should be displayed (+, -, X, ÷)

Screen Arrangements

GUI component placement can be controlled using the Screen Arrangement components (HorizontalArrangement, VerticalArrangement or TableArrangement). To place components in fixed locations you should:

  1. drag the appropriate screen arrangement component onto the viewer

  2. drag the GUI components within the arrangement as needed.

TextToSpeech (Output)

To use the TextToSpeech feature you must add a Non-GUI component to your application (use the Component Designer to add the component to your project).
Example: This block shown above would simply speak the phrase "Hello everyone."


Your first steps for the project should include the design of your user interface. A sample screen layout and set of components are given below.

D. Tasks

Development typically follows many cycles of design, code, and test.

Complete each of these phases.

Phase 1

Implement the Add/Subtract operations using 2 different textboxes for input values and test your application.

Phase 2

Add the features for Multiplication and Division.

Phase 3

Add a feature to have the result spoken to the user.

When you have completed all three (3) phases you may submit your application for evaluation.

08-2012 Page of

Share in:


App Inventor: Lab 2 – Simple Calculator iconAndroid App Inventor Chapter 4 Lab

App Inventor: Lab 2 – Simple Calculator iconSchedule for App Inventor Workshop

App Inventor: Lab 2 – Simple Calculator iconSchedule for App Inventor Workshop

App Inventor: Lab 2 – Simple Calculator iconA laboratory (ex: calculator based lab involving Boyle’s Law concepts)...

App Inventor: Lab 2 – Simple Calculator iconSigning app Note: signing the app is only necessary when you intend...

App Inventor: Lab 2 – Simple Calculator iconDownload the app To get started, make sure you are using an iPhone...

App Inventor: Lab 2 – Simple Calculator iconSpring mvc hello World to Simple Forms and Simple Servlets

App Inventor: Lab 2 – Simple Calculator iconDescription of Product: Outlook Mobile app for ios is the business-class...

App Inventor: Lab 2 – Simple Calculator iconBlind Square is a combination Point of Interest poi and basic navigating...

App Inventor: Lab 2 – Simple Calculator iconIs the app name that appears to users. For this project, use "My First App."

forms and shapes

When copying material provide a link © 2017