Plate Tectonics

Lesson Styles

Download Styles

Plate Tectonics

⇩ Download Light Theme CSS

The theme for the Star Party course starts with Smart Sparrow's Light Theme as the base.

Original Source

⇩ Download Plate Tectonics CSS

Any styling unique to this course is covered in the Star Party CSS.

Text

Position and Dimensions

The first Text-Flow Activity will always be aligned to the top-left of the content area.

x: 0
y: 0
width: 568 || 327
height: Automatic, or set specific height as needed.

The CSS will automatically set the font style. It also includes the dialogue balloon look, like the background color and balloon tail at the bottom-right corner.

This example's structure:

See? That's...
Here are a few...

This example's structure:

We're going to need more...

Let me warm up...

The second Text-Flow Activity will always be aligned to the left of the content area.

x: 0
y: height of first text-flow plus 20px
width: 568 || 327
height: Automatic, or set specific height as needed.

The CSS will automatically set the font style. It also includes the dialogue balloon look, like the background color and balloon tail at the top-right corner.

In this example, the height was overridden with a specific size of 174px. this created enough blank space below the text for a text input to overlay and appear as if it is part of the overall structure.

Tails for Speech Bubble

Tails for speech bubbles are automatically applied. You can change their position, or remove them, with the following classes.

customCssClass: tail-bottom-right

customCssClass: tail-top-right

customCssClass: tail-none

Half Width Text

To allow the text to only flow halfway across the speech text area to make room for other items, add this class.

customCssClass: text-width-half

No Style Text

To strip text of the default style, use the following class name. This removes the speech bubble surrounding the text. Font size, family, and color will remain the same.

customCSSclass: no-style

Label

Labels are like the no-style class, but the font is smaller and always bold

customCSSclass: label

In this example, the "West margin" and "East margin" texts are text-flow activities placed above their respective image mcq

Vocabulary Term Text

Vocabulary term text structure:

Text is purple and underlined to appear clickable.

Images

Invisible Pixel

This link is often used when an image activity is needed, but the actual src is not. For example, sometimes answer mechanisms need a background that aren't present in the default CSS.

src: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/transparent-pixel.png

Answer Background

Sometimes the background to the answer mechanism is not automatically inherited. You may also want to combine multiple answering methods to look like one section.

To create a blank answer area, create an image-activity and apply these settings:

x: 10
y: Depends on content
width: 548
height: Depends on content

customCSSclass: answer-background

src: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/transparent-pixel.png

Orby's Face

Add an image to the screen and give it the following custom CSS class names.

The position and size will be set by the CSS, so you can ignore those settings (x,y, width, height).

The invisible pixel is a trick to be able to utilize the Image Activity.

x: 0
y: 0
width: 0
height: 0

src: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/transparent-pixel.png

customCSSclass: See below.

orby-cute

orby-happy

https://etx-nec.s3.us-west-2.amazonaws.com/css/torus/etx/images/plate-tectonics/orby-face-think.svg

orby-think

Sim

Orby/Age/

When the sim is in Orby or Age mode, the apply these settings:

x: 588
y: 0
width: 412
height: 500

src: Placeholders for now

Orby
https://etx-nec.s3-us-west-2.amazonaws.com/Chris-Sandbox/experimental-files/sphere.html

Age
https://gogoapps.gitlab.io/asu-plate-tectonics-lesson-1/

Card Tracker

This sim will always align to the right side of the screen.

x: 588 || 673
y: 0
width: 412 || 327
height: 500

src: https://etx-nec.s3-us-west-2.amazonaws.com/sandbox/plate-tectontics-card-widget/index.html

Cross-Section

Fills the whole content area

x: 0
y: 0
width: 1000
height: 500

src: Place Holder
https://threejs.org/examples/webgl_animation_cloth

Focuser Effect

This is a text-flow activity with 4 tags. This allows a mask to wrap around the viewable area, in this case the Cross-section sim.

x: 0
y: 0
width: 0
height: 0

CustomCssClass: focus-view

Inputs

MCQ

Style is automatically inherited. Incudes answer background style.

x: 10
y: Depends on content
width: 548 || 307
height: Automatic

MCQ - Horizontal

Style is automatically inherited. This does NOT include answer background style. Images in this example are not included.

x: 10
y: Depends on content
width: 568 || 307
height: Automatic

customCssClass: mcq-h no-text

MCQ - Image MCQ

x: Depends on content
y: Depends on content
width: Depends on content
height: Automatic

customCssClass: image-mcq default-image-size col-3

The number of columns can be set as low as 1 and as many as 6. For example, changing the class name from "col-3" to "col-4" will display 4 columns.

MCQ - Image MCQ Recap

x: Depends on content
y: Depends on content
width: Depends on content
height: Automatic

customCssClass: image-mcq default-image-size col-3 recap

All the same settings and class names as a regular Image MCQ plus the class name of "recap".

Hint Box

A hint box is just a text-flow element. The clickable "links" are purely decorative. Each "link" is a tag. The first will align to the left. The last will align to the right. Each should automatically have an even space between.

Space is limited, so be mindful of text length.

x: 0
y: Height of the text-flow above it.
width: 568
height: Automatic

customCssClass: hint-box

Components

Fill in the Blank - Basic

x: Depends on content
y: Depends on content
width: Depends on content
height: Depends on content

customCSS: Copy the block of CSS code below and paste it into this field.

.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.8rem;}.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-container .select2-selection__rendered{background-color:#477e59!important}p .dropdown-blot .select2-container .select2-selection--single .select2-selection__rendered {min-height: 30px!important;}

Fill in the Blank - Orby speech with tail

x: 0
y: Depends on content
width: 568
height: Depends on content

customCSS: Copy the block of CSS code below and paste it into this field.

.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}.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}.fib-container .app{background-color:#ebebeb;padding:10px;box-sizing:border-box;box-shadow:0 0 3px rgb(0 0 0 / 80%)}.fib-container .app:after{content:"";position:absolute;top:0;right:2px;z-index:0;transform:skewX(-40deg) translateX(50%);border:0;box-shadow:1px -1px 1px rgb(0 0 0 / 40%);width:20px;height:20px;background-color:transparent;border-top:solid 10px #ebebeb;border-right:solid 10px #ebebeb;border-bottom:solid 10px transparent;border-left:solid 10px transparent;box-sizing:border-box}.dropdown.incorrect+.select2-container .select2-selection__rendered{background-color:#bd1f2e!important}.dropdown.correct+.select2-container .select2-selection__rendered{background-color:#477e59!important}p .dropdown-blot .select2-container .select2-selection--single .select2-selection__rendered {min-height: 30px!important;}

DITB

Standard Drop in the Blank activity. This style includes speechbubble style, even the tail in top right corner.

x: 0
y: Depends on content
width: 568
height: Depends on content

customCSS: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx/styles/style_pt-ditb.css

Excludes tail

x: 670
y: -2
width: 327
height: Depends on content

customCSS: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx/styles/style_pt-ditb-no-tail.css

Page updated

Report abuse