Skip to content

P
Pariksha
You need to sign in or sign up before continuing.
Commit 873350ff authored by Samarth Joshi's avatar Samarth Joshi
Browse files
Options

Redirect to score page after submitting

parent 15dade56
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 42 deletions
db.sqlite3
View file @ 873350ff
No preview for this file type
quiz/static/css/quiz_attempt_page.css
View file @ 873350ff
......@@ -6,10 +6,58 @@
margin: 0px;
background: #F1F3F4;
}
form {
display: grid;
grid-template-columns: 1fr 300px;
}
@media all and (min-width: 800px) {
form {
display: grid;
grid-template-columns: 1fr 300px;
}
#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;
}
#nav_btn {
display: none;
}
}
@media all and (max-width: 800px) {
form {
display: grid;
grid-template-rows: 1fr 140px;
}
#question_palette {
width: 100%;
overflow: hidden;
height: 140px;
display: grid;
grid-column-start: 1;
grid-row-start: 2;
position: fixed;
bottom: 0px;
grid-template-rows: 0px 0px 140px;
background-color: white;
}
#questions_area {
height: 100%;
overflow-y:scroll;
grid-column-start: 1;
grid-row-start: 1;
}
#nav_btn {
display: block;
}
}
/* ---- Custom Radio Button Styles START ---- */
......@@ -32,10 +80,10 @@
background-color: white;
border: solid 1px #cdcfcf;
box-shadow: 3px 3px 5px #cdcfcf;
transition: border 0.3s ease-in-out;
transition: border 0.2s ease-in-out;
}
.op_box > span:hover {
border: solid 2px #black;
/*border: solid 2px black;*/
}
.op_box > span > strong {
width: 40px;
......@@ -59,24 +107,19 @@
.question_header {
display: flex;
justify-content: space-between;
align-items: center;
}
.marksarea {
text-align: right;
}
#blankspace {
font-size: 2em;
}
/* ----- 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;
......@@ -97,12 +140,13 @@
.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;
#pallete_info {
grid-column-start: 1;
grid-row-start: 1;
}
.pallete_structure {
list-style-type: none;
}
/* ----- QUIZ CONTROLS Start ----- */
......@@ -110,7 +154,8 @@
#toolbar {
grid-column-start: 1;
grid-row-start: 3;
padding: 20px
padding: 20px;
background-color: white;
}
.button_group {
display: flex;
......@@ -179,4 +224,14 @@
border-left: solid 1px white;
}
/* ----- End ----- */
\ No newline at end of file
/* ----- End ----- */
.rubrics {
font-size: 1.2em;
}
.rubrics_wrapper {
margin: 20px;
border-radius: 6px;
padding: 20px;
}
quiz/static/js/quiz_attempt_page.js
View file @ 873350ff
"use strict";
var current_question = 0;
var selected_questions = 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';
var qtotal = document.getElementById('qtotal');
var qselected = document.getElementById('qselected');
qtotal.innerHTML = questions_len;
var pallete_view = false;
function show_nav() {
if(!pallete_view) {
var pallete = document.getElementById('question_palette');
pallete.style.gridTemplateRows = "60px 1fr 140px";
pallete.style.height = "100%";
pallete_view = true;
} else {
var pallete = document.getElementById('question_palette');
pallete.style.gridTemplateRows = "0px 0px 140px";
pallete.style.height = "140px";
pallete_view = false;
}
}
function next_question () {
var previous_question = current_question;
......@@ -37,6 +56,7 @@ function goto_question(x) {
}
function set_option( question_id, option_id ) {
var pallete_q = document.getElementById('pallete_question_'+question_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);
......@@ -44,19 +64,35 @@ function set_option( question_id, option_id ) {
ans.value = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = selected_color;
pallete_q.style.backgroundColor = selected_color;
selected_questions = selected_questions + 1;
qselected.innerHTML = selected_questions;
} else {
if(option_id == ans.value) {
var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
obox.style.backgroundColor = deselected_color;
pallete_q.style.backgroundColor = deselected_color;
ans.value = "NA";
selected_questions = selected_questions - 1;
qselected.innerHTML = selected_questions;
} else {
var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
obox.style.backgroundColor = deselected_color;
pallete_q.style.backgroundColor = deselected_color;
ans.value = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = selected_color;
pallete_q.style.backgroundColor = selected_color;
}
}
}
}
}
\ No newline at end of file
}
function submit_form() {
var main_form = document.getElementById('main_form');
var x = confirm("Are you sure you want to submit?");
if(x) {
main_form.submit();
}
}
quiz/templates/index.html
View file @ 873350ff
......@@ -8,23 +8,30 @@
</head>
<body>
<form method="POST" action="/result/">{% csrf_token %}
<form id="main_form" method="POST" action="/result/">{% csrf_token %}
<!-- <h1>{{questions.quizId}} Question {{ questions.end_index }} of {{count}}</h1> -->
<aside id="question_palette">
<section id="pallete_info">
<ul class="pallete_structure">
<li>Selected <span id="qselected">0</span> of <span id="qtotal">0</span></li>
</ul>
</section>
<ul class="questions_list">
{% for i in questions%}
<li onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
<li id="pallete_question_{{ forloop.counter0 }}" onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
{%endfor%}
</ul>
<section id="toolbar">
<div class="button_group">
<button class="quiz_btn submit" type="button" onclick="submit_form()"><strong>Submit</strong></button>
</div>
<div class="button_group">
<button class="quiz_btn prev_ques" type="button" onclick="prev_question()"><strong>Previous</strong></button>
<span class="separator"></span>
<button id="nav_btn" class="quiz_btn next_ques" type="button" onclick="show_nav()"><strong>Nav</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">
......@@ -32,10 +39,10 @@
<div id="questions_area_wrapper">
{% for i in questions%}
<div class="question">
<div class="question_header">
<p>{{ i.negative }}</p>
<p>Question {{ forloop.counter }} of {{ count }}</p>
<p>{{ i.marks }}</p>
<div class="rubrics_header">
<p>Question <br/>{{ forloop.counter }} of {{ count }}</p>
<p id="blankspace"></p>
<p class="marksarea">Marks: {{ i.marks }}<br/>Negative: -{{ i.negative }}</p>
</div>
<!-- <h1 id ='quizId'>{{i.quizId}}<h1> -->
<h1 id ='questionId' hidden>{{i.questionId}} </h1>
......
quiz/templates/view_submissions.html
View file @ 873350ff
<!DOCTYPE html>
<head>
{% load static %}
<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="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
<link href="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
<style>
.score_area {
margin: auto;
max-width: 800px;
background-color: white;
padding: 40px;
text-align: center;
}
.score {
font-size: 8em;
font-family: 'Fredericka the Great', cursive;
}
.sepa {
font-size: 8em;
position:relative;
top: 20px;
}
.tota {
font-size: 6em;
position:relative;
top: 40px;
}
#questions_area_wrapper {
background-color: white;
padding: 40px;
margin: auto;
max-width: 800px;
}
</style>
</head>
<body>
<section id="ques_area">
<div class="score_area">
<span class="score">{{ score }}</span>
<span class="score sepa">/</span>
<span class="score tota">{{ total }}</span>
</div>
<div id="questions_area_wrapper">
{% for sub in submissions %}
test {{ sub.questionId.question }}
<div class="sadsad">
<h2 class="actual_question">{{forloop.counter}}. {{ sub.questionId.question }}</h2>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{sub.questionId.option1}}</span></span></label>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{sub.questionId.option2}}</span></span></label>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{sub.questionId.option3}}</span></span></label>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{sub.questionId.option4}}</span></span></label>
<br/>
<div class="rubrics_wrapper">
<div class="question_header">
<p class="rubrics">
You selected: {{sub.option}} <br/>
Correct answer: {{sub.questionId.answer}}
</p>
<p id="blankspace"></p>
<p class="marksarea rubrics">Marks: {{ sub.questionId.marks }}<br/>Negative: -{{ sub.questionId.negative }}</p>
</div>
<br/>
<p style="font-size: 1.2em">
{{ sub.questionId.explainations }}
</p>
</div>
</div>
<br/>
<hr/>
{%endfor%}
</div>
</section>
<script>
var correct_color = '#f4fa9c';
var wrong_color = '#ffb174';
function set_subs( question_id, option_id, colorss ) {
if(typeof question_id == "number" && typeof option_id == "number") {
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = colorss;
}
}
{% for sub in submissions %}
set_subs({{forloop.counter0}}, {{sub.option}}, wrong_color);
set_subs({{forloop.counter0}}, {{sub.questionId.answer}}, correct_color);
{%endfor%}
</script>
</body>
</html>
quiz/views.py
View file @ 873350ff
......@@ -10,6 +10,7 @@ from .models import cribs
from . newQuiz import readCSV
from .models import quiz
from django.db.models import Max
from django.shortcuts import redirect
import csv
#for login
from django.contrib.auth.models import User
......@@ -62,7 +63,7 @@ def result(request):
score-=q[0]['negative']
t=submission(questionId=questionInstance, option=request.POST[questionno], studentId=request.user, quizId=quizInstance)
t.save()
return HttpResponse(f"Successfully Submitted. Score:{score}")
return redirect('/view_submission/?q='+str(quizId))
else:
return HttpResponse("You have already submitted this quiz")
......@@ -184,8 +185,15 @@ def view_sub(request):
quizId = int(request.GET.get('q'))
quizInstance = quiz.objects.get(pk=quizId)
subs = submission.objects.filter(quizId=quizInstance, studentId=request.user).select_related().all()
score = 0
total = 0
message = ''
for sub in subs:
print(sub.questionId.question)
return render(request,'view_submissions.html', { 'submissions' : subs })
if sub.option == sub.questionId.answer:
score = score + sub.questionId.marks
else:
score = score - sub.questionId.negative
total = total + sub.questionId.marks
return render(request,'view_submissions.html', { 'submissions' : subs , 'score': score, 'total': total })
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