Skip to content

P
Pariksha
Commit f01dab74 authored by Samarth Joshi's avatar Samarth Joshi
Browse files
Options

Adding indexed option addressing and UI changes to Quiz

parent dd719b58
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 166 deletions
quiz/static/css/quiz_attempt_page.css
View file @ f01dab74
* { * {
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
} }
body { body {
margin: 0px; margin: 0px;
background: #F1F3F4; background: #F1F3F4;
} }
form { form {
display: grid; display: grid;
grid-template-columns: 1fr 300px; grid-template-columns: 1fr 300px;
} }
/* ---- Custom Radio Button Styles START ---- */ /* ---- Custom Radio Button Styles START ---- */
.op_box > input[type=radio] {
width: 0px; .op_box > input[type=radio] {
height: 0px; width: 0px;
overflow: hidden; height: 0px;
z-index: -100; overflow: hidden;
} z-index: -100;
.op_box { }
width: 100%; .op_box {
display: block; width: 100%;
margin-bottom: 15px; display: block;
} margin-bottom: 15px;
.op_box > span { }
padding : 10px; .op_box > span {
margin: 0px; padding : 10px;
display: flex; margin: 0px;
border-radius: 2em; display: flex;
background-color: white; border-radius: 2em;
border: solid 1px #cdcfcf; background-color: white;
box-shadow: 3px 3px 5px #cdcfcf; border: solid 1px #cdcfcf;
} box-shadow: 3px 3px 5px #cdcfcf;
.op_box > span > strong { transition: border 0.3s ease-in-out;
width: 40px; }
min-width: 40px; .op_box > span:hover {
height: 40px; border: solid 2px #black;
border: solid 1px black; }
display: inline-block; .op_box > span > strong {
line-height: 40px; width: 40px;
text-align: center; min-width: 40px;
margin-right: 20px; height: 40px;
border-radius: 100%; border: solid 1px black;
flex-shrink: 0; display: inline-block;
} line-height: 40px;
.op_box > span > span { text-align: center;
margin: 10px; margin-right: 20px;
font-size: 1.1em; border-radius: 100%;
} flex-shrink: 0;
/* ---- Custom Radio Button Styles END ---- */ }
.op_box > span > span {
#question_palette { margin: 10px;
width: 300px; font-size: 1.1em;
grid-column-start: 2; }
grid-row-start: 1;
display: grid; /* ----- Quiz Question Start ----- */
grid-template-rows: 60px 1fr 140px;
background-color: white; .question_header {
} display: flex;
justify-content: space-between;
#questions_area { }
height: 100vh;
overflow-y:scroll; /* ----- Quiz Pallete Start ----- */
grid-column-start: 1;
grid-row-start: 1; #question_palette {
} width: 300px;
#questions_area_wrapper { grid-column-start: 2;
margin: 30px; grid-row-start: 1;
} display: grid;
.question { grid-template-rows: 60px 1fr 140px;
display: none; background-color: white;
} }
.questions_list { #questions_area {
list-style-type: none; height: 100vh;
padding-left: 0px; overflow-y:scroll;
grid-column-start: 1; grid-column-start: 1;
grid-row-start: 2; grid-row-start: 1;
} }
.questions_list > li { #questions_area_wrapper {
padding: 15px; margin: auto;
border-bottom: solid 1px #fccde2; max-width: 800px;
transition: backround-color 0.2s ease-in-out; }
} .question {
.questions_list > li:hover { display: none;
padding: 15px; padding: 30px;
background-color: #fee7f1; }
border-bottom: solid 1px #fccde2; .actual_question {
} margin: 40px;
}
#toolbar { .questions_list {
grid-column-start: 1; list-style-type: none;
grid-row-start: 3; padding-left: 0px;
padding: 20px grid-column-start: 1;
} grid-row-start: 2;
.button_group { }
display: flex; .questions_list > li {
height: 40px; padding: 15px;
flex-direction: row; border-bottom: solid 1px #fccde2;
width: 100%; transition: backround-color 0.2s ease-in-out;
overflow: hidden; }
margin-bottom: 15px; .questions_list > li:hover {
border-radius: 2em; padding: 15px;
transition: box-shadow 0.2s ease-in-out; background-color: #fee7f1;
box-shadow: 1px 1px 5px #a4a8a8; border-bottom: solid 1px #fccde2;
} }
.button_group:hover {
box-shadow: 2px 2px 5px #cdcfcf; /* ----- QUIZ CONTROLS Start ----- */
}
.quiz_btn { #toolbar {
border: none; grid-column-start: 1;
flex-grow: 1; grid-row-start: 3;
height: 100%; padding: 20px
color: white; }
.button_group {
} display: flex;
.prev_ques { height: 40px;
width: 40px; flex-direction: row;
background-color: #2f89fc; width: 100%;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; overflow: hidden;
} margin-bottom: 15px;
.prev_ques:hover { border-radius: 2em;
background-color: #0359c9; transition: box-shadow 0.2s ease-in-out;
} box-shadow: 1px 1px 5px #a4a8a8;
.prev_ques:active { }
background-color: #81b7fd; .button_group:hover {
color:black; box-shadow: 2px 2px 5px #cdcfcf;
} }
.prev_ques:focus { .quiz_btn {
outline: none; border: none;
} flex-grow: 1;
.next_ques { height: 100%;
background-color: #2f89fc; color: white;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
} .prev_ques {
.next_ques:hover { width: 40px;
background-color: #0359c9; background-color: #2f89fc;
} transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
.next_ques:active { }
background-color: #81b7fd; .prev_ques:hover {
color:black; background-color: #0359c9;
} }
.next_ques:focus { .prev_ques:active {
outline: none; background-color: #81b7fd;
} color:black;
.submit { }
background-color: #e0c45c; .prev_ques:focus {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; outline: none;
} }
.submit:hover { .next_ques {
background-color: #c19f25; background-color: #2f89fc;
} transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
.submit:active { }
background-color: #efe0a9; .next_ques:hover {
color:black; background-color: #0359c9;
} }
.submit:focus { .next_ques:active {
outline: none; background-color: #81b7fd;
} color:black;
.separator { }
border-left: solid 1px white; .next_ques:focus {
} outline: none;
\ No newline at end of file }
.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
View file @ f01dab74
...@@ -32,14 +32,19 @@ ...@@ -32,14 +32,19 @@
<div id="questions_area_wrapper"> <div id="questions_area_wrapper">
{% for i in questions%} {% for i in questions%}
<div class="question"> <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 ='quizId'>{{i.quizId}}<h1> -->
<h1 id ='questionId' hidden>{{i.questionId}} </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}}"> <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}},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, '{{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}},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, '{{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}},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,'{{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}},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"> <input type="hidden" id="q{{forloop.counter0}}" name="{{i.questionId}}" value="NA">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment