Fixed options issue on quiz screen

This commit is contained in:
user86 2020-10-11 11:31:58 +05:30
parent 7d91ff2c49
commit 8e51d930f9
4 changed files with 137 additions and 146 deletions

3
app.py
View File

@ -24,6 +24,7 @@ def quiz():
""" Handle upload and conversion of file + other stuff """ """ Handle upload and conversion of file + other stuff """
UPLOAD_STATUS = False UPLOAD_STATUS = False
questions = dict()
# Make directory to store uploaded files, if not exists # Make directory to store uploaded files, if not exists
if not os.path.isdir('./pdf'): if not os.path.isdir('./pdf'):
@ -36,13 +37,13 @@ def quiz():
file_path = os.path.join( file_path = os.path.join(
app.config['UPLOAD_FOLDER'], secure_filename(uploaded_file.filename)) app.config['UPLOAD_FOLDER'], secure_filename(uploaded_file.filename))
file_exten = uploaded_file.filename.rsplit('.', 1)[1].lower() file_exten = uploaded_file.filename.rsplit('.', 1)[1].lower()
questions = ''
# Save uploaded file # Save uploaded file
uploaded_file.save(file_path) uploaded_file.save(file_path)
# Get contents of file # Get contents of file
uploaded_content = pdf2text(file_path, file_exten) uploaded_content = pdf2text(file_path, file_exten)
questions = txt2questions(uploaded_content) questions = txt2questions(uploaded_content)
print(questions)
# File upload + convert success # File upload + convert success
if uploaded_content is not None: if uploaded_content is not None:

View File

@ -1,102 +1,81 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="{{ url_for('static',filename='css/style.css') }}"
/>
<script src="https://kit.fontawesome.com/22be60108b.js" crossorigin="anonymous"></script>
<title>MLH Quizzet</title>
</head>
<body> <head>
<nav <meta charset="UTF-8" />
class="navbar is-dark is-fixed-top has-text-centered" <meta name="viewport" content="width=device-width, initial-scale=1.0" />
role="navigation" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
aria-label="main navigation" <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css') }}" />
> <script src="https://kit.fontawesome.com/22be60108b.js" crossorigin="anonymous"></script>
<div class="navbar-brand"><img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32" width="64" style="margin: 10px"> <title>MLH Quizzet</title>
<a class="navbar-item has-text-centered" href="#" </head>
><strong class="is-size-3 has-text-centered">MLH Quizzet</strong></a
> <body>
<div class="navbar-burger" data-target="navMenu"> <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
<span></span> <div class="navbar-brand"><img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32"
<span></span> width="64" style="margin: 10px">
<span></span> <a class="navbar-item has-text-centered" href="{{ url_for('index') }}"><strong
</div> class="is-size-3 has-text-centered">MLH Quizzet</strong></a>
<div class="navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div> </div>
</nav> </div>
<main role="main"> </nav>
<div class="card has-text-centered"> <main role="main">
<img <div class="card has-text-centered">
src="https://cdn4.iconfinder.com/data/icons/files-and-folders-thinline-icons-set/144/File_PDF-512.png" <img src="https://cdn4.iconfinder.com/data/icons/files-and-folders-thinline-icons-set/144/File_PDF-512.png"
alt="upload" alt="upload" />
/> <form action="http://localhost:5000/quiz" method="POST" enctype="multipart/form-data">
<form <div id="file-js-example" class="file has-name is-fullwidth">
action="http://localhost:5000/quiz" <label class="file-label">
method="POST" <input class="file-input" type="file" name="file" accept=".txt, application/pdf" />
enctype="multipart/form-data" <span class="file-cta">
> <span class="file-icon">
<div id="file-js-example" class="file has-name is-fullwidth"> <i class="fas fa-upload"></i>
<label class="file-label">
<input
class="file-input"
type="file"
name="file"
accept=".txt, application/pdf"
/>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label"> Choose a file… </span>
</span> </span>
<span class="file-name"> No file uploaded </span> <span class="file-label"> Choose a file… </span>
</label> </span>
</div> <span class="file-name"> No file uploaded </span>
</label>
</div>
<script> <script>
const fileInput = document.querySelector( const fileInput = document.querySelector(
"#file-js-example input[type=file]" "#file-js-example input[type=file]"
); );
fileInput.onchange = () => { fileInput.onchange = () => {
if (fileInput.files.length > 0) { if (fileInput.files.length > 0) {
const fileName = document.querySelector( const fileName = document.querySelector(
"#file-js-example .file-name" "#file-js-example .file-name"
); );
fileName.textContent = fileInput.files[0].name; fileName.textContent = fileInput.files[0].name;
} }
}; };
</script> </script>
<button class="button has-text-centered is-large is-fullwidth is-dark"> <button class="button has-text-centered is-large is-fullwidth is-dark">
<span class="submit has-text-centered" type="submit" <span class="submit has-text-centered" type="submit" name="upload file">Submit</span>
name="upload file">Submit</span> <span class="loading"><i class="fa fa-refresh"></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span> <span class="check"><i class="fa fa-check"></i></span>
<span class="check"><i class="fa fa-check"></i></span> </button>
</button> </form>
</form> </div>
</div> </main>
</main> <script>const button = document.querySelector('.button');
<script>const button = document.querySelector('.button'); const submit = document.querySelector('.submit');
const submit = document.querySelector('.submit');
function toggleClass() { function toggleClass() {
this.classList.toggle('active'); this.classList.toggle('active');
} }
function addClass() { function addClass() {
this.classList.add('finished'); this.classList.add('finished');
} }
button.addEventListener('click', toggleClass);
button.addEventListener('transitionend', toggleClass);
button.addEventListener('transitionend', addClass);</script>
</body>
button.addEventListener('click', toggleClass);
button.addEventListener('transitionend', toggleClass);
button.addEventListener('transitionend', addClass);</script>
</body>
</html> </html>

View File

@ -1,28 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/quiz.css') }}" /> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/quiz.css') }}" />
<title>MLH Quizzet</title> <title>MLH Quizzet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type='text/javascript'></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type='text/javascript'></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$('label').click(function () { $('label').click(function () {
$('label').removeClass('worngans'); $('label').removeClass('worngans');
$(this).addClass('worngans'); $(this).addClass('worngans');
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation"> <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
<div class="navbar-brand"><img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32" <div class="navbar-brand"><img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32"
width="64" style="margin: 10px"> width="64" style="margin: 10px">
<a class="navbar-item has-text-centered" href="#"><strong class="is-size-3 has-text-centered">MLH <a class="navbar-item has-text-centered" href="{{ url_for('index') }}"><strong
class="is-size-3 has-text-centered">MLH
Quizzet</strong></a> Quizzet</strong></a>
<div class="navbar-burger" data-target="navMenu"> <div class="navbar-burger" data-target="navMenu">
<span></span> <span></span>
@ -31,35 +32,38 @@
</div> </div>
</div> </div>
</nav> </nav>
{% if uploaded == true %} {% if uploaded == true %}
{% for i in range(size) %} {% for i in range(size) %}
<section class="section-1" id="section-1"> <section class="section-1" id="section-1">
<main> <main>
<div class="scp-quizzes-main"> <div class="scp-quizzes-main">
<div class="scp-quizzes-data"> <div class="scp-quizzes-data">
<h3>{{ i+1 }}. {{ questions[i+1]['question'] }}</h3> <h3>{{ i+1 }}. {{ questions[i+1]['question'] }}</h3>
<br /> <br />
<form> <form>
{% for j in questions[i+1]['options'] %} {% for op in questions[i+1]['options'] %}
{% if questions[i+1]['options'][j+1] == questions[i+1]['answer'] %} {% if op == questions[i+1]['answer'] %}
<input type="radio" id="{{ questions[i+1]['answer'] }}" name="question{{ i+1 }}"> <input type="radio" id="{{ questions[i+1]['answer'] }}" name="question{{ i+1 }}">
<label for="{{ questions[i+1]['answer'] }}">{{ j }}. {{ questions[i+1]['options'][j+1] }}</label><br /> <label for="{{ questions[i+1]['answer'] }}">
{% else %} {{ op }}</label><br />
<input type="radio" name="question{{ i+1 }}"> {% else %}
<label>{{ j }}. {{ questions[i+1]['options'][j+1] }}</label><br /> <input type="radio" name="question{{ i+1 }}">
{% endif %} <label> {{ op }}</label><br />
{% endfor %} {% endif %}
</div> {% endfor %}
</div> </div>
</form> </div>
</main> </form>
</main>
</section> </section>
{% endfor %} {% endfor %}
{% else %} {% else %}
<h1>Could not upload file</h1> <section class="section-1" id="section-1">
{% endif %} <h1>Could not upload file</h1>
</section>
{% endif %}
</body> </body>
</html> </html>

View File

@ -2,7 +2,7 @@ from PyPDF2 import PdfFileReader
from question_generation_main import QuestionGeneration from question_generation_main import QuestionGeneration
def pdf2text(file_path, file_exten) -> str: def pdf2text(file_path: str, file_exten: str) -> str:
""" Converts a given file to text content """ """ Converts a given file to text content """
_content = '' _content = ''
@ -11,9 +11,9 @@ def pdf2text(file_path, file_exten) -> str:
if file_exten == 'pdf': if file_exten == 'pdf':
with open(file_path, 'rb') as pdf_file: with open(file_path, 'rb') as pdf_file:
_pdf_reader = PdfFileReader(pdf_file) _pdf_reader = PdfFileReader(pdf_file)
# for p in range(_pdf_reader.numPages): for p in range(_pdf_reader.numPages):
# _content += _pdf_reader.getPage(p).extractText() _content += _pdf_reader.getPage(p).extractText()
_content = _pdf_reader.getPage(0).extractText() # _content = _pdf_reader.getPage(0).extractText()
print('PDF operation done!') print('PDF operation done!')
elif file_exten == 'txt': elif file_exten == 'txt':
@ -24,8 +24,15 @@ def pdf2text(file_path, file_exten) -> str:
return _content return _content
def txt2questions(doc, n=1, o=4): def txt2questions(doc: str, n=1, o=4) -> dict:
""" Get all questions and options """ """ Get all questions and options """
qGen = QuestionGeneration(n, o) qGen = QuestionGeneration(n, o)
return qGen.generate_questions_dict(doc) q = qGen.generate_questions_dict(doc)
for i in range(len(q)):
temp = []
for j in range(len(q[i+1]['options'])):
temp.append(q[i+1]['options'][j+1])
# print(temp)
q[i+1]['options'] = temp
return q