├── .gitignore
├── README.md
├── assets
├── Screenshot (21).png
├── Screenshot (22).png
├── Screenshot (24).png
├── Screenshot (25).png
├── Screenshot (26).png
├── Screenshot (27).png
├── Screenshot (28).png
├── Screenshot (29).png
├── Screenshot (30).png
├── Screenshot (31).png
└── qgen-final.gif
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── App.js
├── app
└── store.js
├── components
├── Auth
│ ├── Auth.css
│ ├── Auth.js
│ └── functions.js
├── CustomModal
│ ├── CustomModal.css
│ └── CustomModal.js
├── Main
│ ├── Main.css
│ └── Main.js
└── Quiz
│ ├── Quiz.css
│ └── Quiz.js
├── const.js
├── features
└── counter
│ ├── Counter.js
│ ├── Counter.module.css
│ └── counterSlice.js
├── index.css
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Qgen
2 |
3 | [](https://www.djangoproject.com/)
4 |
5 | [](https://code.visualstudio.com/ "Visual Studio Code")
6 |
7 |
8 | About
9 |
10 | Many times, we read our notes again and again, without ever getting any information inside our head. Havent you noticed that whenver there is a quiz, or whenever you take a test, you learn the material better? Hence, we have created an app, which used Machine Learning and Natural Language Processing to generate flashcards, quizzes, and summary from your notes! Moreover, we have three types of questions: MCQ, Fill in the blanks, and True or False questions to test you on your notes.
11 | You can also upload handwritten notes to generate quizzes so that you can directly upload a photo and generate a quiz.
12 |
13 |
14 | -----------------------------------
15 |
16 | ### Demo
17 |
18 |
19 |
21 |
22 | -----------------------------------
23 |
24 | ### 🚀 Features
25 |
26 |
27 |
28 | Add/Edit Notes📕
29 | Based on your notes generate
30 |
31 | Quiz
32 |
33 | MCQs 📝
34 | True/False ✔️ ❎
35 | Fill in the blanks ❓
36 |
37 | Summary ✒️
38 | Flashcards 🔖
39 | Q/A from images 🚞
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | -----------------------------------
48 | ### 💻 Tech stack
49 | `Backend` : Django React Redux App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Deep-Matrix/qgen-frontend/3b37933b5c0c72f30e1498b19e861d90003388f1/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Deep-Matrix/qgen-frontend/3b37933b5c0c72f30e1498b19e861d90003388f1/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-float infinite 3s ease-in-out;
13 | }
14 | }
15 |
16 | .App-header {
17 | min-height: 100vh;
18 | display: flex;
19 | flex-direction: column;
20 | align-items: center;
21 | justify-content: center;
22 | font-size: calc(10px + 2vmin);
23 | }
24 |
25 | .App-link {
26 | color: rgb(112, 76, 182);
27 | }
28 |
29 | @keyframes App-logo-float {
30 | 0% {
31 | transform: translateY(0);
32 | }
33 | 50% {
34 | transform: translateY(10px)
35 | }
36 | 100% {
37 | transform: translateY(0px)
38 | }
39 | }
40 |
41 |
42 |
43 | :root {
44 | --color-primary: #342d96;
45 | /* --color-primary-light: #FF3366;
46 | --color-primary-dark: #BA265D;
47 |
48 | --color-grey-light-1: #faf9f9;
49 | --color-grey-light-2: #f4f2f2;
50 | --color-grey-light-3: #f0eeee;
51 | --color-grey-light-4: #ccc;
52 |
53 | --color-grey-dark-1: #333;
54 | --color-grey-dark-2: #777;
55 | --color-grey-dark-3: #999; */
56 |
57 | --shadow-dark: 0 2rem 6rem rgba(0,0,0,0.3);
58 | }
59 |
60 | body {
61 | box-sizing: border-box;
62 |
63 | }
64 |
65 | *{
66 | padding: 0px;
67 | margin: 0px;
68 | }
69 |
70 | .header-primary{
71 | font-size: 30px;
72 | font-weight: 800;
73 | }
74 |
75 | .header-secondary{
76 | font-size: 20px;
77 | font-weight: 600;
78 | }
79 |
80 |
81 | html{
82 | box-sizing: border-box;
83 | }
84 |
85 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./App.css";
3 | import Main from "./components/Main/Main";
4 | import {
5 | BrowserRouter as Router,
6 | Switch,
7 | Route,
8 | Link
9 | } from "react-router-dom";
10 | import Quiz from "./components/Quiz/Quiz";
11 | import Auth from "./components/Auth/Auth";
12 | import CustomModal from "./components/CustomModal/CustomModal";
13 |
14 | function App() {
15 | return (
16 |
17 |
18 |
19 |
20 |
22 |
23 |
25 |
26 |
28 |
29 |
31 |
32 |
33 |
22 | {'Copyright © '}
23 |
29 | );
30 | }
31 |
32 | const useStyles = makeStyles((theme) => ({
33 | root: {
34 | height: '100vh',
35 | },
36 | image: {
37 | backgroundImage: 'url(https://source.unsplash.com/random)',
38 | backgroundRepeat: 'no-repeat',
39 | backgroundColor:
40 | theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
41 | backgroundSize: 'cover',
42 | backgroundPosition: 'center',
43 | },
44 | paper: {
45 | margin: theme.spacing(8, 4),
46 | display: 'flex',
47 | flexDirection: 'column',
48 | alignItems: 'center',
49 | },
50 | avatar: {
51 | margin: theme.spacing(1),
52 | },
53 | avatar__login: {
54 | backgroundColor: deepPurple[500],
55 | },
56 | avatar__register: {
57 | backgroundColor: deepOrange[500],
58 | },
59 | form: {
60 | width: '100%', // Fix IE 11 issue.
61 | marginTop: theme.spacing(1),
62 | },
63 | submit: {
64 | margin: theme.spacing(3, 0, 2),
65 | },
66 | orange: {
67 | color: theme.palette.getContrastText(deepOrange[500]),
68 | backgroundColor: deepOrange[500],
69 | },
70 | purple: {
71 | color: theme.palette.getContrastText(deepPurple[500]),
72 | backgroundColor: deepPurple[500],
73 | },
74 | }));
75 |
76 | export default function Auth() {
77 | const classes = useStyles();
78 |
79 | const [isLogin, setIsLogin] = useState(true)
80 | const [email, setEmail] = useState('')
81 | const [password, setPassword] = useState('')
82 | const [redirect, setRedirect] = useState(false)
83 |
84 | const handleSubmit = async (e) => {
85 | e.preventDefault()
86 | console.log(email)
87 | console.log(password)
88 | let data={
89 | email,
90 | password
91 | }
92 | console.log('in register')
93 | let response= null
94 | if(isLogin){
95 | response = await loginApi(data)
96 | const token = response.data.token || 'NA'
97 | console.log(token)
98 | localStorage.setItem('token',token)
99 | if(token){
100 | setRedirect(true)
101 | }
102 | }
103 | else{
104 | response = await registerApi(data)
105 | }
106 |
107 | // response = await secureRequest()
108 | // console.log(response)
109 | // alert(JSON.stringify(response))
110 | }
111 |
112 | if(redirect){
113 | return
118 |
121 |
122 |
123 |
125 |
126 | {isLogin ? "Sign In" : "Sign up"}
127 |
128 |
182 |
184 |
185 | );
186 | }
--------------------------------------------------------------------------------
/src/components/Auth/functions.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { CLIENT_URL } from '../../const'
3 |
4 | export const registerApi = async(data)=> {
5 | const result = await axios.post(`${CLIENT_URL}/api/register`,{
6 | username : data.email,
7 | email_id : data.email,
8 | password : data.password,
9 | })
10 |
11 | return result
12 | }
13 |
14 | export const loginApi = async(data)=> {
15 | const result = await axios.post(`${CLIENT_URL}/api/login`,{
16 | email_id : data.email,
17 | password : data.password,
18 | })
19 | // JSON.stringify, JSON.parse
20 | localStorage.setItem('user', JSON.stringify(result.data.user))
21 | localStorage.setItem('token', result.data.token)
22 | return result
23 | }
24 |
25 | export const secureRequest = async (data) => {
26 | const sendData = {
27 | note_title : 'note_title by rugzzz',
28 | user_id : 3
29 | }
30 | const headers = {
31 | headers:{
32 | 'Authorization':''+localStorage.token,
33 | // 'token':''+localStorage.token,
34 | // 'Content-Type': 'application/x-www-form-urlencoded'
35 | }
36 | }
37 | const result= await axios.post(`${CLIENT_URL}/api/put_note`,sendData,headers)
38 | return result
39 | }
--------------------------------------------------------------------------------
/src/components/CustomModal/CustomModal.css:
--------------------------------------------------------------------------------
1 | .cusmodal{
2 | height: 100vh;
3 | width: 100%;
4 | display: flex;
5 | background-color: rgba(0,0,0, .8);
6 | justify-content: center;
7 | align-items: center;
8 | z-index: 9999;
9 | /* opacity: 0; */
10 | /* visibility: hidden; */
11 | transition: all .3s;
12 | box-sizing: border-box;
13 | }
14 |
15 | .cusmodal__main{
16 | width: 80%;
17 | /* height: 70vh; */
18 | /* background-color: red; */
19 | padding: 30px;
20 | display: flex;
21 | flex-wrap: wrap;
22 | }
23 |
24 | .cusmodal__left{
25 | flex: .35;
26 | background-color: var(--color-primary);
27 | color: white;
28 | display: flex;
29 | padding: 20px;
30 | justify-content: center;
31 | flex-direction: column;
32 | }
33 |
34 | .cusmodal__right{
35 | flex: .65;
36 | height: inherit;
37 | overflow-y: auto;
38 | padding: 0 20px;
39 | background-color: white;
40 | position: relative;
41 | }
42 |
43 | .heading__primary{
44 | font-size: 48px;
45 | font-weight: 800;
46 | }
47 |
48 | .heading__secondary{
49 | margin-top: 10px;
50 | font-size: 16px;
51 | font-weight: 500;
52 | }
53 |
54 | .cusmodal__form{
55 | margin: 70px 30px;
56 | }
57 |
58 | .cusmodal__form small{
59 | font-weight: 900;
60 | color: darkgray;
61 | }
62 |
63 | .cusmodal__slider{
64 | height: 150px;
65 | display: flex;
66 | align-items: center;
67 | }
68 |
69 | .cusmodal__button-container{
70 | display: flex;
71 | flex-wrap: wrap;
72 | }
73 |
74 | .cusmodal__button-container__button{
75 | display: flex;
76 | justify-content: center;
77 | align-items: center;
78 | text-align: center;
79 | padding: 5px 10px;
80 | margin: 1rem 1rem 0 0;
81 | height: 2.5rem;
82 | width: 8rem;
83 | border-radius: 25px;
84 | color: white;
85 | font-weight: 700;
86 | cursor: pointer;
87 | transition: .36s ease;
88 | border: none;
89 | outline: none;
90 | }
91 |
92 | .cusmodal__button-container__button:hover{
93 | transform: scale(1.05);
94 | }
95 |
96 | .cusmodal__submit{
97 | display: flex;
98 | justify-content: center;
99 | }
--------------------------------------------------------------------------------
/src/components/CustomModal/CustomModal.js:
--------------------------------------------------------------------------------
1 | import { Grid, Paper, Slider } from "@material-ui/core";
2 | import CancelIcon from '@material-ui/icons/Cancel';
3 | import React, { useState } from "react";
4 | import { Link } from "react-router-dom";
5 | import "./CustomModal.css";
6 |
7 | function CustomModal(props) {
8 |
9 | const [noOfQuestions, setNoOfQuestions] = useState(5)
10 | const [fib, setFib] = useState(false)
11 | const [mcq, setMcq] = useState(false)
12 | const [tf, setTf] = useState(false)
13 |
14 | function submitQuizForm(){
15 | props.submitQuizForm(noOfQuestions,fib,mcq,tf)
16 | props.setOpenQuizForm(false)
17 | }
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
25 |
Quiz Settings
26 |
Alright let's jump into the settings for how your quiz will be.
27 |
28 |
29 |
30 | props.setOpenQuizForm(false)} fontSize="large"/>
31 |
32 |
33 |
Quiz length
34 |
Choose how long your quiz will be. You can always take another quiz after this one!
35 |
36 | valuetext}
39 | aria-labelledby="discrete-slider"
40 | valueLabelDisplay="on"
41 | step={1}
42 | marks
43 | min={1}
44 | max={99}
45 | onChange={(e,data) => setNoOfQuestions(data)}
46 | />
47 |
48 |
49 |
Quiz type
50 |
Unselect the question types you do not want on your quiz. Scroll to view more
51 |
52 | setMcq(!mcq)}
54 | className="cusmodal__button-container__button"
55 | style={{backgroundColor: "mediumturquoise"}}>Multiple Choice
56 | setFib(!fib)}
58 | className="cusmodal__button-container__button"
59 | style={{backgroundColor:"burlywood"}}>Fill In Blanks
60 | setTf(!tf)}
62 | className="cusmodal__button-container__button"
63 | style={{backgroundColor: "#f18888"}}>True/False
64 | {/* Multiple Choice */}
65 | {/* Multiple Choice */}
66 |
67 |
68 |
69 | Quiz Me
74 |
75 |
76 |
77 |
78 |
322 |
323 |
324 |
325 |
326 |
328 |
329 | Qgen
330 |
331 |
332 |
336 |
337 |
338 |
339 |
340 | {/*
349 |
350 |
352 |
353 | )
354 | }}
355 | /> */}
356 |
357 |
358 |
359 |
363 | {notes.length} notes
364 |
365 |
366 |
367 |
368 | {/* List */}
369 |
370 |
371 | {notes.map(data => {
372 | return
{
374 | setSelectedNote(data)
375 | setVal(data.content)
376 | settitleValue(data.note_title)
377 | }}
378 | style={{
379 | position:"relative",
380 | backgroundColor:selectedNote && selectedNote.id == data.id ? null : null
381 | }}
382 | >
383 |
384 |
385 |
{data.note_title}
386 |
387 | {data.content}
388 |
389 |
390 |
391 |
392 |
393 | })}
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
406 |
407 |
419 |
420 |
421 |
422 |
424 |
425 |
Flashcards
426 |
The perfect flashes for your last minute revision
427 |
428 |
429 |
430 | {cards.map(data => {
431 | return
432 |
433 |
434 | { data.word }
435 | Meaning
437 | { JSON.stringify(data.meaning) }
438 | Synonymns
440 | { JSON.stringify(data.synonyms) }
441 | Antonyms
443 | { JSON.stringify(data.antonyms) }
444 |
445 |
446 |
447 |
}
448 | )}
449 |
450 |
452 |
453 |
454 |
455 |
456 | {/* summary */}
457 |
469 |
470 |
471 |
472 |
474 |
475 |
Summary
476 |
Gist of your notes for easy learning
477 |
478 |
479 |
480 | {summaryContent}
481 |
482 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
496 | Flashcards
497 |
498 | setOpenQuizForm(true)}>
502 | Quiz
503 |
504 | generateSummary()}
508 | >
509 | Summarize
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
525 |
529 | SAVE
530 |
531 |
532 |
533 |
537 |
538 |
539 |
540 |
541 |
136 |
137 |
138 |
139 |
140 | Assignment Navigation
141 |
142 |
143 |
144 |
145 |
146 |
147 | Quick Access
148 |
149 |
150 |
151 |
152 | {questions.map((data,index) => {
153 | return <>
154 |
155 |
156 | {index+1}
157 |
158 |
159 |
160 |
161 | })}
162 |
163 |
164 |
168 | props.setShowQuizPage(false)} fontSize="large"/>
169 |
170 |
171 |
176 |
177 | {questions.map((q,index) => {
178 |
179 | return
180 |
181 | {index+1}) {q.question}
182 |
183 |
184 |
185 | {q.options.map((optn,j) => {
186 | let str_class=""
187 |
188 | if(optn === q.marked_answer){
189 | str_class = str_class + "quiz__grid__item quiz__option__selected "
190 | }
191 | else{
192 | str_class = str_class + "quiz__grid__item "
193 | }
194 |
195 | if (optn === q.correct_answer && showResult)
196 | {
197 | str_class = str_class+ "quiz__option quiz__option__green "
198 | }
199 | else{
200 | str_class = str_class + "quiz__option "
201 | }
202 |
203 | return
204 |
markAnswer(q,optn,j)}
206 | className={str_class}>
207 |
208 | {j+1}
209 |
210 |
211 |
{optn}
212 |
213 | })}
214 |
215 |
216 | })}
217 |
218 |
219 |
220 |
223 | Submit
224 |
225 |
226 |
227 |
19 |
20 | dispatch(increment())}
24 | >
25 | +
26 |
27 | {count}
28 | dispatch(decrement())}
32 | >
33 | -
34 |
35 |
36 |
37 |
46 | dispatch(incrementByAmount(Number(incrementAmount) || 0))
47 | }
48 | >
49 | Add Amount
50 |
51 | dispatch(incrementAsync(Number(incrementAmount) || 0))}
54 | >
55 | Add Async
56 |
57 |
58 |
10 |
11 |
13 | ,
14 | document.getElementById('root')
15 | );
16 |
--------------------------------------------------------------------------------
20 |