<%- include("./partials/teheader.ejs") %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="/stylesheets/newexam.css">

</head>
<%- include("./partials/tenav.ejs") %>

<body>

  <div class="container mt-4">
    <div class="col-md-12 fixed mt-4 text-center">
      <div class="sticky-top">
        <h6><b>Number of questions:</b> <span id="qno">0</span></h6>
        <h6><b>Total Marks: </b><span id="marks">0</span></h6>
      </div>
    </div>
    <hr>
    <div class="">
      <div class="col-md-12" class="main">
        <form class="" action="/te/exam/new" method="post" enctype="multipart/form-data">
          <div class="continer px-5">
            <div class="row px-5">
              <div class="input-field col s12">
                <input type="text" name="title" class="validate" id="title">
                <label for="title">Title of the Quiz</label>
              </div>
            </div>
          </div>
          <div id=cf>
            <div class="container">
              <div class="row">
                <div class="col m10">
                  <div class="row d-flex justify-content-end">
                    <label class="mr-2">MCQ</label>
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input mr-3 cs" id="cs0">
                      <label class="custom-control-label" for="cs0">File Upload</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s10">
                      <input id="q0" type="text" class="validate" name="questions[0][q]" required>
                      <label for="q0">Question</label>
                    </div>
                    <div class="col s1">
                      <label >Text</label>
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input qs" id="qs0">
                      <label class="custom-control-label" for="qs0">Upload</label>
                    </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s6">
                      <input id="optionNo0" type="number" class="validate optionno" min="2" required>
                      <label for="optionNo0">Number of Options</label>
                    </div>
                    <div class="input-field col s6">
                      <input id="marks0" type="number" class="validate marks" min="1" name="questions[0][marks]" required>
                      <label for="marks0">Marks for this question</label>
                    </div>
                  </div>
                  <label>Options</label>
                  <div class="col s12 options">
                    <div class="input-field col s6">
                      <input id="o1" type="text" class="validate" name="options[0][0]" required>
                      <label for="o1">1</label>
                    </div>
                    <div class="input-field col s6">
                      <input id="o2" type="text" class="validate" name="options[0][1]" required>
                      <label for="o2">2</label>
                    </div>
                    <div class="input-field col s6">
                      <input id="o3" type="text" class="validate" name="options[0][2]" required>
                      <label for="o3">3</label>
                    </div>
                    <div class="input-field col s6">
                      <input id="o4" type="text" class="validate" name="options[0][3]" required>
                      <label for="o4">4</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12">
                      <input id="c0" type="number" class="validate" name="questions[0][ans]" min="1" required>
                      <label for="c0">Correct Option Number</label>
                    </div>
                  </div>
                </div>
                <div class="col-md-2 d-flex justify-content-around align-items-center">
                  <button class="plus btn btn-primary" id="plus0">+</button>
                </div>
              </div>
            </div>
          </div>
          <div class="row d-flex justify-content-center">
            <button class="btn">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="/scripts/examnew.js"></script>
  <%- include("./partials/footer.ejs") %>
