Adding indexed option addressing and UI changes to Quiz

quiz/static/css/quiz_attempt_page.css

 
     * {
-        font-family: 'Source Sans Pro', sans-serif;
-      }
-      body {
-        margin: 0px;
-        background: #F1F3F4;
-      }
-      form {
-        display: grid;
-        grid-template-columns: 1fr 300px;
-      }
-  
-    /* ---- Custom Radio Button Styles START ---- */
-      .op_box > input[type=radio] {
-        width: 0px;
-        height: 0px;
-        overflow: hidden;
-        z-index: -100;
-      }
-      .op_box {
-        width: 100%;
-        display: block;
-        margin-bottom: 15px;
-      }
-      .op_box > span {
-        padding : 10px;
-        margin: 0px;
-        display: flex;
-        border-radius: 2em;
-        background-color: white;
-        border: solid 1px #cdcfcf;
-        box-shadow: 3px 3px 5px #cdcfcf;
-      }
-      .op_box > span > strong {
-        width: 40px;
-        min-width: 40px;
-        height: 40px;
-        border: solid 1px black;
-        display: inline-block;
-        line-height: 40px;
-        text-align: center;
-        margin-right: 20px;
-        border-radius: 100%;
-        flex-shrink: 0;
-      }
-      .op_box > span > span {
-        margin: 10px;
-        font-size: 1.1em;
-      }
-    /* ---- Custom Radio Button Styles END ---- */
-  
-      #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: 30px;
-      }
-      .question {
-        display: none;
-      }
-      .questions_list {
-        list-style-type: none;
-        padding-left: 0px;
-        grid-column-start: 1;
-        grid-row-start: 2;
-      }
-      .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;
-      }
-  
-      #toolbar {
-        grid-column-start: 1;
-        grid-row-start: 3;
-        padding: 20px
-      }
-      .button_group {
-        display: flex;
-        height: 40px;
-        flex-direction: row;
-        width: 100%;
-        overflow: hidden;
-        margin-bottom: 15px;
-        border-radius: 2em;
-        transition: box-shadow 0.2s ease-in-out;
-        box-shadow: 1px 1px 5px #a4a8a8;
-      }
-      .button_group:hover {
-        box-shadow: 2px 2px 5px #cdcfcf;
-      }
-      .quiz_btn {
-        border: none;
-        flex-grow: 1;
-        height: 100%;
-        color: white;
-      
-      }
-      .prev_ques {
-        width: 40px;
-        background-color: #2f89fc;
-        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-      }
-      .prev_ques:hover {
-        background-color: #0359c9;
-      }
-      .prev_ques:active {
-        background-color: #81b7fd;
-        color:black;
-      }
-      .prev_ques:focus {
-        outline: none;
-      }
-      .next_ques {
-        background-color: #2f89fc;
-        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-      }
-      .next_ques:hover {
-        background-color: #0359c9;
-      }
-      .next_ques:active {
-        background-color: #81b7fd;
-        color:black;
-      }
-      .next_ques:focus {
-        outline: none;
-      }
-      .submit {
-        background-color: #e0c45c;
-        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-      }
-      .submit:hover {
-        background-color: #c19f25;
-      }
-      .submit:active {
-        background-color: #efe0a9;
-        color:black;
-      }
-      .submit:focus {
-        outline: none;
-      }
-      .separator {
-        border-left: solid 1px white;
-      }
\ No newline at end of file
+      font-family: 'Source Sans Pro', sans-serif;
+    }
+    body {
+      margin: 0px;
+      background: #F1F3F4;
+    }
+    form {
+      display: grid;
+      grid-template-columns: 1fr 300px;
+    }
+
+  /* ---- Custom Radio Button Styles START ---- */
+
+    .op_box > input[type=radio] {
+      width: 0px;
+      height: 0px;
+      overflow: hidden;
+      z-index: -100;
+    }
+    .op_box {
+      width: 100%;
+      display: block;
+      margin-bottom: 15px;
+    }
+    .op_box > span {
+      padding : 10px;
+      margin: 0px;
+      display: flex;
+      border-radius: 2em;
+      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;
+      min-width: 40px;
+      height: 40px;
+      border: solid 1px black;
+      display: inline-block;
+      line-height: 40px;
+      text-align: center;
+      margin-right: 20px;
+      border-radius: 100%;
+      flex-shrink: 0;
+    }
+    .op_box > span > span {
+      margin: 10px;
+      font-size: 1.1em;
+    }
+
+  /* ----- Quiz Question Start ----- */
+
+    .question_header {
+      display: flex;
+      justify-content: space-between;
+    }
+
+  /* ----- 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;
+    }
+    .question {
+      display: none;
+      padding: 30px;
+    }
+    .actual_question {
+      margin: 40px;
+    }
+    .questions_list {
+      list-style-type: none;
+      padding-left: 0px;
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+    .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;
+    }
+
+  /* ----- QUIZ CONTROLS Start ----- */
+
+    #toolbar {
+      grid-column-start: 1;
+      grid-row-start: 3;
+      padding: 20px
+    }
+    .button_group {
+      display: flex;
+      height: 40px;
+      flex-direction: row;
+      width: 100%;
+      overflow: hidden;
+      margin-bottom: 15px;
+      border-radius: 2em;
+      transition: box-shadow 0.2s ease-in-out;
+      box-shadow: 1px 1px 5px #a4a8a8;
+    }
+    .button_group:hover {
+      box-shadow: 2px 2px 5px #cdcfcf;
+    }
+    .quiz_btn {
+      border: none;
+      flex-grow: 1;
+      height: 100%;
+      color: white;
+    }
+    .prev_ques {
+      width: 40px;
+      background-color: #2f89fc;
+      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    }
+    .prev_ques:hover {
+      background-color: #0359c9;
+    }
+    .prev_ques:active {
+      background-color: #81b7fd;
+      color:black;
+    }
+    .prev_ques:focus {
+      outline: none;
+    }
+    .next_ques {
+      background-color: #2f89fc;
+      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    }
+    .next_ques:hover {
+      background-color: #0359c9;
+    }
+    .next_ques:active {
+      background-color: #81b7fd;
+      color:black;
+    }
+    .next_ques:focus {
+      outline: none;
+    }
+    .submit {
+      background-color: #e0c45c;
+      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    }
+    .submit:hover {
+      background-color: #c19f25;
+    }
+    .submit:active {
+      background-color: #efe0a9;
+      color:black;
+    }
+    .submit:focus {
+      outline: none;
+    }
+    .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>
-          <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>
+        <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)"><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">