change in upload view

quiz/migrations/0004_auto_20201024_1020.py

+# Generated by Django 3.1.2 on 2020-10-24 10:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('quiz', '0003_auto_20201024_0927'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quiz',
+            name='startTime',
+            field=models.DateTimeField(),
+        ),
+    ]

quiz/models.py

@@ -4,7 +4,11 @@ from django.db import models
 from django.db import models
 class quiz(models.Model):
     quizId=models.AutoField(default=0, primary_key=True) #primary key
+<<<<<<< HEAD
     #startTime=models.DateTimeField(auto_now_add=True,default=datetime.datetime.now) 
+=======
+    startTime=models.DateTimeField() 
+>>>>>>> f01dab74b5bad6e54fc228f10ec2a1c44428b8da
     length=models.FloatField(max_length=10)
     quizCode=models.CharField(max_length=100,default='Code') ##quiz Code set by instructor
     quizDone=models.BooleanField(default=False)

quiz/static/css/quiz_attempt_page.css

@@ -12,6 +12,7 @@
     }
 
   /* ---- Custom Radio Button Styles START ---- */
+
     .op_box > input[type=radio] {
       width: 0px;
       height: 0px;
@@ -31,6 +32,10 @@
       background-color: white;
       border: solid 1px #cdcfcf;
       box-shadow: 3px 3px 5px #cdcfcf;
+      transition: border 0.3s ease-in-out;
+    }
+    .op_box > span:hover {
+      border: solid 2px #black;
     }
     .op_box > span > strong {
       width: 40px;
@@ -48,7 +53,15 @@
       margin: 10px;
       font-size: 1.1em;
     }
-    /* ---- Custom Radio Button Styles END ---- */
+
+  /* ----- Quiz Question Start ----- */
+
+    .question_header {
+      display: flex;
+      justify-content: space-between;
+    }
+
+  /* ----- Quiz Pallete Start ----- */
 
     #question_palette {
       width: 300px;
@@ -58,7 +71,6 @@
       grid-template-rows: 60px 1fr 140px;
       background-color: white;
     }
-  
     #questions_area {
       height: 100vh;
       overflow-y:scroll;
@@ -66,10 +78,15 @@
       grid-row-start: 1;
     }
     #questions_area_wrapper {
-        margin: 30px;
+      margin: auto;
+      max-width: 800px;
     }
     .question {
       display: none;
+      padding: 30px;
+    }
+    .actual_question {
+      margin: 40px;
     }
     .questions_list {
       list-style-type: none;
@@ -88,6 +105,8 @@
       border-bottom: solid 1px #fccde2;
     }
 
+  /* ----- QUIZ CONTROLS Start ----- */
+
     #toolbar {
       grid-column-start: 1;
       grid-row-start: 3;
@@ -112,7 +131,6 @@
       flex-grow: 1;
       height: 100%;
       color: white;
-      
     }
     .prev_ques {
       width: 40px;
@@ -160,3 +178,5 @@
     .separator {
       border-left: solid 1px white;
     }
+
+/* ----- End ----- */
\ No newline at end of file

quiz/static/js/quiz_attempt_page.js

@@ -4,6 +4,8 @@ var current_question = 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';
  
     
 function next_question () {
@@ -34,14 +36,27 @@ function goto_question(x) {
     }
 }
 
-function set_option( question_id, option_id ,value) {
+function set_option( question_id, option_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);
-            ans.value = value;
+            if (ans.value == "NA") {
+                ans.value = option_id;
                 var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
-            console.log("lbl_"+question_id+"_"+option_id);
-            cbox.style.backgroundColor = '#f4fa9c';
+                cbox.style.backgroundColor = selected_color;
+            } else {
+                if(option_id == ans.value) {
+                    var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
+                    obox.style.backgroundColor = deselected_color;
+                    ans.value = "NA";
+                } else {
+                    var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
+                    obox.style.backgroundColor = deselected_color;
+                    ans.value = option_id;
+                    var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
+                    cbox.style.backgroundColor = selected_color;
+                }
+            }
         }
     }
 }
\ No newline at end of file

quiz/templates/index.html

@@ -32,14 +32,19 @@
     <div id="questions_area_wrapper">
     {% for i in questions%}
       <div class="question">
+        <div class="question_header">
+          <p><!--placeholder element left--></p>
+          <p>Question {{ forloop.counter }} of {{ count }}</p>
+          <p><!--placeholder element right--></p>
+        </div>
         <!-- <h1 id ='quizId'>{{i.quizId}}<h1> -->
         <h1 id ='questionId' hidden>{{i.questionId}} </h1>
-        <h1>{{i.question}}</h1>
+        <h2 class="actual_question">{{i.question}}</h2>
         <input type="hidden" id="qq{{forloop.counter0}}" name="qq{{forloop.counter0}}" value="{{i.questionId}}">
-        <label class="op_box" onclick="set_option({{forloop.counter0}},0, ' {{i.option1}}')"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{i.option1}}</span></span></label>
-        <label class="op_box" onclick="set_option({{forloop.counter0}},1, '{{i.option2}}')"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{i.option2}}</span></span></label>
-        <label class="op_box" onclick="set_option({{forloop.counter0}},2, '{{i.option3}}')"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{i.option3}}</span></span></label>
-        <label class="op_box" onclick="set_option({{forloop.counter0}}, 3,'{{i.option4}}')"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{i.option4}}</span></span></label>
+        <label class="op_box" onclick="set_option({{forloop.counter0}},0)"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{i.option1}}</span></span></label>
+        <label class="op_box" onclick="set_option({{forloop.counter0}},1)"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{i.option2}}</span></span></label>
+        <label class="op_box" onclick="set_option({{forloop.counter0}},2)"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{i.option3}}</span></span></label>
+        <label class="op_box" onclick="set_option({{forloop.counter0}},3)"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{i.option4}}</span></span></label>
         <input type="hidden" id="q{{forloop.counter0}}" name="{{i.questionId}}" value="NA">