Eduni

- The Only Virtual Learning Platform You'll Ever Need -


Eduni is a coding project for my Introduction to Computer Science course. I spent a total of over 20 hours on this project, having to learn how to write and use JSON and PHP, come up with my own advanced JavaScript functions and algorithms, and write a total of around 2000 lines of code. This page describes my project, its features and limitations, and contains the written/video portion.


Planning Process

Define

In school, we've been using a wide variety of education tools. These include Google Classroom, PowerSchool, EdPuzzle, PearDeck, DeltaMath, NoRedInk, Padlet, Quizziz, Gimkit, Quizlet, and more. For many students, it has been hard to keep track of our assignments. We must go to each one of these platforms individually and check for new tasks, and Google Classroom is the only one that actually notifies us when new assignments are posted. This takes up valuable time and makes our lives much more complicated, causing many people to fall behind from missing assignments. We, students at Herron and likely many other schools, need a singular education platform where we can find all our assignments and grades. We need an app or website that has all our assignments built-in to the system so that we don't have to go around making accounts on so many separate platforms, and so we can easily keep track of what we need to do.

Brainstorm

Google Classroom 2.0
Basically another Google Classroom-related website, but it has more features that integrate the components of PowerSchool, EdPuzzle, etc. Possible Features:

A Grade Tab that gives the user a list of all of their grades, as well as their cumulative grade.
Video Questions feature like EdPuzzle where a user can answer questions along with a video.
Interactive Slideshow feature where a user can answer questions along with a slideshow.
Quiz feature where a student can answer questions assigned by a teacher.
Terminology feature where a student can learn vocabulary or terminology in their subject assigned by their teacher.
Whiteboard feature where students can share information on a board; like padlet.
Writing Response feature where students simply submit their assignments as text.
Account Sign-In feature where you can create accounts for the education platform and have your information saved.

Select

I am going to have my education platform have all of the features I listed. In order to be a worthy opponent of Google Classroom and to truly move everything to just one universal platform, I need to create something that integrates all of the features of everything we're currently using.

In order to provide the best solution possible, I need to include as many features as possible. My Grade Tab feature integrates PowerSchool features, Video Questions serves as Edpuzzle, Interactive Slideshow as Peardeck, Quiz as DeltaMath + NoRedInk + Quizziz + Gimkit, Terminology for Quizlet, Whiteboard as Padlet, and my Writing Response feature serves as simple paragraph submissions. The Account feature makes sure each student gets a fresh copy of the assignments.

All of these features will be built-in to my education platform website, and grades will automatically be updated when assignments are submitted. All of these features are needed in order to satisfy the user's needs: a universal education platform.

Create

When the user isn't logged-in, the home page will simply be a prompt asking them to login. Once they do, it will have a list of the classes they are enrolled in. For simplicity, my website will only have 1 class enrolled, the "Char 787 Class". Once they visit their class page, they will see a list of their assignments. At the top, they may visit a Grades page to see their grades from previous assignments. Back at the main page, if they click on any one of the assignments, they will be directed to a new page where they can complete and submit it. Then, if they go back to the Grades tab, they can see their updated scores. If the user refreshes or closes the tab, all their grades will still be on the server and ready for them when they log back in (which means I'll be having to learn JSON and advanced JavaScript). They can even create multiple accounts and have a unique set of scores for each.

Improve

To create my app, I'll first need to learn how to implement JSON with JavaScript to save user data and an account system on the server. Then, I'll have to set up the basic structure of the different pages in HTML. I will then style each of them in CSS to add colors, rounded corners for the boxes, better buttons, and more. Then I'll start the challenging part, the JavaScript, in which I'll code all the interactions to do things like submit forms, flip through terminology cards, and especially update variables.

To check what account the user is signed into, I was originally thinking about trying to implement web browser cookies so they stay signed in as they navigate to the different URLs. But to keep things simple, I'm simply going to have a "?user=" suffix to my URL to tell the JavaScript code what account they're on.

Since my website is just for demonstration purposes, I'd rather not have my server storage cluttered. Currently, users are able to create unlimited numbers of accounts. And quite easily too, just two input fields and a button. I can improve my design by adding some sort of limit so that spam accounts don't clutter my server storage space.


During Creation

Adjustments in Design

As I was creating the website, I made a few adjustments to my design. Public users will not be able to create accounts, rather I will have several pre-set-up accounts for testers to try out. Despite there only being 1 class, I will use JavaScript variables for all the text in each page so that, if I choose to add another class, all I have to do is simply duplicate and edit the JSON file with new names.

Memes


Final Product

Visitors to this site may use the following login credentials to access the virtual classroom:
Username: AnAwesomeStudent
Password: AVerySecurePassword
Please note that since this login is public, and that assignments can be completed more than once, other people may overwrite the responses you enter.

On each page, press Ctrl+U to see my code. Other than this page, this project has a total of 3 HTML pages: Home, Class, and Assignment. There is also a JSON file with all the course and student information here and a PHP file here (hidden from the public).

Since the PHP file is hidden from the public, here are its contents:

If I were to only have 1 class with a predetermined number of assignments, this project would have been much easier to code. However, I wanted it to be dynamic and very easy to add new classes and assignments, like how a real virtual classroom application would be like, without having to go into each HTML file and do some more coding. So, instead of inserting all my assignment paragraphs and content in the HTML, I went light on the markup language and did most of my stuff in JavaScript. I have several for loops and countless variables that are all based off of the JSON file. This way, if I were to add new classes or assignments, all I'd have to do is insert the information into a new object array in JSON, and the new content would automatically appear on each webpage. I successfully tested this functionality with the addition of the "The World Through Lenses" class.

As the final submission to IUPUI, I have made a video to showcase the application I've developed.

Timestamps:
Explanation: 0:00
Demonstration: 2:59
Explaining My Code: 11:17
Improvements & Conclusion: 17:05

If you would not like to watch me demonstrate my app and explain my code, don't watch the part from 2:59 to 17:05.



I hope you've enjoyed exploring my final project for my Introduction to Computer Science course. I went way beyond the course's programming expectations, but it was fun seeing my project slowly coming together, despite the debugging struggles I had along the way!