{% extends 'base.html' %}
{% block title %}Create MCQ quiz{% endblock %}
{% block content %}
{% if actor.role=='teacher' and selected_portfolio_id %}<a class="back" href="{{url_for('teachers.portfolio_workspace',portfolio_id=selected_portfolio_id)}}">&larr; Back to teaching portfolio</a>{% else %}<a class="back" href="{{url_for('quiz.quizzes_admin')}}">&larr; All MCQ quizzes</a>{% endif %}
<div class="page-heading"><div><div class="eyebrow">NEW MCQ QUIZ</div><h1>Create a quiz</h1><p class="muted">Four answer choices per question. Choose the correct answer; students never see the answer key.</p></div></div>
<form id="builder" method="post" action="{{url_for('quiz.quiz_create')}}" class="form-stack">
  <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
  <input type="hidden" name="questions_json" id="question-data">
  <section class="card form-stack">
    {% if actor.role == 'teacher' %}<label>Teaching Portfolio *
      <select name="portfolio_id" required><option value="">Select subject and component</option>
      {% for p in portfolios %}<option value="{{p.id}}" {% if selected_portfolio_id == p.id %}selected{% endif %}>{{p.course_name}} {{p.component}} {{p.stage or "Stage not set"}} {{p.semester+" Semester" if p.semester else "Semester not set"}}</option>{% endfor %}</select></label>
      {% if not portfolios %}<div class="notice">Add your subject in <a href="{{url_for('teachers.portfolios')}}">My portfolios</a> first.</div>{% endif %}
    {% endif %}
    <label>Quiz title<input required name="title" maxlength="100" minlength="3" placeholder="Pathophysiology - Quiz 1"></label><label>Quiz time window (minutes)<select name="minutes"><option>5</option><option>10</option><option selected>15</option><option>20</option><option>30</option><option>45</option><option>60</option></select></label><div class="notice">Quiz starts immediately when created. Students have until the displayed deadline to answer. Questions and answer key cannot be edited after creation in this version.</div></section>
  <div id="questions"></div>
  <div class="actions" style="justify-content:flex-start"><button type="button" id="add" class="button outline">+ Add MCQ</button><button class="button primary" type="submit">Create quiz and show QR</button></div>
</form>
<template id="question-template"><section class="card quiz-build-question"><div class="section-heading"><h2 class="q-heading">Question</h2><button type="button" class="button small danger remove-question">Remove</button></div><label>Question text<textarea class="q-prompt" required maxlength="500" rows="3" placeholder="Write your MCQ..."></textarea></label><div class="choice-grid">{% for label in ['A','B','C','D'] %}<label>Answer {{label}}<input class="q-choice" required maxlength="200" placeholder="Answer choice {{label}}"></label>{% endfor %}</div><label>Correct answer<select class="q-correct"><option value="0">A</option><option value="1">B</option><option value="2">C</option><option value="3">D</option></select></label></section></template>
{% endblock %}
{% block scripts %}
<script>
(function(){
  const container=document.getElementById('questions');
  const tmpl=document.getElementById('question-template');
  function renumber(){container.querySelectorAll('.q-heading').forEach((el,i)=>el.textContent='Question '+(i+1));}
  function add(){if(container.children.length>=30){alert('Maximum 30 questions.');return;}container.appendChild(tmpl.content.cloneNode(true));renumber();}
  document.getElementById('add').addEventListener('click',add);
  container.addEventListener('click',e=>{if(e.target.classList.contains('remove-question')){if(container.children.length===1){alert('At least one question is required.');return;}e.target.closest('.quiz-build-question').remove();renumber();}});
  document.getElementById('builder').addEventListener('submit',e=>{
    const questions=Array.from(container.querySelectorAll('.quiz-build-question')).map(node=>({prompt:node.querySelector('.q-prompt').value.trim(), options:Array.from(node.querySelectorAll('.q-choice')).map(x=>x.value.trim()),correct:Number(node.querySelector('.q-correct').value)}));
    if(!questions.length){e.preventDefault();alert('Add at least one question.');return;}
    if(questions.some(q=>q.prompt.length<5||q.options.some(x=>!x))){e.preventDefault();alert('Fill in every question and all four answers.');return;}
    document.getElementById('question-data').value=JSON.stringify(questions);
  });
  add();
})();
</script>
{% endblock %}