Cycle

Inspiration

Having been in online school for the past year, our team has noticed many elements of online learning that could use some improvement. Reflecting on our experiences, as well as experiences of those around us, we decided to create a platform that makes learning online easier and more engaging for students.

What it does

Our product integrates a video calling platform with other features students and teachers need both inside and outside of the classroom. One struggle many students have, especially younger ones, is finding assignments and staying focused in class. To help with this, during class teachers can push out assignments directly to the student's screen. Additionally, there is a private message system between the student and the teacher, through which teachers can check in on students while they are doing individual work. Another feature we have added is a "Waiting-Room" feature that pops up between classes. During this time, teachers can push out announcements to their students on how to prepare for class as well as show an agenda for that day. There will also be a timer to show how much time there is before the next class starts as well as an "Auto-Join" toggle button that automatically puts everyone in class once the timer is done. During class, students will be able to take notes on the side of the screen and fill out worksheets while the teacher is also sharing their screen on the same window. The tabs this application will have include, announcements, courses, settings, calendar, and messages. Within the calendar, students will first see upcoming assignments they have, which when clicked on taking them to the submissions and assignment instructions page, and when expanded shows an overview of the month. To make the call more engaging, teachers can push out characters that walk across the screen that ask students questions, as well as play small in-built and personalized games with their students that relate to the lesson.

How we built it

To create mock-ups and to figure out how we wanted to design the pages, we used Figma. Then, to create some sample webpages, we used VS Code, where we used HTML/CSS and JavaScript to create part of our website.

Challenges we ran into

Some challenges we ran into was making sure the details of the project were worked out and making sure we were able to cater to both the students and teachers needs. Another challenge that we ran into was making the code work for the sample webpages that we made. Since our experience in web development in middle, there was a lot we had to learn about styling to make the websites look presentable.

Accomplishments that we're proud of

We are extremely proud of the idea that we came up with and our ability to work together to create a new product. We are also proud that we were able to come up with designs and sample webpages for our website without too much previous experience, and that we were able to learn so much over the past 24 hours.

What we learned

During this hackathon, we learned how to think through ideas and bring those ideas to life through designs. We also learned more about how to use HTML/CSS and JavaScript to create websites that are responsive and resize themselves according to the user's screen, which was something that we did not know how to do previously.

What's next for Cycle

The next thing for Cycle is to create the website with all of its features, from the main ones such as creating the video calling platform that allows students and teachers to more easily interact with one another, to the tiny details, such as showing students what part of the agenda they are on during class. We look forward to being able to complete this project and hopefully give it to schools that will still be teaching online.

Built With

• css
• figma
• html
• javascript