minor UI changes

7 files changed, 347 insertions, 100 deletions

diff --git a/testapp/templates/exam/add_question.html b/testapp/templates/exam/add_question.html
index 8bccb66..6c1d533 100644
--- a/testapp/templates/exam/add_question.html
+++ b/testapp/templates/exam/add_question.html
@@ -1,32 +1,142 @@
 {% extends "manage.html" %}
 
+
 {% block subtitle %}Add Question{% endblock %}
 
+{% block css %}
+<link rel="stylesheet" href="{{ URL_ROOT }}/static/exam/css/question_quiz.css" type="text/css" /> 
+{% endblock %}
+
 {% block script %}
-<script type='text/javascript'>
-function my_render(frm)
+<script type="text/javascript" src="{{ URL_ROOT }}/static/exam/css/min.js"></script>
+<script type="text/javascript">
+
+function increase(frm)
 {
-	document.getElementById('my').innerHTML = frm.description.value;
+	if(frm.points.value == "")
+	{
+		frm.points.value = "0.5";
+		return;
+	}
+	frm.points.value = parseFloat(frm.points.value) + 0.5;
+}
+
+function decrease(frm)
+{
+	if(frm.points.value > 0)
+	{
+		frm.points.value = parseFloat(frm.points.value) - 0.5;
+	}
+	else
+	{
+		frm.points.value=0;
+	}
+
 	
 }
+
+function textareaformat()
+{
+
+	document.getElementById('id_type').setAttribute('class','select-type');
+	
+	document.getElementById('id_points').setAttribute('class','mini-text');
+
+	$('#id_description').bind('focus', function( event ){
+         document.getElementById("id_description").rows=5;
+         document.getElementById("id_description").cols=40;
+      });
+
+	$('#id_description').bind('blur', function( event ){
+         document.getElementById("id_description").rows=1;
+         document.getElementById("id_description").cols=40;
+      });
+	
+	$('#id_description').bind('keypress', function (event){
+		document.getElementById('my').innerHTML = document.getElementById('id_description').value ;
+	});
+
+	$('#id_test').bind('focus', function( event ){
+         document.getElementById("id_test").rows=5;
+         document.getElementById("id_test").cols=40;
+      });
+
+	$('#id_test').bind('blur', function( event ){
+         document.getElementById("id_test").rows=1;
+         document.getElementById("id_test").cols=40;
+      });
+	$('#id_options').bind('focus', function( event ){
+         document.getElementById("id_options").rows=5;
+         document.getElementById("id_options").cols=40;
+      });
+
+	$('#id_options').bind('blur', function( event ){
+         document.getElementById("id_options").rows=1;
+         document.getElementById("id_options").cols=40;
+      });
+	
+	$('#id_type').bind('change',function(event){
+		var value = document.getElementById('id_type').value;
+		if(value == 'mcq')
+		{
+			document.getElementById('id_options').style.visibility='visible';
+			document.getElementById('label_option').innerHTML="Options :"
+
+		}
+		else
+		{
+			document.getElementById('id_options').style.visibility='hidden';
+			document.getElementById('label_option').innerHTML = "";
+		}
+	});
+
+		document.getElementById('my').innerHTML = document.getElementById('id_description').value ;
+		var value = document.getElementById('id_type').value;
+		if(value == 'mcq')
+		{
+			document.getElementById('id_options').style.visibility='visible';
+			document.getElementById('label_option').innerHTML="Options :"
+
+		}
+		else
+		{
+			document.getElementById('id_options').style.visibility='hidden';
+			document.getElementById('label_option').innerHTML = "";
+		}	
+}
+
+function autosubmit()
+{
+	if (document.getElementById('id_type').value == 'mcq')
+	{
+		var value = document.getElementById('id_options').value;
+		if(value.split('\n').length != 4)
+		{
+			alert("Enter 4 options. One option per line.");
+			return false;
+		}
+		return true;
+	}
+
+}
 </script>
 {% endblock %}
-{% block css %}
-<link rel="stylesheet" href="{{ URL_ROOT }}/static/exam/css/question_quiz.css" type="text/css" /> 
-{% endblock %}
+
+{% block onload %} onload='javascript:textareaformat();' {% endblock %}
 
 {% block manage %}
-<form action="" method="post" name="frm" onKeyPress='javascript:my_render(frm);'>
+<form action="" method="post" name=frm onSubmit="return autosubmit();">
   {% csrf_token %}
-<b>Look of Question in HTML Format :</b> 
-<p id='my' ></p> 
-
   <center><table class=span1>
-  {{ form.as_table }}
-  </table>
-
+  <tr><td>Summary: <td>{{ form.summary }}{{ form.summary.errors }}
+  <tr><td>Points:<td><button class="btn-mini" type="button" onClick="increase(frm);">+</button>{{ form.points }}<button class="btn-mini" type="button" onClick="decrease(frm);"">-</button>{{ form.points.errors }} &nbsp; Active: &nbsp; {{ form.active }}{{form.active.errors}} &nbsp; Type: &nbsp;{{ form.type }}{{form.type.errors}}
+  <tr><td><strong>Rendered: </strong><td><p id='my'></p>
+  <tr><td>Description: <td>{{ form.description}}  {{form.description.errors}}
+  <tr><td>Test: <td>{{ form.test }}{{form.test.errors}}
+  <tr><td id='label_option'>Options: <td>{{ form.options }}  {{form.options.errors}}
+  </table></center>
   <center><button class="btn" type="submit" name="savequestion">Save</button>
   <button class="btn" type="button" name="button" onClick='location.replace("{{URL_ROOT}}/exam/manage/questions/");'>Cancel</button> </center>
 </form>
-
 {% endblock %}
+
diff --git a/testapp/templates/exam/complete.html b/testapp/templates/exam/complete.html
index dfeee6c..a2e673b 100644
--- a/testapp/templates/exam/complete.html
+++ b/testapp/templates/exam/complete.html
@@ -7,5 +7,6 @@
 
         <center><h2> Good bye! </h2></center>
         <center><h4> {{message}} </h4></center>
-        <center><h4>You may now close the browser.</h4></center>
+        <center><h4>You may now close the browser.</h4></center><br>
+	<center><a href="{{URL_ROOT}}/exam/"> Login Again </a></center>
 {% endblock content %}
diff --git a/testapp/templates/exam/edit_question.html b/testapp/templates/exam/edit_question.html
index b1395e9..2ab3c7a 100644
--- a/testapp/templates/exam/edit_question.html
+++ b/testapp/templates/exam/edit_question.html
@@ -3,70 +3,207 @@
 {% block subtitle %}Edit Question{% endblock %}
 
 {% block css %}
-<link rel="stylesheet" href="{{ URL_ROOT }}/static/exam/css/question_quiz.css" type="text/css" /> 
+<link rel="stylesheet" href="{{ URL_ROOT }}/static/exam/css/question_quiz.css" type="text/css" />
 {% endblock %}
 {% block script %}
 <script type='text/javascript'>
-function my_render(frm)
+function render_question(frm)
 {
-	for(var i=1;i<=frm.description.length;i++)
+    for(var i=1;i<=frm.description.length;i++)
+    {
+        document.getElementById('my'+i).innerHTML = frm.description[i-1].value;
+    }
+   
+}
+
+function increase(frm,n)
+{
+	var newValue = document.getElementById('id_points'+ (n-1)).value ;
+		
+	if( newValue == "")
+	{
+		document.getElementById('id_points'+(n-1)).value = "0.5";
+		return;
+	}
+	document.getElementById('id_points' + (n-1)).value = parseFloat(newValue) + 0.5;
+}
+
+function decrease(frm,n)
+{
+	var newValue = document.getElementById('id_points'+ (n-1)).value ;
+		
+	if( newValue > 0)
 	{
-		document.getElementById(i).innerHTML = frm.description[i-1].value;
+		document.getElementById('id_points' + (n-1)).value = parseFloat(newValue) - 0.5;
 	}
+	else
+	{
+		document.getElementById('id_points' + (n-1)).value = 0;
+	}
+}
+
+
+function data(showContent,showHideDiv,a,summary)
+{
+    var con = document.getElementById(showContent);
+    var ele=document.getElementById(showHideDiv);
+    var atag=document.getElementById(a);
+    if (ele.style.display=="block")
+    {
+        con.style.display = "none"
+        ele.style.display = "none";
+	atag.text = summary;
+    }
+    else
+    {
+        con.style.display = "block";
+        ele.style.display = "block";
+	atag.text = "Hide";
+    }
+}
+
+function textareaformat()
+{
+	var point = document.getElementsByName('points');
+	var test =  document.getElementsByName('test');
+	var option =  document.getElementsByName('options');
+	var descriptions = document.getElementsByName('description');
+	var type = document.getElementsByName('type');
 	
+	for (var i=0;i<point.length;i++)
+	{
+		point[i].id = point[i].id + i;
+		descriptions[i+1].id=descriptions[i+1].id + i;
+		test[i].id=test[i].id + i;
+		option[i].id=option[i].id + i;
+		type[i].id = type[i].id + i;
+
+		
+	}
+
+	for(var i=0;i<point.length;i++)
+	{
+		var point_id = document.getElementById('id_points'+i);
+		point_id.setAttribute('class','mini-text');
+		
+		var type_id = document.getElementById('id_type'+i);
+		type_id.setAttribute('class','select-type');
+		type_id.onchange = showOptions;
+		var value = type_id.value;
+	
+		var desc_id = document.getElementById('id_description'+i);
+		desc_id.onfocus = gainfocus;
+		desc_id.onblur = lostfocus;
+
+		var test_id = document.getElementById('id_test' + i);
+		test_id.onfocus = gainfocus;
+		test_id.onblur = lostfocus;
+
+		var option_id = document.getElementById('id_options' + i);
+		option_id.onfocus = gainfocus;
+		option_id.onblur = lostfocus;
+		
+		if(value != 'mcq')
+		{
+			document.getElementById('id_options'+i).style.visibility='hidden';
+			document.getElementById('label_option'+(i+1)).innerHTML = "";
+
+		}
+
+		document.getElementById('my'+ (i+1)).innerHTML = desc_id.value;
+	}
 }
-function load_form()
+
+function showOptions(e)
 {
+		var value = this.value;
+		var no = parseInt(this.id.substring(this.id.length-1));
+		if( value == 'mcq')
+		{	
+			document.getElementById('id_options'+no).style.visibility = 'visible';
+			document.getElementById('label_option'+ (no+1)).innerHTML = "Options : "
+		}
+		else
+		{
+			document.getElementById('id_options'+no).value = "";
+			document.getElementById('id_options'+no).style.visibility = 'hidden';
+			document.getElementById('label_option'+ (no+1)).innerHTML = "";
+		}
+		
+
 
 }
 
-function data(showContent,showHideDiv)
+function gainfocus(e)
+{
+	this.rows = 5;
+}
+function lostfocus(e)
+{
+	this.rows = 1;
+}
+
+function autosubmit()
 {
-	var con = document.getElementById(showContent);
-	var ele=document.getElementById(showHideDiv);
-	if (ele.style.display=="block")
+	var total_form = document.getElementsByName('summary').length;
+	var empty_options = 0 ;
+	var count_mcq = 0;
+		
+	for (var i=0;i<total_form;i++)
 	{
-		con.style.display = "none"
-		ele.style.display = "none";
+		if (document.getElementById('id_type' + i).value != 'mcq')
+		{
+			continue;
+		}
+		else
+		{
+			count_mcq = count_mcq + 1;
+			var options = document.getElementById('id_options' + i).value;
+			var total_words = options.split("\n").length ;
+			if ( total_words < 4)
+				empty_options = empty_options + 1 ;
+		}
 	}
-	else
+	if (empty_options > 0)
 	{
-		con.style.display = "block";
-		ele.style.display = "block";
+		alert('Enter 4 options. One option per line.');
+		return false;
 	}
+	return true;
 }
 </script>
 {% endblock %}
-{% block onload %} onload='javascript:load_form();' {% endblock %}
+
+{% block onload %} onload = 'javascript:textareaformat();' {% endblock %}
+
 {% block manage %}
-<form name='frm' action="{{URL_ROOT}}/exam/manage/editquestion/" method="post" onKeyPress='javascript:my_render(frm);'>
+<form name='frm' action="{{URL_ROOT}}/exam/manage/editquestion/" method="post" onSubmit="return autosubmit()" onKeyPress='javascript:render_question(frm);'>
   {% csrf_token %}
-
-	{% for form in forms %}
-		
-		{{ form.summary.value }}<a onClick="data('contentDiv{{forloop.counter}}','myContent{{forloop.counter}}');"  style='cursor:pointer;'>Show</a> <br>
-		<b>Look of Question in HTML Format :</b> 
-<p id='{{forloop.counter}}'></p> 
-		<div id="contentDiv{{forloop.counter}}">
-		     <div id="myContent{{forloop.counter}}" style="display: none;">
-		        <table> {{ form.as_table }} </table>
+<table>
+    {% for form in forms %}
+        
+	<tr cellspacing=2px><td><a id='a{{forloop.counter}}' onClick="data('contentDiv{{forloop.counter}}','myContent{{forloop.counter}}','a{{forloop.counter}}','{{form.summary.value}}');" style='cursor:pointer;'>{{form.summary.value}}</a>
 	
-		     </div>
-		</div> 
-		<hr>
-	{% endfor %}
-
-  {% for form in forms %}
-
-  <table class=span1>
-  {{ form.as_table }}
-  </table>
-  <hr>
-  {% endfor %}
+        <div id="contentDiv{{forloop.counter}}" style="display:none;">
+           <div id="myContent{{forloop.counter}}" style="display: none;">
+	      
+	      <center><table class=span1>
+                 <tr><td>Summary: <td>{{ form.summary }}{{ form.summary.errors }}
+ 
+                 <tr><td>Points:<td><button class="btn-mini" name={{forloop.counter}} type="button" onClick="increase(frm,{{forloop.counter}});">+</button>{{ form.points }}<button class="btn-mini" type="button" onClick="decrease(frm,{{forloop.counter}});"">-</button>{{ form.points.errors }} &nbsp; Active: &nbsp; {{ form.active }}{{form.active.errors}} &nbsp; Type: &nbsp;{{ form.type }}{{form.type.errors}}
+
+                 <tr><td><strong>Rendered: </strong><td><p id='my{{forloop.counter}}'></p>
+                 <tr><td>Description: <td>{{ form.description }}  {{form.description.errors}}
+                 <tr><td>Test: <td>{{ form.test }}{{form.test.errors}}
+                 <tr><td id='label_option{{forloop.counter}}'>Options: <td>{{ form.options }}  {{form.options.errors}} {{form.options.helptext}}
+              </table></center>
+
+           </div>
+        </div>
+        <tr><td><hr>
+    {% endfor %}
+</table>
   <center><button class="btn" type="submit" name="savequestion">Save</button>
   <button class="btn" type="button" name="button" onClick='location.replace("{{URL_ROOT}}/exam/manage/questions/");'>Cancel</button> </center>
 </form>
-
-
 {% endblock %}
-
diff --git a/testapp/templates/exam/grade_user.html b/testapp/templates/exam/grade_user.html
index c6f6343..5ffb199 100644
--- a/testapp/templates/exam/grade_user.html
+++ b/testapp/templates/exam/grade_user.html
@@ -10,20 +10,17 @@
 
 {% block script %}
 <script type='text/javascript'>
-function data(showContent,showHideDiv)
+function data(showHideDiv)
 {
-	var con = document.getElementById(showContent);
-	var ele=document.getElementById(showHideDiv);
-	if (ele.style.display=="block")
-	{
-		con.style.display = "none"
-		ele.style.display = "none";
-	}
-	else
-	{
-		con.style.display = "block";
-		ele.style.display = "block";
-	}
+       var ele=document.getElementById(showHideDiv);
+       if (ele.style.display=="block")
+       {
+               ele.style.display = "none";
+       }
+       else
+       {
+               ele.style.display = "block";
+       }
 }
 </script>
 {% endblock %}
@@ -58,23 +55,21 @@ Start time: {{ paper.start_time }} <br/>
     action="{{URL_ROOT}}/exam/manage/gradeuser/{{data.user.username}}/" method="post">
 {% csrf_token %}
 {% for question, answers in paper.get_question_answers.items %}
+<div class="for-question">
 <p><strong> 
-	 Question: {{ question.id }}. {{ question.summary }} <font color='red'><img style="cursor: pointer" alt='...'  onClick="data('contentDiv{{question.id}}','myContent{{question.id}}');"></font>
-   (Points: {{ question.points }})</strong> </p>
-<div id="contentDiv{{question.id}}" style="display:none;">
-     <div id="myContent{{question.id}}" style="display: none;">
+	Question: {{ question.id }}. {{ question.summary }} (Points: {{ question.points }})
+</strong>
+<strong><a href="" onClick="data('myContent{{question.id}}'); return false;" style="cursor:pointer;" />Details</strong></p></a>
+<div id="contentDiv">
+     <div id="myContent{{question.id}}" style="padding:5px; display:none;">
         <p> Description : {{ question.description }} </p>
-	<p> Points : {{ question.points }} </p>
 	<p> Test : {{ question.test }} </p>
-	<p> Options : {{ question.options }} </p>
-	<p> Type : {{ question.type }} </p>
-
      </div>
 </div> 
-
-
+<div class="question-form">
 
 {% if question.type == "mcq" %}
+<br>
 <p> Choices: 
 {% for option in question.options.strip.splitlines %} {{option}}, {% endfor %}
 </p>
@@ -91,6 +86,8 @@ Marks: <input id="q{{ question.id }}" type="text"
         name="q{{ question.id }}_marks" size="4"
         value="{{ answer.marks }}"><br><br>
 {% endwith %}
+</div>
+</div>
 {% endfor %} {# for question, answers ... #}
 
 
@@ -107,14 +104,4 @@ Marks: <input id="q{{ question.id }}" type="text"
 
 {% endif %} {# if data.papers #}
 
-{% if data.papers.count > 1 %}
-<a href="{{URL_ROOT}}/exam/manage/monitor/">Monitor quiz</a>
-{% else %}
-{% with data.papers.0 as paper %}
-<a href="{{URL_ROOT}}/exam/manage/monitor/{{paper.quiz.id}}/">
-    Monitor quiz</a>
-{% endwith %}
-{% endif %}
-<br />
-<a href="{{URL_ROOT}}/admin/">Admin</a>
 {% endblock%}
diff --git a/testapp/templates/exam/intro.html b/testapp/templates/exam/intro.html
index ef218a2..afa596b 100644
--- a/testapp/templates/exam/intro.html
+++ b/testapp/templates/exam/intro.html
@@ -1,11 +1,11 @@
 {% extends "base.html" %}
 
 {% block title %}Instructions and Rules {% endblock %}
-
-{% block content %}
-
 {% block pagetitle %}Online Test {% endblock %}
 {% block formtitle %}Important instructions & rules {% endblock %}
+{% block content %}
+
+
 
           <p> Welcome <strong>{{user.first_name.title}} {{user.last_name.title}}</strong>, to the programming quiz! </p>
           <p>
diff --git a/testapp/templates/exam/question.html b/testapp/templates/exam/question.html
index f5dcdf4..d3da9fc 100644
--- a/testapp/templates/exam/question.html
+++ b/testapp/templates/exam/question.html
@@ -4,6 +4,10 @@
 
 {% block title %} Answer question {% endblock %}
 
+{% block css %}
+<link rel="stylesheet" href="{{ URL_ROOT }}/static/exam/css/question.css" type="text/css" />
+{% endblock %}
+
 {% block script %}
    <script type="text/javascript">
       var time_left = {{ time_left }};
@@ -35,7 +39,7 @@
             {
 	            var elem = document.getElementById("time_left");
 		    var t_str = secs_to_time(time_left);
-		    elem.innerHTML = "<strong> Time left: " + t_str + "<strong>" ;
+		    elem.innerHTML = "<strong>" + t_str + "</strong>";
 	            setTimeout("update_time()", 1000);
             }
 	    else 
@@ -48,15 +52,24 @@
 
 {% block onload %} onload="update_time()" {% endblock onload %}
 
-{% block pagetitle %}<br><h4>Test for {{ user.first_name.title }} {{ user.last_name.title }} </h4> {% endblock %}
+{% block pagetitle %}<br><h5>You have {{ paper.questions_left }} question(s) left in {{ quiz_name }} </h5>
+<div class=time-div>
+         <p id="time_left" style="color:white;"></p>
+</div>
+{% 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/" method="post" class="pull-right">
         {% csrf_token %}
-        <button class="btn" type="submit" name="quit">Quit Exam and Logout</button>
+         <button class="btn" type="submit" name="quit">Quit Exam and Logout</button> </li>
+
         </form>
      </div>
    </div>
@@ -85,8 +98,6 @@
          {% endif %}
          <button class="btn" type="submit" name="skip" id="skip">Skip Question</button>
          </form>
-         <h5>{{ user.first_name.title }} {{ user.last_name.title }}, You have {{ paper.questions_left }} question(s) left in {{ quiz_name }} </h5>
-         <p id="time_left"><strong>  Time left:   </strong></p>
-         <hr/>
+         
       
 {% endblock content %}
diff --git a/testapp/templates/manage.html b/testapp/templates/manage.html
index 77e0b7a..43578f7 100644
--- a/testapp/templates/manage.html
+++ b/testapp/templates/manage.html
@@ -27,14 +27,15 @@
   <div class="fill">
      <div class="container">
         <h3 class="brand"><strong>Online Test</h3></strong>
-	<ul class='pull-right'>
+	<ul>
 	       <li><a href="{{ URL_ROOT }}/exam/manage/questions">Questions</a></li>
                <li><a href="{{ URL_ROOT }}/exam/manage/showquiz">Quizzes</a></li>
        	       <li><a href="{{ URL_ROOT }}/exam/manage/gradeuser">Grade User</a></li>
 	       <li><a href="{{ URL_ROOT }}/exam/manage/monitor">Monitor</a></li>
-	       <li><a class='pull-right' style='cursor:pointer' onClick='location.replace("{{URL_ROOT}}/exam/complete/");'>Log out</a></li>
         </ul>
-        
+	<ul style="float:right;">
+	<li><strong><a style='cursor:pointer' onClick='location.replace("{{URL_ROOT}}/exam/complete/");'>Log out</a></strong></li>
+        </ul>
      </div>
    </div>
 </div>