HVAC 3.0 \\ Master Document

1

● 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

HVAC 3.0 \\ E4H User Interface & Modes

12

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 (Info)

Exit Button

16

Information

Title

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 3.0 \\ HVAC Troubleshooting UI & Modes

25

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

HVAC 3.0 \\ Badges

32

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

HVAC 3.0 \\ Classrooms

37

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.

43

Classrooms

44

Classrooms

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.

Recap \ Classrooms

That concludes the Classrooms user interface. To recap, we reviewed:

● General UI Features● How classrooms work for students and instructors● Gradebook and Assignments

46