Skip to content

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

Adding partial UI for quiz page (student attempts quiz)

parent 0923b528
Show whitespace changes
Inline Side-by-side
Showing with 262 additions and 51 deletions
quiz/static/css/quiz_attempt_page.css 0 → 100644
View file @ 5a5bc06f
* {
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
quiz/static/js/quiz_attempt_page.js 0 → 100644
View file @ 5a5bc06f
"use strict";
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);
function next_question () {
var previous_question = current_question;
current_question = ( current_question + 1 ) % questions_len;
questions[previous_question].style.display = 'none';
questions[current_question].style.display = 'block';
}
function prev_question () {
var previous_question = current_question;
current_question = ( current_question - 1 );
if (current_question < 0) {
current_question = questions_len - 1;
}
questions[previous_question].style.display = 'none';
questions[current_question].style.display = 'block';
}
function goto_question(x) {
if(typeof x == "number") {
if(x>=0 && x<questions_len) {
var previous_question = current_question;
current_question = x;
questions[previous_question].style.display = 'none';
questions[current_question].style.display = 'block';
}
}
}
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 = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
console.log("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = '#f4fa9c';
}
}
}
\ No newline at end of file
quiz/templates/index.html
View file @ 5a5bc06f
<!DOCTYPE html>
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'script.js' %}">
</script>
<script src="{% static 'js/script.js' %}"></script>
<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="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
</head>
<body>
<center><h1>
{{questions.quizId}}Question {{ questions.end_index }} of {{count}}</h1></center>
<div >
<form method="POST" action="result">
<!-- <h1>{{questions.quizId}} Question {{ questions.end_index }} of {{count}}</h1> -->
<aside id="question_palette">
<ul class="questions_list">
{% for i in questions%}
<h1 id ='quizId'>{{i.quizId}}<h1><h1 id ='questionId' hidden>{{i.questionId}} </h1>
<li onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
{%endfor%}
</ul>
<section id="toolbar">
<div class="button_group">
<button class="quiz_btn prev_ques" type="button" onclick="prev_question()"><strong>Previous</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">
<input type="hidden" id="question_count" value="{{count}}">
<div id="questions_area_wrapper">
{% for i in questions%}
<div class="question">
<!-- <h1 id ='quizId'>{{i.quizId}}<h1> -->
<h1 id ='questionId' hidden>{{i.questionId}} </h1>
<h1>{{i.question}}</h1>
<form>
<div >
<label><input type="radio" name="name" id="option1" value="{{i.option1}}">{{i.option1}} </label>
</div>
<div>
<label > <input type="radio" name="name" id="option2" value="{{i.option2}}">{{i.option2}}</label>
</div>
<div >
<label ><input type="radio" name="name" id="option3" value="{{i.option3}}">{{i.option3}}</label>
</div>
<div >
<label ><input type="radio" name="name" id="option4" value="{{i.option4}}">{{i.option4}} </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="q{{forloop.counter0}}" value="NA">
<!-- <label ><input type="textarea" name="fame" id="cribs" value="">Cribs...</label> -->
</div>
<div >
<label ><input type="textarea" name="fame" id="cribs" value="">Cribs...</label>
</div>
</form>
{%endfor%}
<div >
<button id="save_ans" >Submit Answer</button>
</div>
<div >
<div>
{% if questions.has_next %}
<a href="?page={{ questions.next_page_number }}"><button id="save_ans">Next</button></a>
{% else %}
<a href="/result/"><button >Submit Quiz</button></a>
{% endif %}
</div>
</div>
</div>
</section>
</form>
<!--<button id="save_ans" >Submit Answer</button>-->
<script src="{% static 'js/quiz_attempt_page.js' %}"></script>
</body>
</html>
quiz/views.py
View file @ 5a5bc06f
......@@ -23,7 +23,7 @@ for i in answers:
def index(request):
obj = Questions.objects.get_queryset().order_by('questionId')
count = Questions.objects.all().count()
paginator = Paginator(obj,1)
""" paginator = Paginator(obj,1)
try:
page = int(request.GET.get('page','1'))
except:
......@@ -32,13 +32,10 @@ def index(request):
questions = paginator.page(page)
except Exception as e:
questions=paginator.page(paginator.num_pages)
questions=paginator.page(paginator.num_pages) """
return render(request,'index.html',{'questions':obj,'count':count})
return render(request,'index.html',{'obj':obj,'questions':questions,'count':count})
'''
def index(request):
pass
'''
def result(request):
score =0
#print("lstlstlst"+str(len(anslist)))
......
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