Custom CSS for Lesson Templates

Comparison 

• Bar - .slider .slider-knob
• Knob (top) - .slider .slider-knob::before
• Knob (bottom) - .slider .slider-knob::after
• Text - .slider
  (use “background” here to change the colors) 

• Text -.text-left
• List - .slide-expandable-list 
• Buttons - .slide-expandable-list .btn.btn-solid
• Content - .slide-expandable-list .item-content, .block-dk 
• Selected Item - .slide-expandable-list .item.active .item-button 
• Active Select - .slide-carousel .btn.btn-solid
• The (+) sign - .slide-expandable-list .item-button:after
• The (-) sign - .slide-expandable-list .item.active .item-button:after

Image Collection

• Button - .slide-image-collection .tappy-child
• Button (Visited) -  .slide-image-collection .tappy.visited .tappy-child

Image Gallery

• Dots (not visited) - .slide-image-gallery .pagination .dot
• Dot (visited) - .slide-image-gallery .pagination .dot.active
  (background is the fill in, color is the outline, opposite for non-active)

Image Slider

• Default Caption- .slide-image-slider .style-default .caption-content 
  (“style-default” can be changed to “style-light”, “style-dark” “style-transparent-light-text”)

Image Map

• Waypoint (“white”:) - .slide-image-waypoints.waypoint-white .waypoint:after
• Visited Waypoint - .slide-image-waypoints.guided-false .waypoint.tapped:after

Image Map Guided

• Direction Buttons - .slide-image-waypoints .prev-wp, .slide-image-waypoints .next-wp 

Click to Reveal

• Before Block - .slide-reveal .btn-reveal-title 
• After Block - .slide-reveal .btn-reveal-title.active

Scratch to Reveal

• Reload button - .slide-scratch-to-reveal.state-touched .btn-replay

Quote

• Speech Bubble (Dark) - .quote.quote-dk .quote-bg 
• Speech Bubble (Light) - .quote.quote-lt .quote-bg
• Button - .btn.btn-muted.btn-done.content-ver
  

Simple Image & Scrollable

• Background - .pswp__item (then “background:”)

Table

• Actual Table (not title) - .slide-table .table.table-full-width
• Table Header -  .slide-table th
• Table Cells -  .slide-table .table-row:first-child (replace with nth-child(2) or (3) or ‘last’ if last cell)
  

Text Sequence

• To have image list style - .slide-text-sequence {list-style-image: url(https://www….png);}

Video

• Video frame - .video-js .vjs-tech
• Skip button - .btn.btn-muted.btn-done.content-ver

YouTube 

• Remove button - .yt-content + .slide-footer{display: none !important;}
• Play Button - .video-play, .video-replay
• Play Button (when clicked) - .video-play.__active, .video-replay.__active
• Thumbnail - .slide-youtube-video-embed .yt-thumb

Missing Word

• Missing Words - .slide-missing-word .draggy
  (solid buttons)

Fill in the Blank

• Missing Letters - .slide-construct .letter
  (also solid buttons)

Chat 

• Left Screen - .slide-chat .chat-msg.pull-left
  .slide-chat .chat-msg.pull-left:after {border-color: rgba(_______) transparent transparent;}
• Right Screen - .slide-chat .chat-msg.pull-right
• Correct Answer - .slide-chat.state-complete .chat-msg.incorrect
• Incorrect Answer - .slide-chat.state-complete .chat-msg.correct 
• Pointy part of the question balloon - .slide-chat .message--question:after {border-color: #003035 transparent transparent;}
• Pointy part of the answer choices balloon - .slide-chat .message--answer:after {
  border-color: #B2BB1D transparent transparent;} 

Circle the Answer

• Entire Slide - .slide-circle-the-answer .circle-canvas
• Box -.text-dark .slide-circle-the-answer .circle-box.active .circle-box-text
• Answer Box - .text-dark .slide-circle-the-answer .circle-box.active .circle-box-text
  

Strike Out

• Entire Slide - .slide-strikeout .strikeout-canvas
  

Multiple Choice

• Entire slide - .slide-multiple-choice-game (solid buttons)
• Area around answers - .block-dk
• Box Around Answers - .block-md
• Dots - .selectable .btn:before
  .selectable .btn:after
• Selected Answer - .selectable.active .btn
• Correct Answer - .slide-multiple-choice-game.state-complete .selectable.correct .btn
• Incorrect Answer - .slide-multiple-choice-game.state-complete .selectable.incorrect .btn
  

Multiple Choice: Image

• Incorrect- .slide-image-multiple-choice.state-complete .tappy.incorrect.active 
• Correct - .slide-image-multiple-choice.state-complete .tappy.correct 
• Active/Selected - .slide-image-multiple-choice .tappy.active
  

Slider

• Slider- .slide-slider .slider-bar
  (color not changeable from here but height is= {height: 14px}  )
• Knob - .slide-slider.active .slider-knob-input
  ("background-color" for knob, "color" for text above it)

Dial 

• Circular Dial - .slide-dial .dial-ring
• Knob - .slide-dial .dial-knob

Ratio

• Ratio Game Bars - .slide-ratio .ratio-bar

Pie Chart

• Pie Chart - .slide-pie-chart .pie-ring-svg

Connect 

• Boxes (incomplete) -.slide-connect .connect-box
• Boxes (Complete) - .slide-connect .connect-box.complete
• Correct answer (Complete) - .slide-multiple-choice-game.state-complete .selectable.correct .btn  
• Entire slide - .slide-connect .connect-canvas

True or False 

• True/False Answers - .slide-game-true-or-false .game-statement

• Bars on the Side- .slide-game-true-or-false .game-true, .slide-game-true-or-false .game-false 

• Bars on the Side (when box is dragged) - .slide-game-true-or-false .game-true.active, .slide-game-true-or-false .game-false.active
• Grab Cursor - .slide-game-true-or-false .game-statement {
      cursor: grab; }
                          .slide-game-true-or-false .game-statement.active {
      cursor: grabbing; }

• Find a Word - .slide-find-a-word .grid-container 
• Selected - .slide-find-a-word .grid-highlight.complete 
• Incorrect - .slide-find-a-word .grid-highlight.incorrect

Memory Game Tiles

• Memory Game Tiles - .slide-game-memory .btn.btn-solid

Image/Word Match

• Image/Word Match Blocks-  .slide-game-image-word-match .match-words 
• Text - .multi-content.multi-content-text
• Choices - .slide-game-image-word-match .btn-word
• Make images bigger- .slide-game-image-word-match .match-image-container {height:unset} 

Free Text 

• Input Submit button - text-input-dismiss-btn.btn.btn-solid 
• “Type Your Response” - #text-input-view #text-input-container-top

External URL

• External URL continue button - .slide-url .exit-btn