<!DOCTYPE html>
<html>
% from bottle import url
% include('header_study.tpl', title='A typographical study', parameter = para)

<body>
    <div class="container">
      <h1>Select which word has a higher {{ 'slant' if para.startswith('slant') else para }}</h1>

      <div class="range-slider">

        <p>Select which of the two words uses a font with a greater {{ 'slant' if para.startswith('slant') else para }}.</p>
        
        <!-- <h2>{{ para }}</h2> -->

        <form action="./ajax" method='post' id="the_form">

          <input id ="left"  name='choose' type="radio" value="A" required>
          <input id ="right" name='choose' type="radio" value="B" required><br>
          <label for ="left"><span class="stimuli A range-label">{{ test_word[0] }}</span></label>
          <label for ="right"><span class="stimuli B range-label">{{ test_word[1] }}</span></label>
          <input id="next_j" class="center" type="submit" value="OK" disabled>
          
        </form>

        <p id="control"></p>
        <p class="center"> Trial <span id='count_'>1</span> of {{ trials_amount }}</p>

      </div>
    </div>

% include('footer.tpl')

    <script>
    var url_part = { exp: {{!'"%s"' % exp }}, para: {{!'"%s"' % para }} };
    var sp_0 = {{! "'%s'" % sp_0 }};
    var tp_0 = {{! "'%s'" % tp_0 }};
    </script>

    <script src="/assets/js/jquery-1.11.3.min.js"></script>
    <script src="/assets/js/fontfaceobserver.js"></script>
    <script src="/assets/js/JND.js"></script>


</body>
</html>
