Embedded Files
The Suite Fleet Flagship lessons are equipped with several screen layout options. Mix and match as you see fit!
Sim Screen (Default)
Sim Screen (Default)
This is the default layout for each screen as it will be the most commonly used. however, a Custom CSS Class name is still required.
Custom CSS Class
layout-sim
Width & Height
No values are required!
Sim screens are split into two sides: the lesson content and the sim. It is recommended to place the sim on a parent screen, and the content on children screens.
Sim (sim-iframe)
The sim will fill the width of the browser window minus the width of the content (100% - 450px), and will fill the height of the browser window (100%).
Custom CSS Class
sim
Width & Height
No values are required!
Source
Use any link you wish!
Lesson Content
The lesson content will align to the left side of the screen. Its width is a fixed width that is set to 450 px while its height will fill the browser window.
The content will appear as a single column of stacked components and will be ordered based on the order set while authoring. Content that exceeds the browser height will be scrollable.
Full Screen Button - Optional
Full Screen Button - Optional
By adding a full screen button, the sim can toggle between it's default size and filling up the browser window. This is especially useful for smaller screens like Chromebooks, iPads, or phones. This will only be used on sim screens and will affect anything with the "sim" class name applied.
How to include a full screen button
In authoring add an MCQ to the same screen as the sim iFrame.
Delete all but one of the options.
Order the MCQ is BEFORE the sim.
Edit the settings of the MCQ:
Custom CSS Class
fullscreen-sim-toggle t-20 r-20
Width & Height
No values are required!
Multiple Selection
checked
The class names "t-20" and "r-20" set the position of the MCQ 20 pixels away the top and right most corner of the screen. However, the position will depend on the sim as each sim is unique. For example, it may be better position the MCQ in the bottom right corner instead. in this case you may want to change to:
Custom CSS Class
fullscreen-sim-toggle b-20 r-20
Experiment with different values to see what works best for you!
Title Screen
Title Screen
Here are examples of the title screen layout at various sizes. The dark gray areas are the background image.
Screen Settings
This layout is only used on the title screen.
Custom CSS Class
layout-title
Width & Height
No values are required!
Title screens requires four components:
janus-image for the background
janus-text-flow for the title text
janus-navigation-button for the start button
januspopup for the credits
Image Settings
This is the image that will cover the background of the lesson title screen.
Place only one single image onto the screen. It will cover the entire browser window. The image color, size, and positioning is automatically applied by CSS.
Custom CSS Class
No class name is required!
Width & Height
No values are required!
Source
Use any link you wish!
Alternative text
No text is preferred for accessibility.
Text Settings
This is the text for both the lesson title and the subtitle.
Place only one single text-flow onto the screen. While authoring the text, be sure to hit enter/return after the title if you want subtitle text. This is important so that the CSS can correctly style it. The text-flow style, size, and positioning will be automatically applied by CSS.
Custom CSS Class
No class name is required!
Width & Height
No values are required!
Navigation Button Settings
This is the button that is used in place of the traditional "Next" button from the check container.
Place a navigation onto the screen. The color, size, and positioning is automatically applied by CSS.
Custom CSS Class
No class name is required!
Width & Height
No values are required!
Title
Use any text you wish!
Popup - button Settings
This is for the optional lesson credits popup screen.
Place a popup onto the screen. The text, color, size, and positioning is automatically applied by CSS.
Custom CSS Class
No class name is required!
x y and z
No values are required!
Width & Height
No values are required!
Icon URL
No value is required!
Description
Use any text you wish. This is NOT what will appear on the popup button.
Popup - window
This is what will display the credits for the lesson.
Place an iframe onto the popup screen. The size and positioning is automatically applied by CSS.
Custom CSS Class
No class name is required!
x y and z
No values are required!
Width & Height
No values are required!
Source
See below
Popup - iframe source
The source link for the credits points to a template page. The template gets populated by the author using the link itself.
For example, this link will produce the following credits screen:
https://etx-nec.s3.us-west-2.amazonaws.com/css/torus/etx/styles/infini-dev/sites/credits/index.html?team=[Principal Investigator]Ariel Anbar_[Learning Designers]Mel Narish,Mia Brunkhorst_[UX/UI Design]Christopher Andert_[Simulation Development]*(https://gogoapps.io/){GoGoApps}*_[Data Source]*(https://www.noaa.gov/){NOAA | National Oceanic and Atmospheric Administration}*,*(http://nasa.climate.gov/){NASA | National Aeronautics and Space Administration}*
The footer and header will always be the same, but the body content will be created via the link.
The link has three main parts:
Link to the Page + Variable + Credits Content
Link to the Page
Always start with this link:
https://etx-nec.s3.us-west-2.amazonaws.com/css/torus/etx/styles/infini-dev/sites/credits/index.html
This is a link to the credits page template. The next two parts populate the template
Variable
Always add the following immediately after the previous link:
?team=
The "?" starts the query string while "teams" is simply the variable name used by the scripting. The scripting will grab the content after the "=" sign.
Credits Content
Depending on the lesson, add the following immediately after the previous query string variable:
[Principal Investigator]Ariel Anbar_[Learning Designers]Mel Narish,Mia Brunkhorst_[UX/UI Design]Christopher Andert_[Simulation Development]*(https://gogoapps.io/){GoGoApps}*_[Data Source]*(https://www.noaa.gov/){NOAA | National Oceanic and Atmospheric Administration}*,*(http://nasa.climate.gov/){NASA | National Aeronautics and Space Administration}*
Perhaps it is easier to visualize the whole thing in the following way. You can even copy/paste the text below as is and it will still work!
https://etx-nec.s3.us-west-2.amazonaws.com/css/torus/etx/styles/infini-dev/sites/credits/index.html?team=
[Principal Investigator]
Ariel Anbar
_
[Learning Designers]
Mel Narish,
Mia Brunkhorst
_
[UX/UI Design]
Christopher Andert
_
[Simulation Development]
*(https://gogoapps.io/){GoGoApps}*
_
[Data Source]
*(https://www.noaa.gov/){NOAA | National Oceanic and Atmospheric Administration}*,
*(http://nasa.climate.gov/){NASA | National Aeronautics and Space Administration}*
Tips on making your content
Header text
Use brackets to create a header
[Principal Investigator]
Normal text
Use a coma to force a new line between normal text
Mel Narish,Mia Brunkhorst
Use an underscore after normal text to make vertical space between it and the next header
Mia Brunkhorst_[UX/UI Design]
Link text
Use an asterisk before and after a link and it's text to create a clickable link
*(https://gogoapps.io/){GoGoApps}*
Use parenthesis within a pair of asterisks for the link
*(https://gogoapps.io/){GoGoApps}*
Use curly brackets within a pair of asterisks for the link text
*(https://gogoapps.io/){GoGoApps}*
Use a coma to force a new line between links
*(https://www.noaa.gov/){NOAA | National Oceanic and Atmospheric Administration}*,*(http://nasa.climate.gov/){NASA | National Aeronautics and Space Administration}*
Use an underscore after link text to make vertical space between it and the next header
[Simulation Development]*(https://gogoapps.io/){GoGoApps}*_[Data Source]*(https://www.noaa.gov/){NOAA | National Oceanic and Atmospheric Administration}*
Section Screen
Section Screen
Standard configuration
Standard configuration
This layout acts similarly to the Sim Screen layout. The content will appear as a single column of stacked components and will be ordered based on the order set while authoring.
Content will fill the full width of the screen width. Content that exceeds the browser height will be scrollable.
Custom CSS Class
layout-section
Width
1000
Height
Optional. Without a value set, the height will automtically match the content. Enter a value only if desired.
Below are examples of the layout at various sizes.
Columns - 1 and 2
Columns - 1 and 2
While authoring a Section Screen, you can choose to divide the content into columns. To achieve this each column will need to be it's own screen. You can even have rows with their own column setup.
In the example to the left, one screen is a single column, while the two screens below it make two columns. To do this, there is a parent screen with the following settings:
Custom CSS Class
layout-section col-1
Width & Height
No values are required!
Nested inside the parent is another screen with the following settings:
Custom CSS Class
layout-section col-2
Width & Height
No values are required!
Nested inside that child is another screen with the following settings:
Custom CSS Class
layout-section col-2
Width & Height
No values are required!
Columns - 3
Columns - 3
To show three columns, do the same thing as above, but change the column class.
In the example to the left, there is a parent screen with the following settings:
Custom CSS Class
layout-section col-3
Width & Height
No values are required!
Nested inside the parent is another screen with the following settings:
Custom CSS Class
layout-section col-3
Width & Height
No values are required!
Nested inside that child is another screen with the following settings:
Custom CSS Class
layout-section col-3
Width & Height
No values are required!
Columns - Spanning columns
Columns - Spanning columns
In a 3 column setup, you can choose to span a column among two columns.
In the example to the left, there is a parent screen with the following settings:
Custom CSS Class
layout-section col-3 span-2
Width & Height
No values are required!
Nested inside the parent is another screen with the following settings:
Custom CSS Class
layout-section col-3
Width & Height
No values are required!
Classic Screen
Classic Screen
This layout acts like the WYSWYG style of editing Argos typically employs. The content will appear exactly where they are placed and sized.
Custom CSS Class
layout-classic
Width & Height
1000 x 500, or you choose.
To the left is an example of various components that have been positioned and sized directly in authoring.
In order to accommodate for mobile devices, when classic screens are viewed in portrait mode the content will automatically flow vertically. This behavior acts the same as the section layout. Pertains specifically to phones,.
Layout warning message
Layout warning message
If you find that some layouts simply will not work in portrait view, you can add an additional class name to the screen that will display a warning message to the user.
For example, if you wish to add it to a screen with a classic layout:
Custom CSS Class
layout-classic warning-portrait
To the left is an example of the message that displays only in portrait view of a mobile phone.
Page updated
Report abuse