Docstoc

Main Menu

Document Sample
Main Menu Powered By Docstoc
					                     CS374b Group 3




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


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

• Our target: Canadian children in grades 3 -
  5

• Our goal: to motivate and teach kids (in
  our target group) more in this subject area
                                                2
                       Design
• 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



                                                                 3
                 Design
• Curriculum design structure




                                4
                     Design
• 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
                                                             5
                     Design
  • 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

                                                                 6
                Design
– 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




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




                                                          8
                        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



                                                             9
                  Design
– 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
    entertainment)
– Book
  • Tomes of encyclopedias on a bookshelf allows for
    some instructional learning
  • Hypertext for descriptions to keywords as well

                                                    10
              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

                                             11
                Splash Screen




• After hitting any key, it will proceed to the main menu
• Leads to the main menu (the actual office)
                                                            12
                 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.
                                                                13
        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
  application
• Purposely ignored the instructions to start
  to encourage users to explore
• Our application structure is so that doesn’t
  matter where the user starts
                                             14
           Selecting in the menu




Elements that can be selected (different types of elements
  will be highlighted differently in actual implementation)
                                                              15
                    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
                                                                   16
           Map of the World




• When bucket of maps, a map of the World is
  presented
                                               17
                     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
                                                                                 18
                  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

                                                                      19
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.


                                                                                22
                         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.

                                                                                          23
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
                                                                           24
        answers.
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
                                                                          25
        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.
                                                                        27
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
                                                                             28
        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.
                                                                 30
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.
                                                                       31
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.
                                                                     32
Puzzle Game




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




This is a screen shot of what the matching game will look like.
                                                                  34
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
    achievements
                                                                               41
    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

                                                                     42
•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”



                                                                    44
•   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”.


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



                                                               46
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
    screen.
                                                                        47
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

                                                                       48
•   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
                                                                       49
         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



                                              50
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
                                                                           51
       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
                                                                              52
         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
  icons
• 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
                                                 53
 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
                                            54
                  Exiting
• 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)
                                             55
              Credits Page
• The credits page will be displayed after the
  user has hit the door from the Professor’s
  office
• The purpose of the credits page is to
  display the creator names and give credit
  to other sources that contributed to the
  application
• The credits page will the last thing the user
  sees
                                             56
       Credit Page …continued




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

• Questions and comments after the demo




                                          58

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:7/25/2013
language:Unknown
pages:58