Mel2's Advanced Authoring Reference
TABLE OF CONTENTS
Links
Building Guidance
Layout Notes
Helper Set Up
Learning Objectives
Page Numbers and Progress Bars
Scoring
Trap States
Variables
Virtual Field Trip Integration
Wiring Sims
Component Specific Quirks
Misc
Initial State Go Tos
Linking out to a new tab
Adding special characters/subscripts text in plain text
Hiding stuff
Setting something as blank
Adding Explorations to the Course (Connecting it to sections)
High Level
Making an Open and Free
Accessing an Open and Free
Publish and Updating Github
Reviewing Responses in Pre/Post Checks
Glossary/Reference
CSS
Data Types
Archive notes
Links
How To Package a Sim
ETX Support
CAPI 101
Style Guide
Advanced Author Training (Internal) (Components!)
Building Guidance
Layout Notes
● Be consistent with text location
○ Examples:
■ Classic first text is x 10, y 20, width 800
■ Sim first text is x 30, y 50, width not needed (overided on sim screens)
(space is for helper)
■ Prompts and interactives x 30
● Copy elements like helper (then adjust class)
● Add css class to prompts (prompt)
● Sequence the elements (what column order?)
● don’t need col1-1, the default is full width
○ So things like the title on the screen don’t need any classes applied
○ Or if you had a screen that everything is full width, the only classes you’d need
would be for stying things, like prompts
● don’t need w-100 (except in rare situations)
● delete the width on buttons - this makes them default to full width
● delete the heigh on FITB components, this allows them to auto resize.
● For Airplane Biofuels 3, this one is going to look funky no matter what I think because
the graph isn’t responsive. Until we find a better way to make resizable graphs, these will
always be a little weird.
● For google charts - always have a “click here for a large one”
● For stacking add Float-right, etc.
● Drag and Drop Fancy Black Version
.scene {
background-color: #000;
border: solid 1px #2e2e2e;
.dropboxArea {
left: calc(50% + 120px);
transform: translateX(-50%) !important;
.dropboxArea .background {
position: absolute;
left: 0;
top: -1px;
.text-item {
width: 180px !important;
height: 50px !important;
.text-item .text {
padding: 4px 8px !important;
line-height: 1.25rem;
.bankArea {
background-color: #2e2e2e;
border: 0 !important;
.text-item {
width: 180px !important;
height: 50px !important;
background-color: #000;
color: #fff;
border: solid 1px #787878;
cursor: grab;
Helper Set Up
● Helper screen
○ set up in style guide
● Helper image
○ Copy helper from another screen, then adjust class
■ CSS options in guide
○ You can mutate expression
■ Example: stage.olympia.customCssClass, string = helper oyster sad
● Helper bubble guide
Learning Objectives
● Add them on the screen level with Edit Objectives
● There are skills and LOs
Page Numbers and Progress Bars
● Set up two variables
○ totalScreens - the total number of screens a student HAS to hit (not optional
loops)
■ Total questions is on each layer
○ currentScreen
■ Current question is for each screen
● Numbers
○ On the highest layer, add a textbox with this text:
{round({variables.currentScreen},1)}
○ Make it right justified
○ Background white
○ Css: t-10 r-20 position-absolute w-40px
● Progress Bars
○ On each big layer
■ Iframe with this link
● https://reflector.argos.education/reflector/widget/spr-widget-progre
ss-bar/2.*
● Set height to 10, delete width, CSS: p-0 m-0 pr-30
● Name progressBar
■ a text flow with {round({variables.currentScreen},1)}, right justified, and
css: b-10 r-20 position-absolute
○ On title screen (even if no progress bar shows)
■
○ On FIRST first screen (Welcome screens)
■
○ On second+ screen within that layer
■
● stage.progressBar.Current Question Number Array =
[{variables.currentScreen}]
● variables.currentScreen Number Adding 1
■ But then sub screens do not need anything in the initial state
○ On first screen of each layer (need to reset the new progress bar)
■ stage.progressBar.Total Question Numbers Array =
[{variables.totalScreens}]
■ stage.progressBar.Current Question Number Array =
[{variables.currentScreen}]
■ variables.currentScreen Number Adding 1
○ On learning loops - increments are added in decimals since not all students will
see it
■
● Note: only need the first row if it's the first screen in a layer
■ And on the last screen before going back to the main path, subtract the
total .1's
■ OR when they return to the main linear path, reset it to the main timeline
Scoring
How to add scoring on subscreens
● Add variable like Q5points
○ Assign it the max value (or if it's a right or wrong - just 1)
● In correct state
○ session.currentQuestionScore number = {variables.q5points}
Trap States
● Trap state tips
○ Need to check - Don't leave blanks - use []
● How to delete a correct trap state? You can't, but you can disable it.
● How to do a header? Used combine feedback option
Variables
● CASE SENSITIVE, DON'T USE SPACES
● Make the lesson's variables on the "Lesson" tab in the right column
○ "" for strings
○ Nothing for numbers
● To update a variable, mutate it
○ variables.[name of the variable type]
○ variables.county 1
○ stage.{source of new text}
■ Like: stage.janus_input_text-1395219130.text
■ Stage.map.Sim.SelectedCounty
■ Stage.map.Sim.SelectedFips
■ Stage.graph.Sim.Sample.Number
■ variables.county 1 {Stage.map.Sim.SelectedCounty}
○ Variables can be nested!
● To use a variable, add it in with the squigglies
○
● To add on to a variable,
○ Mutate state and do what we end up doing on "The Seven Elements" screen in
"Sample 1 Find Elements" of REAL Exp 1
● Global Variables
○ variables.name would be to the LOCAL lesson
○ app.explorations.name would be GLOBAL
■ Applies to the user
■ It has to be three parts. app.name would work for ALL lessons the user
ever does with us. Adding something (like .explorations.) will make it more
specific in use and is required.
Virtual Field Trip Integration
● Configure Tour It
○ add iframe
○ change id to “vt”
○ set source to the Tour URL
○ set custom css class to “sim”
● CSS stuff from Chris Andert
○ css files/links are here
■ https://sites.google.com/asu.edu/etx-style-guide/infiniscope/suite-fleet/flag
ship-lessons/main-style
○ go to “Lesson” and drop one of the css URLs into custom css
○ screen css can be set to use a custom css class; for the VTs Chris recommended
“layout-sim”
○ This will automatically give the lesson the basic look and feel of many of the
Infiniscope flagships
Wiring Sims
● Put up one screen with the preview and one with advanced author
● In author
○ Add Iframe
■ Drop link where we host it (currently use GoGo one, we would swap it out
once it's in our server)
○ Give new ID name each time
● In preview use god mode to set up desired initial state
● Then go back to author and match initial states
○ Condition example: Start with stage.aragoniteSim….
■ Use god mode to find rest of path or grab from initial state tools
■ Sim.Map.Variable.Selected (then value could be aragonite)
○ Can copy an initial state from another screen (but it'll overwrite anything else
already put there)
○
Component Specific Quirks
● Fill in the Blank (fitb):
○ You can use \n\n to add a line break
■
○ Delete height to help it not be bouncy with selections
Misc
Initial State Go Tos
● Change the CSS: stage.thingy.customCssClass String = butts
Linking out to a new tab
Just add another property after the “href” called target and set it equal to _blank … meaning
"target": "_blank" . You’ll also need to add a comma after the link in the href. It’ll end up looking
like this:
{
"tag": "a",
"style": {},
"children": [
{
"tag": "text",
"style": {},
"text": "Link in new tab",
"children": []
}
],
"href": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
"target": "_blank"
}
Adding special characters/subscripts text in plain text
For when you need to use subscript/superscripts/symbols but you don’t have rich text tools - just
copy and paste from here: https://symbl.cc/en/search/?q=subscript
Hiding stuff
Two options:
1. You could set an initial state for that sim to make it not visible. It would be
stage.iframe.IFRAME_frameVisible boolean = false
2. add the css class display-none to the sim
Setting something as blank
● NEVER leave something blank - it causes issues. This is a workaround.
● Number:
○
● String
○ Make a variable.blank that is a string of nothing ("")
○ Set the string to equal {variables.blank}
Adding Explorations to the Course (Connecting it to sections)
● On the Exploration page, select Options
● Add sections to Related resources
High Level
Making an Open and Free
● Go to Admin → Manage Open and Free
● Make new open and free
● Select course, Name it, give a random number and dates
○ Not there? Is it published? Go back to course and check
Accessing an Open and Free
● First publish updates if needed
○ In the project go to Publish → Publish
○ Click "Automatically push this publication…" IF IT'S NOT LIVE (otherwise check if
you can check it)
■ If live but you want to push updates to your open and free
● Comment: "Testing fixes - don't accept in live course"
● Hit publish
● Then manually update.
● Go to Admin → Manage Open and Free → details → view update
→ apply update
○ Add a note about the update in the comment box
○ Then hit the blue publish button
● Then go into Open and Free
○ Below the publish button are the sections. Find the name of the open and free.
It's not labeled as "Open and Free" or anything. You kind of need to know. You'll
be able to search for it.
■ To find the link… go to Admin → Manage Open and Free → search for
the section name that was listed under the publish button
■ If needed, go to details, go to edit details on the right, turn off "require
enrollment"
○ Then open it in Incognito Mode or another browser (it's worth making an account
for testing purposes
■ mnarish+student1@asu.edu would go to my work email, but would be a
new account
Publish and Updating Github
● First publish updates if needed
○ In the project go to Publish (sidebar) → Publish (can only do for projects, not
products)
○ Add a note about the update in the comment box
○ Click "Automatically push this publication…" IF IT'S NOT LIVE (otherwise check if
you can check it)
○ Then hit the blue publish button
○ See if the sections updated. If not…
■ Admin
■ Browse all course sections, find the section, select
■ Go into content area and see if there's an update for the PRODUCT, if so
then "manage source materials", "view update", "Apply update"
● You may go into one section to update the product, and if other
sections have the same base product, they will all be updated
● HW is really messy with sections/products, and we usually have
Lucien/An help there
● Github part: Lesson Github process (go to "What to do" section)
Reviewing Responses in Pre/Post Checks
● Go to Admin and Browse Course Sections
● Search for lesson
● Select "Reports" across the top
● Select "Quiz Scores" on the middle tab area
● Click on the score. Click on Attempt. Then scroll through the pages.
○ If it's not working (the attempt page isn't loading and you can't see the student's
pages), you may need to log into ANY canvas that has Argos in it. (Yes this is
weird. Melanie can show you if you need it. She goes to an LE canvas in another
tab and then refreshes the attempt window.)
Alt Pathway if there are no scores
● Go to Admin and Browse Course Sections
● Search for lesson
● Select "Students" across the top
● Select a student's name
● Select "Progress" across the middle tabs
● Click on the lesson. Click on Attempt. Then scroll through the pages.
○ If it's not working (the attempt page isn't loading and you can't see the student's
pages), you may need to log into ANY canvas that has Argos in it. (Yes this is
weird. Melanie can show you if you need it. She goes to an LE canvas in another
tab and then refreshes the attempt window.)
Setting up a course in Canvas
● Can only link in ONE product, so all of the lessons need to be in that product
● Set up an Argos page tat's an entrance page
○
● Then have an assignment page with points (if points are needed) of no submission
○
● Then in the assignment page that students do not see, the grade feeds back - that's set
up on the Argos side because they need to be linked
Glossary/Reference
CSS
● widthPercent80
● w-100 - pixels
● no-label - removes label on inputs (multiline doesn't need it)
● display-none - make components invisible and not affecting the spacing
● prompt - adds prompt styling to text
● callout - make a callout box
● no-bg to a janus-image to make the background transparent.
● If clearing out CSS, can set to a blank using a string of a space
Data Types
Condition Data Type Operator Value
● String - string of text
○ Doesn't need {}, [], or ""
○ Example: MCQ - Selected choice text
○ Options
■ = In general decreased
■ Bind to, setting to - Can ignore
○ Operators
■ = : Works for nearly everything
■ != : Not equals, works generally
■ Is : Should function like =
■ Not is : Should function like !=
■ Is exactly : Type and meaning, sometimes 2 could be a string or a
number. Is exactly, string=2, then has to be that
● Don't use (unless super complex variables) unless not contains
exactly
■ Not is exactly : Opposite
■ Contains : good for arrays, but also string.
● Text response is a paragraph, but want to see if it contains ALL
but not necessarily in that order
● "photosynthesis sponge bob" would trigger if bob, sponge, and
photosynthesis were all in the text in any order.
■ Not Contains : Opposite
■ Contains exactly :
● "photosynthesis sponge bob" needs to be in that order and with
those spaces
■ Not contains exactly : Opposite
■ Contains any :
● "photosynthesis sponge bob" - would look for each, and would
trigger if any showed up
■ Not contains any : Opposite
■ Starts with :
● Does it start with A?
■ Ends with :
● Number - Number
○ Example: Sim - year
○ Operators
■ In Range: #,#
■ ~== or ~!=: number,percent
● 10% approx or not approx to 9: 9,10
○ Trapping for blank numbers
■ stage.numberWhatever.value Number Is NaN true
● Is NaN is a boolean that means is not a number
● Array - Set of options
○ Best practice is to use the brackets, quotes aren't required
○ Example: Variable options
■ [Aragonite, pH]
○ Operators
● Boolean - True/False
○ Example: Sim is map variable is visible or not
○ Operators
■
● Enum - Dropdown similar to array, but can only select one
○ Most often use =
○ Operators
■
● Math expression/Point array - won't use
● When to use {}? Start without, but if there's an issue try adding it
Archive notes
Summarizing the hubs section 35-39
● Non sim pages
○ Added big Olympia to non sim pages
○ Set first text: x 10 y 20 Width 800, Leave height
○ Prompts and interactives text x 30
○ Prompt class added
● Sim pages
○ Added mini Olympia to non sim pages - SHOULD THIS BE THE REGULAR
ONE? (If not, we need a quote?)
○ Sim first text is x 30, y 50, width 330
● Could play with trap states
○ Play with Olympia's mutate state (life cycle video as example)
○ stage.olympia.customCssClass, string = helper oyster sad
■ Grin default smile shades sad think
■
Questions
● Added mini Olympia to non sim pages - SHOULD THIS BE THE REGULAR ONE? (If
not, we need a quote?)
● Why unable to change the quote?
● Effects on oysters table - may have messed that up - how to get out of configure mode?
● Trap states
○ Blocks v Single conditions
Fill in the Blank JSON
{
"id": "fitbSensory",
"custom": {
"$schema": "",
"alternateCorrectDelimiter": ",",
"caseSensitiveAnswers": false,
"content": [
{
"insert": "The virtual tour should be "
},
{
"dropdown": "blank1",
"insert": ""
},
{
"insert": " and have "
},
{
"dropdown": "blank2",
"insert": ""
},
{
"insert": " hotspots that highlight "
},
{
"dropdown": "blank3",
"insert": ""
},
{
"insert": ". Overall, the best tour for this use case is an "
},
{
"dropdown": "blank4",
"insert": ""
},
{
"insert": " tour. "
}
],
"cssClasses": "no-bg col1-2",
"customCss": ".ql-container.ql-snow{border:1px solid
#ccc;border:0!important;background-color:#fff;box-shadow:0 0 3px rgb(0 0 0 /
20%);border-radius:3px}.ql-snow .ql-editor
p{font-weight:400;font-size:20px;line-height:2;letter-spacing:initial}.ql-snow .ql-editor p
.dropdown-blot .select2-container .select2-selection--single
.select2-selection__rendered{border:solid 1px
#006586;border-radius:0}.select2-container--default .select2-selection--single
.select2-selection__arrow b{border-color:#006586 transparent transparent
transparent;border-width:7px 6px 0
6px;margin-left:-7px;margin-top:-1px}.select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow b{border-color:transparent transparent
#006586 transparent;border-width:0 6px 7px
6px;margin-left:-7px;margin-top:-3px}.select2-container--default
.select2-selection--single{background-color:initial;border:0;border-radius:0;height:100%}p
.select2-container--default .select2-selection--single
.select2-selection__arrow{top:0;height:100%}.dropdown-blot
.dropdown-container[data-select2-id] .select2-selection--single
.select2-selection__rendered,.ql-snow .ql-editor p .dropdown-blot .select2-container
.select2-selection--single
.select2-selection__rendered[title]{background-color:#006586;color:#fff;border:0;line-height:1.8r
em;}.select2-container .select2-selection--single
.select2-selection__rendered{padding-left:10px;padding-right:30px;}.dropdown-blot
.dropdown-container[data-select2-id] .select2-selection--single .select2-selection__arrow
b,.ql-snow .ql-editor p .dropdown-blot .dropdown-container .select2-selection--single
.select2-selection__rendered[title]+.select2-selection__arrow b,.ql-snow .ql-editor p
.dropdown-blot .dropdown-container[data-select2-id] .select2-selection--single
.select2-selection__rendered[title]+.select2-selection__arrow b{border-color:#fff transparent
transparent transparent}.dropdown-blot .dropdown-container[data-select2-id]
.select2-selection--single .select2-selection__rendered,.ql-snow .ql-editor p .dropdown-blot
.select2-container .select2-selection--single
.select2-selection__rendered[title]{white-space:pre-wrap}.dropdown-blot
.dropdown-container[data-select2-id] .select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #fff
transparent!important}.dropdown.incorrect+.select2-container
.select2-selection__rendered{background-color:#bd1f2e!important}.dropdown.correct+.select2-c
ontainer .select2-selection__rendered{background-color:#477e59!important}p .dropdown-blot
.select2-container .select2-selection--single .select2-selection__rendered {min-height:
30px!important;height: auto !important;}@-moz-document
url-prefix(){.select2-container.select2-container--default.select2-container--open{margin-top:0}}",
"elements": [
{
"alternateCorrect": "",
"correct": "short",
"key": "blank1",
"options": [
{
"key": "short",
"value": "short"
},
{
"key": "long",
"value": "long"
}
]
},
{
"alternateCorrect": "",
"correct": "a few",
"key": "blank2",
"options": [
{
"key": "a few",
"value": "a few"
},
{
"key": "lots of",
"value": "lots of"
}
]
},
{
"alternateCorrect": "",
"correct": "different lights and sounds they'll experience",
"key": "blank3",
"options": [
{
"key": "the history of the museum",
"value": "the history of the museum"
},
{
"key": "different lights and sounds they'll experience",
"value": "different lights and sounds they'll experience"
},
{
"key": "the learning objectives of the activities they'll be doing",
"value": "the learning objectives of the activities they'll be doing"
}
]
},
{
"alternateCorrect": "",
"correct": "informative",
"key": "blank4",
"options": [
{
"key": "informative",
"value": "informative"
},
{
"key": "exploratory",
"value": "exploratory"
}
]
}
],
"enabled": true,
"fontSize": 12,
"formValidation": false,
"height": 154,
"id": "",
"maxManualGrade": 0,
"maxScore": 1,
"mode": "Student",
"requireManualGrading": false,
"requiresManualGrading": false,
"screenReaderLanguage": "English",
"showCorrect": false,
"showHints": false,
"showOnAnswersReport": false,
"showSolution": false,
"showValidation": false,
"src": "",
"width": 123,
"x": 227,
"y": 273,
"z": 1
}
}
{
"id": "fitbSensory",
"custom": {
"$schema": "",
"alternateCorrectDelimiter": ",",
"caseSensitiveAnswers": false,
"content": [
{
"insert": "The recipe and the meal have the same "
},
{
"dropdown": "blank1",
"insert": ""
},
{
"insert": ", but the eating of a meal is not only the combination of ingredients but also
the "
},
{
"dropdown": "blank2",
"insert": ""
},
{
"insert": "."
} ],
"cssClasses": "no-bg col1-2",
"customCss": ".ql-container.ql-snow{border:1px solid
#ccc;border:0!important;background-color:#fff;box-shadow:0 0 3px rgb(0 0 0 /
20%);border-radius:3px}.ql-snow .ql-editor
p{font-weight:400;font-size:20px;line-height:2;letter-spacing:initial}.ql-snow .ql-editor p
.dropdown-blot .select2-container .select2-selection--single
.select2-selection__rendered{border:solid 1px
#006586;border-radius:0}.select2-container--default .select2-selection--single
.select2-selection__arrow b{border-color:#006586 transparent transparent
transparent;border-width:7px 6px 0
6px;margin-left:-7px;margin-top:-1px}.select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow b{border-color:transparent transparent
#006586 transparent;border-width:0 6px 7px
6px;margin-left:-7px;margin-top:-3px}.select2-container--default
.select2-selection--single{background-color:initial;border:0;border-radius:0;height:100%}p
.select2-container--default .select2-selection--single
.select2-selection__arrow{top:0;height:100%}.dropdown-blot
.dropdown-container[data-select2-id] .select2-selection--single
.select2-selection__rendered,.ql-snow .ql-editor p .dropdown-blot .select2-container
.select2-selection--single
.select2-selection__rendered[title]{background-color:#006586;color:#fff;border:0;line-height:1.8r
em;}.select2-container .select2-selection--single
.select2-selection__rendered{padding-left:10px;padding-right:30px;}.dropdown-blot
.dropdown-container[data-select2-id] .select2-selection--single .select2-selection__arrow
b,.ql-snow .ql-editor p .dropdown-blot .dropdown-container .select2-selection--single
.select2-selection__rendered[title]+.select2-selection__arrow b,.ql-snow .ql-editor p
.dropdown-blot .dropdown-container[data-select2-id] .select2-selection--single
.select2-selection__rendered[title]+.select2-selection__arrow b{border-color:#fff transparent
transparent transparent}.dropdown-blot .dropdown-container[data-select2-id]
.select2-selection--single .select2-selection__rendered,.ql-snow .ql-editor p .dropdown-blot
.select2-container .select2-selection--single
.select2-selection__rendered[title]{white-space:pre-wrap}.dropdown-blot
.dropdown-container[data-select2-id] .select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #fff
transparent!important}.dropdown.incorrect+.select2-container
.select2-selection__rendered{background-color:#bd1f2e!important}.dropdown.correct+.select2-c
ontainer .select2-selection__rendered{background-color:#477e59!important}p .dropdown-blot
.select2-container .select2-selection--single .select2-selection__rendered {min-height:
30px!important;height: auto !important;}@-moz-document
url-prefix(){.select2-container.select2-container--default.select2-container--open{margin-top:0}}",
"elements": [
{
"alternateCorrect": "",
"correct": "content",
"key": "blank1",
"options": [
{
"key": "story",
"value": "story"
},
{
"key": "content",
"value": "content"
}
]
},
{
"alternateCorrect": "",
"correct": "human experience",
"key": "blank2",
"options": [
{
"key": "human experience",
"value": "human experience"
},
{
"key": "summary",
"value": "summary"
},
{
"key": "finished product",
"value": "finished product"
}
]
},
{
"alternateCorrect": "",
"correct": "different lights and sounds they'll experience",
"key": "blank3",
"options": [
{
"key": "the history of the museum",
"value": "the history of the museum"
},
{
"key": "different lights and sounds they'll experience",
"value": "different lights and sounds they'll experience"
},
{
"key": "the learning objectives of the activities they'll be doing",
"value": "the learning objectives of the activities they'll be doing"
}
]
},
{
"alternateCorrect": "",
"correct": "informative",
"key": "blank4",
"options": [
{
"key": "informative",
"value": "informative"
},
{
"key": "exploratory",
"value": "exploratory"
}
]
}
],
"enabled": true,
"fontSize": 12,
"formValidation": false,
"height": 154,
"id": "",
"maxManualGrade": 0,
"maxScore": 1,
"mode": "Student",
"requireManualGrading": false,
"requiresManualGrading": false,
"screenReaderLanguage": "English",
"showCorrect": false,
"showHints": false,
"showOnAnswersReport": false,
"showSolution": false,
"showValidation": false,
"src": "",
"width": 123,
"x": 227,
"y": 273,
"z": 1
}
}
