● Getting Started● E4H User Interface & Modes● HVAC Troubleshooting UI & Modes● Badges● Classrooms
2
Table of Contents
Getting Started: Learning the UI
The new general user interface is divided into three (3) main parts:
● Header● Content Area● Sidebar
Welcome to HVAC 3.0. In this document we will be discussing the main user interface. Our goal is to give you, the user, the tools you need to quickly navigate this application and focus on the learning!
3
1
2
3
Selected Link This content will be in the Sidebar and Content Area Unselected Links
The header contains the name of the app (HVAC 3.0) and links to other sections of this app.
Learning Path
This is where to find courses and lessons
Badges
This is where to check your progress
on all courses
Classrooms
This is where you can find, or make, custom classes
4
Learning the UI / The Header
Leaderboards
This is where you can check to see
how you stand against other users.
Workforce Connection
This is where you can submit your HVAC 3 stats to potential employers
Learning the UI / The Sidebar
Content Page Title
Check Icons These show if you have completed a lesson.
Note: Clicking on a lesson will load up it’s contents in the Content Area to the right of the Sidebar 5
Min/Max Icons Click to expand, or collapse the layers of content
Lesson TreeAn interactive outline is a quick way to access all of content this app has to offer
Learning the UI / The Content Area (Course)
Course Image Course Information
Progress IndicatorsThe numbers on the right here shows you your progress on
each of these modes.
Mode SelectionYou have two options to chose from
6
Badge IndicatorsThe badge shows completion of a mode
Learning the UI / The Content Area (Badges)
Course Name(s)
Course Mode Labels
Course ProgressThe number shows you your progress on each of these modes, within the course
Badge ProgressWhen you complete a mode you
receive a badge.
7
Badge LegendThis helps explain the badge system to users
Learning the UI / The Content Area (Classroom)
8
Classroom List
Here are the available classrooms.
You can search for a specific one.
They are organized by Instructor, Student and Other.
You can also create a classroom!
Classroom Students
Classroom Leaderboard
● Minimize the Side Bar● Classroom Info (Current Screen)● Gradebook● Current Assignment● To Do Assignment● User Classroom Settings
This is a quick look into the Classroom interface, there is a deeper dive later in this User Guide.
Learning the UI / The Content Area (Leaderboard)
9
Course Categories w/ Leaderboards
Rank User Name Cumulative Stars Earned
Learning the UI / The Content Area (Workforce Connection)
10
Workforce Connection Information
Sign Up Form
Workforce Connection is an opt-in program that puts your progress, in HVAC 3, in front of some of the biggest corporations in the world.
Recap \ Learning the UI
That concludes the introduction to HVAC 3.0’s user interface. To recap, we reviewed the overall look & feel. We also discussed the 3 main sections of the interface.
In the next few sections we will discuss the interface for E4H, HVAC Troubleshooting, Badges and Classrooms.
11
E4H Interface HVAC Troubleshooting
E4H UI \ Training Mode (Overview)
Sim AreaThis is where you will interact
with the lesson you are learning.
Tools/Controls AreaThis is where the various tools and settings will appear for different lessons.
Main Links
Course Links Slide Out
13
E4H: User Interface \ Training Mode (Sidebar)
Maximizes Course Link Area (shows text links with icons)
Returns to the Main Menu
Slide Out(currently showing a Tutorial )
Minimize Slide Out
Help Link
Displays Course Modes
Displays Tutorial, in Slide Out
Displays Info, in Slide Out
Minimize / Maximize Tool &
Controls Area
14
E4H: User Interface \ Training Mode Sidebar (Tutorial)
Steps in the Tutorial & Progress
15
Tutorial CardContains a step in the tutorial
process and buttons to navigate through the tutorial cards.
Upcoming Tutorial Cards
E4H Tutorial Mode steps you through the entire simulation, so you can prepare for the Challenge Mode.
Some courses have various amounts of tutorials, when you complete them all, for a course, you get a badge.
When you complete the last step of the tutorial it is considered complete.
E4H: User Interface \ Training Mode Sidebar (Faults) Selecting FaultsAs you run through the entire HVAC 3.0 experience you will notice that some courses have UI elements that others do not.Faults is one of them. This slide-out allows the user to turn on/off various faults that may occur in the diagram.
17
Fault Icon in Sidebar
Fault Options
Changes made in the Fault slide-out effect items in this view.Turn a few on/off and see for yourself!
E4H: User Interface \ Global Toolbar
Toolbar
As you run through the entire HVAC 3.0 experience (E4H and HVAC-TS) you will notice a toolbar at the bottom of the app. As we mentioned in the Intro document, the Toolbar contains controls/tools that are relevant to the course you are in. This is a general example of what you may come across…
Note: A general rule is that the controls will always be on the left and any tools and settings will be on the right.
18
Control: Switch Control: Toggle Control: Slider Tool: Multimeter
Toolbar
As you run through the entire HVAC 3.0 experience (E4H and HVAC-TS) you will notice a toolbar at the bottom of the app. As we mentioned in the Intro document, the Toolbar contains controls/tools that are relevant to the course you are in. This is a general example of what you may come across…
Note: A general rule is that the controls will always be on the left and any tools and settings will be on the right.
E4H: User Interface \ Training Mode (End Popup)
19
Return to Main Menu
Open up the Scenario List
Continues to the next tutorial...(When there is one)
E4H: User Interface \ Challenge Mode (Sidebar)
Maximizes Course Link Area (shows text links with icons)
Main Menu
Slide Out (currently showing the Quiz )
Minimize Slide Out
Help Link
Course Modes
Displays Quiz, in
Slide Out
Displays Info, in
Slide Out
Minimize (Maximize)
the Tool Bar
20
E4H: User Interface \ Challenge Mode Quiz
21
E4H Challenge Mode Quiz asks you 10 questions about the course you are in.
Completing the quiz successfully awards the user with a badge.
If you do not pass the quiz you can retake it at any time.
Click here to start the quiz!
Current High Score
Quiz Title
E4H: User Interface \ Challenge Mode Quiz
22
Quiz TitleChange the Diagram to the right of this quiz
Question Status
Answers to Question
Correct Answer Tally
Question
E4H: User Interface \ Challenge Mode Quiz Results
23
Submit ButtonSubmits scores to the database
Quiz Title
Quiz Results
Recap \ E4H User Interface and Modes
That concludes the E4H’s user interface. To recap, we reviewed:
● General UI Features● Tutorial Mode UI● Challenge Mode Quiz UI
In the next few sections we will discuss the interface for HVAC Troubleshooting, Badges and Classrooms.
24
HVAC Troubleshooting
HVAC TS: User Interface \ Training Mode (Overview)
Sim AreaThis is where you will interact with
the lesson you are learning.
Right Reference SidebarVarious pieces of reference are
contained here. Click to view them.Fault List Button
26
Sim Navigation ToolsClick on these links to teleport to hotspots throughout the house
Main Links
Course Links
Slide Out
HVAC TS: User Interface \ Training Mode (Fault List)
Sim AreaThis is where you will interact with
the lesson you are learning.
Right Reference SidebarVarious pieces of reference are
contained here. Click to view them.
Main Menu Button
27
Sim Navigation ToolsClick on these links to teleport to hotspots throughout the house
Fault ListClick on one of these
‘fault scenarios’ to load up a simulation
about it.
HVAC TS: User Interface \ Training Mode - Fault
Fault ListButton
28
Timer
Star MeterStars are awarded to the player when they successfully complete a
part of the training.
Procedure Guide (see next page)
List of RepairsThis is where you can view the repairs you did during your training.
List of ToolsThis is where you will find the tools that will help
you complete your training scenario.
HVAC TS: User Interface \ Training Mode - Procedure Guide
Fault Title
29
Linear Path Cards
Diagram SwitchYou can view this in 2 ways, linear
(pictured right) or as a tree
(pictured far right).
Hotspot TeleportThis tool teleports the user to
the area of focus in the simulation.
Info PopupThis icon displays a popup
with information relevant to the card.
Tree View
HVAC TS: User Interface \ Training Mode - Right Sidebar
30
Right SidebarThis area contains images/links to things that are relevant to your training.
Recap \ HVAC Troubleshooting UI and Modes
That concludes the HVAC Troubleshooting’s user interface. To recap, we reviewed:
● General UI Features● Training Mode UI● Challenge Mode UI
In the next few sections we will discuss the interface for Badges and Classrooms.
31
HVAC Troubleshooting
Badges (Overview)
Course Categories
33
Courses
Modes
Badges & Progress
Badges & Progress The Badge section of this app is the quickest way to view your overall progress in HVAC 3.0. This section displays the course categories, courses, course modes and individual progress meters (or badges). The badges for E4H and HVAC-TS vary slightly. We will discuss this on the next page.
E4H Badges
34
Challenge Mode BadgesPlayers are awarded
badges when they hit a certain criteria on a quiz
(Ex, 90%).
Different badges are rewarded for your total %
If you haven’t met the specified criteria you will only see a numeric value.
Training Mode BadgePlayers are awarded a badge when they complete the training mode.
Some Training Modes have multiple parts to it (Ex. 4 sub-
lessons)
If you haven’t met the specified criteria you will only see a numeric
value.
HVAC Troubleshooting Badges
35
Challenge Mode BadgesPlayers are awarded a badge
when they complete 10 challenges
Different badges are rewarded for your total number of challenges completed.
If you haven’t met the specified criteria you will only see a
numeric value.
Training Mode BadgePlayers are awarded a badge when they complete the training mode.
Some Training Modes have multiple faults to it
(Ex. 20 faults)
If you haven’t met the specified criteria you will only see a numeric
value
Recap \ Badges
That concludes the Badges user interface. To recap, we reviewed:
● General UI Features● Progress and Badge Awards
36
38
Classrooms \ Landing Page
Classroom List
Here are the available classrooms.
You can search for a specific one.
They are organized by Instructor, Student and Other.
You can also create a classroom!
To get more information on a class, just select one from the list.
39
Classrooms \ Instructor Mode - Main Menu
Classroom Name
Students in the class
You can click on the name for more options
Classroom Leaderboard
40
Classrooms \ Instructor Mode - Gradebook
CoursesClick on a course box to see
the class’ grades for it
Student ListClick on a name to highlight
their grades.
GradesThis is where the instructor can view the
student’s grades.
Currently, in this image, nothing has been completed. When classes are complete it will
display a green check.
41
Classrooms \ Creating a Class
Create New Classroom ButtonClick this to initiate this popup
Classroom Name
Privacy SettingThis is where you can set the
class to be open to all students or private (i.e. accessible by
password-only)
Click cancel this popup
Click here to save your classroom
42
Classrooms \ Joining a Class
OTHER CATEGORYList of classes you
aren’t a part of.
Click one to load this screen.
JOIN BUTTONClick this to join the class.
45
Classrooms \ Instructor Mode - Settings
Classroom Name
Privacy SettingThis is where you can set the
class to be open to all students or private (i.e. accessible by
password-only)
Click here to save your changes
Click here to delete the class.