Check out our app here
Online classes started up for us this week, and with it, came a slew of inevitable problems and inconveniences. Learning in a non-traditional classroom setting may lead to different, less consistent educational outcomes, so we tried to better simulate a classroom setting instead of a video meeting which current online platforms seem more targeted towards. Interactivity is an important pedagogical principle in learning. Active learning involves asking questions and solving problems which may be much more difficult in an online setting. Students are more prone to becoming distracted, especially for younger students. Elementary and middle school classrooms often have students writing answers on the board which current programs don’t support.
Another issue that occurred to us was that teachers may pass over hand raised pings and miss questions throughout the lecture. Having your question answered is even more important in an online setting as it’s harder for teachers to judge their students’ understanding when looking through a webcam. We wanted to implement a priority queue system for students to ask questions and guarantee that the instructor sees them. Lack of technology and tech illiteracy are also issues that can be found across the board. Our end goal is to create an all-in-one platform that contains all the necessary tools. We hope that being current students, our experiences can be used to assist the learning outcomes of many others.
What it does
MOEGA is an online learning platform intended for teaching. The platform comes with teacher and student sides. The teacher side creates an online classroom with a private key that they can give to students to join. The main classroom component currently is a whiteboard that the teacher writes notes on, similar to how many classes are structured. The class is connected through voice and video.
Students join the platform with the key provided by the teacher. On the student side, they are able to see the whiteboard with the teacher’s notes, but not edit it. The teacher can give access to students to write answers on the board too.
To increase activity by the students, in order to ask a question, they must raise their hands physically. Their webcams will detect the raised arm and allow them to add a question into the queue. This also prevents many of the spam bots that are joining Zoom calls, restricting them from chatting/posting unless they expose themselves and raise their arm.
TOOLS USED: node.js, express.js, MongoDB Atlas, React.js, Socket.io, ml5.js, Ant Design, UiPath
How we built it
- Web sockets: We used socket.io to create the rooms that students and teachers join, stream the teacher’s audio and whiteboard notes, and synchronize everyone in the chatroom.
- Whiteboard: The whiteboard was built with React Konva to create a canvas to write and draw on.
- Machine Learning: we used ml5.js’s Pose Net api to detect whenever a student has their hand raised, and enable or disable the chatroom’s input box accordingly.
- Design: we used the Ant Design framework to style our React components
- Database: We used MongoDB Atlas to store class participation statistics and the questions asked by students for teachers to review.
- Testing: We utilized UiPath to create a robot to test our pages. The robot performed a sequence of events that visited each page of our application quickly and consistently. This helped us out especially when we were getting tired and making errors.
Challenges we ran into
- Getting our Heroku deployed application to route to our custom Domain.com domain name.
- Streaming the lecturer’s live audio to the students without delay
Accomplishments that we're proud of
- We were able to automate testing our main pages with UiPath. The bot could quickly test access to core pages consistently each time we deployed an update.
- Being able to link clients together in real time through the whiteboard and chatroom socket.io took some work, but became the core of our application.
- We were able to learn and integrate machine learning
What's next for MOEGA
- Accessibility issues: How can we make our platform accessible to people with disabilities?
- Implementation of additional education tools. Currently the main feature is whiteboard lectures. We can implement screen sharing
- Secure rooms: Security is a major issue that Zoom has been exposed for, and is going to be more important for new applications
- More whiteboard features: could potentially add a whiteboard or note taking space for students
- Recording: Can potentially record lectures so that students can rewatch at later times, and send transcripts of the teacher’s audio in case students missed something important.
- The Next Level#4744