Hi! I'm quite new to programming, but I recently had an idea of combining React, Django, and PostGreSQL to create a complex but useful quiz app to help with anatomy bellringers. I'll give you a detailed description of the features I need for the project.
Ok, so I’ll start by explaining the database structure I’m looking for, and then all the front-end features and functionalities. In terms of the database, let me provide a more detailed description on how this is structured, to pair with the information above: In our complex database, I need to have a table to store the user login information. I have a table of questions, which contains the following properties: A question ID, The structure/organ that the question is about, the body region that the question is about, the organ system, the question type (for our case this will always be short answer), the Question Stem/Text, the Correct Answer, and an Explanation for that answer. I also have a table linking my images with their structures in the following manner: Each Image has an ID, and each Image has a bunch of labels from A-Z that map to a structure (for example, in an image, A might be the posterior pituitary and B might be the anterior pituitary). I need a table that will store quizzes as they are formed, which links a quizID with a UserID, storing the quiz information and number of questions. I need a table that will store the Questions that were provided in each quiz, containing QuizQuestionID, QuizID, QuestionID, and Question Position in the quiz. I need a table that will store the Users scores to their past quizzes, containing a SubmissionID, UserID, QuizID, Submission Date, Accuracy, Number of Questions Incorrect, and Number of Questions Correct. I need a table that will store the Users specific answers to their past quizzes, containing a QuizID, SubmissionID, QuizQuestionID, UserAnswer, and if it was correct or not.
Now for front-end.
I need to be able to easily add new images to the database we have. I know react has some libraries like react-image-annotation and libraries for uploading images, so I need the following functionality: A user should be able to upload a labeled image, and using the annotation library, be able to manually put on masks onto the image to cover the labels with the A-Z labels/masks, creating the masked image we would show at a station. For every new label that the user adds, the label should increaes (So the first label should be A, the next B, and so on.) Finally, for every new label that the user adds, there should be a table at the bottom that keeps adding rows, which will automatically fill in the letter used for the label, and ask for an input of the structure name (so when I put my first label, the label itself should say A, and then a table at the bottom would have 2 columns: the label (which would be "A"), and the structure name that the user has to fill out. Adding a new label would put the text B on top of the label on the image, and add a new row in the table with the label "B" asking for the corresponding structure). Clicking submit on this after fully masking should add this entry to the database that connects the images with their structures and labels; specifically, the image-structure database where we would add the image ID, and for every entry in the table that the user filled out with the labels and the structure names, we would add that to the database.
In terms of the quizzes themselves, when a user selects to make a new quiz, they need to be able to select filters that would sort through questions. Specifically, there are 3 filters I am working with: Body Region, Organ System, and Organs. Each of these filters would be in the form of a checkbox - check the box, and only questions with those properties can be asked. Now here's where it gets tricky: Bellringers are typically composed of 10-20 stations, which is formed with an image and 2 associated structures. What does that mean for us? In terms of front-end, when the quiz is generated, we need to have an individual page view for each station. This page view would show an image (I have 2 kinds of images - labeled and masked. During the quiz, we show the masked image, and at the end when the user is checking what they got right/wrong, we show the labeled image), and would have 2 questions (which are short-answer questions, so they need text input). Each station in a bellringer also has a time limit of 1 minute - once that 1-minute is finished, I need that station to autosubmit and to move on to the next station to simulate a real test. Once the test is complete, I need to have a validation system in place that can check the user inputted answer with the correct answer in the database, and thus provide a score for the quiz. Also, there should be a way to view the questions on the quiz, which would have: A labeled image of the station, the user's answer, the correct answer, and an explanation. Why is this important? The logic behind the quiz questioning is as follows (And I'll use an example to make it clear): Users create a new quiz, and filter for specific topics that they are looking to be tested on (let's suppose they want to be tested on the endocrine and reproductive system). Next, we go into our question table and filter only for endocrine and reproductive questions. Out of the remaining questions left, we see which structures are remaining, and with those remaining structures, we filter out our image table to get the list of images (so let's suppose filtering for the endocrine and reproductive leaves us with 20 questions, and the structures associated with those questions are the pituitary and the ovaries. Now I go to my images, and I see only 5 images contain either the pituitary or the ovaries). Now that we have our images that are valid for the quiz, we create our stations: Randomly select 20 images (unless there are less than that, then select the total number of images that we can choose - this can probably be done with a min function like in the example where we only have 5 images). For each image, we have all the labeled structures in those A-Z labels. With those structures, we can go to our question table (remember, this is already filtered to only questions that the user wants) and get a list of potential questions for the structures at that table (so suppose my first image is an image of the brain, so it has the structures pituitary, hypothalamus, and brainstem. I'd take those structures and go back to my filtered question table which only contains endocrine and reproductive questions, and see which questions aligned with my structures. In this case, only questions about the pituitary would be allowed). Finally, I'd randomize 2 of those possible questions at the station, and show those for the user to answer.
In terms of overarching usage, I need to have user login functionality (which means they need to be able to create a username, password, and I need to get the information about when they logged in), and that information can be stored in a database table in PostgreSQL. Once logged in, each user needs to have the ability to do the following: They need to be able to create a new quiz, which would pull questions from the database. They need to be able to see their past quizzes, which would provide a detailed list of past quizzes they took (this information would also be stored in a database). In this list of past quizzes, they need to be able to see the order of the questions, their inputted answers, and the correct answer (which will help with learning). As such, the database will likely need to have a table to host quizzes when they are complete, likely with a Quiz ID, the associated Question IDs, the order the Q's appeared in, and the User answers to each question. In terms of taking the quiz, Do you think you can help me code this?
I’ll also preface this by saying I have no programming experience and I just installed VSCode, so I’ll need a detailed tutorial as well as exact code to use through each step that we go through to build this app in VSCode. Does that sound like a plan? Then we can start first with backend development, then doing the image annotation, then integrating it with front-end and creating the quiz functionalities, and then designing it to look great.