Dashboard template

gistfile1.html

          
Template:

<script id="competition-dashboard-template" type="text/x-handlebars-template">
  {{#competitionCompleted this}}
    <h1>Done</h1>
  {{else}}
    <h1>Not Done</h1>
  {{/competitionCompleted}}
  {{#loginPanel}}
  
  {{/loginPanel}}
  {{#confirmPanel}}
  
  {{/confirmPanel}}
  <div id="competition-{{id}}">
    <h2>{{name}}</h2>
    <p>
      {{description}}
    </p>
    <ol>
      {{#each components}}
      <li>
        <div class="component {{kind}}">
          <h3>{{name}}</h3>
          <p>{{summary}}</p>
          <ol id="{{id}}">
          {{#each question_sets}}
            <li class="question-set {{status}}" id="{{id}}">{{name}} -- {{description}}  -- {{number_of_questions}}</li>
          {{/each}}
          </ol>
        </div>
      </li>
      {{/each}}
    </ol>
  </div>
</script>



Sample HTML

<div id="question-challenge-container">

<h1>Done</h1>

<li><a class="login">Login</a></li><li><a class="signup">Signup</a></li>

<div id="competition-205d26f0c807012e93b6002500a918fc">
  <h2>sample competition 0001</h2>
  <p>
    bla bla bla lorem ipsum
  </p>
  <ol>
    
    <li>
      <div class="component linear">
        <h3>Component A</h3>
        <p>A some question sets bla bla bla</p>
        <ol id="205d9750c807012e93b7002500a918fc">
        
          <li class="question-set " id="205db130c807012e93b8002500a918fc">QS-text_text_presence-0001 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="20772c00c807012e93bb002500a918fc">QS-text_text_email-0002 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="2077e6c0c807012e93be002500a918fc">QS-text_radio_presence-0003 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="20789560c807012e93c1002500a918fc">QS-0004 -- bla bla bla lorem ipsum  -- 5</li>
        
        </ol>
      </div>
    </li>
    
    <li>
      <div class="component choice">
        <h3>Component A</h3>
        <p>A some question sets bla bla bla</p>
        <ol id="2088c950c807012e93c7002500a918fc">
        
          <li class="question-set " id="2088e000c807012e93c8002500a918fc">QS-text_text_presence-0005 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="2089a600c807012e93cb002500a918fc">QS-text_text_email-0006 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="208a50e0c807012e93ce002500a918fc">QS-text_radio_presence-0007 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="208b0910c807012e93d1002500a918fc">QS-0008 -- bla bla bla lorem ipsum  -- 5</li>
        
        </ol>
      </div>
    </li>
    
    <li>
      <div class="component linear">
        <h3>Component A</h3>
        <p>A some question sets bla bla bla</p>
        <ol id="20925160c807012e93d7002500a918fc">
        
          <li class="question-set " id="20926600c807012e93d8002500a918fc">QS-text_text_presence-0009 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="20932ac0c807012e93db002500a918fc">QS-text_text_email-0010 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="2093d610c807012e93de002500a918fc">QS-text_radio_presence-0011 -- bla bla bla lorem ipsum  -- 2</li>
        
          <li class="question-set " id="20948c80c807012e93e1002500a918fc">QS-0012 -- bla bla bla lorem ipsum  -- 5</li>
        
        </ol>
      </div>
    </li>
    
  </ol>
</div>
</div>