instructions.html

---
layout: instructions
title: instructions
js: instructions
---
<img id="instruction-logo" class="center" src="img/instruction-logo.png">

<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <h1 id="instructions-title"></h1>
      <p>Created by <a id="author-name"></a></p>
      <ul class="progress-dots list-unstyled list-inline"></ul>
    </div>
  </div>
  
  <section class="row">
      <!-- Modal -->
      <div class="modal fade" id="feedback" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div id="feedback-content"></div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <!-- The col-lg-12 forces a rerender once the content is loaded. -->
      <div id="step-text-content" class="col-lg-12"></div>
      
  </section>

  <div id="controls">
      <button type="button" id="back" class="btn btn-primary">Back</button>
      <button type="button" id="next" class="btn btn-primary">Next</button>
      <br/>
      <div id="close-lesson-wrapper">
          <button type="button" id="close-lesson" class="btn btn-default btn-block" >Close Lesson</button>
      </div>
  </div>

  <!-- <div id="rating">
    <div id="rating-handle"><img src="img/star-on.png"></div>
    <div id="rating-content">
      How helpful was this step?
    <div id="rating-stars"></div>
    <form id="rating-form">
        <div class="form-group">   
          <label for="rating-feedback">Anything else?</label>
          <textarea id="rating-feedback"></textarea>
        </div>
        <button type="button" class="btn btn-small" id="rating-btn">Give Feedback</button>
    </form>
    </div>

  </div> -->
</div>
  <footer><div id="footer-menu"></div></footer>