Exam Item slide HTML

exam_item.html

<div class="swiper-slide">

  <section class='stem'>
    <p class='small' data-stagger>Lead goes here</p>
    <p>Stem paragraphs just go in P tags here</p>

    <div class="photo-gallery" itemscope itemtype="http://schema.org/ImageGallery">

      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="img/79b73057-ef65-4b52-b2b2-8282e2c8fcef.jpg" itemprop="contentUrl" data-size="372x496">
              <img src="img/79b73057-ef65-4b52-b2b2-8282e2c8fcef.jpg" itemprop="thumbnail" alt="Fig. 1" />
          </a>
          <figcaption itemprop="caption description">Fig. 1</figcaption>
      </figure>

      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="img/9f371d44-0288-444b-93c7-b289f7b7c429.jpg" itemprop="contentUrl" data-size="234x383">
              <img src="img/9f371d44-0288-444b-93c7-b289f7b7c429.jpg" itemprop="thumbnail" alt="Fig. 2" />
          </a>
          <figcaption itemprop="caption description">Fig. 2</figcaption>
      </figure>

      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="img/f1dd7c2b-b88b-46fc-bd7b-4ee6df980c6e.jpg" itemprop="contentUrl" data-size="410x524">
              <img src="img/f1dd7c2b-b88b-46fc-bd7b-4ee6df980c6e.jpg" itemprop="thumbnail" alt="Fig. 3" />
          </a>
          <figcaption itemprop="caption description">Fig. 3</figcaption>
      </figure>

      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="img/805145d1-dd1a-4db7-91fa-825c2404591f.jpg" itemprop="contentUrl" data-size="154x154">
              <img src="img/805145d1-dd1a-4db7-91fa-825c2404591f.jpg" itemprop="thumbnail" alt="Fig. 4" />
          </a>
          <figcaption itemprop="caption description">Fig. 4</figcaption>
      </figure>

      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="img/3b17d975-46a7-426e-a870-26c7e6c37f6c.jpg" itemprop="contentUrl" data-size="405x264">
              <img src="img/3b17d975-46a7-426e-a870-26c7e6c37f6c.jpg" itemprop="thumbnail" alt="Fig. 5" />
          </a>
          <figcaption itemprop="caption description">Fig. 5</figcaption>
      </figure>

    </div>
    <p> More Stem paragraphs if necessary</p>
  </section>

  <section class='choices'>
    <p>Prompt goes here</p>
    <ul>
      <li><button data-position="1" data-weight="1" data-difficulty="novice">Chondrosarcoma      </button></li>
      <li><button data-position="2" data-weight="1" data-difficulty="novice">Ewing's sarcoma </button></li>
      <li><button data-position="3" data-weight="1" data-difficulty="novice">Osteosarcoma </button></li>
      <li><button data-position="4" data-weight="1" data-difficulty="novice">Metastatic bronchogenic carcinoma </button></li>
      <li><button data-position="5" data-weight="1" data-difficulty="novice">He done suck his finger in some weird places</button></li>
    </ul>
  </section>


</div>