Code Container


        <div class="code-container">
            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
            <pre><code id="myCodeSnippet">
            <!--CODE HERE-->

            CODE

            <!--CODE END-->
            </code></pre>
        </div>
js Word Spawner (Use spawner.js)

Use template once and flip-card-set for each instance


    <div class="flip-card-set"
            data-words="red green blue"
            data-image="../../img/card_cover/brick_question.jpg">
        <div class="card-container"></div>
    </div>

    <template id="flip-card-template">
        <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
            <img class="card-image" src="" alt="">
            </div>
            <div class="flip-card-back">
            <span class="word-text"></span>
            </div>
        </div>
        </div>
    </template>
                    

        <div class="flip-card-set"
                data-words="red green blue"
                data-image="../../img/card_cover/brick_question.jpg">
            <div class="card-container"></div>
        </div>
Word detective: (flip, stick, word on front, check on back)
WORD 


    <div class="flip-card" onclick="this.classList.toggle(`flipped`)">
        <div class="flip-card-inner">
            <div class="flip-card-front">
    REPLACE
            </div>
            <div class="flip-card-back">
                <div class="flip-check">
                </div>
            </div>
         </div>
     </div>
Question Cards: Click to Stick
REPLACE 


      <div class = "flip-card" onclick="this.classList.toggle(`flipped`)">
          <div class = "flip-card-inner">
              <div class = "flip-card-front">
                  <div class = "flip-question"></div>
              </div>
              <div class = "flip-card-back">
      REPLACE
              </div>
          </div>
      </div>
REPLACE 


      <div class = "flip-card" onclick="this.classList.toggle(`flipped`)">
          <div class = "flip-card-inner">
              <div class = "flip-card-front">
                  <div class = "brick-question"></div>
              </div>
              <div class = "flip-card-back">
      REPLACE
              </div>
          </div>
      </div>
In a Flash
REPLACE 

    <div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class = "flash"></div>
                </div>
                <div class="flip-card-back-dark">
        REPLACE
                </div>
            </div>
        </div>
Tic-Tac-Toe
Pick a card
WORD
WORD


              <div class = "ttt-wrapper">

                   <!-- LEFT TTT MAIN GRID CONTENT -->
                   <div class = "ttt-grid-item">
               <div class="ttt-word-cell" data-state="0">

                         <div class="ttt-card active">Pick a card</div>
                         <!-- COPY PASTE TO ADD WORD -->

                         <div class="ttt-card">REPLACE</div>



                       </div>
                   </div>

                   <div class = "ttt-grid-item">

                   <div class="ttt-board">
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>
                     <div class="ttt-cell" data-state="0">
                       <div class = "faded"><img src="../../img/ui/ttt_cover.png" class="ttt-card active">
                       </div>
                       <img src="../../img/ui/ttt_x.png" class="ttt-card">
                       <img src="../../img/ui/ttt_o.png" class="ttt-card">
                     </div>

               </div>
                   </div>

               <div class = "ttt-grid-item"></div>
               </div>

          

        <script src = "../../scripts/tic_tac_toe.js"><script>
Word Cloud: Read and Write Some Words!
REPLACE 

        <div class="skill-box">
            <div class="cloud-container">
                <div class="word-cloud">
            REPLACE
                </div>
            </div>
        </div>
Digraph Container
II
II
II
II
II
II
II
II
II
II
II
II
II
II
II

    <div class="skill-box">
        <div class="digraph-container-grid">
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
            <div class="digraph-bubble">II</div>
        </div>
    </div>
Digraph Flip Grid - Click to Stick!
II
II
II
II
II
II
II
II
II
II
II
II
II
II
II

    <div class="skill-box">

        <div class="digraph-container-grid">
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>
        <div class="sm-flip-card"
            onclick="this.classList.toggle(`flipped`)">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="treasure-question"></div>
                </div>
                <div class="flip-card-back">II</div>
            </div>
        </div>

        </div>
    </div>
Pick and Play on the Subway: Irregular Words Game

Student chooses a letter and number combination to play that Subway Card.

A
B
C
1
REPLACE
REPLACE
REPLACE
2
REPLACE
REPLACE
REPLACE
3
REPLACE
REPLACE
REPLACE
4
REPLACE
REPLACE
REPLACE
5
REPLACE
REPLACE
REPLACE
A
B
C

    <div class="lesson-header">
        Pick and Play on the Subway: Irregular Words Game
    </div>
    <div class="skill-box-dark">
        <h2>
            Student chooses a letter and number combination to play that
            Subway Card.
        </h2>
    </div>
    <div class="skill-box-dark">
        <div class="subway-grid-container">
            <div class="grid-item"></div>
            <div class="grid-item"><div class="label">A</div></div>
            <div class="grid-item"><div class="label">B</div></div>
            <div class="grid-item"><div class="label">C</div></div>
            <div class="grid-item"><div class="label">1</div></div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="mad-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="mad-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="mad-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item"><div class="label">2</div></div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="subway-question"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="subway-question"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="subway-question"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item"><div class="label">3</div></div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="coos-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="coos-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="coos-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item"><div class="label">4</div></div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="subway-question"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="subway-question"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="subway-question"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item"><div class="label">5</div></div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="squatch-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="squatch-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div
                    class="med-flip-card"
                    onclick="this.classList.toggle('flipped')"
                >
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <div class="squatch-subway"></div>
                        </div>
                        <div class="flip-card-back-dark">REPLACE</div>
                    </div>
                </div>
            </div>

            <div class="grid-item"></div>
            <div class="grid-item"><div class="label">A</div></div>
            <div class="grid-item"><div class="label">B</div></div>
            <div class="grid-item"><div class="label">C</div></div>
        </div>
    </div>
Word Race Game
Player 1
Player 2
Player 3
Player 4

    <div class="lesson-header">Word Race Game</div>
    <div class="skill-box">
        <div class="wrg-container">
        <div
            class="word-race-grid"
            data-columns="4"
            data-words="
            rat rock run red
            ball bed bat bug
            dog dig duck door
            fun fish fan frog
            go gas gum goat
            kite kid kin king
            sun sit sock sand
            "
        >
            <!-- Header row -->
            <div class="wrg-grid-item wrg-header">Player 1</div>
            <div class="wrg-grid-item wrg-header">Player 2</div>
            <div class="wrg-grid-item wrg-header">Player 3</div>
            <div class="wrg-grid-item wrg-header">Player 4</div>
        </div>
        </div>
    </div>
Full Set Words 1st Grade

    data-words="
    act art ant acorn
    ball bed bat bug
    cat cut crib crab
    dog dig duck door
    egg else exit enter
    fun fish fan frog
    go gas gum goat
    hip hat hill hug
    igloo itch imp ill
    jump jeep Jan judge
    kite kid kin king
    lip lap lop lady
    moon milk mom mad
    nap noon nip nag
    odd off often on
    pick pat put pile
    quick queen quilt quill
    rat rock run red
    sun sit sock sand
    tap tip tuck tool
    under up uncle ugly
    volcano vim vine vote
    we water were went
    yap yip yawn yard
    zip zoo zoom zed
    "
Full Set Irregular Words 2nd Grade

    above again always another
    because been before both
    change city come could
    do does done door
    early earth eight enough
    father floor four friend
    give goes gone great
    half head heard heart
    into iron island its
    join joke juice just
    key kind knee know
    large laugh learn little
    many money month mother
    neighbor never night nothing
    ocean often once other
    people piece place pretty
    quart quarter question quick
    read ready right rough
    said says should sure
    their there though through
    uncle under unit upon
    very view visit voice
    walk watch were where
    year yield young your
Word Maker Game
Pick a card
b
c
d
fr
sh
cr
dr
s
tr
sk
p
Pick a card
og
it
ab
oy
ick
ing
ash
y
ay
ot
ain
ow
Pick a card
b
c
d
fr
sh
cr
dr
s
tr
sk
p
Pick a card
og
it
ab
oy
ick
ing
ash
y
ay
ot
ain
ow

    <div class="skill-box">
        <img src="../../profile/profile.jpg" class="round">
            <div class = "ttt-grid-item">
                <div class="ttt-word-cell" data-state="0">
                    <div class="ttt-card active">Pick a card</div>
                        <!-- COPY PASTE TO ADD WORD -->

                    <div class="ttt-card">b</div>
                    <div class="ttt-card">c</div>
                    <div class="ttt-card">d</div>
                    <div class="ttt-card">fr</div>
                    <div class="ttt-card">sh</div>
                    <div class="ttt-card">cr</div>
                    <div class="ttt-card">dr</div>
                    <div class="ttt-card">s</div>
                    <div class="ttt-card">tr</div>
                    <div class="ttt-card">sk</div>
                    <div class="ttt-card">p</div>

                </div>
            </div>
            <div class = "ttt-grid-item">
                <div class="ttt-word-cell" data-state="0">
                    <div class="ttt-card active">Pick a card</div>
                        <!-- COPY PASTE TO ADD WORD -->

                    <div class="ttt-card">og</div>
                    <div class="ttt-card">it</div>
                    <div class="ttt-card">ab</div>
                    <div class="ttt-card">oy</div>
                    <div class="ttt-card">ick</div>
                    <div class="ttt-card">ing</div>
                    <div class="ttt-card">ash</div>
                    <div class="ttt-card">y</div>
                    <div class="ttt-card">ay</div>
                    <div class="ttt-card">ot</div>
                    <div class="ttt-card">ain</div>
                    <div class="ttt-card">ow</div>

                </div>
            </div>
        <img src="../../profile/spacer.png">
        <img src="../../profile/profile.jpg" class="round">
            <div class = "ttt-grid-item">
                <div class="ttt-word-cell" data-state="0">
                    <div class="ttt-card active">Pick a card</div>
                        <!-- COPY PASTE TO ADD WORD -->

                    <div class="ttt-card">b</div>
                    <div class="ttt-card">c</div>
                    <div class="ttt-card">d</div>
                    <div class="ttt-card">fr</div>
                    <div class="ttt-card">sh</div>
                    <div class="ttt-card">cr</div>
                    <div class="ttt-card">dr</div>
                    <div class="ttt-card">s</div>
                    <div class="ttt-card">tr</div>
                    <div class="ttt-card">sk</div>
                    <div class="ttt-card">p</div>

                </div>
            </div>
            <div class = "ttt-grid-item">
                <div class="ttt-word-cell" data-state="0">
                    <div class="ttt-card active">Pick a card</div>
                        <!-- COPY PASTE TO ADD WORD -->

                    <div class="ttt-card">og</div>
                    <div class="ttt-card">it</div>
                    <div class="ttt-card">ab</div>
                    <div class="ttt-card">oy</div>
                    <div class="ttt-card">ick</div>
                    <div class="ttt-card">ing</div>
                    <div class="ttt-card">ash</div>
                    <div class="ttt-card">y</div>
                    <div class="ttt-card">ay</div>
                    <div class="ttt-card">ot</div>
                    <div class="ttt-card">ain</div>
                    <div class="ttt-card">ow</div>

                </div>
            </div>
    </div>
Test Area Below