Seasons

Lesson Styles

Download Lesson Styles

⇩ Download Light Theme CSS

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

Original Source

⇩ Download Seasons CSS

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

Images

Containers

Background for the top portion of screen.

With Avatar

src: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx/images/seasons/background-top.png

x: 0
y: 0
w: 1000
h: 125

Without Avatar

src: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx/images/seasons/backgrund-top-no-avatar.png

x: 0
y: 0
w: 1000
h: 125

Answer Background

Create an image (invisible pixel), and apply the custom CSS

x: ?
y: ?
w: ?
h: ?

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

Answer Background-top-right

Specifically designed for answers that are in the top right corner of the screen. Create an image (invisible pixel), and apply the custom CSS

x: No need to set this
y: 10
w: ?
h: 100

custom CSS Class: answer-background-top-right
src: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/transparent-pixel.png

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

Overlay - White

This is a plain white image. Can be used for a variety of purposes.

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

Adding the following two CSS class names will make the image transparent and block any clickable objects, like buttons, that are behind it.

customCssClass: opacity60 pointer-events-initial

Sims

Avatar Creator

src: https://etx-nec.s3-us-west-2.amazonaws.com/seasons/avatar-creator/index.html

x: 0
y: 120
w: 1000
h: 380

Avatar Image

src: https://etx-nec.s3-us-west-2.amazonaws.com/seasons/avatar-panel/index.html

x: 10
y: 10
w: 178
h: 100

Seasons Sim

src: https://etx-nec.s3-us-west-2.amazonaws.com/seasons/model-sim/index.html

x: 0
y: 120
w: 1000
h: 380

Typography

The font and style of standard text is automatic.

Typical size and position of first text-activity:

x: 216
y: 16
w: 378
h: 82

Standard text

Standard text structure:

A standard line of text

Bold text

Bold text structure:

A bold line of text

Action text

Action text structure:

Action text is bold and yellow

Vocabulary term text

Vocabulary term text structure:

Text is light purple and underlined to appear clickable.

Ordering labels

These numbers are not part of the ordering component, they are individual text elements. Set the CSS class name to "order-label" and position them accordingly over the the component.

Inputs

MCQ

Style is automatic. The settings below are for this specific example. Settings may vary depending on content.

x: 412

y: 10

width: 568

height: 100

MCQ with Images

Style is automatic. The settings below are for this specific example. Settings may vary depending on content.

x: 10

y: 130

width: 980

height: 360

Components

FITB

The settings below are for this specific example. Settings may vary depending on content.

x: 10
y: 130

width: 980

height: 360

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

.fib-container .app{padding:10px;box-sizing:border-box;background-color:var(--seasonsBlack);border-radius:5px;border:solid 1px var(--grayDark80)!important}.ql-container.ql-snow{border:0!important;background-color:var(--seasonsBlack);border-radius:3px}.ql-snow .ql-editor{padding:0}.ql-snow .ql-editor p{font-weight:400;font-size:19px;line-height:2;letter-spacing:initial;color:#ebebeb}.dropdown-container{display:inline-block;position:relative;vertical-align:middle}.ql-snow .ql-editor p .dropdown-blot .select2-container .select2-selection--single .select2-selection__rendered{background-color:#333;border:solid 1px var(--seasonsYellow);border-radius:0}.select2-container--default .select2-selection--single{background-color:initial;border:0;border-radius:0;height:auto}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--seasonsYellow) 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 var(--seasonsYellow) transparent;border-width:0 6px 7px 6px;margin-left:-7px;margin-top:-3px}.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:var(--seasonsYellow);color:#333;border:0;margin-top:-2px;white-space:normal;line-height:1.5}.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:#333 transparent transparent transparent}.dropdown-blot .dropdown-container[data-select2-id] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #333 transparent!important}

DITB

The settings below are for this specific example. Settings may vary depending on content.

x: 280
y: 140

width: 440

height: 300

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

Matching

The settings below are for this specific example. Settings may vary depending on content.

x: 290
y: 140

width: 690

height: 340

Sim Settings.Custom CSS value: Copy the block of CSS code below and paste it into this field.

body #scene_Student{border-radius:3px;border:solid 1px #484848 !important;background-color: #161616;padding: 10px;box-sizing: border-box;}.columns-container {padding: 0;}.columns-container .items-column .item:last-child {margin-bottom: 0;}.container {overflow: hidden;}.items-column {height: 100%;}.items-column .items-container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;}.columns-container .items-column .item {border: solid 0.5px #FFC627;background-color: black;padding: 10px;box-sizing: border-box;height: 40px;margin-bottom: 5px;height: 75px;}.item.link-hover {padding: 10px;}.columns-container .items-column .item .item-label {color: #ffffff;height: auto;position: relative;top: 50%;transform: translateY(calc(-50% + 4px));line-height:initial;}.columns-container .left-column .item {border-radius: 4px 100px 100px 4px;margin-left: 0;}.columns-container .left-column .item .item-label:after {content: "";width: 20px;height: 20px;box-sizing: border-box;position: absolute;background-color: transparent;border: solid 1px #FFC627;border-radius: 100px;margin: 0;padding: 0;top: 50%;transform: translateY(-50%);right: 5px;}.columns-container .right-column .item {border-radius: 100px 4px 4px 100px;margin-right: 0;}.columns-container .right-column .item .item-label:after {content: "";width: 20px;height: 20px;box-sizing: border-box;position: absolute;background-color: transparent;border: solid 1px #FFC627;border-radius: 100px;margin: 0;padding: 0;top: 50%;transform: translateY(-50%);left: 5px;}.columns-container .items-column .item.link-hover {border: solid 1px #FFC627;background-color: #222;padding: 10px;box-sizing: border-box;box-shadow: none;}.columns-container .items-column .item[linked] {border: solid 2px #FFC627;background-color: #291b30;box-shadow: none;}.columns-container .items-column .item.preview-source-hover, .columns-container .items-column .item.preview-target-hover {border: solid 3px #ffcc00;background-color: #291b30;box-shadow: none;}.columns-container .items-column .item .remove-links:before {content: "X";margin-left: auto;margin-right: auto;position: relative;}.line-renderer line {stroke: #FFC627;stroke-width: 2px;}.line-renderer line.pointer {stroke: #ffcc00;stroke-width: 2px;}.columns-container .items-column .item:focus, .columns-container .items-column .item.link-hover, .columns-container .items-column .item.preview-source-hover {background-color: black;border: solid 2px white;}

Add this additional style at the end if you want the background of the Matching activity to be transparent.

body #scene_Student{background:0 0;border:0!important}

Matching - Images

The settings below are for this specific example. Settings may vary depending on content.

x: 155
y: 140

width: 690

height: 340

Sim Settings.Custom CSS value: Copy the block of CSS code below and paste it into this field.

body #scene_Student{border-radius:3px;border:solid 1px #484848!important;background-color:#161616;padding:10px;box-sizing:border-box}.columns-container{padding:0}.columns-container .items-column .item:last-child{margin-bottom:0}.container{overflow:hidden}.items-column{height:100%}.items-column .items-container{height:100%}.columns-container .items-column .item{border:solid .5px #FFC627;background-color:#000;padding:10px;box-sizing:border-box;margin-bottom:5px;height:59.5px;background-size:cover}.item.link-hover{padding:10px}.columns-container .items-column .item .item-label{color:#fff;height:auto;position:relative;top:50%;transform:translateY(calc(-50% + 4px));line-height:initial}.columns-container .left-column .item{border-radius:4px 100px 100px 4px;margin-left:0}.columns-container .left-column .item .item-label:after{content:"";width:20px;height:20px;box-sizing:border-box;position:absolute;background-color:transparent;border:solid 1px #FFC627;border-radius:100px;margin:0;padding:0;top:50%;transform:translateY(-50%);right:5px}.columns-container .right-column .item{border-radius:100px 4px 4px 100px;margin-right:0;background-position-x:initial}.columns-container .right-column .item .item-label:after{content:"";width:20px;height:20px;box-sizing:border-box;position:absolute;background-color:transparent;border:solid 1px #FFC627;border-radius:100px;margin:0;padding:0;top:50%;transform:translateY(-50%);left:5px}.columns-container .items-column .item.link-hover{border:solid 1px #FFC627;background-color:rgba(0,0,0,.2);padding:0;box-sizing:border-box;box-shadow:none}.columns-container .items-column .item[linked]{border:solid 2px #FFC627;background-color:#291b30;box-shadow:none}.columns-container .items-column .item.preview-source-hover,.columns-container .items-column .item.preview-target-hover{border:solid 3px #fc0;background-color:#291b30;box-shadow:none}.columns-container .items-column .item .remove-links:before{content:"X";margin-left:auto;margin-right:auto;position:relative}.line-renderer line{stroke:#FFC627;stroke-width:2px}.line-renderer line.pointer{stroke:#fc0;stroke-width:2px}.columns-container .items-column .item.link-hover,.columns-container .items-column .item.preview-source-hover,.columns-container .items-column .item:focus{border-color:#ffc627;background-color:#3b2745;box-shadow:0 0 0 1px #fff;cursor:pointer}.columns-container .items-column .item:focus,.columns-container .items-column .item.link-hover,.columns-container .items-column .item.preview-source-hover{background-color:#000;border:solid 2px #fff}

Add this additional style at the end if you want the background of the Matching activity to be transparent.

body #scene_Student{background:0 0;border:0!important}

Matching - Images - Half width

The settings below are for this specific example. Settings may vary depending on content.

x: 500
y: 140

width: 480

height: 340

Sim Settings.Custom CSS value: Copy the block of CSS code below and paste it into this field.

body #scene_Student{border-radius:3px;border:solid 1px #484848!important;background-color:#161616;padding:10px;box-sizing:border-box}.columns-container{padding:0}.columns-container .items-column .item:last-child{margin-bottom:0}.container{overflow:hidden}.items-column{height:100%}.items-column .items-container{height:100%}.columns-container .items-column .item{border:solid .5px #ffc627;background-color:#000;padding:10px;box-sizing:border-box;margin-bottom:5px;height:59.5px;background-size:cover}.item.link-hover{padding:10px}.columns-container .items-column .item .item-label{color:#fff;height:auto;position:relative;top:50%;transform:translateY(calc(-50% + 4px));line-height:initial}.columns-container .left-column{width:35%}.columns-container .left-column .item{border-radius:4px 100px 100px 4px;margin-left:0}.columns-container .left-column .item .item-label:after{content:"";width:20px;height:20px;box-sizing:border-box;position:absolute;background-color:transparent;border:solid 1px #ffc627;border-radius:100px;margin:0;padding:0;top:50%;transform:translateY(-50%);right:5px}.columns-container .right-column{width:65%}.columns-container .right-column .item{border-radius:100px 4px 4px 100px;margin-right:0;background-position-x:initial}.columns-container .right-column .item .item-label:after{content:"";width:20px;height:20px;box-sizing:border-box;position:absolute;background-color:transparent;border:solid 1px #ffc627;border-radius:100px;margin:0;padding:0;top:50%;transform:translateY(-50%);left:5px}.columns-container .items-column .item.link-hover{border:solid 1px #ffc627;background-color:rgba(0,0,0,.2);padding:0;box-sizing:border-box;box-shadow:none}.columns-container .items-column .item[linked]{border:solid 2px #ffc627;background-color:#291b30;box-shadow:none}.columns-container .items-column .item.preview-source-hover,.columns-container .items-column .item.preview-target-hover{border:solid 3px #fc0;background-color:#291b30;box-shadow:none}.columns-container .items-column .item .remove-links:before{content:"X";margin-left:auto;margin-right:auto;position:relative}.line-renderer line{stroke:#ffc627;stroke-width:2px}.line-renderer line.pointer{stroke:#fc0;stroke-width:2px}.columns-container .items-column .item.link-hover,.columns-container .items-column .item.preview-source-hover,.columns-container .items-column .item:focus{border-color:#ffc627;background-color:#3b2745;box-shadow:0 0 0 1px #fff;cursor:pointer}.columns-container .items-column .item:focus,.columns-container .items-column .item.link-hover,.columns-container .items-column .item.preview-source-hover{background-color:#000;border:solid 2px #fff}

Hotspot - Standard

The settings below are for this specific example. Settings may vary depending on content.

x: 10
y: 130

width: 530

height: 360

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

The settings below are for this specific example. Settings may vary depending on content.

x: 50
y: 130

width: 900

height: 360

Item 7 CSS: Copy/paste the code below:

@import url(https://s3-us-west-2.amazonaws.com/etx-nec/css/etx-resource/styles/style_etx.css);:root{--seasonsBlack:#111111;--seasonsYellow:#FFC627;--seasonsYellowDark:#AD820A;--seasonsPurple:#3b2745;--seasonsPurpleDark:#291b30;--hostpotSidebarWidth:220px}.pin-name-label,.scene{user-select:none}#stage-stage iframe[id*=hotspot]{border-radius:3px;border:solid 1px var(--grayDark80)!important;background-color:#161616;padding:10px}.sidebar{width:var(--hostpotSidebarWidth);background-color:#484848;background-color:var(--grayDark80)}.sidebar-title{font-family:OpenSansBold,sans-serif}#scene_StudentMultiplacement .remove-pin-button{background:rgba(255,255,255,.3);border:dashed 2px #484848;width:calc(100% - 20px);margin:-10px 10px 0 10px}#scene_StudentMultiplacement .remove-pin-button::before{width:0;height:0;opacity:0}#scene_StudentMultiplacement .remove-pin-button svg{fill:#333}.pin-icon svg path:first-child{stroke:rgba(255,255,255,.2)!important;stroke-width:.5px!important}.pin-name-label:empty{opacity:0}.main-view{right:0;left:initial;width:calc(100% - var(--hostpotSidebarWidth))}

Hotspot - Emphasis of Labels

The settings below are for this specific example. Settings may vary depending on content.

x: 500
y: 140

width: 480

height: 342
CSS Value: https://etx-nec.s3-us-west-2.amazonaws.com/css/etx/styles/style_season-hotspot-label.css
JSON Config Value:

{"background":"https://etx-nec.s3-us-west-2.amazonaws.com/seasons/images/ld_graphics/sun_earth_matching.png","backgroundWidth":358,"backgroundHeight":340,"backgroundRatio":2.6315789473684212,"backgroundTop":null,"backgroundLeft":null,"backgroundAltText":"Alt text","areas":[],"pins":[{"id":1,"color":"#FFDE85","label":"Most"},{"id":2,"color":"#FFC627","label":"Second most"},{"id":3,"color":"#C28E00","label":"Third most"},{"id":4,"color":"#836400","label":"Last"}],"correctState":[]}

Page updated

Report abuse