Embedded Files
Lesson Styles
Lesson Styles
All flagship lessons first inherit this series of stylesheets and then apply their own modifications.
For this specific flagship, apply the following settings to the lesson:
Custom CSS URL
https://etx-nec.s3.us-west-2.amazonaws.com/css/etx/styles/infini-dev/style_nc.css
Nitrogen Cycle Map
Nitrogen Cycle Map
The Nitrogen Cycle Map is a hub screen for this lesson. This screen uses the default screen layout. See Sim Screen Layout if you need a review before continuing.
Nitrogen Cycle Map MCQ
Nitrogen Cycle Map MCQ
Populate the MCQ
Select the mcq
Click on the edit button in the component panel to open the JSON for it.
Click this link:
https://www.dropbox.com/s/z2h0p8kslbq1tc6/json_nitrogen-cycle-map-mcq.txt?dl=0Copy the JSON text
Return to the component's JSON and paste over it.
Click Save. Note: You will need to make your own id for this component before saving.
Style the MCQ
Author View
Set the following attributes:
Custom CSS Class
sim map
After those two class names, you can add any of the following class names
title no-organisms no-paths no-levels
Width & Height
No values are required!
Class names explained!
Required
sim
Positions and fills the right side of the screen.
map
Provides styling for the map.
Optional
title
Displays "Nitrogen Cycle Map" in the top-left corner
no-organisms
Removes the organism names along the paths
no-paths
Removes the paths
no-levels
Removes the level numbers attached to the molecules
Lesson ViewCustom CSS Class: sim map title
Custom CSS Class: sim map no-organisms no-paths no-levels
Feeding Screens
Feeding Screens
This screen uses the default screen layout. See Sim Screen Layout if you need a review before continuing.
The content in the sim area is made of a handful of standard components. Be sure to place these components in the following order:
janus-mcq (molecule to organsims)
janus-text-flow (resulting molecules)
janus-mcq (earned reactions)
janus-text-flow (sprinkle effect)
This order will ensure that the animations play after clicking the topmost molecule.
Molecule to Organism MCQ
Molecule to Organism MCQ
Populate the MCQ
Select the mcq
Click on the edit button in the component panel to open the JSON for it.
Click this link:
https://www.dropbox.com/s/euwbogyqd18pafn/json_molecule-to-organsim-mcq.txt?dl=0Copy the JSON text
Return to the component's JSON and paste over it.
Click Save. Note: You will need to make your own id for this component before saving.
Edit the first mcq option (topmost molecule) as needed.
Style the MCQ
Author View
Set the following attributes:
Custom CSS Class
sim feed fed
After those three class names, add a class name per organism that will be "happy" after being fed:
tricho sea-turtle pseu pelly nitros nitrob zoe
Width & Height
No values are required!
LessonView
The result should look like this prior to clicking!
The result should look like this after clicking!
Resulting Molecules Text
Resulting Molecules Text
Populate the Text
This one is pretty simple. The only important thing is to make sure you have exactly seven lines of text.
Select the text-flow
Click on the edit button
Write the resulting molecule then duplicate that line of text six times.
Make sure you have exactly seven lines of text, then click save.
Style the Text
Author View
Set the following attributes:
Custom CSS Class
feed-result
Width & Height
No values are required!
Since this component is created after the molecule-to-organisms mcq, it will automatically align with the which organisms.
LessonView
The result should look like this after being clicked!
Earned Reactions MCQ
Earned Reactions MCQ
Populate the MCQ
Select the mcq
Click on the edit button in the component panel to open the JSON for it.
Click this link:
https://www.dropbox.com/s/4kua5k483s6ncld/json_earned-reaction-mcq.txt?dl=0Copy the JSON text
Return to the component's JSON and paste over it.
Click Save. Note: You will need to make your own id for this component before saving.
Edit the mcq options as needed. You can even remove one or two options.
Style the MCQ
Author View
Set the following attributes:
Custom CSS Class
sim feed-earn
Width & Height
No values are required!
LessonView
The result should look like this after being clicked!
Sprinkle Effect Text
Sprinkle Effect Text
Populate the Text
This one is pretty simple also. The only important thing is to make sure you have exactly seven lines of text.
Select the text-flow
Click on the edit button
Write anything. I wrote "s" for "sprinkle" because reasons.
Make sure you have exactly seven lines of text, then click save.
Style the Text
Author View
Set the following attributes:
Custom CSS Class
food-fall
Width & Height
No values are required!
LessonView
The result should look like this after being clicked! It will animate for a short duration, then the rest of the animations will trigger.
Mini Feeding Screens
Mini Feeding Screens
This screen uses the default screen layout. See Sim Screen Layout if you need a review before continuing.
The content in the sim area is made of two components. Be sure to place these components in the following order:
janus-mcq (molecule to organsims)
janus-navigation-buttons (invisible navigation buttons)
janus-text-flow (sprinkle effect)
This order will ensure that the animations play after clicking the buttons.
Molecule to Organism MCQ
Molecule to Organism MCQ
Populate the MCQ
Select the mcq
Click on the edit button in the component panel to open the JSON for it.
Click this link:
https://www.dropbox.com/s/phc7a5igyz3ar2s/json_molecule-to-organism-mini-mcq-txt.txt?dl=0Copy the JSON text
Return to the component's JSON and paste over it.
Click Save. Note: You will need to make your own id for this component before saving.
Edit the first three mcq options (molecules) as needed.
Style the MCQ
Author View
Set the following attributes:
Custom CSS Class
sim feed mini fed
After those three class names, add a class name of only one organism that will be "happy" after being fed:
tricho sea-turtle pseu pelly nitros nitrob zoe
Finally, add a class name of only one molecule that will make the organism "happy" after being fed:
water air food
Note: The order of the three molecules will always be displayed in the order of water, air, then food.
Width & Height
No values are required!
LessonView
The result should look like this prior to clicking!
The result should look like this after clicking the molecule that is the same as the class name. In this case it is food.
Invisible Navigation Buttons
Invisible Navigation Buttons
Creating buttons
Create 3 navigations buttons, one for water, air and food. These will be used to trigger events and select the MCQ indirectly.
Styling buttons
Author View
Set the following attributes:
ID
The ID is needed for styling the buttons. ID them as:
water-btn, air-btn, food-btn
Custom CSS Class
sim feed button
Width & Height
No values are required!
Author View
If done correctly, you will not see the buttons in the lesson.
Sprinkle Effect Text
Sprinkle Effect Text
Populate the Text
This one is pretty simple also. The only important thing is to make sure you have exactly seven lines of text.
Select the text-flow
Click on the edit button
Write anything. I wrote "s" for "sprinkle" because reasons.
Make sure you have exactly seven lines of text, then click save.
Style the Text
Author View
Set the following attributes:
Custom CSS Class
food-fall
Width & Height
No values are required!
LessonView
The result should look like this after being clicked! The food will fall from the selected molecule spreading outward, then the rest of the animations will trigger.
Reaction Cards
Reaction Cards
Reaction cards can be displayed by using an mcq.
Reaction Cards MCQ
Reaction Cards MCQ
Populate the MCQ
Select the mcq
Click on the edit button in the component panel to open the JSON for it.
Click this link:
https://www.dropbox.com/s/dd4bzycurts3ho1/json_reaction-cards.txt?dl=0Copy the JSON text
Return to the component's JSON and paste over it.
Click Save. Note: You will need to make your own id for this component before saving.
Edit the mcq options as needed.
Style the MCQ
Author View
Set the following attributes:
Custom CSS Class
reaction-cards
Width & Height
Add width if needed. Height will be set automatically.
LessonView
The result should look like this! The layout of the cards will flow based on the width. In this screenshot, the width of the MCQ is set to 606px. Play around with width sizes to get the layout you want.
Star Tracker
Star Tracker
The star tracker will appear along with the content. It can be used on any screen.
Star Tracker Text
Star Tracker Text
Populate the Text
This one is pretty simple.
Select the text-flow
Click on the edit button
"Star Tracker" for the first line.
Write anything for the next ten lines. I used numbers for convenience.
Make sure you have the first line as the title and exactly ten lines of text after, then click save.
Style the Text
Author View
Set the following attributes:
Custom CSS Class
star-score
After that class name, you can add a class name depending how many stars to populate in the tracker:
star-1, star-2, ... star-10
Width & Height
No values are required!
LessonView
The result should look like if the class name star-7 is applied.
Page updated
Report abuse