Minor UI changes

JamalIrby · Sep 12, 2022 · 3da32c1 · 3da32c1
1 parent ff7002c
commit 3da32c1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/main/templates/main/assignment-portal.html b/main/templates/main/assignment-portal.html
@@ -47,7 +47,7 @@ <h6 class="p-2 fw-bold">Deadline: <span class="px-2 text-danger"> {{assignment.p
       {% endif %}
       {% if submission.status %}
       <label class="p-2 fw-bold" for="">Status: </label>
-      <span style="color: #32CD32;" class="p-2 fw-bold">{{submission.status}} {{submission.time_difference}} early!</span><br>
+      <span class="p-2 fw-bold text-success">{{submission.status}} {{submission.time_difference}} early!</span><br>
       {% else %}
       <label class="p-2 fw-bold" for="">Status: </label>
       <span style="color: red;" class="p-2 fw-bold">Pending!</span><br>

diff --git a/quiz/templates/quiz/portalStdNew.html b/quiz/templates/quiz/portalStdNew.html
@@ -30,8 +30,8 @@
          </nav>
       </div>
       <!-- navigation links end -->
-      <div class="container pt-2 border shadow-sm rounded shadow-sm">
-         <div class="p-3 mb-3">
+      <div class="container pt-2 shadow rounded">
+         <div class="p-3 mb-3" id="containerSec">
             <div class="row">
                <div class="col-md-12 text-center">
                   <p class="fw-bold fs-5" style="color:navy"> {{quiz.title}}</p>
@@ -125,7 +125,7 @@
          </div>
       </div>
       <div class="progress animate__animated animate__zoomIn">
-         <div id="progressBar" class="progress-bar progress-bar-striped" style="background-color:#0b6ab8" role="progressbar" aria-label="Success striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+         <div id="progressBar" class="progress-bar progress-bar-striped" style="background-color:#0b6ab8" role="progressbar" aria-label="Success striped example" style="width: 75%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
    </div>
 </div>
@@ -134,10 +134,10 @@
       <form action="{% url 'studentAnswer' course.code quiz.id %}" method="post">
          {% csrf_token %}
          {% for question in questions  %}
-         <div class="border-bottom mb-3 bg-warning bg-opacity-10 rounded p-3">
+         <div class="border border-warning mb-3 bg-warning bg-opacity-10 rounded p-3">
             <div class="d-flex justify-content-between border-bottom mb-3">
-               <h6>Question {{forloop.counter}}</h6>
-               <h6>Marks : {{question.marks}}</h6>
+               <h6 class="fw-bold">Question {{forloop.counter}} of {{ total_questions }}</h6>
+               <h6 class="fw-bold">Marks : {{question.marks}}</h6>
             </div>
             <label class="fw-bold mb-2"> {{question.question}} </label>
             <div class="form-check mb-2">
@@ -176,7 +176,6 @@ <h6>Marks : {{question.marks}}</h6>
    </div>
 </div>
 <script>
-
 $('.form-check-label').click(function(){
    $(this).parent().find('input').prop('checked', true);
 });
@@ -188,6 +187,7 @@ <h6>Marks : {{question.marks}}</h6>
 $('#attempt').click(function(){
     $('#questions').show(1000);
     $('#attempt').hide(1000);
+   $('#start').hide(1000);
 }); 
 var countDownDate = new Date('{{ quiz.start|date:"D, d M Y H:i:s"}}').getTime();
 var x = setInterval(function() {
@@ -252,11 +252,9 @@ <h6>Marks : {{question.marks}}</h6>
 document.getElementById("Endseconds").innerHTML = secondsEnd;
 
 if (distanceEnd < 0) {
-    clearInterval(x);
-    $('#attempt').hide();
-    $('#questions').hide();
-    $('#subForm').click();
-    $('#endTimerSection').addClass('d-none');
+   clearInterval(x);
+   $('#subForm').click();
+   $('#containerSec').addClass('d-none');
 }
 }, 1000);
 
@@ -271,7 +269,16 @@ <h6>Marks : {{question.marks}}</h6>
 var percentage = percentage.toFixed(2);
 
 $('#progressBar').css('width', percentage + '%');
-$('#progressBar').text('Time elapsed: ' + percentage + '%');}, 200);
+$('#progressBar').text('Time elapsed: ' + percentage + '%');
+if (percentage > 85) {
+   $('#progressBar').removeClass('bg-danger');
+   $('#progressBar').addClass('bg-warning text-dark fw-bold');
+   }
+   if (percentage > 95) {
+   $('#progressBar').removeClass('bg-warning text-dark');
+   $('#progressBar').addClass('bg-danger fw-bold');
+   }
+}, 200);
 
 </script>
 {% endblock %}
diff --git a/quiz/templates/quiz/quizResult.html b/quiz/templates/quiz/quizResult.html
@@ -31,7 +31,7 @@
 </div>
 <!-- navigation links end -->
 <div class="container">
-   <div class="shadow-sm px-3 pt-3 rounded border text-light animate__animated animate__zoomIn" style="background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);">
+   <div class="shadow-sm px-3 pt-3 rounded border text-light animate__animated animate__zoomIn" style="background: linear-gradient(270deg, #00d2ff 0%, #3a47d5 100%);">
       <div class="row">
          <div class="col-md-6">
             <p class=" fw-bold fs-5"> {{quiz.title}} Summary</p>

diff --git a/templates/login_page.html b/templates/login_page.html
@@ -35,7 +35,7 @@ <h2 class="form-title">Sign in to eLMS</h2>
                               required>
                         </div>
                         <div class="form-group">
-                           <label for="your_pass"><span class="material-symbols-outlined" style="vertical-align:text-bottom">
+                           <label for="password"><span class="material-symbols-outlined" style="vertical-align:text-bottom">
                            lock
                            </span></label>
                            <input type="password" id="password" placeholder="Password"