Embedded Files
Main Style for
Lesson Stylesheets
Lesson Stylesheets
Every flagship lesson starts with the styles found on this page. Each flagship will have some unique styling of their own, but all will share what is here.
Download Styles
Download Styles
Access the CSS files by clicking the buttons below.
Master Stylesheet
A small file that imports all other files on this page.
General Stylesheets
A small file containing base colors for flagships.
A small file of non-standard fonts for use in lessons.
Layout Stylesheets
See Flagship Layout page for more details.
Style for the sim screens of a flagship. This is also the defualt layout for the lesson.
Styles for the title screeen of a flagship
Styles the screen layout that allows fo columns and rows.
Styles the screen layout to act like as originally intended; WYSWYG editing.
Components Stylesheet
Styles for the components of the lessons: mcqs, dropdowns, popups, etc.
Typography
Typography
Download Fonts
Download Fonts
All fonts for flagship lessons are already installed on ETX's AWS and are being referenced to that location. Below are the original source links as needed.
Open Sans
Base font for the lesson.
Montserrat
Heading font for the lesson.
Press Start 2P
Pixel font for video game text.
Helpers
Helpers
Helper can be included with each flagship lesson. Below are they ways in which they can be added.
Helper Select Screen
Helper Select Screen
The user can choose which helper, if any, to join them on their journey. Much of the layout will be taken care of through CSS. Here is what to do to create this screen.
Step 1 - Screen
This screen is set up the same way as the title screen, so set this screen attribute.
Custom CSS Class
layout-title
Step 2 - Background Image
Add the same image as used in the title screen to this screen.
Step 3 - Title Text
Add a text-flow to the screen.
Open the editor, and type "Choose".
Then, return one line and type "Your Buddy". It is important that there are two lines of text.
Finally, set this attribute.
customCssClass
helper-title
Step 4 - MCQ
Add a multiple choice question to the screen.
For the first three MCQ options, edit their text and enter three lines of text.
Line 1: Character Name
Line 2: . (this will be hidden)
Line 3: Character description (try to keep it under 75 characters)
For the forth option, edit the text with whatever statement you want. This option will hide all helpers throughout the lesson.
Finally, set this attribute.
customCssClass
helper-select dance
Helpers
Helpers
Helpers can be placed anywhere you like within a lesson. Here is how.
Step 1 - Add a text-flow or image
Both the text-flow and the image components can contain a helper. Set the following attributes.
Width
any value
Height
No need to set this as it will render to match the width, making it square.
Custom CSS Class
helper
Whichever helper is selected at the start of the lesson will be the one displayed.
Optional - You can add a class name to change their emotion:
default, smile, grin, or think
If no class name is given, then default will display.
Optional - You can add a class name to change the direction they face:
face-left, face-right
Optional - You can add a class name to make them dance:
dance
Optional - You can add a class name to increase their animation speed:
fast, faster, or fastest
Helper with Speech
Helper with Speech
If the user selects a helper, it can show up throughout the lesson with helpful hints. If a user decides against selecting a helper, the provided hint will style just like the plain body font.
Step 1 - Add a Text-flow
Add a text-flow to the screen and set this attribute.
Custom CSS Class
helper platypus speech
Optional - You can also add a class name to change their emotion: default, grin, happy, think (pictured here).
Step 2 - Edit text
Open the editor. You will need 5 lines.
Line1: •‿• (this will be replaced with the helper)
Line2: Armadillo dialog
Line3: Axolotl dialog
Line4: Platypus dialog
Line5: Plain dialog
Page updated
Report abuse