{% block title %}
    Which books should Alex get?
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}
        
<div class="col-md-12 text-center">
  <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Review Instructions
  </button>
</div>
<br>
{{ if participant.switch_order }}

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Case 1: we WILL tell Alex whether the books he got are the ones with the original or fake
        notes</h5>
      <div class="card-text">
        It is important that you understand which case we are in. Please answer the question below.
        <div style="text-align: center;">
          <br>
          {{ formfield_errors 'Trad_learn' }}

          {{ form.Trad_learn.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn" id="Trad1" value="1"
                   onclick="enable('after_answeringTrad', 'originalTrad', 'fakeTrad', 'indifferentTrad',
                   'Trad_footer')">
            <label class="form-check-label" for="Trad1">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn" id="Trad2" value="2"
                   onclick="disable('after_answeringTrad', 'originalTrad', 'fakeTrad', 'indifferentTrad',
                   'Trad_footer', 'Trad_learn_mistakes')">
            <label class="form-check-label" for="Trad2">No, he will not learn</label>
          </div>
        </div>

        <br>
        <div id="after_answeringTrad">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
          <br>
          <div class="card-footer text-muted" id="Trad_footer">
                      {{ formfield_errors 'Trad_wtp' }}
                <div style="text-align: center;">

                     <p> <strong>{{ form.Trad_wtp.label }}</strong></p>

                {{ if participant.choices_orders == 1 }}
                <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad">I am indifferent</label>
          </div>
               {{ elif participant.choices_orders == 2 }}
                     <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes</label>
          </div>
                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad">I am indifferent</label>
          </div>

            {{ elif participant.choices_orders == 3 }}
                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes</label>
          </div>

         {{ elif participant.choices_orders == 4 }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad">I am indifferent</label>
          </div>
                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">Original notes</label>
          </div>

        {{ elif participant.choices_orders == 5 }}
         <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes</label>
          </div>

                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">Original notes</label>
          </div>

         {{ elif participant.choices_orders == 6 }}
         <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad">I am indifferent</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes</label>
          </div>
                  {{ endif }}

          </div>
        </div>
      </div>
    </div>
  </div>

  <br>

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Case 2: we WILL NOT tell Alex whether the books he got are the ones with
        the original or fake notes</h5>
      {{ if participant.treatment != 'middle'}}
          <h6 class="card-subtitle mb-2 text-muted">He knows that with {{ C.MS }}% chance, he will get the books with
            {{ if participant.treatment == 'high' }}original notes{{ else }}fake notes{{ endif }}; you now
            determine which books he gets otherwise.</h6>
      {{ endif }}
      <div class="card-text">
        It is important that you understand which case we are in. Please answer the question below.
        <div style="text-align: center;">
          <br>
          {{ formfield_errors 'ES_learn' }}

          {{ form.ES_learn.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn" id="ES1" value="1"
                   onclick="disable('after_answeringES', 'originalES', 'fakeES', 'indifferentES',
                   'ES_footer', 'ES_learn_mistakes')">
            <label class="form-check-label" for="ES1">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn" id="ES2" value="2"
            onclick="enable('after_answeringES', 'originalES', 'fakeES', 'indifferentES',
                   'ES_footer')">
            <label class="form-check-label" for="ES2">No, he will not learn</label>
          </div>
        </div>
        <br>
        <div id="after_answeringES">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
        <br>
          <div class="card-footer text-muted" id="ES_footer">
                      {{ formfield_errors 'ES_wtp' }}
                <div style="text-align: center;">

                     <p> <strong>{{ form.ES_wtp.label }}</strong></p>

                    {{ if participant.choices_orders == 1 }}

                      <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES" value="1" disabled>
            <label class="form-check-label" for="originalES">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES" value="2" disabled>
            <label class="form-check-label" for="fakeES">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES" value="3" disabled>
            <label class="form-check-label" for="indifferentES">I am indifferent</label>
          </div>
                  {{ elif participant.choices_orders == 2 }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES" value="2" disabled>
            <label class="form-check-label" for="fakeES">Fake notes</label>
          </div>
                   <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES" value="1" disabled>
            <label class="form-check-label" for="originalES">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES" value="3" disabled>
            <label class="form-check-label" for="indifferentES">I am indifferent</label>
          </div>

            {{ elif participant.choices_orders == 3 }}

                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES" value="1" disabled>
            <label class="form-check-label" for="originalES">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES" value="3" disabled>
            <label class="form-check-label" for="indifferentES">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES" value="2" disabled>
            <label class="form-check-label" for="fakeES">Fake notes</label>
          </div>

        {{ elif participant.choices_orders == 4 }}
            <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES" value="2" disabled>
            <label class="form-check-label" for="fakeES">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES" value="3" disabled>
            <label class="form-check-label" for="indifferentES">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES" value="1" disabled>
            <label class="form-check-label" for="originalES">Original notes</label>
          </div>

          {{ elif participant.choices_orders == 5 }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES" value="3" disabled>
            <label class="form-check-label" for="indifferentES">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES" value="2" disabled>
            <label class="form-check-label" for="fakeES">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES" value="1" disabled>
            <label class="form-check-label" for="originalES">Original notes</label>
          </div>
                      {{ elif participant.choices_orders == 6 }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES" value="3" disabled>
            <label class="form-check-label" for="indifferentES">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES" value="1" disabled>
            <label class="form-check-label" for="originalES">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES" value="2" disabled>
            <label class="form-check-label" for="fakeES">Fake notes</label>
          </div>

                  {{ endif }}
          </div>
        </div>
      </div>
    </div>
  </div>

{{ else }}

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Case 1: we WILL NOT tell Alex whether the books he got are the ones with
        the original or fake notes</h5>
      {{ if participant.treatment != 'middle'}}
          <h6 class="card-subtitle mb-2 text-muted">He knows that with {{ C.MS }}% chance, he will get the books with
            {{ if participant.treatment == 'high' }}original notes{{ else }}fake notes{{ endif }}; you now
            determine which books he gets otherwise.</h6>
      {{ endif }}
      <div class="card-text">
        It is important that you understand which case we are in. Please answer the question below.
        <div style="text-align: center;">
          <br>
          {{ formfield_errors 'ES_learn' }}

          {{ form.ES_learn.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn" id="ES1_switched" value="1"
                   onclick="disable('after_answeringES_switched', 'originalES_switched', 'fakeES_switched',
            'indifferentES_switched', 'ES_footer_switched', 'ES_learn_mistakes')">
            <label class="form-check-label" for="ES1_switched">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn" id="ES2_switched" value="2"
            onclick="enable('after_answeringES_switched', 'originalES_switched', 'fakeES_switched',
            'indifferentES_switched', 'ES_footer_switched')">
            <label class="form-check-label" for="ES2_switched">No, he will not learn</label>
          </div>
        </div>
        <br>
        <div id="after_answeringES_switched">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
        <br>
          <div class="card-footer text-muted" id="ES_footer_switched">
                      {{ formfield_errors 'ES_wtp' }}
                <div style="text-align: center;">

                     <p> <strong>{{ form.ES_wtp.label }}</strong></p>

                   {{ if participant.choices_orders == 1 }}
                      <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES_switched" value="1" disabled>
            <label class="form-check-label" for="originalES_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES_switched" value="2" disabled>
            <label class="form-check-label" for="fakeES_switched">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentES_switched">I am indifferent</label>
          </div>

                           {{ elif participant.choices_orders == 2 }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES_switched" value="2" disabled>
            <label class="form-check-label" for="fakeES_switched">Fake notes</label>
          </div>
                      <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES_switched" value="1" disabled>
            <label class="form-check-label" for="originalES_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentES_switched">I am indifferent</label>
          </div>

            {{ elif participant.choices_orders == 3 }}
                      <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES_switched" value="1" disabled>
            <label class="form-check-label" for="originalES_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentES_switched">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES_switched" value="2" disabled>
            <label class="form-check-label" for="fakeES_switched">Fake notes</label>
          </div>

                    {{ elif participant.choices_orders == 4 }}
                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES_switched" value="2" disabled>
            <label class="form-check-label" for="fakeES_switched">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentES_switched">I am indifferent</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES_switched" value="1" disabled>
            <label class="form-check-label" for="originalES_switched">Original notes</label>
          </div>

                  {{ elif participant.choices_orders == 5 }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentES_switched">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES_switched" value="2" disabled>
            <label class="form-check-label" for="fakeES_switched">Fake notes</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES_switched" value="1" disabled>
            <label class="form-check-label" for="originalES_switched">Original notes</label>
          </div>

                   {{ elif participant.choices_orders == 6 }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="indifferentES_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentES_switched">I am indifferent</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="originalES_switched" value="1" disabled>
            <label class="form-check-label" for="originalES_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_wtp" id="fakeES_switched" value="2" disabled>
            <label class="form-check-label" for="fakeES_switched">Fake notes</label>
          </div>
             {{ endif }}

          </div>
        </div>
      </div>
    </div>
  </div>

  <br>

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Case 2: we WILL tell Alex whether the books he got are the ones with the original or fake
        notes</h5>
      <div class="card-text">
        It is important that you understand which case we are in. Please answer the question below.
        <div style="text-align: center;">
          <br>
          {{ formfield_errors 'Trad_learn' }}

          {{ form.Trad_learn.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn" id="Trad1_switched" value="1"
                   onclick="enable('after_answeringTrad_switched', 'originalTrad_switched', 'fakeTrad_switched',
                   'indifferentTrad_switched', 'Trad_footer_switched')">
            <label class="form-check-label" for="Trad1_switched">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn" id="Trad2_switched" value="2"
            onclick="disable('after_answeringTrad_switched', 'originalTrad_switched', 'fakeTrad_switched',
                   'indifferentTrad_switched', 'Trad_footer_switched', 'Trad_learn_mistakes')">
            <label class="form-check-label" for="Trad2_switched">No, he will not learn</label>
          </div>
        </div>

        <br>
        <div id="after_answeringTrad_switched">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
          <br>
          <div class="card-footer text-muted" id="Trad_footer_switched">
                      {{ formfield_errors 'Trad_wtp' }}
                <div style="text-align: center;">

                     <p> <strong>{{ form.Trad_wtp.label }}</strong></p>

                  {{ if participant.choices_orders == 1 }}

                      <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad_switched" value="1" disabled>
            <label class="form-check-label" for="originalTrad_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad_switched" value="2" disabled>
            <label class="form-check-label" for="fakeTrad_switched">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad_switched">I am indifferent</label>
          </div>

                  {{ elif participant.choices_orders == 2 }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad_switched" value="2" disabled>
            <label class="form-check-label" for="fakeTrad_switched">Fake notes</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad_switched" value="1" disabled>
            <label class="form-check-label" for="originalTrad_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad_switched">I am indifferent</label>
          </div>

                {{ elif participant.choices_orders == 3 }}

           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad_switched" value="1" disabled>
            <label class="form-check-label" for="originalTrad_switched">Original notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad_switched">I am indifferent</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad_switched" value="2" disabled>
            <label class="form-check-label" for="fakeTrad_switched">Fake notes</label>
          </div>

            {{ elif participant.choices_orders == 4 }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad_switched" value="2" disabled>
            <label class="form-check-label" for="fakeTrad_switched">Fake notes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad_switched">I am indifferent</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad_switched" value="1" disabled>
            <label class="form-check-label" for="originalTrad_switched">Original notes</label>
          </div>

                      {{ elif participant.choices_orders == 5 }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad_switched">I am indifferent</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad_switched" value="2" disabled>
            <label class="form-check-label" for="fakeTrad_switched">Fake notes</label>
          </div>
            <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad_switched" value="1" disabled>
            <label class="form-check-label" for="originalTrad_switched">Original notes</label>
          </div>

                    {{ elif participant.choices_orders == 6 }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="indifferentTrad_switched" value="3" disabled>
            <label class="form-check-label" for="indifferentTrad_switched">I am indifferent</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="originalTrad_switched" value="1" disabled>
            <label class="form-check-label" for="originalTrad_switched">Original notes</label>
          </div>
           <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp" id="fakeTrad_switched" value="2" disabled>
            <label class="form-check-label" for="fakeTrad_switched">Fake notes</label>
          </div>

                  {{ endif }}

          </div>
        </div>
      </div>
    </div>
  </div>

{{ endif }}

<br>

<button style="float: right" class="btn btn-primary btn-large">Next</button>



   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Review Instructions</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          {{ include C.PRE_VIDEO }}
                {{ include C.POST_VIDEO }}
                  {{ include C.BONUS }}
                  <br>
        {{ include C.DETAIL }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<input type="hidden" name="Trad_learn_mistakes" id="Trad_learn_mistakes" />
<input type="hidden" name="ES_learn_mistakes" id="ES_learn_mistakes" />
{{ formfield_errors 'Trad_learn_mistakes' }}
{{ formfield_errors 'ES_learn_mistakes' }}

{% endblock %}

{% block styles %}

<style>
  .card-body {
    padding-bottom: 1;
    }
</style>

{% endblock %}

{% block scripts %}

{{ if participant.switch_order }}
  <script>
    document.getElementById('Trad1').value = 1;
    document.getElementById('Trad2').value = 2;
    document.getElementById('originalTrad').value = 1;
    document.getElementById('fakeTrad').value = 2;
    document.getElementById('indifferentTrad').value = 3;

    document.getElementById('ES1').value = 1;
    document.getElementById('ES2').value = 2;
    document.getElementById('originalES').value = 1;
    document.getElementById('fakeES').value = 2;
    document.getElementById('indifferentES').value = 3;
  </script>
{{ else }}
  <script>
    document.getElementById('Trad1_switched').value = 1;
    document.getElementById('Trad2_switched').value = 2;
    document.getElementById('originalTrad_switched').value = 1;
    document.getElementById('fakeTrad_switched').value = 2;
    document.getElementById('indifferentTrad_switched').value = 3;

    document.getElementById('ES1_switched').value = 1;
    document.getElementById('ES2_switched').value = 2;
    document.getElementById('originalES_switched').value = 1;
    document.getElementById('fakeES_switched').value = 2;
    document.getElementById('indifferentES_switched').value = 3;
  </script>
{{ endif}}

<script>
  function enable(text, radio1, radio2, radio3, footer) {
    document.getElementById(text).textContent = 'Now, please decide which books Alex receives:';
    document.getElementById(radio1).disabled = false;
    document.getElementById(radio2).disabled = false;
    document.getElementById(radio3).disabled = false;
    document.getElementById(footer).classList.remove('text-muted')
    document.getElementById(footer).style.backgroundColor = 'navajowhite';
  }

  document.getElementById('ES_learn_mistakes').value = 0;
  document.getElementById('Trad_learn_mistakes').value = 0;
  function disable(text, radio1, radio2, radio3, footer, mistake) {
    document.getElementById(text).textContent = 'After correctly answering the question above, you will be able to ' +
            'decide which books Alex receives below.';
    document.getElementById(radio1).disabled = true;
    document.getElementById(radio2).disabled = true;
    document.getElementById(radio3).disabled = true;
    document.getElementById(footer).classList.add('text-muted')
    document.getElementById(footer).style.backgroundColor = null;
    document.getElementById(mistake).value = parseInt(document.getElementById(mistake).value) +1;
  }
</script>

{% endblock %}