creative-connections/Bodylight.js-Components

<template bindable="id">  
  <div show.bind="showquiz">
  <fieldset>    
    ${question} <slot></slot>
    <div if.bind="type === 'choice'">    
    <ul style="list-style-type: none">
    <li repeat.for="answer of answer_exp_array">
      <span style="position:relative;width:0;height:0;display:block;left:-25px;"  show.bind="showhint"><b class="w3-theme-l4 w3-round-large w3-large">${answer.hint}</b></span>
      <input type="checkbox" checked.bind="answer.user" class="w3-check" disabled.bind="showresult" change.delegate="checkCheckboxAnswer(answer)"/><label innerhtml.bind="answer.answer"></label>
      <span show.bind="answer.showresult" class="w3-theme-l5">
        <span show.bind="answer.user===answer.correct" title="OK"><i class="fa fa-thumbs-o-up"></i></span>
        <span show.bind="answer.user!==answer.correct" title="incorrect"><i class="fa fa-times"></i></span>
        <input type="checkbox" checked.bind="answer.correct" disabled/> <label innerhtml.bind="answer.explanation"></label>
      </span>
    </li>
    </ul>
    <!--input type="submit" value.bind="buttontitle" click.delegate="submit()"/-->
  </div>
  <div if.bind="type === 'match'" class="w3-row">    
    <div class="w3-half">
      <div repeat.for="term of randomterms" click.delegate="selectTerm(term)" class.bind="term.class" disabled.bind="term.disabled" innerhtml.bind="term.title">
      </div>
    </div>
    <div class="w3-half">
      <div repeat.for="answer of randomanswers" click.delegate="selectAnswer(answer)" class.bind="answer.class" disabled.bind="answer.disabled" innerhtml.bind="answer.title">
      </div>
    </div>
  </div>
  <div if.bind="type === 'choice2'" class="w3-row">    
      <div repeat.for="answer of randomanswers" click.delegate="checkAnswer(answer)" class.bind="answer.class" disabled.bind="answer.disabled">
        <span style="position:relative;width:0;height:0;display:block;left:-25px;"  show.bind="showhint"><b class="w3-theme-l4 w3-round-large w3-large">${answer.hint}</b></span>
        <span innerhtml.bind="answer.title"></span>        
        <span show.bind="answer.showresult" class="w3-theme-l5" style="font-size:12px">
          <label innerhtml.bind="answer.explanation"></label>
        </span>
      </div>       
    <!--input type="submit" value.bind="buttontitle" click.delegate="submit()"/-->
  </div>

  </fieldset>  
  </div>
</template>