{% extends "base.html" %}

<!DOCTYPE html>

{% block title %} Answer question {% endblock %}

{% block css %}
<link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/question.css" type="text/css" />

{% endblock %}

{% block script %}
<script src="{{ URL_ROOT }}/static/yaksh/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="{{ URL_ROOT }}/static/yaksh/js/question.js"></script>
<script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap-modal.js"></script>

<script>
var time_left = {{ time_left }} 
function secs_to_time(secs)
{
    var h = Math.floor(secs/3600);
    var h_s = (h > 0) ? h+'h:' : '';
    var m = Math.floor((secs%3600)/60);
    var m_s = (m > 0) ? m+'m:' : '';
    var s_s = Math.floor(secs%60) + 's';
    return h_s + m_s + s_s;
}

function update_time()
{
    time_left -= 1;
    if (time_left) 
    {
	var elem = document.getElementById("time_left");
	var t_str = secs_to_time(time_left);
	elem.innerHTML = "<strong>" + t_str + "</strong>";
	setTimeout("update_time()", 1000);
    }
    else 
    {
	document.forms["code"].submit();
    }	
}

function setSnippetHeight()
{
    var ta = document.getElementById('snippet');
    var height = ta.scrollHeight+'px';
    ta.style.height = 'auto';
    ta.style.height = height;
    autoresize();
}

function validate(){
    uploaded_file = document.getElementById("assignment").value;
    if(uploaded_file == ""){
        $("#upload_alert").modal("show");
        return false;
    }
    else
    {
        return true;
    }
}

function call_skip(url)
{
    form = document.forms["code"]
    form.action = url
    form.submit();
}

</script>
{% endblock script %}



{% block onload %} onload="update_time();setSnippetHeight()" {% endblock %}

{% block pagetitle %}

<table><h6><div>
	<tr><td class=td1-class><h5>You have {{ paper.questions_left }} question(s) left in {{ quiz_name }} </h5>
	<td class=td2-class><div class=time-div id="time_left">
	</div>
</div></h6></table>

{% endblock %}

{% block content %}
<div class="topbar">
  <div class="fill">
     <div class="container">
        <h3 class="brand"><strong>Online Test</h3></strong>
        <ul>
        <li> <h5><a> Hi {{user.first_name.title}} {{user.last_name.title}}  </a></h5>
        </ul>
        <form id="logout" action="{{URL_ROOT}}/exam/quit/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/" method="post" class="pull-right">
        {% csrf_token %}
         <button class="btn" type="submit" name="quit">Quit Exam</button> </li>

        </form>
     </div>
   </div>
</div>
<div class = container>
  <div class="sidebar">
    <p>Question Navigator </p>
    <div class="pagination">
        <ul>
            {% for qid, num in questions.items %}
                {% if qid in to_attempt %}
                    {% if qid == question.id|slugify %}
                        <li class="active"><a href="#" onclick="call_skip('{{ URL_ROOT }}/exam/{{ qid }}/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/')">{{ num }}</a></li>
                    {% else %}
                        <li><a href="#" onclick="call_skip('{{ URL_ROOT }}/exam/{{ qid }}/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/')">{{ num }}</a></li>
                    {% endif %}
                {% endif %}
                {% if qid in submitted %}
                    <li class="done"><a href="#">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
  </div>
</div>

     <h4><u> {{ question.summary }} </u><font class=pull-right>(Marks : {{ question.points }}) </font></h4><br>
	 <font size=3 face=arial>	{{ question.description|safe }} </font>
         {% if error_message %}
	 <div class="alert alert-error">
	 {% for e in error_message.splitlines %}
	 {{ e|join:"" }} 
	 <br/>
	 {% endfor%}
	 </div>{% endif %}

         <p id="status"></p>

         <form id="code" action="{{URL_ROOT}}/exam/{{ question.id }}/check/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/" method="post" enctype="multipart/form-data">
             {% csrf_token %}
             <input type=hidden name="question_id" id="question_id" value={{ question.id }}></input>

         {% if question.type == "mcq" %}
         {% for option in question.options.strip.splitlines %}
         <input name="answer" type="radio" value="{{option}}" />{{option}} <br/>
         {% endfor %}
         {% endif %}
         {% if question.type == "upload" %}
         <p>Upload assignment file for the said question<p>
         <input type=file id="assignment" name="assignment">
         <hr>
         {% endif %}
         {% if question.type == "mcc" %}
         {% for option in question.options.strip.splitlines %}
         <input name="answer" type="checkbox" value="{{ option }}"> {{ option }}
         <br>
         {% endfor %}
         {% endif %}
         {% if question.type == "code" %}

         <textarea rows="1" style="padding:0;height:auto;width:750px;overflow:hidden;background-color:white;border: 0 none white;" readonly="yes"  name="snippet" id="snippet" wrap="off">{% if last_attempt %}{{ question.snippet }}{% else %}{% if question.type == "bash" %} #!/bin/bash&#13;&#10;{{ question.snippet }}{% else %}{{ question.snippet }}{% endif %}{% endif %}</textarea>
        
         <textarea tabindex=1 rows="10" style="padding:0;height:auto; box-shadow: none;width:750px;margin-bottom:10px;overflow:hidden;border:none;" name="answer" id="answer" wrap="off" onkeydown="return catchTab(this,event)">{% if last_attempt %}{{last_attempt}}{% else %}{% if question.type == "bash" %}{% else %}{% endif %}{% endif %}</textarea>
<br>

 <script type="text/javascript">
       addLineNumbers('answer');
       </script>
       <script>addLineNumbers('snippet');</script>
         {% endif %}

         {% if question.type == "mcq" or question.type == "mcc "%}
         <br><button class="btn" type="submit" name="check" id="check">Submit Answer</button>&nbsp;&nbsp;
         {% elif question.type == "upload" %}
         <br><button class="btn" type="submit" name="check" id="check" onClick="return validate();">Upload</button>&nbsp;&nbsp;
         {% else %}
         <button class="btn" type="submit" name="check" id="check" onClick="submitCode();">Check Answer</button>&nbsp;&nbsp;
         {% endif %}
         {% if to_attempt|length != 1 %}
             <button class="btn" type="submit" name="skip" id="skip">Attempt Later</button>
         {% endif %}
         </form>
         
      
    <!-- Modal -->
    <div class="modal fade " id="upload_alert" >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">File not selected</h4>
          </div>
          <div id = "modal_body"class="modal-body">
              <font color="brown"><b>Kindly attach a file and then click upload.</b></font>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn primary close" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
   </div>

{% endblock content %}
