Improved Student Interface

Student test interface improved.
Made time-left component fixed at the top
Reset button for code question shifted inside the editor panel.
Reduced the empty space at the top and few improvement in look and feel.

6 files changed, 124 insertions, 76 deletions

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index 00b0867..1609121 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -17,10 +17,12 @@
   <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/bootstrap.min.css">
   <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/font-awesome.css" type="text/css" />
   <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/theme.css" type="text/css" />
+  <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/sticky-footer.css" type="text/css" />
+
 
   <style>
     body {
-        padding-top: 50px;
+        padding-top: 20px;
         padding-bottom: 20px;
     }
     </style>
diff --git a/yaksh/templates/yaksh/complete.html b/yaksh/templates/yaksh/complete.html
index 4fe9aba..01d5bf6 100644
--- a/yaksh/templates/yaksh/complete.html
+++ b/yaksh/templates/yaksh/complete.html
@@ -4,25 +4,30 @@
 {% block content %}
 {% csrf_token %}
     {% if paper.questions_answered.all or paper.questions_unanswered.all %}
-			<br><center><table class="table table-bordered"
-			 style="text-align:left;">
-				<tr><td><b>Submitted Questions</b></td>
-				<td>
-				{% if paper.questions_answered.all %}
-					{{ paper.questions_answered.all|join:", " }}
-				{% else %}
-					<p><b>No Questions have been Submitted</b></p>
-				{% endif %}
-				</td></tr>
-				<tr><td><b>Unattempted Questions</b></td>
-				<td>
-				{% if paper.questions_unanswered.all %}
-					{{ paper.questions_unanswered.all|join:", " }}
-				{% else %}
-					<p><b>All Questions have been Submitted</b></p>
-				{% endif %}
-				</td></tr>
-        </table></center>
+<center><table class="table table-bordered" >
+        <caption> Submission Status </caption>
+        <thead>
+            <tr>
+                <th> Question</th>
+                <th> State </th>
+            </tr>
+        </thead>
+
+        {% for question in paper.questions.all %}
+            <tbody>
+                {% if question in paper.questions_answered.all %}
+                    <tr class="info">
+                    <td> {{ question.summary }} </td>
+                    <td> Attempted </td>
+                {% else %}
+                    <tr class="danger">
+                    <td> {{ question }} </td>
+                    <td> Not Attempted </td>
+                {% endif %}
+                </tr>
+            </tbody>
+        {% endfor %}
+</table></center>
     {% endif %}
 		<center><h2> Good bye! </h2></center>
 		<center><h4> {{message}} </h4></center>
diff --git a/yaksh/templates/yaksh/login.html b/yaksh/templates/yaksh/login.html
index e5cfcc4..6de848d 100644
--- a/yaksh/templates/yaksh/login.html
+++ b/yaksh/templates/yaksh/login.html
@@ -1,18 +1,19 @@
 {% extends "base.html" %}
 
-{% block pagetitle %}YAKSH Online Test {% endblock %}
+{% block pagetitle %}YAKSH {% endblock %}
 
 {% block content %}
-
+    <div class="row">
+        <div class="col-md-6" style="border-right:1px solid gray;">
         <form action="" method="post">
         {% csrf_token %}
           
         <center><table class="table">
         {{ form.as_table }}
         </table></center>
-        <button class="btn btn-primary" type="submit">Login</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary" type="reset">Cancel</button>
-        <a href="{{URL_ROOT}}/exam/forgotpassword/">Forgot Password?</a>
-        <a href="{{URL_ROOT}}/exam/register/">New User? Sign-Up </a>
+        <button class="btn btn-primary" type="submit">Login</button>
+        <a class="btn btn-primary" href="{{URL_ROOT}}/exam/forgotpassword/">Forgot Password?</a>
+        <a class="btn btn-primary" href="{{URL_ROOT}}/exam/register/">New User? Sign-Up </a>
         <h3> Login with </h3>
         <a class="btn btn-social-icon btn-google" href="{% url 'social:begin' 'google-oauth2' %}">
             <span class="fa fa-google" style="font-size:32px;color:red" ></span>
@@ -21,5 +22,21 @@
             <span class="fa fa-facebook-square" style="font-size:32px"></span>
         </a>
         </form>
+        </div>
+        <div class="col-md-6">
+            <p> Online Test Interface for conducting online programming quiz.
+            <ul>
+                <li>Define fairly complicated programming problems and have users
+                solve the problem. </li>
+                <li>Immediate verification of code solution. </li>
+                <li>Supports pretty much arbitrary coding questions in Python, C, C++ and
+                simple Bash and uses "test cases" to test the implementations of the students.</li>
+                <li>Supports simple multiple choice questions and File uploads.</li>
+                <li>Since it runs on your Python, you could technically test any Python based library.</li>
+                <li>Scales to over 500+ simultaneous users.</li>
+            </ul>
+            </p>
+        </div>
+    </div>
       
 {% endblock content %}
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index a8de448..1666eba 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -1,8 +1,20 @@
 {% extends "base.html" %}
 {% load custom_filters %}
 
-{% block pagetitle %} Hi {{ paper.user.first_name.title}} {{ paper.user.last_name.title}}  Answer question {% endblock %}
+{% block nav %}
+<nav class="navbar navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <a class="navbar-brand" href="#"> Yaksh Online Test </a>
+      </div>
 
+        <div id="navbar">
+            <div class="time-div" id="time_left"></div>
+          </ul>
+        </div><!-- /.navbar -->
+      </div><!-- /.container -->
+    </nav><!-- /.navbar -->
+{% endblock %}
 {% block css %}
 <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/question.css" type="text/css" />
 <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/codemirror/lib/codemirror.css" type="text/css" />
@@ -89,11 +101,9 @@ function call_skip(url)
 {% block onload %} onload="updateTime();" {% endblock %}
 
 {% block content %}
-        <b style="color: white; font-size: 14px;">You have {{ paper.questions_left }} question(s) left in {{ paper.question_paper.quiz.description }}</b>
-        <div class=time-div id="time_left"></div><br>
-<p>Question Navigator </p>
-    <div class="list-group">
-        <ul class="pagination">
+<div class="row">
+    <div class="col-md-6">
+        <ul class="pagination pagination-lg">
             {% for qid in paper.questions.all %}
                 {% if qid in paper.questions_unanswered.all %}
                 {% if qid.id == question.id %}
@@ -108,8 +118,17 @@ function call_skip(url)
             {% endfor %}
         </ul>
     </div>
-<div class="col-md-11">
-<br> 
+    <div class="col-md-5">
+        <h3>{{ paper.questions_left }} question(s) left in {{ paper.question_paper.quiz.description }}</h3>
+    </div>
+    <div class="col-md-1">
+<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 btn-danger " type="submit" name="quit">Quit Exam <span class="glyphicon glyphicon-off"></span></button>
+</form>
+    </div>
+
+</div>
          <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 %}
@@ -153,25 +172,30 @@ function call_skip(url)
                      <hr>
                      {% endif %}
                      {% if question.type == "code" %}
-
-                     <h4>Program:</h4>
+                     <div class="row">
+                         <div class="col-md-2">
+                             <h4>Program:</h4>
+                         </div>
+                         <div class="col-md-10">
+                             <a href="#" class="pull-right" onclick="reset_editor()" name="reset" id="reset">Reset Answer <span class="glyphicon glyphicon-refresh"></span></a>
+                             </div>
+     </div>
                      <textarea name="answer" id="answer"></textarea>
                      <br>
-
+                     <div class="panel-footer">
+     {% if question.type == "code" %}
+     {% if error_message %}
+         <p> Output Message</p>
+         <div class="alert alert-danger" role="alert">
+         {{ error_message }}
+         </div>
+      {% endif %}
+     {% endif %}
+     </div>
                      {% endif %}
                  </div>
-                <div class="panel-footer">
-                     {% if question.type == "code" %}
-                     {% if error_message %}
-                         <p> Output Message</p>
-                         <div class="alert alert-danger" role="alert">
-                         {{ error_message }}
-                         </div>
-                      {% endif %}
-                     {% endif %}
-                </div>
              </div>
-             <div class="from-group">
+        <div class="from-group">
 
          {% if question.type == "mcq" or question.type == "mcc"%}
          <br><button class="btn btn-primary" type="submit" name="check" id="check">Submit Answer</button>&nbsp;&nbsp;
@@ -179,19 +203,12 @@ function call_skip(url)
          <br><button class="btn btn-primary" type="submit" name="check" id="check" onClick="return validate();">Upload</button>&nbsp;&nbsp;
          {% else %}
          <button class="btn btn-primary" type="submit" name="check" id="check" onClick="submitCode();">Check Answer <span class="glyphicon glyphicon-cog"></span></button>&nbsp;&nbsp;
-         <button class="btn btn-primary" type="button" onclick="reset_editor()" name="reset" id="reset">Reset Answer <span class="glyphicon glyphicon-refresh"></span></button>
-
          {% endif %}
          {% if paper.unanswered.all|length != 1 %}
          <button class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ paper.question_paper.id }}/')" name="skip" id="skip">Attempt Later <span class="glyphicon glyphicon-arrow-right"></span></button>
          {% endif %}
          </div>
          </form>
-<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 btn-primary" type="submit" name="quit">Quit Exam <span class="glyphicon glyphicon-off"></span></button>
-</form>
-</div>
     <!-- Modal -->
     <div class="modal fade " id="upload_alert" >
       <div class="modal-dialog">
@@ -242,7 +259,8 @@ function call_skip(url)
   editor.setValue('{{ last_attempt|escape_quotes|safe }}')
 
   function reset_editor() {
-      editor.setValue('{{ last_attempt|escape_quotes|safe }}');
+      console.log("here")
+      editor.setValue('');
       editor.clearHistory();
   }
 
diff --git a/yaksh/templates/yaksh/quit.html b/yaksh/templates/yaksh/quit.html
index 7be8ad5..a897b3c 100644
--- a/yaksh/templates/yaksh/quit.html
+++ b/yaksh/templates/yaksh/quit.html
@@ -1,27 +1,31 @@
 {% extends "base.html" %}
 
-{% block title %}Quit exam {% endblock %}
-{% block pagetitle %}Online Test {% endblock %}
+{% block pagetitle %} Yaksh Online Test {% endblock %}
 {% block content %}
-			<br><center><table class="bordered-table zebra-striped span8"
-			 style="text-align:left;">
-				<tr><td><b>Submitted Questions</b></td>
-				<td>
-				{% if paper.questions_answered.all %}
-					{{ paper.questions_answered.all|join:", " }}
-				{% else %}
-					<p><b>No Questions have been Submitted</b></p>
-				{% endif %}
-				</td></tr>
-				<tr><td><b>Unattempted Questions</b></td>
-				<td>
-				{% if paper.questions_unanswered.all %}
-					{{ paper.questions_unanswered.all|join:", " }}
-				{% else %}
-					<p><b>All Questions have been Submitted</b></p>
-				{% endif %}
-				</td></tr>
-			</table></center>
+<center><table class="table table-bordered" >
+        <caption> Submission Status </caption>
+        <thead>
+            <tr>
+                <th> Question</th>
+                <th> State </th>
+            </tr>
+        </thead>
+
+        {% for question in paper.questions.all %}
+            <tbody>
+                {% if question in paper.questions_answered.all %}
+                    <tr class="info">
+                    <td> {{ question.summary }} </td>
+                    <td> Attempted </td>
+                {% else %}
+                    <tr class="danger">
+                    <td> {{ question }} </td>
+                    <td> Not Attempted </td>
+                {% endif %}
+                </tr>
+            </tbody>
+        {% endfor %}
+</table></center>
 
 	<center><h4>Your current answers are saved.</h4></center>
 	<center><h4> Are you sure you wish to quit the exam?</h4></center>
diff --git a/yaksh/templates/yaksh/quizzes_user.html b/yaksh/templates/yaksh/quizzes_user.html
index afed652..4ccbbc0 100644
--- a/yaksh/templates/yaksh/quizzes_user.html
+++ b/yaksh/templates/yaksh/quizzes_user.html
@@ -7,6 +7,7 @@
 {% block pagetitle %} Student's Dashboard {% endblock pagetitle %}
 {% block content %}
 
+<div class="row">
 <center><b><u>Available Courses</u></b></center><br>
 {% for course in courses %}
 <div class="row well">
@@ -79,6 +80,7 @@
 </div><!--/row-->
  </br>
 {% endfor %}
+</div>
 <hr>
 <h4>List of quizzes taken by you so far</h4>
 {% if quizzes_taken %}