Adding indexed option addressing and UI changes to Quiz

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/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">