Merge pull request #70 from ankitjavalkar/frontendchanges

Frontend interface changes

5 files changed, 91 insertions, 38 deletions

diff --git a/yaksh/static/yaksh/css/base.css b/yaksh/static/yaksh/css/base.css
index 3570098..362f401 100644
--- a/yaksh/static/yaksh/css/base.css
+++ b/yaksh/static/yaksh/css/base.css
@@ -2312,16 +2312,31 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   text-decoration: none;
 }
 .pagination a:hover, .pagination .active a {
-  background-color: #c7eefe;
+  background-color: #00CC66;
 }
 /*custom classes*/
 .pagination .done a {
   background-color: #00CC66;
 }
 .pagination .disabled a, .pagination .disabled a:hover {
-  background-color: transparent;
-  color: #bfbfbf;
+  background-color: #bfbfbf;
+  color: #ffffff;
 }
 .pagination .next a {
   border: 0;
 }
+
+@-webkit-keyframes blink {
+    from {
+        opacity: 1.0;
+    }
+    to {
+        opacity: 0.0;
+    }
+}
+blink {
+    -webkit-animation-name: blink;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
+    -webkit-animation-duration: 1s;
+}
diff --git a/yaksh/static/yaksh/css/question.css b/yaksh/static/yaksh/css/question.css
index 4bf5913..b72f873 100644
--- a/yaksh/static/yaksh/css/question.css
+++ b/yaksh/static/yaksh/css/question.css
@@ -1,12 +1,15 @@
+
 .time-div
 {
     background-color:black;
     padding: 8px;
     color: #5DFC0A;
     vertical-align:middle;
-    width:150px;
+    width: 160px;
+    height: 30px;
     float:right;
     border-radius: 6px 6px 6px 6px;
+    font-size:30px;
 }
 .td1-class
 {
@@ -15,6 +18,7 @@
 .td2-class
 {
 	width:50px;
+  padding: 5px 10px 9px;
 }
 .page-header {
   height:50px;
diff --git a/yaksh/static/yaksh/js/question.js b/yaksh/static/yaksh/js/question.js
index 75baf76..ccedbaf 100644
--- a/yaksh/static/yaksh/js/question.js
+++ b/yaksh/static/yaksh/js/question.js
@@ -6,7 +6,9 @@ function submitCode()
     x = document.getElementById("check");
     x.disabled = true;
     x.value = "Checking Answer ...";
+    if (document.getElementById("skip")!=null) {
     document.getElementById("skip").disabled = true;
+    }
 }
 
 function setSelectionRange(input, selectionStart, selectionEnd) 
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index e532513..650cef0 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -15,31 +15,51 @@
 <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;
+var time_left = {{ time_left }}
+
+function getTimeRemaining(endtime){
+  var t = Date.parse(endtime) - Date.parse(new Date());
+  var seconds = Math.floor( (t/1000) % 60 );
+  var minutes = Math.floor( (t/1000/60) % 60 );
+  var hours = Math.floor( (t/(1000*60*60)) % 24 );
+  var days = Math.floor( t/(1000*60*60*24) );
+  return {
+    'total': t,
+    'days': days,
+    'hours': hours,
+    'minutes': minutes,
+    'seconds': seconds
+  };
 }
 
-function update_time()
+function updateTime()
 {
-    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);
+var timeInSeconds = time_left;
+var currentTime = Date.parse(new Date());
+var deadline = new Date(currentTime + timeInSeconds*1000);
+
+function updateClock(){
+    var t = getTimeRemaining(deadline);
+    var hh = ('0' + t.hours).slice(-2);
+    var mm = ('0' + t.minutes).slice(-2);
+    var ss = ('0' + t.seconds).slice(-2);
+
+    if(t.total<0){
+      document.forms["code"].submit();
+      clearInterval(timeinterval);
+      return null;
     }
-    else 
-    {
-	document.forms["code"].submit();
-    }	
+    if (t.total<=300000){
+      clock.innerHTML = "<blink><span style='color:red'><strong>" + hh + ":" + mm + ":" + ss + "</strong></span></blink>";
+    }
+    if (t.total>=300000) {
+      clock.innerHTML = "<strong>" + hh + ":" + mm + ":" + ss + "</strong>";
+    }
+  }
+
+var clock = document.getElementById("time_left");
+updateClock();
+var timeinterval = setInterval(updateClock,1000);
 }
 
 function setSnippetHeight()
@@ -75,12 +95,12 @@ function call_skip(url)
 
 
 
-{% block onload %} onload="update_time();setSnippetHeight()" {% endblock %}
+{% block onload %} onload="updateTime();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>
+	<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>
@@ -117,7 +137,7 @@ function call_skip(url)
                     {% endif %}
                 {% endif %}
                 {% if qid in submitted %}
-                    <li class="done"><a href="#">{{ num }}</a></li>
+                    <li class="disabled"><a href="#">{{ num }}</a></li>
                 {% endif %}
             {% endfor %}
         </ul>
@@ -125,15 +145,28 @@ function call_skip(url)
   </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 %}
+<div class="span13">
+  <h4><u> {{ question.summary }} </u><font class=pull-right>(Marks : {{ question.points }}) </font></h4><br>
+  <font size=3 face=arial> {{ question.description|safe }} </font>
+  <br><font size=3 face=arial> Language: {{ question.language }} </font><br>
+       {% if error_message %}
+    <div class="alert alert-error">
+      {% for e in error_message.splitlines %}
+      {{ e|join:"" }} 
+      <br/>
+      {% endfor%}
+    </div>
+  {% endif %}
+</div>
+{% if error_message %}
+  <div class="alert alert-error">
+  {% for e in error_message.splitlines %}
+    {{ e|join:"" }} 
+    <br/>
+  {% endfor%}
+  </div>
+{% endif %}
+
 
          <p id="status"></p>
 
diff --git a/yaksh/views.py b/yaksh/views.py
index 0f6675a..78f33f6 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -1199,7 +1199,6 @@ def monitor(request, questionpaper_id=None):
                                  context_instance=ci)
 
 
-
 def get_user_data(username):
     """For a given username, this returns a dictionary of important data
     related to the user including all the user's answers submitted.