<%- include("./partials/teheader.ejs") %>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<h1 style="display:none"><%=id%></h1>
<h2 style="display:none"><%=questions%></h2>

<div class="justify-content-end" id="secret" style="display:none">
  <a href="/te/exam/completed">Final Results</a>
</div>



<%- include("./partials/tenav.ejs") %>
<div class="mt-4 container students ">
  <h4 class="text-center">Students</h4>
  <table class="table text-center">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Username</th>
      <th scope="col">Marks Obtained</th>
    </tr>
  </thead>
  <tbody>
    <%for(var i=0;i<=responses.length-1;i++){%>
    <tr>
      <th scope="row"><%=i+1%></th>
      <td><%=responses[i].userid%></td>
      <td><%=responses[i].marks%></td>
    </tr>
     <%}%>
  </tbody>
</table>
<hr>
<a href="/te/exam/completed" class="text-center btn btn-outline-primary">Back</a>
</div>






<div class="mt-4 container questions">
  <h4 class="text-center">Stats</h4>
  <table class="table">
  <thead class="thead-dark">
    <tr class="text-center">
      <th scope="col">#</th>
      <th scope="col">Question</th>
      <th scope="col">Stats</th>
    </tr>
  </thead>
  <tbody>
    <%for(var i=0;i<=questions.length-1;i++){%>
    <tr>
      <td><%=i+1%></td>
      <td><div class="col-md-12">
        <div class="">
          <b ><%=questions[i].q%></b>
        </div>
        <div class="row">
        <% for(var j=0;j<=questions[i].options.length-1;j++){%>
            <div class="col-md-12">
              <%=j+1+". "+questions[i].options[j] %>
            </div>
        <%}%>
        </div>
      </div></td>
      <td>
        <div class="row">
          <div class="col-md-6" style="padding:0px 50px">
            <canvas id="piechart1<%=i%>" width="10px" height="10px"></canvas>
          </div>
          <div class="col-md-6" style="padding:0px 50px">
            <canvas id="piechart2<%=i%>" width="10px" height="10px"></canvas>
          </div>
        </div>
      </td>
    </tr>
     <%}%>

  </tbody>
</table>
</div>





<script src="/socket.io/socket.io.js"></script>
<script src="/scripts/responsepage.js"></script>

<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////socket programming
const socket = io();
console.log(socket);
var a = document.querySelector("h1");
var id = a.textContent;
console.log(id);
var responses = <%-JSON.stringify(responses)%>;
console.log(responses);
/////////////socket emit
// var stop;
// stop= setInterval(()=>{
//   socket.emit("sendResponses",id);
//   console.log("hello");
// },7000);
socket.on("responses",(data)=>{
  console.log(data.responses.length,"***********************************************************************");
  addData(data);
});
socket.on("final",(data)=>{
  // clearInterval(stop);
  var secret = document.getElementById("secret");
  console.log("examcompleted");
  secret.style.display="flex";
});
function addData(data){
  console.log("////////////////////////////////////////came inside fucntion",responses.length);
  if(responses.length==0){
    data.responses.forEach((d)=>{
      responses.push(d);
      console.log("pushed");
    });
    // console.log(data);
    // console.log(data.responses);
      addStudents(data.responses);
      updateCharts(data.questions);
  }else{
    console.log("//////////////////////////////////////////////////data came",responses.length,data.responses.length);
    if(responses.length<data.responses.length){
      var newResponses = data.responses.slice(responses.length);
      console.log(newResponses,"senttttttttt");
      addStudents(newResponses);
      console.log(responses.length,"////////",data.responses.length);
      console.log("added new");
      updateCharts(data.questions);
      responses.push(newResponses);
    }
  }
}
var container = document.getElementsByClassName("students")[0];
function addStudents(data){
  console.log(data.length,"created");
  data.forEach((x)=>{
    let row = document.createElement("div");
    row.classList.add("row");
    let first = document.createElement("div");
    first.classList.add("col-md-6");
    let second = document.createElement("div");
    second.classList.add("col-md-6");
    first.innerHTML=x.userid;
    second.innerHTML=x.marks;
    let hr = document.createElement("hr");
    row.appendChild(first);
    row.appendChild(second);
    row.appendChild(hr);
    console.log("appending");
    container.appendChild(row);
  })
}
///////////////////////////////////////////////////////////////////////////////// Chart.js
  // ******************************************************************************************8888
  var q = <%-JSON.stringify(questions)%>;
//***************************************************************************************************
var colors=[
 'rgba(52,152,219)',
 'rgba(26,188,156)',
 'rgba(231,76,60)',
 'rgba(241,196,15)',
 'rgba(211,84,0)',
 'rgba(189,195,199)',
 'rgba(102,0,204)',
 'rgba(0,255,204)',
 'rgba(0,0,255)',
 'rgba(255,0,0)',
 'rgba(0,255,0)',
]
////////////////////////////////////////////////////////////////////initialization!!!
  var i;
    for(i=0;i<=q.length-1;i++){
     var ctx1=document.getElementById("piechart1"+i);
     var ctx2=document.getElementById("piechart2"+i);
    // console.log(ctx1,ctx2);
  //   var data1={
  //     datasets:[{
  //       data:q[i].optioncount,
  //       backgroundColor:[
  //       "red",
  //       "blue",
  //       "orange",
  //       "yellow",
  //       "green"
  //       "violet"]
  //     }],
  //      labels: q[i].options
  // }
       var data1={
         datasets:[{
           data:q[i].optioncount,
                      // data:[10,20,30,40],
           backgroundColor:colors.slice(0,q[i].options.length)
         }],
          labels: q[i].options
     }
     console.log("data1",data1);
   // console.log(q[i].options,"///////////////");
   //   if(1 == 1){
   //     var data1={
   //       datasets:[{
   //         data:[10,20,30,40],
   //         backgroundColor:[ "red",
   //          "blue",
   //          "orange",
   //          "yellow",
   //          "green"
   //          "violet"],
   //       }],
   //       labels: q[i].options
   //   }
   // }
     var data2={
       datasets:[{
         data:[q[i].unattempted,q[i].rightans,q[i].wrongans],
         // data:[20,65,25],
         backgroundColor:colors.slice(0,3)
     }],
      labels:["unattempted","right answered","wrongly answered"],
    };
     var chart1 = new Chart(ctx1, {
      type: 'pie',
      data: data1,
      options:{
      responsive:true
}
  });
  console.log(chart1,"dskjaldjksajd");
      var chart2 = new Chart(ctx2, {
      type: 'pie',
      data: data2,
      options:{
      responsive:true
}
  });
}
//////////////////////////////////////////////////////////////////////////////dynamic updation of the charts!!
function updateCharts(questions){
  q=questions;
    for(var i=0;i<=q.length-1;i++){
     var ctx1=document.getElementById("piechart1"+i);
     var ctx2=document.getElementById("piechart2"+i);
    console.log(ctx1,ctx2);
    var data1={
      datasets:[{
        data:q[i].optioncount,
        backgroundColor:colors.slice(0,q[i].options.length),
  }],
     labels: q[i].options,
   }
   console.log("data1-dynamic",data1);
   //
   //   if(i == 0){
   //     var data1={
   //       datasets:[{
   //         data:q[i].optioncount,
   //         backgroundColor:[
   //         "red",
   //         "blue",
   //         "orange",
   //         "yellow",
   //         "green"
   //         "violet"]
   //       }],
   //        labels: q[i].options
   //   }
   // }
   // console.log(q[i].options,"///////////////");
   //   if(1 == 1){
   //     var data1={
   //       datasets:[{
   //         data:[10,20,30,40],
   //         backgroundColor:[ "red",
   //          "blue",
   //          "orange",
   //          "yellow",
   //          "green"
   //          "violet"],
   //       }],
   //       labels: q[i].options
   //   }
   // }
     var data2={
       datasets:[{
         data:[q[i].unattempted,q[i].rightans,q[i].wrongans],
         // data:[20,65,25],
         backgroundColor:colors.slice(0,3),
       }],
       labels:["unattempted","right answered","wrongly answered"],
     };
     var chart1 = new Chart(ctx1, {
      type: 'pie',
      data: data1,
      options:{responsive:true}
  });
//  console.log(chart1,"dskjaldjksajd");
      var chart2 = new Chart(ctx2, {
      type: 'pie',
      data: data2,
      options:{responsive:true}
  });
}
}
</script>

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