Unit 6
MAD-LEARN 2021
Mobile App Development

Discovery
Purple  #9200fb

https://mad-learn.com/
Part 3: Adding & Linking Different Mad-Learn Screen Templates

​STEP 13: Create Inner Menus & Screens in MAD-Learn. Using your information from your outline or your mind-map, you will be adding inner menu screens and inner screens.  

This part is tedious and requires attention to detail. You will be on this step for up to 2 to 3 hours or more maybe. 
Every Screen Template is slightly different, and you will need to understand what each one is for and use it accordingly.  

Steps: 
  1. Watch my emoji video first. (below this list of steps).
  2. Then watch the Templates Guide video (below this list of steps).
  3. Then watch the How-to from the beginning video. (below this list of steps).

Facemoji Video

MAD-learn Templates Guide Video. If this doesn't load, watch it in the video below.

How to video -- from the beginning.  This video is 48 minutes but use the time-stamp menu below to skip to the section you need. Use the Pause and rewind buttons to give you more time to do a particular step.

Timeline of the videos below - so you can skip ahead. 

0:00 starts Step 1  - Login
0:28 starts Step 2 Index Cards/list
1:09 starts Step 3 - Outline Template 
2:44 starts Step 4 - Mind Map &  
7:07 starts Step 7 - Creating an App Shell
8:50 starts Step 8 - Create a Logo
14:30 starts Step 9b: Create your  custom App Images 
20:01 STEP 11: Make your images as described in these two tables below. 
 22:08 starts Step 12 - Create Side Drawer.
23:20 Creating a Square App icon
 26:39 starts Step 13  -  Create & Link Inner Menus & Screens
42:22 MAD-lear Template Screens Overview Video (no YouTube).

Video Part 1 - Steps 1 to 10

Video Part 2​- Steps 11 to 13

Ms. Miller will start the Wednesday, March 31's work session at 8:00 AM - 9:00 AM here. (No 1:00 PM session today because Ms. Mill her as doctor's appointment.) This means Ms. Miller assumes you have read, watched, tried the things (prior to) up through this point in the website. 

Link to STEP 13 Video of Class 9For the 5th graders
and anyone who missed todays lesson. 
I will eventually get this file split into 15-20 minute
videos and embed here, but for now, it is a link
to a screencastomatic video about
60 minutes long. 

LINK 

These are the list of screens you need to have added.  Your specific menu titles might be slightly different. The blue words in the parenthesis are the template name. I take you through only a few of these. After you do a few, this should be self explanatory. After this video, you should be working to add and connect all the screens that you need to make your complete app. 

  1. Then start your Home Screen Menu. (Home Screen Menu)
  2. Then add your 3 Inner Menus and link them to your Home Screen.
    1. About sub-menu (Inner Menu Screen Template)
      1. ​About the App (HTML Screen Template)
      2. About the Author (that's you) (HTML Screen Template)
      3. Citations & References (HTML Screen Template)
    2. Numbers Info sub-menu (Inner Menu Screen Template)
    3. Non-Numbers Info sub-menu (Inner Menu Screen Template)
      1. ​I describe in #2 in the next section the many sub-menus that go here.
    4. Media sub-menu (Inner Menu Screen Template)
      1. ​Pics (Screen Templates - HTML, Photo Gallery, or Links to a Web URL)
      2. Videos (Screen Templates - HTML, Video Gallery, Links to a Web URL, or Web Video)
      3. Drawings (Screen Templates - HTML, Photo Gallery, or Links to a Web URL)
    5. Learn (Inner Menu Screen Template)
      1. Flashcards (Flash Card Screen Templates)
      2. Quiz (HCJ Builder)​
  3. Then add you HTML screens that do not need Inner Menus.
    1. MAPS (HTML Screen Template)
    2. CYOA (HCJ Builder, or LInk to Web URL if you build your CYOA in Google Sheets)
    3. LInks to Full websites dedicated to your animal (Link to a Web URL)
    4. PDFs (PDF Screen Template) 
Here is a table of all of your Screen Templates. You will probably not use them all.
Inner Menu
Custom Template
HTML
HTML-Double Header
HTML - Single Button
HCJ Builder
LInk to a Web URL
Photo Gallery
Video Gallery
Web Video
MAPS
PDF
AR Template
Flash Cards
Click & Share
You may have been doing this step already if you have built apps with MAD-Learn before or if you are the curious and adventurous type.

Everything you create on your MAD-learn mobile app will be its own screen. These are their templates. You have probably noticed there are many template options. 

Your screens need to be linked from at least one other screen, else the user won't have any way to load that screen.   The Screen icons appear in the images to the left. We are going to start with a few screen templates and then add more later. 

Basic screen templates:
  1. Your landing page is the Home Screen that only gets used once, so it's not a template. It is automatic. This is where your first set of buttons appear. This Menu launches all other sub-menus and destination screens. 
  2. Inner Menu screen.  You will probably use an Inner Menu screen for your About, Numbers, and Non-Numbers sub-menus. If you have not already, create those Inner Menu 3 screens now and link them to your Home Screen.  In your Inner Menu screens, you can have a list of buttons (which would be your sub-topics) AND you can also "NEST" your buttons to organize sub-sub topics. 
    1. Here is an example of my Number Info Inner Screen:.  
      1. button 1 - Letters in Names
      2. nested button 2 -  Dates
        1. discovered
        2. protected
        3. hunted
        4. extinct
      3. button 3 - Speed
      4. nested button 4 - Physical Numbers
        1. sub-sub-topic a.  Lifespan
        2. sub-sub-topic b. Babies
        3. sub-sub-topic c. Speed
        4. sub-sub-topic d. Temperatures
        5. sub-sub-topic e. Food Quantity  
        6. sub-sub-topic f. Size & Weight
      5. button 5 - Other Number Characteristics
        1. numbers of letters in names
        2. numbers in a group
        3. pounds of meat consumed by humans
  3. HTML screen. You will use the used basic HTML screen for most of your pages that include only text, graphs, and images. You might have even included links to a webpage from this HTML screen template.  This is the most common template.  

Home Screen How To Video

Inner Menu ​Screen How To Video

HTML ​Screen How To Video

Advanced screen templates

Advanced screen templates -- We are creating these a bit later.
  1. MAP screen. You should have used at least one MAP screen template.
  2. HCJ Screen. You might have decided to use an HCJ Screen for your Choose Your Own Adventure.​  This screen uses an additional set of templates that we will talk about later. Like the HCJ Builder screen template it looks like coding, but you really are just going to be doing a lot of copy & pasting. 
  3. Flash Cards.   Flash Cards is an HCJ screen that is pre-loaded because it lets the app creator, you, make flashcards. Like the HCJ Builder screen template it looks like coding, but you really are just going to be doing a lot of copy & pasting. 

Other screen templates

Other screen templates -- You may or may not have these screen templates in your app.
  1. Custom screen template. The  Custom screen template is when you .
  2. HTML-Double Header screen template. The HTML-Double Header screen template is when you ..
  3. HTML-Single Button screen template. The HTML-Single Button screen template is when you ..
  4. Link to a Web URL screen template. The Link to a Web URL screen template is when you ..
  5. Photo Gallery screen template. The Photo Gallery screen template is when you have several images from the web, or pictures you have drawn of your animal, and you want to present the images as a gallery. You can also include a Photo Gallery Template and not link it, and then you will have a repository of images that appear elsewhere in your app. It is like a local drive that stores photos.
  6. Video Gallery screen template. The Video Gallery screen template is similar to the Photo Gallery screen template, but with videos.
  7. Web Video screen template. The Web Video screen template is when you have several videos of your animal that are on YouTube already, and you want to present the videos as a gallery. 
  8. PDF screen template. The PDF screen template is when you have located a PDF file that you downloaded, and you want to share.  Some PDF files are too small to easily read on a phone or even a tablet, so test this out and consider presenting your information a different way.
  9. AR screen template. The AR screen template is when you want to explore augmented reality. Ms. Miller does not suggest this template for the "Animals By the Numbers project."
  10. Click & Share screen template. The Click & Share screen template is when you have an animal that people might have access to and be able to take pictures, like a zoo. You will need to monitor the email you have set up to receive these user created and submitted emails, and continually update your App.  
Proudly powered by Weebly