- Fix blinker in Timer

- modify question display

3 files changed, 48 insertions, 27 deletions

diff --git a/yaksh/static/yaksh/css/base.css b/yaksh/static/yaksh/css/base.css
index e3d5f26..362f401 100644
--- a/yaksh/static/yaksh/css/base.css
+++ b/yaksh/static/yaksh/css/base.css
@@ -2325,3 +2325,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .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 b26d49c..b72f873 100644
--- a/yaksh/static/yaksh/css/question.css
+++ b/yaksh/static/yaksh/css/question.css
@@ -1,3 +1,4 @@
+
 .time-div
 {
     background-color:black;
@@ -8,7 +9,7 @@
     height: 30px;
     float:right;
     border-radius: 6px 6px 6px 6px;
-    font-size:20px;
+    font-size:30px;
 }
 .td1-class
 {
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index b4123d2..6e1da68 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -17,13 +17,6 @@
 <script>
 var time_left = {{ time_left }}
 
-function blinker() {
-    var elem = document.getElementById('time_left');
-    setInterval(function (){
-                elem.style.visibility = (elem.style.visibility == 'hidden' ? '' : 'hidden');
-                }, 400);
-}
-
 function getTimeRemaining(endtime){
   var t = Date.parse(endtime) - Date.parse(new Date());
   var seconds = Math.floor( (t/1000) % 60 );
@@ -51,24 +44,21 @@ function updateClock(){
     var mm = ('0' + t.minutes).slice(-2);
     var ss = ('0' + t.seconds).slice(-2);
 
-    if(t.total<=0){
-      clearInterval(timeinterval);
+    if(t.total<0){
       document.forms["code"].submit();
+      clearInterval(timeinterval);
+      return null;
     }
-    else if (0<t.total<=300000){
-      clock.innerHTML = "<span style='color:red'><strong>" + hh + ":" + mm + ":" + ss + "</strong></span>";
+    if (t.total<=300000){
+      clock.innerHTML = "<blink><span style='color:red'><strong>" + hh + ":" + mm + ":" + ss + "</strong></span></blink>";
     }
-    else {
+    if (t.total>=300000) {
       clock.innerHTML = "<strong>" + hh + ":" + mm + ":" + ss + "</strong>";
     }
   }
 
 var clock = document.getElementById("time_left");
-var tm = getTimeRemaining(deadline)
 updateClock();
-if (0<tm.total<=300000){
-  blinker();
-}
 var timeinterval = setInterval(updateClock,1000);
 }
 
@@ -110,7 +100,7 @@ function call_skip(url)
 {% block pagetitle %}
 
 <table><h6><div>
-	<tr><td class=td1-class><h5>You have {{ paper.questions_left }} question(s) left in {{ quiz_name }} {{ time_left }}</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>
@@ -155,15 +145,30 @@ 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">
+<table>
+  <tr>
+    <td width="20%">
+      <h5><u>Marks</u> : {{ question.points }}</h5>
+      <span class="label success">{{ question.language }}</span>
+    </td>
+    <td width="90%">
+      <span align="left"><h4><u> {{ question.summary }} </u></h4>
+      <p>{{ question.description|safe }}</p>
+      </span>
+    </td>
+  </tr>
+</table>
+</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>