<!doctype html>
<html lang="en">

<head>
    <%- include("template/head.ejs")%>
    <link rel="stylesheet" type="text/css" href="/css/crearproyectos.css" />
    
</head>

<body>
    <header class="container-fluid border-bottom border-dark border-1">
        <div class="row d-flex flex-wrap align-items-center">
          <div class="col-lg-2 d-none d-lg-block float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto;" src="/img/ProyectoAlbaRemove.png"></div>
          <div class="col-md-3 col-sm-3 col-4 d-lg-none float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto;" src="/img/guest.png"><a id="botonusuario" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuario.nombre%></a></div>
          <div class="col-8 text-center align-self-center float-none ">
            <h1>Proyecto Alba</h1>
            <h4>Learning Environment</h4>
          </div>
          <div class="col-2 d-none d-md-none d-lg-block float-start text-center p-0"><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto pt-lg-1;" src="/img/guest.png"><a id="botonusuario2" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuario.nombre%></a></div>
        </div>
      </header>
    <main class="container-fluid p-0 mb-0">

        <%- include("template/navleft.ejs")%>


        <div class="float-start ms-0 row justify-content-center col-8 col-lg-8 col-md-9 col-sm-9 text-center">

            <div class="h-100 m-3 col-11 float-none col-center border border-dark border-2 overflow-hidden"
                style=" background-color:#eee8cd;max-height: 1500px; min-height: 1400px;">
                <div class=" row border border-dark border-end-0 border-top-0 border-start-0">
                    <div class="col-center pt-4 pb-md-3 pb-sm-3 pb-3 pb-lg-3">
                        <span class="fs-5 fw-bold">Resultado Examen Preguntas Cortas</span>
                    </div>

                </div>
                <form id="editar" class="mb-3 list-unstyled" data-id="<%=cortas2._id%>">
                  <div class="col-12 mt-3" style="max-height: 1500px;">
                    <!--Nombre del Alumno que ha hecho el examen y Tema del Examen-->
                    <%if (usuario.rol=="Profesor" ){%>
                      <div>
                        <label>Alumno: </label>
                        <input id="textoPerfil" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" name="correoAlumno"
                            placeholder="Nombre de Alumno" value="<%= cortas2.correoAlumno %>"readonly></input>
                          </div>
                      <%}%>
                      <label>Tema: </label>
                      <input id="textoPerfil" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-info my-2" name="tema"
                          placeholder="Nombre del Tema" value="<%= cortas2.tema %>"></input>
  
                      
                         <!--Preguntas y Respuestas de las 10 Preguntas Cortas-->
                            <div>
                              <input id="textoPreguntas" value="<%= cortas2.pregunta1 %>" name="pregunta1" type="text" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                   placeholder="Escribir Pregunta" readonly ></input><input id="textoPreguntas" value="<%= cortas2.puntos1 %>" name="puntos1" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos1"placeholder="Puntos"></input>
                                  </div>
                                  <div>
                                    <input id="textoRespuestas" name="respuesta1" value="<%= cortas2.respuesta1 %>" type="text" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                         placeholder="Escribir Respuesta" readonly></input>
                                        </div>
                                 <div>
                                  <input id="textoPreguntas" value="<%= cortas2.pregunta2 %>" name="pregunta2" type="text" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                       placeholder="Escribir Pregunta" readonly ></input><input id="textoPreguntas" value="<%= cortas2.puntos2 %>" name="puntos2" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos2"placeholder="Puntos"></input>
                                     </div>
                                     <div>
                                      <input id="textoRespuestas" name="2" type="text" value="<%= cortas2.respuesta2 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                           placeholder="Escribir Respuesta" readonly></input>
                                          </div>
                                     <div>
                                      <input id="textoPreguntas" value="<%= cortas2.pregunta3 %>" type="text" name="pregunta3" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                           placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos3 %>" name="puntos3" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos3"placeholder="Puntos"></input>
                                         </div>
                                         <div>
                                          <input id="textoRespuestas" name="respuesta3" value="<%= cortas2.respuesta3 %>" type="text" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                               placeholder="Escribir Respuesta" readonly></input>
                                              </div>
                                         <div>
                                          <input id="textoPreguntas" value="<%= cortas2.pregunta4 %>" name="pregunta4" type="text" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                               placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos4 %>" name="puntos4" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos4"placeholder="Puntos"></input>
                                             </div>
                                             <div>
                                              <input id="textoRespuestas" name="respuesta4" type="text" value="<%= cortas2.respuesta4 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                   placeholder="Escribir Respuesta" readonly></input>
                                                  </div>
                                             <div>
                                              <input id="textoPreguntas" value="<%= cortas2.pregunta5 %>"  type="text" name="pregunta5" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                                   placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos5 %>" name="puntos5" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos5"placeholder="Puntos"></input>
                                                 </div>
                                                 <div>
                                                  <input id="textoRespuestas" name="respuesta5" type="text" value="<%= cortas2.respuesta5 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                       placeholder="Escribir Respuesta" readonly></input>
                                                      </div>
                                                 <div>
                                                  <input id="textoPreguntas" value="<%= cortas2.pregunta6 %>" name="pregunta6" type="text" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                                       placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos6 %>" name="puntos6" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos6"placeholder="Puntos"></input>
                                                     </div>
                                                     <div>
                                                      <input id="textoRespuestas" name="respuesta6" type="text" value="<%= cortas2.respuesta6 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                           placeholder="Escribir Respuesta" readonly></input>
                                                          </div>
                                                     <div>
                                                      <input id="textoPreguntas" value="<%= cortas2.pregunta7 %>"  type="text" name="pregunta7" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                                           placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos7 %>" name="puntos7" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos7"placeholder="Puntos"></input>
                                                         </div>
                                                         <div>
                                                          <input id="textoRespuestas" name="respuesta7" type="text" value="<%= cortas2.respuesta7 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                               placeholder="Escribir Respuesta" readonly></input>
                                                              </div>
                                                         <div>
                                                          <input id="textoPreguntas" value="<%= cortas2.pregunta8 %>" name="pregunta8" type="text" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                                               placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos8 %>" name="puntos8" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos8"placeholder="Puntos"></input>
                                                             </div>
                                                             <div>
                                                              <input id="textoRespuestas" name="respuesta8" type="text" value="<%= cortas2.respuesta8 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                                   placeholder="Escribir Respuesta" readonly></input>
                                                                  </div>
                                                             <div>
                                                              <input id="textoPreguntas" value="<%= cortas2.pregunta9 %>" type="text" name="pregunta9" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                                                   placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos9 %>" name="puntos9" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos9"placeholder="Puntos"></input>
                                                                 </div>
                                                                 <div>
                                                                  <input id="textoRespuestas" name="respuesta9" type="text" value="<%= cortas2.respuesta9 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                                       placeholder="Escribir Respuesta" readonly></input>
                                                                      </div>
                                                                 <div>
                                                                  <input id="textoPreguntas" value="<%= cortas2.pregunta10 %>" type="text" name="pregunta10" class="col-10 col-sm-10 col-md-10 col-lg-11 btn btn-success my-2"
                                                                       placeholder="Escribir Pregunta" readonly></input><input id="textoPreguntas" value="<%= cortas2.puntos10 %>" name="puntos10" type="number" min="0" max="1" step="0.01" class="col-2 col-sm-2 col-md-2 col-lg-1 btn btn-secondary my-2 puntos10"placeholder="Puntos"></input>
                                                                     </div>
                                                                     <div>
                                                                      <input id="textoRespuestas" name="respuesta10" type="text" value="<%= cortas2.respuesta10 %>" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-light my-2"
                                                                           placeholder="Escribir Respuesta" readonly></input>
                                                                          </div>
                                                                          <!--Nota Provisional y Nota Final del Estudiante-->
                                                                          <div>
                                                                            <span id="notaprovisional"><span>
                                                                           </div>
                                                                          <div>
                                                                           <input class="text-center" id="notapuntos" name="nota" type="number" step="0.01" placeholder="Calificacion" value="<%=cortas2.nota %>"></input>
                                                                          </div>
  
                      
                  </div>
                  <a class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2 px-1 m-5" href="/tareascortas" id="volveriniciarsesion">Ir a Tareas Cortas</a>
                  <%if (usuario.rol=="Profesor" ){%>
              <button class="col-12 col-sm-12 col-md-12 col-lg-3 btn btn-success my-2 px-1 my-2" type="submit">Calificar</button>
              <%}%>
                </form>
            </div>
            
        
        </div>




        <%- include("template/navright.ejs")%>




    </main>
    <%- include("template/footer.ejs")%>
    <script>
      //Nota Provisional Generada por Suma de Puntos
     const formEditar = document.querySelector('#editar');
           formEditar.addEventListener('submit', async (e) => {
               e.preventDefault()
               const puntos1 = formEditar.elements['puntos1'].value
               const puntos2 = formEditar.elements['puntos2'].value
               const puntos3 = formEditar.elements['puntos3'].value
               const puntos4 = formEditar.elements['puntos4'].value
               const puntos5 = formEditar.elements['puntos5'].value
               const puntos6 = formEditar.elements['puntos6'].value
               const puntos7 = formEditar.elements['puntos7'].value
               const puntos8 = formEditar.elements['puntos8'].value
               const puntos9 = formEditar.elements['puntos9'].value
               const puntos10 = formEditar.elements['puntos10'].value
               
               const nota = formEditar.elements['nota'].value
               

               const id = formEditar.dataset.id
               const data = await fetch(`/tareascortas/${id}`, {
                   method: 'PUT',
                   headers: {
                       'Content-Type': 'application/json'
                   },
                   body: JSON.stringify({ nota,puntos1,puntos2,puntos3,puntos4,puntos5,puntos6,puntos7,puntos8,puntos9,puntos10, })
               })
               const res = await data.json()
               if (res.estado) {
                   window.location.href = '/tareascortas'
               } else {
                   console.log(res)
               }
           })
    $("#notapuntos").click(function(){
    sumapuntos=0;
    for(var i=1;i<=10;i++){
      sumapuntos= (parseFloat($(".puntos"+i).val())) + sumapuntos;
      console.log(typeof(sumapuntos))
      console.log("Estoy en :"+i+" y el total: "+ sumapuntos)
    }
    console.log(sumapuntos)
    $("#notaprovisional").html("Nota provisional: "+parseFloat(sumapuntos).toFixed(2))
  });
   </script>
</body>

</html>