---
layout: site
---

<!-- Modal -->
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
      </div>
      <div class="modal-body">
        <table>
          <tr>
            <th>Keyboard Command</th>
            <th>Feature</th>
          </tr>
          <tr>
            <td><code>?</code></td>
            <td>Hide/show help</td>
          </tr>
          <tr>
            <td><code>shift</code>+<code>t</code></td>
            <td>Hide/show table of contents</td>
          </tr>
        </table>

        <table>
          <tr>
            <th>URL Command</th>
            <th>Feature</th>
          </tr>
          <tr>
            <td><code>?teacher=[github-user]</code></td>
            <td>Auto-generated teacher slide</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<div id="help" class="help">
  <div class="content">

  </div>
</div>



<!-- Modal -->
<div class="modal fade" id="timerModal" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id='timerForm' class="modal-content text-center">
      <input type="number" id="minutes" name="minutes" min="1" max="60" value="5" placeholder="min" class="form-control time-amount">
      <div class="time-left" id="time-left"></div>

      <div class="modal-footer">
        <button id="start-stop" type="submit" class="btn btn-default">Start</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </form>
  </div>
</div>

<div class="col-content deck  col-md-12 col-sm-12 col-xs-12 materials curriculum shift-left">
  <div id="teacher" class="slide hidden">
    <div class="alignment">
      <div id="teacher-avatar"></div>
      <div class="" id="teacher-info">

        <h3 id="teacher-name"></h3>

        <span id="teacher-username">
          <span class="octicon octicon-octoface"></span>
        </span>

        <span id="teacher-email">
          <span class="octicon octicon-mail"></span>
        </span>

        <span id="teacher-organization">
          <span class="octicon octicon-organization"></span>
        </span>

        <span id="teacher-location">
          <span class="octicon octicon-location"></span>
        </span>

        <div class="teacher-badges">
          <span id="teacher-repo" class="">
            <span class="octicon octicon-repo"></span>
          </span>

          <span id="teacher-followers" class="">
            <span class="octicon octicon-person"></span>
          </span>

          <span id="teacher-following" class="">
            <span class="octicon octicon-steps"></span>
          </span>
        </div>
      </div>
    </div>
  </div>

      <div class="slide">
        <div class="alignment">
          <h1>{{ page.title }}</h1>
          <p>
            {{ page.learning-objective }}
          </p>
        </div>
      </div>

      {% for screen in page.screens %}
      <div class="slide {{ screen.first[0] }}">
        <div class="alignment">

          {% for item in screen %}
            <h2>{{ item[1].title }}</h2>

            {% case item[0] %}

            {% when 'poll' or 'quiz' %}

              <div class="lab panel panel-primary">

                <div class="panel-heading">
                    {{ item[0] | capitalize }}
                </div>

                <div class="panel-body">
                  <p>{{ item[1].presenter-script }}</p>
                </div>

                <ol>
                {% for question in item[1].questions %}
                    <li>{{ question.title }}<br/><br/></li>
                {% endfor %}
              </ol>

            </div>

            {% when 'image-slide' %}

            <p>
              {{ item[1].presenter-script }}
            </p>
            <p>
              <img src="{% if item[1].image contains 'http'%}{{ item[1].image }}{% else %}{{ site.baseurl }}/images/{{item[1].image}}{% endif %}" alt="" />
            </p>

            {% when 'video-slide' %}

            <div class="narration-table">
              <table>
                <thead>
                  <th>
                    <strong>Do</strong>
                  </th>
                  <th>
                    Say
                  </th>
                </thead>
                {% for dialogue in item[1].video-script %}
                  <tr class="{% cycle 'odd', 'even' %}">
                    <td>
                      {{ dialogue.do | escape }}
                    </td>
                    <td>
                      {{ dialogue.say }}
                    </td>
                {% endfor %}
              </table></br>
            </div>

            {% when 'lab' %}
            <div class="lab panel panel-primary">
              <div class="panel-heading">
                Lab
              </div>
            <div class="panel-body">
              {{ item[1].presenter-script }}
            </div>

            <ol>

              {% for step in item[1].steps %}

                <li>
                  {{ step.description | remove: '"'}}
                </li>

              {% endfor %}

            </ol>
          </div>
            {% else %}

              <p>
                Unknown Screen Type
              </p>

            {% endcase %}

          {% endfor %}
        </div>
      </div>
      {% endfor %}

</div>

<div class="col-toc col-md-2 col-sm-2 col-xs-2 shift-left">
  <div id="toc-wrapper">
    <div id="toc" data-spy="affix" data-offset-top="145">

      <div class="module-toc">
        <h4>Table of Contents</h4>
        <ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
          <li></li>
        </ul>
      </div>

      <h4>Courses</h4>
      <ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
        {% for course in site.courses %}
            <a href="{{ site.baseurl }}{{ course.url }}"><li class="headingSep">{{ course.title }}</li></a>
        {% endfor %}
      </ul>

      <ul class="nav display-controls">
        <li>
          <input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
          <label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
        </li>
        <li>
          <div class="timer-toggle"></div>
          <input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
          <label for="timer-check" class="timer-label" data-toggle="modal" data-target="#timerModal">Timer</label>
        </li>
      </ul>
    </div>
  </div>
</div>
