Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <!-- HTML here -->
      <div id="content" class="content">
        <div class="row sticky-top bg-aqua">
          <div class="col-sm-12">
            <div id="cardTerms">
              <div class="term" id="term-1">class</div>
              <div class="term" id="term-2">href</div>
              <div class="term" id="term-3">body</div>
              <div class="term" id="term-4">child</div>
              <div class="term" id="term-5">comments</div>
              <div class="term" id="term-6">div</div>
              <div class="term" id="term-7">id</div>
              <div class="term" id="term-8">unordered list</div>
              <div class="term" id="term-9">head</div>
              <div class="term" id="term-10">horizontal rule</div>
              <div class="term" id="term-11">html</div>
              <div class="term" id="term-12">tag</div>
              <div class="term" id="term-13">hyperlink</div>
              <div class="term" id="term-14">ordered list</div>
              <div class="term" id="term-15">paragraph</div>
              <div class="term" id="term-16">table</div>
              <div class="term" id="term-17">title</div>
              <div class="term" id="term-18">heading</div>
            </div>
          </div>
          <div class="col-sm-12 ">
            <h4 class="text-left"><span class="font-weight-bold">Instructions:</span> Drag each element above down to
              the corresponding definition. </h4>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <div id="cardDefs">
              <div class="card" id="def-1">
                <div class="card-body">
                  HTML elements can have one or more of these, separated by spaces. You can style these elements by
                  using CSS.
                </div>
              </div>
              <div class="card" id="def-8">
                <div class="card-body">
                  These are lists whose items begin with bullet points.
                </div>
              </div>
              <div class="card" id="def-10">
                <div class="card-body">
                  This tag creates a black line one pixel thick that runs the all the way across its container.
                </div>
              </div>
              <div class="card" id="def-5">
                <div class="card-body">
                  HTML comments are sometimes used in code to explain parts of the markup. They are similar to comments
                  in other languages. Users do not see comments in their browser.
                </div>
              </div>
              <div class="card" id="def-16">
                <div class="card-body">
                  An element for displaying information in rows and columns. Supports headers and footers for labeling
                  columns. Divides information into rows (denoted by the tr tag) which contain cells (denoted by the td
                  tag).
                </div>
              </div>
              <div class="card" id="def-2">
                <div class="card-body">
                  Links tell the browser where to go using an href attribute, which stores a URL.
                </div>
              </div>
              <div class="card" id="def-12">
                <div class="card-body">
                  All HTML files live within an over-arching html tag. This is the basic tag that defines an html
                  document.
                </div>
              </div>
              <div class="card" id="def-9">
                <div class="card-body">
                  Tag that surrounds important content that is invisible to the user, but is important to the browser.
                  Elements within this tag contain metadata about the page and links to stylesheets, scripts, etc.
                </div>
              </div>
              <div class="card" id="def-4">
                <div class="card-body">
                  An element that is an immediate descendent of another element or nested within another element is
                  called a child. These become useful when using CSS child selectors and psuedo-elements.
                </div>
              </div>
              <div class="card" id="def-15">
                <div class="card-body">
                  One of the most common tags in HTML - it denotes a paragraph of text. It often has other elements
                  nested inside of it, such as <span class="code">&lt;img/&gt;</span>, <span
                    class="code">&lt;a&gt;</span>, <span class="code">&lt;strong&gt;</span> and <span
                    class="code">&lt;em&gt;</span>.
                </div>
              </div>
              <div class="card" id="def-17">
                <div class="card-body">
                  This tag tells the browser what to display as the page title at the top and tells search engines what
                  the title of your site is. It goes inside <span class="code">&lt;head&gt;</span> tags. Try and make
                  your page titles descriptive, but not overly verbose.
                </div>
              </div>
              <div class="card" id="def-6">
                <div class="card-body">
                  A block level container (or 'division' of the web page) for content with no semantic meaning.
                </div>
              </div>
              <div class="card" id="def-3">
                <div class="card-body">
                  The body is the container for all of a page's content. Comes after the <span
                    class="code">&lt;head&gt;</span> tag, within the overall <span class="code">&lt;html&gt;</span> tag.
                </div>
              </div>
              <div class="card" id="def-14">
                <div class="card-body">
                  Ordered lists' items are denoted with numbers.
                </div>
              </div>
              <div class="card" id="def-7">
                <div class="card-body">
                  The body is the container for all of a page's content. Comes after the <span
                    class="code">&lt;head&gt;</span> tag, within the overall <span class="code">&lt;html&gt;</span> tag.
                </div>
              </div>
              <div class="card" id="def-11">
                <div class="card-body">
                  HTML stands for Hyper Text Markup Language. It is the language used to create all websites.
                </div>
              </div>
              <div class="card" id="def-13">
                <div class="card-body">
                  Hyperlinks (or just links) take the user to another webpage when they click on it. The most common
                  attribute used with links is href, which tells the browser where the link goes.
                </div>
              </div>
              <div class="card" id="def-18">
                <div class="card-body">
                  Heading elements like <span class="code">&lt;h1&gt;</span>, <span class="code">&lt;h2&gt;</span>,
                  <span class="code">&lt;h3&gt;</span>, ... allow you to use six levels of document headings, ranging
                  from largest to smallest, breaking up the document into logical sections.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade text-dark" id="matchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Great Work!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Awesome Job! Everything is matched up! Keep up the great work!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success btn-sm" data-dismiss="modal">Play Again</button>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                /* Roboto Font */
@import url("https://fonts.googleapis.com/css?family=Roboto");

/* Inconsolata Font */
@import url("https://fonts.googleapis.com/css?family=Inconsolata");

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

span.code {
  font-family: "Inconsolata", monospace;
  background-color: #cccccc;
}

/* General Styles */
.no-border {
  border: none;
}

.text-dark {
  color: #1e2629;
}

.border-white {
  border: 1px solid #ffffff;
}

.text-strong {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-underline {
  text-decoration: underline;
}

/* Backgrounds */
.bg-transparent {
  background: transparent;
}

.bg-unicorn {
  background-color: rgb(183, 0, 171);
}

.bg-aqua {
  background-color: rgb(0, 208, 211);
}

.bg-puke {
  background-color: rgb(175, 175, 0);
}

.bg-poop {
  background-color: rgb(135, 87, 0);
}

.bg-black {
  background-color: rgb(0, 0, 0);
}

.bg-dark-grey {
  background-color: rgb(82, 92, 102);
}

/* Custom CSS */
#content {
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#cardTerms {
  margin: 10px auto 0 auto;
  width: 100%;
  height: auto;
  padding: 15px;
}

#cardDefs {
  margin: 0 auto;
}

#cardDefs {
  width: 100%;
  height: auto;
  padding: 15px;
}

#cardTerms div,
#cardDefs div {
  float: left;
  width: auto;
  height: auto;
  padding: 10px;
  /*border: 1px solid #333;*/
  background-color: #ff0000;
  color: #ffffff;
  margin: 0.5rem;
  text-align: left;
}
#cardTerms div:first-child,
#cardDefs div:first-child {
}
#cardTerms div.hovered {
  background: #aaa;
}
#cardTerms div {
  border: 1px dashed #fff;
}
#cardDefs div {
  background: #fff;
  /*border: 1px solid #005575;*/
  color: #000;
  font-size: 1em;
  line-height: 1.3;
}
#cardDefs div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
}

/* Correct Cards */
#card1.correct {
  background: #5fcf80;
  color: #fff;
}

#card2.correct {
  background: #5fcf80;
  color: #fff;
}

#card3.correct {
  background: #5fcf80;
  color: #fff;
}

#card4.correct {
  background: #5fcf80;
  color: #fff;
}

#card5.correct {
  background: #5fcf80;
  color: #fff;
}

#card6.correct {
  background: #5fcf80;
  color: #fff;
}

#card7.correct {
  background: #5fcf80;
  color: #fff;
}

#card8.correct {
  background: #5fcf80;
  color: #fff;
}

#card9.correct {
  background: #5fcf80;
  color: #fff;
}

#card10.correct {
  background: #5fcf80;
  color: #fff;
}

#card11.correct {
  background: #5fcf80;
  color: #fff;
}

#card12.correct {
  background: #5fcf80;
  color: #fff;
}

#card13.correct {
  background: #5fcf80;
  color: #fff;
}

#card14.correct {
  background: #5fcf80;
  color: #fff;
}

#card15.correct {
  background: #5fcf80;
  color: #fff;
}

#card16.correct {
  background: #5fcf80;
  color: #fff;
}

#card17.correct {
  background: #5fcf80;
  color: #fff;
}

#card18.correct {
  background: #5fcf80;
  color: #fff;
}

.fade {
  color: #ffffff;
  text-align: center;

  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  opacity: 1;
}

              
            
!

JS

              
                // Javascript
// New Code

$(init);

function init() {
  $(".term").each(function() {
    var num = $(this)
      .prop("id")
      .replace("term-", "");
    $(this)
      .data("number", num)
      .attr("id", "card" + num)
      .draggable({
        containment: "#content",
        stack: "#cardTerms div",
        cursor: "pointer",
        revert: true
      });
  });

  $(".card").each(function() {
    var num = $(this)
      .prop("id")
      .replace("def-", "");
    $(this)
      .data("number", num)
      .droppable({
        accept: "#cardTerms div",
        hoverClass: "hovered",
        drop: handleCardDrop
      });
  });
}

var totalCards = $("#cardTerms").children().length;
var totalMatches = 0;

function handleCardDrop(event, ui) {
  var slotNumber = $(this).data("number");
  var cardNumber = ui.draggable.data("number");
  //console.log($(this));
  if (slotNumber == cardNumber) {
    totalMatches++;
    ui.draggable.addClass("correct");
    ui.draggable.addClass("fade");
    ui.draggable.draggable("disable");
    $(this).droppable("disable");
    $(this).addClass("fade");
    ui.draggable.draggable("option", "revert", false);
  }

  if (totalMatches == totalCards) {
    $("#matchModal").modal("show");
  }
}

              
            
!
999px

Console