Skip to content

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

Adding manual quiz creation UI

parent 9f92e584
Hide whitespace changes
Inline Side-by-side
Showing with 345 additions and 20 deletions
QuizSystem/urls.py
View file @ c7fbda92
......@@ -34,6 +34,7 @@ urlpatterns = [
path('result/',a.result,name="result"),
url(r'^upload/',TemplateView.as_view(template_name = 'upload.html')),
url(r'^instructor/',TemplateView.as_view(template_name = 'instructor.html')),
path('uploaded/',a.upload_file,name="uploaded"), path('sign_up/',a.sign_up,name="sign-up"), path('accounts/',include('django.contrib.auth.urls'))
path('uploaded/',a.upload_file,name="uploaded"), path('sign_up/',a.sign_up,name="sign-up"), path('accounts/',include('django.contrib.auth.urls')),
path('create_quiz/',a.create_quiz)
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
quiz/static/css/quiz_attempt_page.css
View file @ c7fbda92
......@@ -7,7 +7,7 @@
background: #F1F3F4;
}
@media all and (min-width: 800px) {
form {
#main_form {
display: grid;
grid-template-columns: 1fr 300px;
}
......@@ -31,7 +31,7 @@
}
@media all and (max-width: 800px) {
form {
#main_form {
display: grid;
grid-template-rows: 1fr 140px;
}
......@@ -93,7 +93,7 @@
display: inline-block;
line-height: 40px;
text-align: center;
margin-right: 20px;
margin-right: 10px;
border-radius: 100%;
flex-shrink: 0;
}
......
quiz/static/css/quiz_create_page.css 0 → 100644
View file @ c7fbda92
#quiz_create_form {
max-width: 800px;
margin: auto;
}
#quiz_controls {
border: solid 1px #EEE;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-top: 20px;
margin-bottom: 20px;
border-radius: 1em;
background: linear-gradient(to right, rgb(73, 85, 114), rgb(66, 134, 244));
}
#quiz_controls h3 {
color: white;
}
#quiz_controls p {
color: white;
}
#quiz_controls a {
color: white;
}
a.three:link {color: #ffffff;}
a.three:visited {color: #ffffff;}
a.three:hover {background: #8d8d8d;}
#quiz_name {
width: 100%;
border-radius: 4px;
outline: none;
height: 50px;
font-size: 1.4em;
border: none;
background-color: #eee;
font-weight: bold;
}
.question_card {
border: solid 1px #EEE;
padding: 40px;
margin-bottom: 20px;
background-color:white;
border-radius: 1em;
}
.question_card > h3 {
color: black;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 0px;
margin-top: 30px;
}
.input_area {
width: 100%;
outline: none;
height: 80px;
font-size: 1.8em;
border: none;
background-color: #eee;
font-weight: bold;
}
.ques_txtara {
width: 100%;
}
.ques_txtara[contenteditable]:empty::before {
content: "Enter option here";
color: gray;
}
#add_question {
width: 100%;
height: 60px;
margin-bottom: 20px;
background-color: #00e0ff;
color: black;
font-size: 1.5em;
border-radius: 1em;
border: solid 1px #00e0ff;
}
#add_question:hover {
background-color: #2ce6ff;
}
#create_submit {
width: 100%;
height: 60px;
margin-bottom: 300px;
color: black;
font-size: 1.5em;
border-radius: 1em;
background-color: #eac100;
border: none;
}
.marksip {
width: 100px;
height: 40px;
line-height: 40px;
font-size: 1.2em;
text-align: center;
outline:none;
margin-left: 20px;
}
.del_question {
background-color: #ff5959;
border: solid 1px #ff5959;
color: white;
height: 40px;
font-size: 1.1em;
border-radius: 10px;
padding-left: 15px;
padding-right: 15px;
}
.del_question:hover {
background-color: #ff2323;
}
.algnrght {
width: 100%;
text-align: right;
}
.algncntr {
text-align: center;
}
.ans_select {
width: 50px;
height: 50px;
border-radius: 50%;
border: solid 1px black;
font-size: 1.1em;
font-weight: bold;
background-color: white;
outline: none;
}
.ans_select:hover {
background-color: #f4fa9c;
}
.quiz_timing_controls {
display: flex;
flex-direction: column;
}
@media all and (min-width: 800px) {
.quiz_timing_controls {
display: flex;
flex-direction: row;
}
}
.quiz_timing_controls > div {
flex-grow: 1;
padding: 20px;
}
.quiz_timing_controls > div > input {
width: 100%;
outline: none;
height: 50px;
font-size: 1.4em;
border: none;
background-color: #eee;
border-radius: 4px;
text-align: center;
}
\ No newline at end of file
quiz/static/js/quiz_create_page.js 0 → 100644
View file @ c7fbda92
"use strict";
var next_qnumber = 0;
var selected_color = '#f4fa9c';
var deselected_color = '#ffffff';
function del_que(num) {
var c = confirm("Are you sure you want to delete this question?");
if(c) {
var qbunch = document.getElementById('qbunch');
var q = document.getElementById('question_'+num);
qbunch.removeChild(q);
}
}
function fillme(obj) {
if(obj.value!="") {
obj.style.backgroundColor = "white";
} else {
obj.style.backgroundColor = "#fcb1b1";
}
}
function get_template() {
var question_template = `<div id="question_`+next_qnumber+`" class="question_card">
<div class="algnrght">
<button type="button" id="del_question" class="del_question" onclick="del_que(`+next_qnumber+`)">Delete this question</button>
</div>
<h3>Question:</h3>
<textarea class="input_area" onchange="fillme(this)"></textarea>
<h3>Options:</h3>
<label class="op_box" id="box0"><span id="lbl_`+next_qnumber+`_0"><strong>A</strong><span role="textbox" id="span_`+next_qnumber+`_option0" contenteditable class="ques_txtara"></span></span></label>
<label class="op_box" id="box1"><span id="lbl_`+next_qnumber+`_1"><strong>B</strong><span role="textbox" id="span_`+next_qnumber+`_option1" contenteditable class="ques_txtara"></span></span></label>
<label class="op_box" id="box2"><span id="lbl_`+next_qnumber+`_2"><strong>C</strong><span role="textbox" id="span_`+next_qnumber+`_option2" contenteditable class="ques_txtara"></span></span></label>
<label class="op_box" id="box3"><span id="lbl_`+next_qnumber+`_3"><strong>D</strong><span role="textbox" id="span_`+next_qnumber+`_option3" contenteditable class="ques_txtara"></span></span></label>
<input type="hidden" id="input_`+next_qnumber+`_option0" name="question_`+next_qnumber+`_option0" value="">
<input type="hidden" id="input_`+next_qnumber+`_option1" name="question_`+next_qnumber+`_option1" value="">
<input type="hidden" id="input_`+next_qnumber+`_option2" name="question_`+next_qnumber+`_option2" value="">
<input type="hidden" id="input_`+next_qnumber+`_option3" name="question_`+next_qnumber+`_option3" value="">
<div class="algncntr">
<h3>Select correct answer:</h3>
<div>
<button type="button" onclick="set_option(`+next_qnumber+`,0)" class="ans_select">A</button>&nbsp;&nbsp;
<button type="button" onclick="set_option(`+next_qnumber+`,1)" class="ans_select">B</button>&nbsp;&nbsp;
<button type="button" onclick="set_option(`+next_qnumber+`,2)" class="ans_select">C</button>&nbsp;&nbsp;
<button type="button" onclick="set_option(`+next_qnumber+`,3)" class="ans_select">D</button>
</div>
</div>
<h3>Marks: </h3>
<input class="marksip" type="text" name="question_`+next_qnumber+`_marks" value="1">
<h3>Negative Marks (No need to enter -ve sign):</h3>
<input class="marksip" type="text" name="question_`+next_qnumber+`_negative" value="0">
<input type="hidden" name="question_`+next_qnumber+`_answer" id="q`+next_qnumber+`" value="NA">
<h3>Explanation (Optional):</h3>
<textarea class="input_area" onchange="fillme(this)" name="question_`+next_qnumber+`_explanation"></textarea>
</div>`;
next_qnumber = next_qnumber + 1;
return question_template;
}
function add_que() {
var content = get_template();
$('#qbunch').append(content);
}
function set_option( question_id, option_id ) {
if(typeof question_id == "number" && typeof option_id == "number") {
if(question_id>=0 && question_id<next_qnumber && option_id>=0 && option_id<4) {
var ans = document.getElementById('q'+question_id);
if (ans.value == "NA") {
ans.value = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = selected_color;
} else {
if(option_id == ans.value) {
var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
obox.style.backgroundColor = deselected_color;
ans.value = "NA";
} else {
var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
obox.style.backgroundColor = deselected_color;
ans.value = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = selected_color;
}
}
}
}
}
function submit_form() {
var x = document.getElementsByClassName("question_card");
for(var i=0; i<x.length; i++) {
var idss = x.item(i).id.substring(9);
for(var j=0; j<4; j++) {
var t = document.getElementById("span_"+idss+"_option"+j).innerText;
var ipdd = document.getElementById("input_"+idss+"_option"+j);
ipdd.value = t;
console.log(t);
}
}
document.getElementById("quiz_create_form").submit();
}
\ No newline at end of file
quiz/templates/quiz_create.html 0 → 100644
View file @ c7fbda92
<!DOCTYPE html>
<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="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
<link href="{% static 'css/quiz_create_page.css' %}" rel="stylesheet">
<script src="{% static 'js/quiz_create_page.js' %}"></script>
</head>
<body onload="add_que()">
<section>
<form action="add_quiz" id="quiz_create_form" enctype = "multipart/form-data" method = "POST">{% csrf_token %}
<div id="quiz_controls">
<p><a href="../upload">Click here to automatically add all questions by uploading csv</a></p>
<div style="padding: 20px">
<h3>Quiz Name:</h3>
<input type="text" id="quiz_name" name="quiz_name"><br/>
</div>
<div class="quiz_timing_controls">
<div>
<label for="date"><h3>Quiz Date</h3></label>
<input type="date" id="date" name="date">
</div>
<div>
<label for="startTime"><h3>Start Time</h3></label>
<input type="time" id="startTime" name="startTime">
</div>
<div>
<label for="length"><h3>length (in minutes)</h3></label>
<input type="number" id="length" name="length">
</div>
</div>
</div>
<div id="qbunch">
</div>
<button type="button" id="add_question" onclick="add_que()">+ Add Question</button>
<button type="button" id="create_submit" onclick="submit_form()">Submit</button>
</form>
</section>
</body>
</html>
\ No newline at end of file
quiz/templates/student.html
View file @ c7fbda92
......@@ -7,6 +7,8 @@
<body>
<center><h1><a>Welcome Student{{user}}</a></h1>
<br><h1><a href="/quiz/">Start Quiz</a></h1>
<br><h1><a href="/submissions/">View Previous Quizzes</a></h1></center>
<br><h1><a href="/submissions/">View Previous Quizzes</a></h1>
<br><h1><a href="/create_quiz/">Create New Quiz</a></h1>
<br><h1><a href="/instructor?quiz_id=123">Instructor Graphs</a></h1></center>
</body>
</html>
quiz/templates/upload.html
View file @ c7fbda92
<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="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
<link href="{% static 'css/quiz_create_page.css' %}" rel="stylesheet">
<script src="{% static 'js/quiz_create_page.js' %}"></script>
</head>
<body>
<form name = "form" enctype = "multipart/form-data"
action = "{% url "uploaded" %}" method = "POST" >{% csrf_token %}
action = "{% url "uploaded" %}" method = "POST" id="quiz_create_form">{% csrf_token %}
<label for="date">Quiz Date</label><br>
<input type="date" id="date" name="date"><br>
<label for="startTime">Start Time</label><br>
<input type="time" id="startTime" name="startTime"><br>
<label for="length">length</label><br>
<input type="number" id="length" name="length"><br>
<label for="quizCode">Quiz Code</label><br>
<input type="text" id="quizCode" name="quizCode"><br>
<label for="quizInfo">quiz Info</label><br>
<input type="textarea" id="quizInfo" name="quizInfo">
<input type="hidden" id="quizInstructor" name="quizInstructor" value ="Instructor"><!--set instructor id here-->
<div id="quiz_controls">
<p><a href="../create_quiz">Click here to manually add all questions</a></p>
<div style="padding: 20px">
<h3>Quiz Name:</h3>
<input type="text" id="quiz_name" name="quiz_name"><br/>
</div>
<div class="quiz_timing_controls">
<div>
<label for="date"><h3>Quiz Date</h3></label>
<input type="date" id="date" name="date">
</div>
<div>
<label for="startTime"><h3>Start Time</h3></label>
<input type="time" id="startTime" name="startTime">
</div>
<div>
<label for="length"><h3>length (in minutes)</h3></label>
<input type="number" id="length" name="length">
</div>
</div>
</div>
<br>
<div style = "max-width:470px;">
......@@ -43,7 +60,7 @@
</form>
<br><h1><a href="/instructor?quiz_id=123">Instructor Graphs</a></h1>
<br><h1></h1>
</body>
</html>
\ No newline at end of file
quiz/views.py
View file @ c7fbda92
......@@ -161,7 +161,8 @@ def handle_uploaded_file(f,q1):
q=Questions(question=row[0],option1=row[1],option2=row[2],option3=row[3],option4=row[4],answer=row[5],type=row[6],marks=int(row[7]),negative=float(row[8]),explainations=row[9],quizCode=row[10],quizId=q1)#hardcoded quizid
q.save()
def create_quiz(request):
return render(request, 'quiz_create.html')
#login functionality
......
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