Adding size animations on professor.html as requested by Roshan

QuizSystem/urls.py

@@ -38,6 +38,7 @@ urlpatterns = [
             path('uploaded/',a.upload_file,name="uploaded"),  path('sign_up/',a.sign_up,name="sign-up"), path('accounts/',include('django.contrib.auth.urls')),
             path('create_quiz/',a.create_quiz),
             path('add_quiz/',a.add_quiz),
+            path('monitor/',a.monitor)
             
 
 

quiz/static/img/folk-pattern-black/folk-pattern-black/readme.txt

+
+
+========================================================
+ This pattern is downloaded from www.subtlepatterns.com 
+ If you need more, that's where to get'em.
+ ========================================================
+ 
+ 
\ No newline at end of file

quiz/static/img/skulls/skulls/readme.txt

+
+
+========================================================
+ This pattern is downloaded from www.subtlepatterns.com 
+ If you need more, that's where to get'em.
+ ========================================================
+ 
+ 
\ No newline at end of file

quiz/templates/professor.html

@@ -4,47 +4,15 @@
     <title>Pariksha</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Slabo+13px&display=swap" rel="stylesheet">
     <style>
-        @media all and (min-width: 800px) {
-            .profile {
-                text-align: center;
-            }
         .cards {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                flex-wrap: wrap;
-            }
-            .menu_card_wrapper {
-                margin: 50px;
-                display: flex;
-                flex-direction: column;
-            }
-            .menu_card {
-                text-decoration: none;
-                width: 300px;
-                margin: 10px;
-                height: 400px; 
-                display: flex;
-                align-self: center;
-                justify-content: center;
-                box-shadow: 1px 1px 5px rgb(158, 158, 158);
-                transition: height 0.2s;
-            }
-            .menu_card:hover {
-                box-shadow: 1px 1px 5px rgb(87, 87, 87);
+            display: block;
+            min-height: 500px;
         }
-            .img_wrapper {
-                min-width: 200px;
-                display:block;
-                text-align: center;
-                margin-bottom: 20px;
-            }
-        }
-        
-        @media all and (max-width: 800px) {
             .menu_card_wrapper {
                 width: 100%;
                 margin-top: 20px;
@@ -64,14 +32,15 @@
                 display:block;
                 text-align: center;
             }
+            .backdrop {
+                display: none;
             }
-
         * {
             font-family: 'Source Sans Pro', sans-serif;
         }
         body {
             margin: 0px;
-            background: #F1F3F4;
+            background: white;
         }
         .menu_card_content > h1 {
             margin-top: 0px;
@@ -90,14 +59,15 @@
         .profile h1 {
             margin-top: 0px;
             margin-bottom: 0px;
-            font-size: 2.3em;
+            font-size: 2.5em;
             font-family: 'Slabo 13px', serif;
         }
         
 
         #menucard_createquiz {
             background-color: #00fff0;
-            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
+            color: black;
         }
         #menucard_createquiz:hover {
             background-color: #2595d6;
@@ -106,7 +76,8 @@
 
         #menucard_dashboard {
             background-color: #f0dcc8;
-            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
+            color: black;
         }
         #menucard_dashboard:hover {
             background-color: #ce9a66;
@@ -115,7 +86,8 @@
 
         #menucard_monitor {
             background-color: #fffee0;
-            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
+            color: black;
         }
         #menucard_monitor:hover {
             background-color: #d4ce50;
@@ -124,11 +96,58 @@
 
         #menucard_logout {
             background-color: #ffeada;
-            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
+            color: black;
         }
         #menucard_logout:hover {
             background-color: #d4b59e;
         }
+        @media only screen and (min-width: 800px) {
+            .profile {
+                text-align: center;
+            }
+            .cards {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+            .menu_card_wrapper {
+                margin: 50px;
+                width: 300px;
+                flex-direction: column;
+            }
+            .menu_card {
+                text-decoration: none;
+                width: 300px;
+                margin: 10px;
+                height: 400px; 
+                box-shadow: 1px 1px 5px rgb(158, 158, 158);
+            }
+            .menu_card:hover {
+                box-shadow: 1px 1px 5px rgb(87, 87, 87);
+                width: 330px;
+                height: 430px; 
+
+            }
+            .img_wrapper {
+                min-width: 200px;
+                display:block;
+                text-align: center;
+                margin-bottom: 20px;
+            }
+            
+            .backdrop {
+                display: block;
+                width: 100%;
+                height: 350px;
+                background: url("{% static 'img/skulls/skulls/skulls.png' %}");
+                position: absolute;
+                top:0px;
+                left:0px;
+                z-index: -100;  
+            }
+        }
     </style>
 </head>
 <body>
@@ -141,6 +160,7 @@
     <br><h1><a href="/instructor?quiz_id={{quiz.0}}">Instructor Graphs for quizCode:{{quiz.1}}</a></h1></center>
     
     {%endfor%} -->
+    <canvas class="backdrop"></canvas>
     <section class="cards">
         <a class="menu_card" id="menucard_createquiz" href="/create_quiz/">
             <div class="menu_card_wrapper">
@@ -151,7 +171,7 @@
             </div>
             </div>
         </a>
-        <a class="menu_card" id="menucard_dashboard" href="/instructor?quiz_id={{quiz.0}}">
+        <a class="menu_card" id="menucard_dashboard" href="/instructor?quiz_id=0">
             <div class="menu_card_wrapper">
             <div class="img_wrapper"><img height="100px" src="{% static 'img/menu_dashboard.svg' %}"></div>
             <div class="menu_card_content">
@@ -160,7 +180,7 @@
             </div>
             </div>
         </a>
-        <a class="menu_card" id="menucard_monitor" href="#">
+        <a class="menu_card" id="menucard_monitor" href="/monitor">
             <div class="menu_card_wrapper">
             <div class="img_wrapper"><img height="100px" src="{% static 'img/menu_monitor.svg' %}"></div>
             <div class="menu_card_content">

quiz/views.py

@@ -259,3 +259,7 @@ def add_quiz(request):
         q1.save()
         i=i+9
     return HttpResponse('sucess')#(request,'success')
+
+def monitor(request):
+    quizzes=quiz.objects.all().filter(quizInstructor=request.user.id).values('quizId','quizCode','quizInstructor')
+    return render(request, 'monitor.html')