Main Menu by yurtgc548


									                     CS374b Group 3

March 8, 2007
Hai-Ning Liang
Michael Bailey
Hubert Bibrowski
Kevin James Bryson
Al-Amin Pardhan
Peter Lee
Rod Wilson

• Our task: a edutainment software to help
  kids learn geography

• Our target: Canadian children in grades 3 -

• Our goal: to motivate and teach kids (in
  our target group) more in this subject area
• Structuring
  – We chose curriculum approach
     • Natural for our software application

  – Multi-tier learning and feedback mechanism
     • Feedback is essential
        – Can be a motivation factor
        – Also a way to see what the user has actually learned

• Curriculum design structure

• Pedagogical Approach
  – Constructivist approach to promote user
    created knowledge
  – A series of games to evaluate the learner
    • The games are also a form of scaffolding to
      enhance their exploration in other areas of the tool
    • We provide corrective mechanism to let the user
      learn from their mistakes
    • Games are a great way to evaluate
    • Games also a great motivational factor
  • Games serves as a form of entertainment
  • Games are setup in different levels to challenge
    the learner which is another form of motivation
– Free access browsing learning
  • We let the users explore the our bookshelf in the
    office to learn more about the subject
     – Our exploring mechanism goes along with our
       constructivist approach to this design
     – The layout of the learning is broken down into 3 levels of
       learning, learning about the provinces in general, specific
       capitals cities, and also flags

– Breaking down the information as such allows the user to
  learn bit by bit (better for younger children)
– The tomes on the bookshelf are audio and visual text to
  enhance the user learning experience aiming for two
  different senses as stimulants
– Each of these tomes provide basic audio controls to
  pause, play and rewind for more flexibility in case the
  user needs to go back and listen to it again
– The basic control and layout are not to cluster the screen
  so that our younger users can easily use them with very
  little to think about

– Instructional element
  • The audio and visual encyclopedias are our
    instructional approach to teaching some of this
  • Tutorials for games are also instructional elements
    to our design

• Compositional Structuring
  – Simulation
    • Our software in the form of a simulated visit to
      Professor Smith’s office (a geography teacher)
    • Simulation is to encourage constructivist’s style of
      learning by exploration
    • Various elements in the office that users can
      interact with
       – a run through of the office a little later

– Game
  • Our games are part of our learning tools
  • Also part of the evaluation and feedback back
    network we mentioned earlier
  • A big motivator for young learners (a form of
– Book
  • Tomes of encyclopedias on a bookshelf allows for
    some instructional learning
  • Hypertext for descriptions to keywords as well

              Run through
• We have a brief splash screen to
  introduced the application

• A good way to lead the user into the game
  setting part of the environment

• Can be skipped if not the first time playing

                Splash Screen

• After hitting any key, it will proceed to the main menu
• Leads to the main menu (the actual office)
                 Main Menu

The main menu will be a point and click environment for the
learner to explore. Objects that are clickable highlight when
they come in contact with the mouse pointer.
        Interactive Elements
• There are 2 types of interactive elements
  in the office
• One that are fun gimmick animations
• Others that lead to other parts of the
• Purposely ignored the instructions to start
  to encourage users to explore
• Our application structure is so that doesn’t
  matter where the user starts
           Selecting in the menu

Elements that can be selected (different types of elements
  will be highlighted differently in actual implementation)
                    Map of Canada

•   Once the mouse goes over a selectable object it will highlight.
•   When the map in the background is selected, a map of Canada will
    be brought up as a learning tool for the user
           Map of the World

• When bucket of maps, a map of the World is
                     Globe selection

•   When the user clicks on the globe, an animated gif will play and the globe
    will spin
•   One of the gimmick animations that makes the application less boring
                  Drawer selection

•   The drawer is just another little animation where you see a sandwich
    in it
•   Yet, another funny aspect to lighten the tension usually associated
    with learning and testing

Bookshelf Sub-menu

The user will transition to this screen once they have
clicked on the book case which is a submenu for the
learning part of the application.                        20
Bookshelf Sub-menu

When the user mouses over a book it highlights. When
the user clicks a book, the book opens and enters the
learning section.                                       21
              The reading material

When the learner opens a book he can turn pages, access the help and exit back to
the office.

                         Book with audio

•   Some of the reading material will have the option of playing a recording that will read
    out the content of the opened pages. This will be implemented through a mini audio
    player in between the navigation arrows.

Millionaire Game

        When the Millionaire game is loaded, a series of questions will
        show up one at a time. Each question will have 4 multiple choice
Millionaire Game

        The user can select an answer by simply clicking on it. Once an
        answer is clicked on, it is highlighted. The user cannot change
        their answer at this point.
Millionaire Game

        If the user selected the correct answer, it will be revealed that the
        correct answer was chosen. After a small pause, another
        question with 4 possible answers will appear. There are 10              26
        questions in total.
Millionaire Game

        This is a situation where a user selects an incorrect answer.
Millionaire Game

        The user is then notified that the answer selected is incorrect.
        The correct answer is revealed at the same time. It is highlighted
        in a different colour.
Puzzle Game

  In this game, the user will drag the provinces into the correct space.
  The door in the bottom corner will prompt them to leave the game.
  The question mark will take the user to a help page.                     29
Puzzle Game

  Provinces on the right glow when a mouse is moved over them.
  The user then holds the mouse button down to drag it.
Puzzle Game

  A sound indicates an incorrect answer and the piece is returned.
  The sound will be a <error> sound that will be easy to understand.
Puzzle Game

  A sound indicates an correct answer and the piece remains as is.
  The sound will be a <winning> sound that is easy to understand.
Puzzle Game

  This is the game after the correct answer.
  The province is in position and no longer selectable on the right.
Matching Game

This is a screen shot of what the matching game will look like.
Matching Game …continued

    When the user clicks a card it will flip over and reveal a
    province or a province’s flag.                               35
Matching Game …continued

    If the user gets a match the cards highlight and stays
    flipped over                                             36
Matching Game …continued

    If the user makes a wrong selection the card flips back
    and the user can select again.                            37
Matching Game …continued

    For the easiest level of the matching game the user will
    have to match the province shape to its name.              38
Matching Game …continued

    For the middle level of the matching game the user will
    have to match the province shape to its capital.          39
Matching Game …continued

    For the hardest level of the matching game the user will
    have to match the province shape to its flag.              40
               Score Board (blank)

•   Upon clicking of the score board from the Professor’s office, you will see a
    blown up version of score board which will indicate how many levels of
    games you’ve completed.
•   A form of motivation and a way to recognize the user for his/her
    Score Board (All Stars Earned)

•   After completing a level successfully you will be granted stars on
    your score board
•   After completing a level you will also be given a code where you can
    go to the safe and unlock these prizes (stars)
•   When you unlock a star, your score board will be updated as shown
    in the next slide

•A mechanism for users to continue the game after
achieving certain milestones and exiciting
•Initial layout: fields are blank.
• User enters the first code in with the keypad, and
press’ “Enter”.                                        43
•   The number entered previously is displayed in the first pane.
•   The user enters the second code on the keypad, and press’ “Enter”

•   The number entered in step 2 is displayed in the center pane beside
    the number in step 1.
•   The user enters the final code into the keypad and press’ “Enter”.

•   All three codes are displayed in their respective panes.
•   The user press’ “Enter”

If the code is incorrect:
• The word incorrect is displayed in the center pane.
• Clicking anywhere on the screen results in returning to the initial
If the code is correct:
• The word “Unlocked” is displayed on the center pane in green text.
• Clicking anywhere on the screen opens the safe

•   The safe opens and the gold star is displayed.
•   Clicking on the star adds it to your score board and takes the user to
    the scoreboard screen
         Instructions for help
• The instructional aspect is consistent in all
  parts of the other than the menu

• If the user gets stuck a familiar icon is
  there to assist them so they won’t waste
  too much time of figuring out what to do

Information Page

       The user can select the Help icon at any time at the bottom right
       of the screen to learn more about the feature (eg game). The
       Help icon is available for all features.
Exit Prompt

         The user can select the Exit icon at any time to exit the current
         feature they are on. This will prompt the user whether or not they
         would like to exit. The Exit icon is available for all features.
         Navigation Controls
• Very simple navigational controls due to
  our simple structure
• Main menu has highlighted interactive
• In other parts of the application there will
  be 3 icons placed in the lower right all the
  time, return to main menu, exit with
  prompt, and help
 Milestones and Achievements
• After passing every game in each level a
  milestone is achieved, a code is presented
  so that the game can be restarted and
  unlock the safe to retrieve your stars
• Upon achieving milestone also another
  end splash screen to indicate to the user
  of his or her achievements
• With a transition to the story board before
  returning to the main menu
• At any point the user can exit, via the door
  in the main menu (intuitive to the
  simulated environment)
• Also consistent with the door icon when
  not in the main menu
• A credit screen will also be displayed upon
  achieving each of the milestones (also can
  be dismissed by a hit of a key for users
  that has seen it before)
              Credits Page
• The credits page will be displayed after the
  user has hit the door from the Professor’s
• The purpose of the credits page is to
  display the creator names and give credit
  to other sources that contributed to the
• The credits page will the last thing the user
       Credit Page …continued

• The credits page will be on the screen until the user hits
  any key, then the game window closes
• On with a quick demo of the shell

• Questions and comments after the demo


To top