{{ block title }}Knowledge Check{{ endblock }}
{{ block content }}
<div class="card shadow-sm p-4" style="max-width: 760px; margin: 0 auto;">

  <p>Please answer the following knowledge-check questions. Right answers on the first attempt will give you a $0.30 bonus per question.</p>

  <div id="feedback-box" class="alert d-none mb-4"></div>

  <form id="form">

    <!-- Q1 -->
    <div class="mb-4 q-block" id="q1-block">
      <p><strong>Question 1</strong></p>
      <p>Before the expert is invited, what do the buyer and seller know about the value of the product?</p>
      <div class="form-check"><input class="form-check-input" type="radio" name="q1" value="A" id="q1A"><label class="form-check-label" for="q1A">A. The exact value of the product</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q1" value="B" id="q1B"><label class="form-check-label" for="q1B">B. The value lies between 100 and 400</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q1" value="C" id="q1C"><label class="form-check-label" for="q1C">C. The value lies between 0 and 500</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q1" value="D" id="q1D"><label class="form-check-label" for="q1D">D. The narrow range observed by the expert</label></div>
    </div>

    <!-- Q2 -->
    <div class="mb-4 q-block" id="q2-block">
      <p><strong>Question 2</strong></p>
      <p>Which of the following best describes what the expert knows?</p>
      <div class="form-check"><input class="form-check-input" type="radio" name="q2" value="A" id="q2A"><label class="form-check-label" for="q2A">A. The exact final amount that the buyer and seller will agree on</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q2" value="B" id="q2B"><label class="form-check-label" for="q2B">B. The exact realized value of the product</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q2" value="C" id="q2C"><label class="form-check-label" for="q2C">C. A narrow range of width 10, from which the value is drawn</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q2" value="D" id="q2D"><label class="form-check-label" for="q2D">D. The buyer's and seller's bargaining strategies</label></div>
    </div>

    <!-- Q3 -->
    <div class="mb-4 q-block" id="q3-block">
      <p><strong>Question 3</strong></p>
      <p>Who invites the expert and who pays?</p>
      <div class="form-check"><input class="form-check-input" type="radio" name="q3" value="A" id="q3A"><label class="form-check-label" for="q3A">A. Buyer invites and buyer pays</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q3" value="B" id="q3B"><label class="form-check-label" for="q3B">B. Buyer invites and seller pays</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q3" value="C" id="q3C"><label class="form-check-label" for="q3C">C. Seller invites and the experimenter pays</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q3" value="D" id="q3D"><label class="form-check-label" for="q3D">D. Seller invites and the buyer pays</label></div>
    </div>

    <!-- Q4 -->
    <div class="mb-4 q-block" id="q4-block">
      <p><strong>Question 4</strong></p>
      <p>Suppose the buyer and seller agree to an amount of 220. The expert was invited. The realized value of the product is 300.</p>
      <p>What is the buyer's payoff?</p>
      <div class="form-check"><input class="form-check-input" type="radio" name="q4" value="A" id="q4A"><label class="form-check-label" for="q4A">A. 80</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q4" value="B" id="q4B"><label class="form-check-label" for="q4B">B. 150</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q4" value="C" id="q4C"><label class="form-check-label" for="q4C">C. 130</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q4" value="D" id="q4D"><label class="form-check-label" for="q4D">D. 135</label></div>
    </div>

    <!-- Q5 -->
    <div class="mb-4 q-block" id="q5-block">
      <p><strong>Question 5</strong></p>
      <p>Suppose no deal is reached. The expert was invited. The realized value of the product is 260.</p>
      <p>What is the seller's payoff?</p>
      <div class="form-check"><input class="form-check-input" type="radio" name="q5" value="A" id="q5A"><label class="form-check-label" for="q5A">A. 160</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q5" value="B" id="q5B"><label class="form-check-label" for="q5B">B. 210</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q5" value="C" id="q5C"><label class="form-check-label" for="q5C">C. 260</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q5" value="D" id="q5D"><label class="form-check-label" for="q5D">D. 310</label></div>
    </div>

    <!-- Q6 -->
    <div class="mb-4 q-block" id="q6-block">
      <p><strong>Question 6</strong></p>
      <p>When the expert provides their appraisal, which of the following statements is true?</p>
      <div class="form-check"><input class="form-check-input" type="radio" name="q6" value="A" id="q6A"><label class="form-check-label" for="q6A">A. The expert observes the true value of the product.</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q6" value="B" id="q6B"><label class="form-check-label" for="q6B">B. Whenever the buyer and seller strike a deal, the expert receives a percentage of the amount agreed upon between the buyer and seller.</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q6" value="C" id="q6C"><label class="form-check-label" for="q6C">C. The expert observes the buyer's and seller's latest offers to each other.</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q6" value="D" id="q6D"><label class="form-check-label" for="q6D">D. The expert is free to provide any appraisal they wish. They are not limited to the 10-unit range of values they observe.</label></div>
    </div>

    <div class="alert alert-warning text-center mb-3">
      ⚠️ Please make sure you have answered <strong>all 6 questions</strong> before submitting.
    </div>

    <div class="text-center mt-3">
      <button type="button" class="btn btn-primary btn-lg px-5" onclick="submitAnswers()">Submit Answers</button>
    </div>

  </form>
</div>

<style>
.q-block { padding: 12px 16px; border-radius: 6px; border-left: 4px solid transparent; transition: border-color 0.2s, background 0.2s; }
.q-unanswered { border-left: 4px solid #fd7e14 !important; background: #fff8f0 !important; }
.q-unanswered > p { color: #842029; font-weight: 600; }
.q-wrong { border-left: 4px solid #dc3545 !important; background: #fff5f5 !important; }
.q-correct { border-left: 4px solid #198754 !important; background: #f0fff4 !important; }
.answer-wrong label { color: #dc3545 !important; font-weight: 600; }
.answer-wrong input { accent-color: #dc3545; }
.answer-correct label { color: #198754 !important; font-weight: 600; }
.answer-correct input { accent-color: #198754; }
</style>

<script>
var CORRECT = { q1: 'B', q2: 'C', q3: 'A', q4: 'B', q5: 'A', q6: 'D' };
var questions = ['q1','q2','q3','q4','q5','q6'];

function clearHighlights() {
  questions.forEach(function(q) {
    var block = document.getElementById(q + '-block');
    block.classList.remove('q-unanswered', 'q-wrong', 'q-correct');
    ['A','B','C','D'].forEach(function(opt) {
      var fc = document.querySelector('input[name="' + q + '"][value="' + opt + '"]');
      if (fc) fc.closest('.form-check').classList.remove('answer-wrong', 'answer-correct');
    });
  });
}

function submitAnswers() {
  clearHighlights();
  var answers = {};
  var missing = [];

  questions.forEach(function(q) {
    var sel = document.querySelector('input[name="' + q + '"]:checked');
    if (sel) {
      answers[q] = sel.value;
    } else {
      missing.push(q);
      document.getElementById(q + '-block').classList.add('q-unanswered');
    }
  });

  if (missing.length > 0) {
    var fb = document.getElementById('feedback-box');
    fb.className = 'alert alert-warning mb-4';
    fb.textContent = 'Please answer all questions before submitting. ' + missing.length + ' question(s) are unanswered (highlighted in orange).';
    fb.classList.remove('d-none');
    document.getElementById(missing[0] + '-block').scrollIntoView({ behavior: 'smooth', block: 'center' });
    return;
  }

  liveSend({ type: 'submit_answers', answers: answers });
}

window.liveRecv = function(data) {
  var fb = document.getElementById('feedback-box');
  clearHighlights();

  if (data.status === 'passed') {
    questions.forEach(function(q) {
      var block = document.getElementById(q + '-block');
      block.classList.add('q-correct');
      var checked = document.querySelector('input[name="' + q + '"]:checked');
      if (checked) checked.closest('.form-check').classList.add('answer-correct');
    });
    fb.className = 'alert alert-success mb-4';
    fb.textContent = '✅ All correct! Well done. Proceeding...';
    fb.classList.remove('d-none');
    setTimeout(function() { document.getElementById('form').submit(); }, 1500);
  } else {
    questions.forEach(function(q) {
      var block   = document.getElementById(q + '-block');
      var checked = document.querySelector('input[name="' + q + '"]:checked');
      var isWrong = data.wrong.indexOf(q) !== -1;
      if (isWrong) {
        block.classList.add('q-wrong');
        if (checked) checked.closest('.form-check').classList.add('answer-wrong');
      } else {
        block.classList.add('q-correct');
        if (checked) checked.closest('.form-check').classList.add('answer-correct');
      }
    });
    var numWrong = data.wrong.length;
    fb.className = 'alert alert-danger mb-4';
    fb.innerHTML = '<strong>' + numWrong + ' answer(s) incorrect.</strong> Wrong answers are highlighted in red, correct answers in green. Please go back and review the instructions, then correct your answers and resubmit.';
    fb.classList.remove('d-none');
  }
};
</script>
{{ endblock }}