<%- include("./partials/stheader.ejs") %>
<link rel="stylesheet" href="/stylesheets/stexam.css">
</head>
<body style="padding-top:2rem">
  <div class="container" style="background:white">
    <div class="">
      <h3 class="text-center"><%=exam.title%></h3>
      <hr style="border-top: 0.2px dashed grey">
      <p><b>Name:</b> <%=req.name%></p>
      <p><b>Roll:</b> <%=req.username%></p>
      <h4><b>Time Left: </b><span id="hours">00</span>:<span id="mins">00</span>:<span id="secs">00</span> </h4>
      <hr style="border-top: 0.2px dashed grey">
    </div>

    <div class="card mb-3" style="max-width: 9rem;">
  <div class="card-body text-dark row" >
    <%for(var i=1;i<=questions.length;i++){%>
    <span class="card-title box text-center"><%=i%></span>
    <%}%>
  </div>
  </div>
  <div class="container mx-auto justify-content-center">
    <div class="row ">
      <div class="col-md-9">
          <%if(questions[0]){%>
          <form class="" action="/st/submit/<%=questions[0].examid%>" method="post" enctype="multipart/form-data">
                <% for(var i=0;i<=questions.length-1;i++){%>
                <%if(i==0){%>
                  <div class="containers" style="display:block">
                <%}else{%>
                  <div class="containers" style="display:none">
                <%}%>
                <div class="card mx-auto justify-content-center" style="">
                    <div class="card-header" >
                      <%if(questions[i].qtype == -1){%>
                        <img src="<%=questions[i].q%>" alt="question" width="260">
                    <%  }else{%>
                        <b><%=questions[i].q%></b>
                    <%  }%>
                    </div>
                    <%if(questions[i].qtype==0 || questions[i].qtype==-1){%>
                      <%for(var j=0;j<=questions[i].options.length-1;j++){ %>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item"><input type="radio" name="q[<%=questions[i]._id%>]" value="<%=j+1%>"  id="<%=i%>,<%=j%>"> <%=questions[i].options[j]%></li>
                    </ul>
                    <% }%>
                    <div style="display:none">
                      <input type="radio" name="q[<%=questions[i]._id%>]" value="-1"  checked>
                      <label class="btn btn-secondary">blah blah</label>
                   </div>
                    <%}else{%>
                      <div class="row">
                        <div class="col-md-12">
                          <input type="file" name="q[<%=questions[i]._id%>]" multiple id="<%=i%>,<%=j%>">
                        </div>
                      </div>
                    <%}%>
                </div>
                <div class="m-2">
              <%if(i!=questions.length-1){%>
                  <button class="btn btn-outline-primary <%=i%> navigation">Next</button>
              <%}%>
              </div>
            <%  if(i!=0) {%>
                <div class="">
                  <button class="btn btn-outline-primary <%=i%> navigation">Previous</button>
                </div>
              <%}%>
                </div>
                <%}%>
             <%if(questions.length==1){%>
               <div class="form-group submit m-2">
                   <button type="submit" class="btn btn-outline-success">Submit</button>
               </div>
             <%}else{ %>
               <div class="form-group submit" style="display:none">
                   <button type="submit" class="btn btn-outline-success">Submit</button>
               </div>
             <%}%>
              </form>
          <%}%>
      </div>






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


<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
  var socket = io();
  var form = document.getElementsByTagName("form")[0];
  form.addEventListener('submit',()=>{
    console.log("clicked");
    var info = {userid:"<%=req.username%>",examid:"<%=questions[0].examid%>"};
    socket.emit("sendResponses",info);
    socket.emit("changeStatus","<%=req.username%>");
  });
  var questions = <%-JSON.stringify(questions)%>
  //////////////////////////////////on refresh!!!! it should come to the sam equestion! and with same options selected!
var z=0;
if(localStorage.getItem("z")) z=localStorage.getItem("z");
 var buttons = document.getElementsByClassName("navigation");
 var boxes = document.getElementsByClassName("box");
 var submit = document.querySelector(".submit");
 var container = document.getElementsByTagName("form")[0];
 var qs = container.children;
 for(var i=0;i<=buttons.length-1;i++){
   buttons[i].addEventListener("click",(e)=>{
    submit.style.display="none";
     e.preventDefault();
     var btn = e.srcElement;
     var index= Number(btn.classList.item(2));
     qs[index].style.display="none";
     if(btn.innerHTML=="Previous"){
      qs[index-1].style.display="block";
     }else{
        qs[index+1].style.display="block";
        if((index+2)==qs.length-1){
            submit.style.display="block";
        }
     }
     boxes[index].classList.add("boxred");
    console.log(index+2,qs.length-1);
   });
 }
 var inputs = document.getElementsByTagName("input");
 for(var i=0;i<=inputs.length-1;i++){
   inputs[i].addEventListener("click",(e)=>{
     var input = e.srcElement;
     localStorage.setItem(input.getAttribute("name"), input.getAttribute("value"));
     var index = input.id.split(",")[0];
     boxes[index].classList.remove("boxred")
     boxes[index].classList.add("boxgreen");
     console.log(boxes[index].classList);
   });
 }
 window.onload=()=>{
   z++;
   localStorage.setItem("z",z);
   for(var j=0;j<=questions.length-1;j++){
     if(localStorage.getItem("q["+questions[j]._id+"]")){
       var value = localStorage.getItem("q["+questions[j]._id+"]");
         var input = document.querySelectorAll("input[name=\"q["+questions[j]._id+"]\"]");
          for(var i=0;i<=input.length-1;i++){
            var val = input[i].getAttribute("value");
            if(val==value) {
              input[i].checked=true;
              var index = input[i].id.split(",")[0];
              boxes[index].classList.add("boxgreen");
            }
          }
     }else{
       console.log();
       if(z!=1) boxes[j].classList.add("boxred");
     }
   }
   };
 submit.addEventListener("click",()=>{
   localStorage.clear();
   form.submit();
 });
for(var i=0;i<=boxes.length-1;i++){
  boxes[i].addEventListener("click",(e)=>{
    for(var j=0;j<=qs.length-2;j++){
      if(qs[j].style.display=="block"){
        var options =document.querySelectorAll("input[name=\"q["+questions[j]._id+"]\"]");
        if(options[options.length-1].checked==true) {
          boxes[j].classList.add("boxred");
      }
            }
      qs[j].style.display="none";
    }
    var index = Number(e.srcElement.innerHTML);
    qs[index-1].style.display="block";
    if(index==qs.length-1) submit.style.display="block";
    else{
      submit.style.display="none";
    }
  });
}
///////////////////////////////////////////timer
var duration = Number(<%=duration%>)*60*1000;
var starttime = new Date(<%-JSON.stringify(start)%>);
var h = document.querySelector("#hours");
var m = document.querySelector("#mins");
var s = document.querySelector("#secs");
//var starttime = new Date();
var closetime = new Date(<%-JSON.stringify(close)%>);
var totaltime =0;
if(closetime.getTime()> (starttime.getTime()+duration)) totaltime = new Date(starttime.getTime()+duration);
else{
   totaltime = new Date(closetime.getTime());
}
console.log(totaltime);
var now = new Date();
var timer = totaltime.getTime()-now.getTime()
var hours = Math.floor((timer/1000)/3600);
var mins =   Math.floor((timer/1000)/60)%60;
var seconds = Math.floor(timer/1000)%60;
if(hours<10) h.innerHTML=0+String(hours);
else h.innerHTML=hours;
if(mins<10) m.innerHTML=0+String(mins);
else m.innerHTML=mins;
if(seconds<10) s.innerHTML=0+String(seconds);
else s.innerHTML=seconds;
////////////////////////////////////////////////////iteration
var stopit=setInterval(()=>{
  var now = new Date();
  var timer = totaltime.getTime()-now.getTime()
  var hours = Math.floor((timer/1000)/3600);
  var mins =   Math.floor((timer/1000)/60)%60;
  var seconds = Math.floor(timer/1000)%60;
  if(hours<10) h.innerHTML=0+String(hours);
  else h.innerHTML=hours;
  if(mins<10) m.innerHTML=0+String(mins);
  else m.innerHTML=mins;
  if(seconds<10) s.innerHTML=0+String(seconds);
  else s.innerHTML=seconds;
  if(mins<5 && hours==0){
    var timer = document.querySelector(".timer");
    timer.style.color="red";
  }
  //console.log(hours,mins,seconds);
  if(hours<=0 && mins<=0 && seconds<=0){
    submit.click();
    clearInterval(stopit);
  }
},1000)
// var hours = totaltime.getHours()-now.getHours();
// var mins = totaltime.getMinutes()-now.getMinutes();
// var seconds = totaltime.getSeconds()-now.getSeconds();
// console.log("now date",now);
//
// console.log(hours,mins,seconds);
////////////////////////////////////////////////////////////////////////////////voice recognition
if ('speechSynthesis' in window){
  console.log("he,lo");
    var recognition = new webkitSpeechRecognition();
    console.log(recognition);
recognition.continuous = true;
    recognition.onstart = ()=>{
      console.log("started the service");
    };
    // recognition.maxAlternatives=4;
    recognition.lang='en-IN';
    //recognition.interimResults=true;
    var speechRecognitionList = new webkitSpeechGrammarList();
    var newGrammar = new webkitSpeechGrammar();
    //newGrammar.src = '#JSGF V1.0; grammar names; public <name> = 1 |  2 |  3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | A | B | C | D | E | F | G | H | I | J ;'
    newGrammar.src = '#JSGF V1.0; grammar letters; public <letter> =  a | b | c | d | e | f | g | h | i ;'
    speechRecognitionList[1] = newGrammar; // should add the new SpeechGrammar object to the list
    recognition.grammars = speechRecognitionList;
    var i=0;
  recognition.onresult = (e)=>{
  //  console.log(e.results);
      //console.log(e.results[i][0].transcript);
      var transcript = e.results[i][0].transcript;
      //console.log(transcript.indexOf("option"));
      if(transcript.search(/option/i)!=-1){
        var option = transcript.substr(transcript.indexOf("option")+7,1);
        //console.log("option: "+option);
        for(var j=0;j<=qs.length-2;j++){
          if(qs[j].style.display!="none"){
            var options =document.querySelectorAll("input[name=\"q["+questions[j]._id+"]\"]");
            //var options = questions[j].options;
          //  console.log(options);
            switch(option){
              case "A":
                if(options[0]) options[0].click();
                  break;
              case "B":
                if(options[1]) options[1].click();
                  break;
              case "C":
                  if(options.length>3) options[2].click();
                  break;
              case "D":
                if(options.length>4) options[3].click();
                  break;
              case "E":
                if(options.length>5) options[4].click();
                  break;
              case "a":
                if(options[0]) options[0];
                  break;
              case "b":
                    if(options[1]) options[1].click();
                  break;
              case "c":
                  if(options.length>3) options[2].click();
                  break;
              case "d":
                  if(options.length>4) options[3].click();
                  break;
              case "e":
                    if(options.length>5) options[4].click();
                  break;
              default:
                  console.log("couldn't recognize");
                  break;
            }
          }
        }
      }else if(transcript.search(/number/i)!=-1 ){
       //console.log(transcript,"*********");
        var matches = transcript.match(/(\d+)/)
        if(matches &&  Number(matches[1])<=qs.length-1){
       console.log(matches);
          var number = Number(matches[1])-1;
          boxes[number].click();
          //console.log("clicked");
          }
        }
      else if(transcript.search(/next/i)!=-1){
      //  console.log("next");
      //  console.log(qs[0]);
        for(var j=0;j<=qs.length-2;j++){
            //console.log(j,qs[j].style.display);
          if(qs[j].style.display=="block" && j!=qs.length-2){
            var button = document.getElementsByClassName(j)[0].click();
            // if(j==qs.length-3) qs[qs.length-1].style.display="block";
            break;
          }
        }
      }else if(transcript.search(/previous/i)!=-1){
        //console.log("previous");
      //  console.log(qs[0]);
        for(var j=0;j<=qs.length-2;j++){
            //console.log(j,qs[j].style.display);
          if(qs[j].style.display=="block" && j!=0){
            var button = document.getElementsByClassName(j)[1].click();
            // if(j==qs.length-3) qs[qs.length-1].style.display="block";
            break;
          }
        }
      }else if(transcript.search(/submit/i)!=-1){
            //ask are you sure ? u have these many unattempted answers!!!! (text to speech )
          //  console.log("SUBMIT");
            console.log(submit);
          submit.click();
          form.submit
      }
    i++;
  }
recognition.start();
    // recognition.onerror = function(event) {
    //     console.log(event.error);
    // };
// recognition.addEventListener('soundstart', function() {
//   console.log('Some sound is being received');
// });
}else{
  console.log("not supported");
}
</script>


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