{% include 'pages/_path-assessment.path-navbar.html' %}
<div 
  class="mdk-box bg-dark mdk-box--bg-gradient-primary js-mdk-box mb-0" 
  data-effects="blend-background">
  <div class="mdk-box__content">
    <div class="py-64pt text-center text-sm-left">
      <div class="container d-flex flex-column justify-content-center align-items-center">
        <h1 class="text-white mb-0">Skill Assessment</h1>
        <p class="lead text-white-50 measure-lead-max">Measure your skill to find out where to start.</p>
      </div>
    </div>
    {% include 'pages/_path-assessment.navbar.html' %}
  </div>
</div>

<div class="{{ containerClass or 'container' }}">
  <form action="{{ prefix or '' }}student-path-assessment-result.html">
    <div class="row">
      <div class="col-lg-7">
        <div class="border-left-2 page-section pl-32pt">
          
          <div class="d-flex align-items-center page-num-container mb-16pt">
            <div class="page-num">2</div>
            <h4>Question 2 of 30</h4>
          </div>

          <p class="text-70 mb-32pt mb-lg-64pt">An angular 2 project written in typescript is* transpiled to javascript duri*ng the build process. Which of the following additional features are provided to the developer while programming on typescript over javascript?</p>

          <p class="text-50">Note: There can be multiple correct answers to this question.</p>
          <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-sm-start">
            <a href="" class="btn btn-outline-secondary w-100 w-sm-auto mb-8pt mb-sm-0 mr-sm-16pt">Previous question</a>
            <button type="submit" class="btn btn-accent w-100 w-sm-auto">Next question</button>
          </div>

        </div>
      </div>
      <div class="col-lg-5">
        <div class="page-section">
          <h4>Your Answer:</h4>
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <input id="customCheck01" type="checkbox" class="custom-control-input">
              <label for="customCheck01" class="custom-control-label">Ability to use newer syntax and offers reliability</label>
            </div>
          </div>
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <input id="customCheck02" type="checkbox" class="custom-control-input" checked="">
              <label for="customCheck02" class="custom-control-label">Compatibility</label>
            </div>
          </div>
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <input id="customCheck03" type="checkbox" class="custom-control-input">
              <label for="customCheck03" class="custom-control-label">Usage of missing features</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>