An AI-based Web Application for Primary and Secondary School Students to Learn Computer Programming

Project Background

In recent years, Artificial Intelligence (AI) has been used to build Large Language Models (LLMs) that allow conversations between users and computers. AI is applied by institutions worldwide for educational purposes.

Without the application of AI, teachers have to spend much more time making teaching materials, for example, lesson notes, homework, quizzes, and teaching plans. Due to tight working schedules, teachers often do not have enough time to analyze the academic progress and performance of every student, especially when the class size is large. This results in a challenge to track students’ individual needs in order to offer students tailor-made educational content. Moreover, it is also difficult for teachers to update teaching materials quite frequently. Teaching materials are usually static in a way that after they were created before the semester begins, they would remain mostly unchanged throughout the semester unless there were major errors or the teacher found a great need to make adjustments.

After AI has become popular, teachers nowadays can ask computers to generate teaching materials easily and conveniently. However, the technology needed for the generation of a complete set of teaching materials (more than 10,000 words) for a whole course in one click has still not been widely available yet. Also, there is a lack of a platform to organize all these generated materials.

This project addresses the above constraints. With the application of AI, it is possible to build an educational platform with resources solely produced by the output of an LLM. Recently, the researcher of this project has developed an AI Programming Question Generator and an AI Programming Tutor. The AI Programming Question Generator allows the user to input a programming question. After that, variants of the programming questions, along with the corresponding solution and test cases, will be generated together. The AI Programming Tutor lets users paste their code as input and make queries. Then, AI-written suggestions will be shown to the users. These two applications will be treated as the starting point of this project.

Project Objective

This project aims to build an AI-based web application for primary and secondary school students to learn computer programming. This web application will serve as a platform for learning computer programming, starting with the fundamental concepts (such as print functions, strings, and if/for/while statements) to advanced topics (such as data structure, algorithms, and dynamic programming). All teaching materials will be generated by AI and be shown on screen as text and graphics.

Each programming topic will occupy a section. In each section, there will be a set of teaching materials guiding students step by step in their programming journey. When an area of content is selected by students, AI will provide tips to them. Further clarification will be given upon request. Students can query AI proactively if they have concerns about any specific topic.

On the other hand, the platform will provide a console for students to attempt different programming exercises with questions, solutions, and test cases designed by AI. The programming exercises will come with a range of difficulties while supporting answers in multiple programming languages like Python, C, C++, and Java. Students can test and debug their program directly on the website. If there are errors or unexpected results, the incorrect codes will be automatically highlighted with appropriate and real-time explanations.

Another feature is the personalized learning progress tracker. Students’ progress and performance on the web application will be analyzed by AI so that the AI will generate more accurate and suitable content in the future. Data considered includes the correctness and time used for each student’s submission. This will enable AI to perform a breakdown of students’ learning behaviors, such as the topics that students are good at or weak in. If a student struggles with a certain topic, the AI will recognize the situation and provide more information and guidance on that topic, or lower the difficulties for the questions of that topic. In contrast, if a student performs well in that topic, the AI will generate more advanced teaching materials to facilitate students’ growth.

Periodic activities such as daily quizzes, fun facts sessions, and feedback surveys will be implemented to ensure the dynamism of the web application. These contents will also be AI-generated. Daily quizzes will be in short or long questions format, covering and reviewing topics that students have already gone through. AI will smartly adjust the questions based on students’ performance. Fun facts sessions will be in a relaxing vibe. They serve the purpose of maintaining the interest and curiosity of students so that they will be more engaged in the learning process. Feedback surveys will be a tool for students to write their thoughts about this platform. The feedback will be sent to the backend and read by both the AI and the developer. It will help improve the platform and features to ensure it meets student needs effectively.

Overall, the features above are designed as a response to the two main objectives of this web application. One objective is to provide a way for students to learn programming in a dynamic and tailor-made style. This approach increases students’ retention, thus making their learning process more enjoyable. Another objective is to lessen teachers’ burden. With the application of this platform, teachers will spend less time on administrative tasks, so they will have more direct interaction with students, creating a more supportive learning environment.

Project Methodology

Frontend technology: HTML, Bootstrap, and JavaScript

HTML is a mark-up programming language widely chosen for defining the structure of web applications. It will be used to design the layout and sections.

Bootstrap is a CSS framework for the convenient and efficient development of a responsive website. It includes a large amount of pre-defined components, such as buttons, navigation bars, and accordions, which allow faster and more accurate front-end development.

JavaScript is a programming language frequently used for scripting on the client side. It enables interaction between the client and the web interface. It can also communicate with the backend, such as posting forms to the server.

Backend: Python Flask

Python is one of the most important programming languages, especially for use cases related to integration with AI models. It contains various powerful libraries, such as Panda and NumPy, that can perform complex mathematical procedures and data analysis [5].

Flask is a lightweight and flexible Python library that allows quick prototyping and iterative development. It can act as a bridge connecting clients and the AI Models through API. Whenever it is needed, the Flask app will send a GET or POST request through the API of the AI models. After the server has received the response, the new data will either be kept in the server storage or displayed as information to the user.

AI Models: LLaMa provided by Groq’s API

LLaMa is an advanced LLM developed by Meta. Its intelligence is comparable to other leading models, such as GPT, Gemini, and Claude, across multiple professionally recognized benchmarks. Its ability to write and explain computer programming in different programming languages is by far one of the best. Of all the listed models, only LlaMA is currently an open-source model, meaning that any individual can freely use the model. Therefore, using LlaMa can ensure the maintainability of the project.

The most up-to-date models offered by Meta are LLaMA-3.1 and LlaMa-3.2. In the early stages of the project, these two models will be most likely adopted. It can be foreseen that newer models may be released in the later stages of the project, so the researcher will keep in touch for any updates for the models.

Groq is a company known for producing quality GPUs. They have been using their advantages to build a web application that provides API for people to quickly access open-source models, like LLaMA. Their API response rate is fast because of their deep GPU system. As a result, Groq is chosen as the method to access LLaMa.

Project Schedule and Milestone

TimeTask
October 2024Frontend Development
November 2024Backend Development
December 2024AI Model Test and Integration
January 2025Finalize Frontend and Backend Resources
February 2025Web Deployment and Hosting
March 2025Live Testing and Improvements