The Temperature Converter



CSCE 101 Lab 3 Calculators: TextBox Input, Label Output, Multiple ScreensAcademic HonestyThe work you turn in is to be your work, not copied from someone else, from the web, or generated by a program.Never allow anyone access to your files.Never give anyone your password.Never share your USB memory or email your files to anyone else.Never give anyone a printed copy of your file or an electronic copy.Never allow anyone to copy your work.Problem Statement In this lab you will be creating an app with a start screen and two other screens, each with a different calculator you can use. The first will be a simple temperature converter calculator. The second will be a calculator that can be used to compute your grade. Part 1: Temperature Converter (50%)This part must be completed in the lab. The files you will upload in the Screenshots section must appear on your X drive during the time slot allotted for your lab. Your instructor will be checking the “Date modified” fields of these files.In this portion, you will create all the screens necessary for your calculator app, along with creating the interface and arranging the blocks for the temperature converter and start/home screen.You will name the project “CalculatorsXY” where XY are your initials. The Layout:In your CalculatorsXY project, change the “BackgroundColor” or “BackgroundImage” property and the “OpenScreenAnimation” property of Screen1. Set them to something you like.Drag over a Label and Two buttons and style them at least as well as the Screen1 screenshot, shown in step 9 (the screenshot on the left), which uses a larger FontSize on the Label and a rounded Shape on the buttons. You can change the Text by changing the Text property.Now, create two more screens with the button. Name them similarly to “GradeScreen” and “Fahrenheit Screen”. Ensure you are in FahrenheitScreen by clicking the drop-down menu to the left of the “Add Screen …”259143544831000 button, clicking on it, and selecting “FahrenheitScreen”. In FahrenheitScreen, you will use a horizontal arrangement to place a Label and TextBox side-by-side.Ensure that the Label is on the left, and the TextBox is on the rightChange the Label text property to “Fahrenheit:”Put a check-mark by the Numbers Only TextBox property Then add a button, two labels in a horizontal arrangement, and then another button. Change the name of the second label to something like “CelsiusOut” using . Finish styling the Fahrenheit Screen as below (the screenshot on the right):32061151492250085598019304000The Coding (Where We Make Stuff Happen):Make sure to start the emulator in order to test your project. (Connect->Emulator)Switch to Screen1, and open the Blocks view.Now you are to make each button open the correct screen by using the block found at Built-In->Control->open another screen The value you set should be just a text block ( ), which is the first block under Built-In->Text. Set its value to the name of the Screen you want to change it to (named as in step 5). Switch to FahrenheitScreen. Ensure you are still in Blocks view.You will now program the “Convert” button on your FahrenheitScreen to do something upon being clicked. When this button is clicked, we want to change the text within the CelsiusOut label.Set CelsiusOut.Text to ( (Fahrenheit-32) * 5) / 9 Note that the set… block can be found among the blocks available when selecting the CelsiusOut label from the Blocks palette.The other blocks you will need (for the conversion formula) are under Built-In->Math.“Fahrenheit” in the formula should be the Text property of the input TextBox.Be careful of order of operations.Program the “Go Back” button in FahrenheitScreen by using the close screen block (Built-In->Control->close screen) in the button’s click event handler. Screenshots:Note: You will have to save two additional screenshots in this lab, compared to labs 1 and 2. You will be capturing the user interfaces and blocks views for both Screen1 and FahrenheitScreen.Go to Designer view in Screen1 your project and select “Screen1” in the Components section. Under Properties, change the text in the Title to show your name instead of “Screen1.”Use the Snipping Tool to take a screenshot of the user interface of your Screen1 screen. That is, use the “Rectangular snip” tool within Snipping Tool to capture the Viewer section in your project’s Designer view. Ensure that your name is present in this screenshot.Name this screenshot “Lab3Screen1UI-XY” where XY are your initials. The file should be in either PNG or JPEG format.Use the Snipping Tool to take a screenshot of your Screen1 blocks code. That is, use the “Rectangular snip” tool within Snipping Tool to capture the Viewer section along with your email address (at the top right of the page, next to your language selection) in your project’s Blocks view.Ensure that your email address is present in this screenshot.Name this screenshot “Lab3Screen1Blocks-XY” where XY are your initials. The file should be in either PNG or JPEG format.Now go to Designer view in FahrenheitScreen and select “FahrenheitScreen” in the Components section. Under Properties, change the text in the Title to show your name instead of “FahrenheitScreen.”Use the Snipping Tool to take a screenshot of the user interface of your FahrenheitScreen screen. That is, use the “Rectangular snip” tool within Snipping Tool to capture the Viewer section in your project’s Designer view. Ensure that your name is present in this screenshot.Name this screenshot “Lab3FahrScreenUI-XY” where XY are your initials. The file should be in either PNG or JPEG format.Use the Snipping Tool to take a screenshot of your FahrenheitScreen blocks code. That is, use the “Rectangular snip” tool within Snipping Tool to capture the Viewer section along with your email address (at the top right of the page, next to your language selection) in your project’s Blocks view.Ensure that your email address is present in this screenshot.Name this screenshot “Lab3FahrScreenBlocks-XY” where XY are your initials. The file should be in either PNG or JPEG format.Place these screenshots in a folder titled “Screenshots” within your “101Labs” folder in your X drive. If this folder does not exist, create it. Make sure all four of the screenshots for this lab are present in this folder.Part 2: Grade Calculator (50%)This part must be completed before the lab’s due date. The file you upload must appear on your X drive before the due date and time specified on your instructor’s website. Your instructor will be checking the “Date modified” field of this file.We will be adding a few components to the user interface of your app. Make sure you are modifying your existing CalculatorsXY project.The Layout, continued:In CalculatorsXY, open the GradeScreen screen.Hint: When designing the user interface for this screen, you have the option of using either:A table arrangement (with 2 columns and 5 rows), a button, a horizontal arrangement, and another button, or5 horizontal arrangements, a button, a horizontal arrangement, and another button.Use your knowledge from previous labs and the hint given in step 3 to make your user interface for the GradeScreen look as belo236093053721000w:(Note that there are two labels in the last horizontal arrangement. One’s text is “Grade:” and the other’s is blank) the TextBoxes (not the labels) so that you can tell which value was actually entered when you are in the Blocks window. For example, the first TextBox could be named something like “HomeworksQuizzes” or “HWQ.”Additionally, rename the label to the right of “Grade:” (the one with the blank text property) to “GradeOut.”The Coding, continued:Make sure to start the emulator in order to test your project. (Connect->Emulator)Make sure you are still in GradeScreen and open the Blocks view.The Blocks code for this portion will be similar to that of FahrenheitScreen, where clicking the “Calculate Grade” button will change the GradeOut label’s text property to the correctly calculated grade.You will now program the “Calculate Grade” button to do something upon being clicked. When this button is clicked, we want to change the text within the GradeOut label.Set GradeOut.Text to (Homework and Quiz Average)*.1 + (Lab)*.3 + (Test1)*.2 + (Test2)*.2 + (Final)*.2 Note that the set… block can be found among the blocks available when selecting the GradeOut label from the Blocks palette.The other blocks you will need are under Built-In->Math.Be careful of order of operations.Program the “Back” button in GradeScreen by using the close screen block (Built-In->Control->close screen) in the button’s click event handler. Submitting Your FileOpen "My Projects" in upper right of the App Inventor WebpagePut a check next to the project you want to download (you can only download one at a time). Download the modified version of your app, if you have multiple copies.Project->"Export selected project (.aia) to my computer"The file will download so go, in Chrome, to the download location by clicking the?arrow next to the file name?at the bottom of the screen and selecting "Show in folder".Move the _______________.aia file to your X:\101Labs directory for grading (or upload). ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download