Redirect to score page after submitting

quiz/static/css/quiz_attempt_page.css

@@ -6,10 +6,58 @@
       margin: 0px;
       background: #F1F3F4;
     }
-    form {
-      display: grid;
-      grid-template-columns: 1fr 300px;
-    }
+    @media all and (min-width: 800px) {
+      form {
+        display: grid;
+        grid-template-columns: 1fr 300px;
+      }
+      #question_palette {
+        width: 300px;
+        grid-column-start: 2;
+        grid-row-start: 1;
+        display: grid;
+        grid-template-rows: 60px 1fr 140px;
+        background-color: white;
+      }
+      #questions_area {
+        height: 100vh;
+        overflow-y:scroll;
+        grid-column-start: 1;
+        grid-row-start: 1;
+      }
+      #nav_btn {
+        display: none;
+      }
+    }
+    
+    @media all and (max-width: 800px) {
+      form {
+        display: grid;
+        grid-template-rows: 1fr 140px;
+      }
+      #question_palette {
+        width: 100%;
+        overflow: hidden;
+        height: 140px;
+        display: grid;
+        grid-column-start: 1;
+        grid-row-start: 2;
+        position: fixed;
+        bottom: 0px;
+        grid-template-rows: 0px 0px 140px;
+        background-color: white;
+      }
+      #questions_area {
+        height: 100%;
+        overflow-y:scroll;
+        grid-column-start: 1;
+        grid-row-start: 1;
+      }
+      #nav_btn {
+        display: block;
+      }
+    }
+    
 
   /* ---- Custom Radio Button Styles START ---- */
 
@@ -32,10 +80,10 @@
       background-color: white;
       border: solid 1px #cdcfcf;
       box-shadow: 3px 3px 5px #cdcfcf;
-      transition: border 0.3s ease-in-out;
+      transition: border 0.2s ease-in-out;
     }
     .op_box > span:hover {
-      border: solid 2px #black;
+      /*border: solid 2px black;*/
     }
     .op_box > span > strong {
       width: 40px;
@@ -59,24 +107,19 @@
     .question_header {
       display: flex;
       justify-content: space-between;
+      align-items: center;
+    }
+    .marksarea {
+      text-align: right;
+    }
+    #blankspace {
+      font-size: 2em;
     }
 
   /* ----- Quiz Pallete Start ----- */
 
-    #question_palette {
-      width: 300px;
-      grid-column-start: 2;
-      grid-row-start: 1;
-      display: grid;
-      grid-template-rows: 60px 1fr 140px;
-      background-color: white;
-    }
-    #questions_area {
-      height: 100vh;
-      overflow-y:scroll;
-      grid-column-start: 1;
-      grid-row-start: 1;
-    }
+    
+    
     #questions_area_wrapper {
       margin: auto;
       max-width: 800px;
@@ -97,12 +140,13 @@
     .questions_list > li {
       padding: 15px;
       border-bottom: solid 1px #fccde2;
-      transition: backround-color 0.2s ease-in-out;
     }
-    .questions_list > li:hover {
-      padding: 15px;
-      background-color: #fee7f1;
-      border-bottom: solid 1px #fccde2;
+    #pallete_info {
+      grid-column-start: 1;
+      grid-row-start: 1;
+    }
+    .pallete_structure {
+      list-style-type: none;
     }
 
   /* ----- QUIZ CONTROLS Start ----- */
@@ -110,7 +154,8 @@
     #toolbar {
       grid-column-start: 1;
       grid-row-start: 3;
-      padding: 20px
+      padding: 20px;
+      background-color: white;
     }
     .button_group {
       display: flex;
@@ -179,4 +224,14 @@
       border-left: solid 1px white;
     }
 
-/* ----- End ----- */
+/* ----- End ----- */
\ No newline at end of file
+
+    .rubrics {
+      font-size: 1.2em;
+    }
+    .rubrics_wrapper {
+      margin: 20px;
+      border-radius: 6px;
+      padding: 20px;
+    }
+

quiz/static/js/quiz_attempt_page.js

 "use strict";
 
 var current_question = 0;
+var selected_questions = 0;
 var questions = document.getElementById('questions_area_wrapper').children;
 questions[current_question].style.display = 'block';
 var questions_len = parseInt(document.getElementById('question_count').value);
 var selected_color = '#f4fa9c';
 var deselected_color = '#ffffff';
+var qtotal = document.getElementById('qtotal');
+var qselected = document.getElementById('qselected');
+qtotal.innerHTML = questions_len;
+var pallete_view = false;
  
+
+function show_nav() {
+    if(!pallete_view) {
+        var pallete = document.getElementById('question_palette');
+        pallete.style.gridTemplateRows = "60px 1fr 140px";
+        pallete.style.height = "100%";
+        pallete_view = true;
+    } else {
+        var pallete = document.getElementById('question_palette');
+        pallete.style.gridTemplateRows = "0px 0px 140px";
+        pallete.style.height = "140px";
+        pallete_view = false;
+    }
+}
     
 function next_question () {
     var previous_question = current_question;
@@ -37,6 +56,7 @@ function goto_question(x) {
 }
 
 function set_option( question_id, option_id ) {
+    var pallete_q = document.getElementById('pallete_question_'+question_id);
     if(typeof question_id == "number" && typeof option_id == "number") {
         if(question_id>=0 && question_id<questions_len && option_id>=0 && option_id<4) {
             var ans = document.getElementById('q'+question_id);
@@ -44,19 +64,35 @@ function set_option( question_id, option_id ) {
                 ans.value = option_id;
                 var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
                 cbox.style.backgroundColor = selected_color;
+                pallete_q.style.backgroundColor = selected_color;
+                selected_questions = selected_questions + 1;
+                qselected.innerHTML = selected_questions;
             } else {
                 if(option_id == ans.value) {
                     var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
                     obox.style.backgroundColor = deselected_color;
+                    pallete_q.style.backgroundColor = deselected_color;
                     ans.value = "NA";
+                    selected_questions = selected_questions - 1;
+                    qselected.innerHTML = selected_questions;
                 } else {
                     var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
                     obox.style.backgroundColor = deselected_color;
+                    pallete_q.style.backgroundColor = deselected_color;
                     ans.value = option_id;
                     var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
                     cbox.style.backgroundColor = selected_color;
+                    pallete_q.style.backgroundColor = selected_color;
                 }
             }
         }
     }
-}
+}
\ No newline at end of file
+
+function submit_form() {
+    var main_form = document.getElementById('main_form');
+    var x = confirm("Are you sure you want to submit?");
+    if(x) {
+        main_form.submit();
+    }
+}

quiz/templates/index.html

@@ -8,23 +8,30 @@
 
 </head>
 <body>
-  <form method="POST" action="/result/">{% csrf_token %}
+  <form id="main_form" method="POST" action="/result/">{% csrf_token %}
   <!-- <h1>{{questions.quizId}} Question {{ questions.end_index }} of  {{count}}</h1> -->
   <aside id="question_palette">
+    <section id="pallete_info">
+      <ul class="pallete_structure">
+        <li>Selected <span id="qselected">0</span> of <span id="qtotal">0</span></li>
+      </ul>
+    </section>
     <ul class="questions_list">
       {% for i in questions%}
-      <li onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
+      <li id="pallete_question_{{ forloop.counter0 }}" onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
       {%endfor%}
     </ul>
     <section id="toolbar">
+      <div class="button_group">
+        <button class="quiz_btn submit" type="button" onclick="submit_form()"><strong>Submit</strong></button>
+      </div>
       <div class="button_group">
         <button class="quiz_btn prev_ques" type="button" onclick="prev_question()"><strong>Previous</strong></button>
         <span class="separator"></span>
+        <button id="nav_btn" class="quiz_btn next_ques" type="button" onclick="show_nav()"><strong>Nav</strong></button>
+        <span class="separator"></span>
         <button class="quiz_btn next_ques" type="button" onclick="next_question()"><strong>Next</strong></button>
       </div>
-      <div class="button_group">
-        <button class="quiz_btn submit" type="submit"><strong>Preview and Submit</strong></button>
-      </div>
     </section>
   </aside>
   <section id="questions_area">
@@ -32,10 +39,10 @@
     <div id="questions_area_wrapper">
     {% for i in questions%}
       <div class="question">
-        <div class="question_header">
-          <p>{{ i.negative }}</p>
-          <p>Question {{ forloop.counter }} of {{ count }}</p>
-          <p>{{ i.marks }}</p>
+        <div class="rubrics_header">
+          <p>Question <br/>{{ forloop.counter }} of {{ count }}</p>
+          <p id="blankspace"></p>
+          <p class="marksarea">Marks: {{ i.marks }}<br/>Negative: -{{ i.negative }}</p>
         </div>
         <!-- <h1 id ='quizId'>{{i.quizId}}<h1> -->
         <h1 id ='questionId' hidden>{{i.questionId}} </h1>

quiz/templates/view_submissions.html

 <!DOCTYPE html>
 <head>
   {% load static %}
-  
+  <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 href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
+  <link href="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
+  <style>
+    .score_area {
+      margin: auto;
+      max-width: 800px;
+      background-color: white;
+      padding: 40px;
+      text-align: center;
+    }
+    .score {
+      font-size: 8em;
+      font-family: 'Fredericka the Great', cursive;
+    }
+    .sepa {
+      font-size: 8em;
+      position:relative;
+      top: 20px;
+    }
+    .tota {
+      font-size: 6em;
+      position:relative;
+      top: 40px;
+    }
+    #questions_area_wrapper {
+      background-color: white;
+      padding: 40px;
+      margin: auto;
+      max-width: 800px;
+    }
+    </style>
 </head>
 <body>
 
+  <section id="ques_area">
+    <div class="score_area">
+      <span class="score">{{ score }}</span>
+      <span class="score sepa">/</span>
+      <span class="score tota">{{ total }}</span>
+    </div>
+  <div id="questions_area_wrapper">
+    
     {% for sub in submissions %}
-      test {{ sub.questionId.question }}
+      <div class="sadsad">
+        <h2 class="actual_question">{{forloop.counter}}. {{ sub.questionId.question }}</h2>
+        <label class="op_box"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{sub.questionId.option1}}</span></span></label>
+        <label class="op_box"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{sub.questionId.option2}}</span></span></label>
+        <label class="op_box"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{sub.questionId.option3}}</span></span></label>
+        <label class="op_box"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{sub.questionId.option4}}</span></span></label>
+        <br/>
+        <div class="rubrics_wrapper">
+        <div class="question_header">
+          <p class="rubrics">
+            You selected: {{sub.option}} <br/>
+            Correct answer: {{sub.questionId.answer}}
+          </p>
+          <p id="blankspace"></p>
+          <p class="marksarea rubrics">Marks: {{ sub.questionId.marks }}<br/>Negative: -{{ sub.questionId.negative }}</p>
+        </div>
+        <br/>
+        <p style="font-size: 1.2em">
+          {{ sub.questionId.explainations }}
+        </p>
+        </div>
+      </div>
+      <br/>
+      <hr/>
     {%endfor%}
+  </div>
+  </section>
+  <script>
+    var correct_color = '#f4fa9c';
+    var wrong_color = '#ffb174';
+    function set_subs( question_id, option_id, colorss ) {
+      if(typeof question_id == "number" && typeof option_id == "number") {
+        var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
+        cbox.style.backgroundColor = colorss;
+      }
+    }
+    {% for sub in submissions %}
+      set_subs({{forloop.counter0}}, {{sub.option}}, wrong_color);
+      set_subs({{forloop.counter0}}, {{sub.questionId.answer}}, correct_color);
+    {%endfor%}
+  </script>
 </body>
 </html>

quiz/views.py

@@ -10,6 +10,7 @@ from .models import cribs
 from . newQuiz import readCSV
 from .models import quiz
 from django.db.models import Max
+from django.shortcuts import redirect
 import csv
 #for login
 from django.contrib.auth.models import User
@@ -62,7 +63,7 @@ def result(request):
                         score-=q[0]['negative']
                     t=submission(questionId=questionInstance, option=request.POST[questionno], studentId=request.user, quizId=quizInstance)
                     t.save()
-            return HttpResponse(f"Successfully Submitted. Score:{score}")
+            return redirect('/view_submission/?q='+str(quizId))
         else:
             return HttpResponse("You have already submitted this quiz")
 
@@ -184,8 +185,15 @@ def view_sub(request):
         quizId = int(request.GET.get('q'))
         quizInstance = quiz.objects.get(pk=quizId)
         subs = submission.objects.filter(quizId=quizInstance, studentId=request.user).select_related().all()
+        score = 0
+        total = 0
+        message = ''
         for sub in subs:
-            print(sub.questionId.question)
-        return render(request,'view_submissions.html', { 'submissions' : subs })
+            if sub.option == sub.questionId.answer:
+                score = score + sub.questionId.marks
+            else:
+                score = score - sub.questionId.negative
+            total = total + sub.questionId.marks
+        return render(request,'view_submissions.html', { 'submissions' : subs , 'score': score, 'total': total })