Open Category Submission

381 – VocabMatch – An AI App for Interactive Learning on Vocabulary

In the realm of education, one significant challenge teachers face is effectively assessing and enhancing student engagement with key vocabulary in various subjects. Traditional methods of vocabulary instruction can often lead to passive learning, where students may memorize terms without truly understanding their meanings or contexts. Furthermore, the need for immediate feedback and interactive learning experiences is important in maintaining student motivation. By leveraging generative AI, we can create innovative solutions that not only make vocabulary learning more engaging but also provide teachers with the tools to assess student understanding in real-time.
My project proposes the development of a web-based application called "VocabMatch," designed specifically for teachers to enhance student engagement and motivation through interactive vocabulary games. The application allows educators to input a list of key vocabulary terms related to their lesson plans. Upon submission, VocabMatch utilizes generative AI algorithms to create an interactive matching game that pairs vocabulary words with their definitions, synonyms, or contextual sentences. This game can be played in real-time during class, fostering an interactive environment where students can collaborate and compete to demonstrate their understanding of the material.

The inspiration for my project arose from observing the common struggles teachers encounter when trying to engage students with essential vocabulary during lessons. Traditional methods of vocabulary assessment often lack interactivity and can lead to disengagement among students. I realized that while teachers are eager to enhance student understanding, they often lack the tools to create dynamic and engaging activities that cater to diverse learning styles. This gap prompted me to explore the potential of generative AI to create a solution that would streamline the process of vocabulary engagement.

The underlying hypothesis of my project is that by leveraging generative AI to create interactive matching games based on key vocabulary, we can significantly enhance student motivation and understanding. I believe that this approach will succeed because it transforms passive learning into an active, engaging experience. Interactive games not only capture students’ attention but also provide immediate feedback, allowing teachers to assess understanding in real-time. Furthermore, the adaptability of AI-generated content means that teachers can easily customize vocabulary lists to align with their specific lesson plans, making the tool versatile and relevant across various subjects and grade levels.

In essence, this project aims to bridge the gap between traditional vocabulary instruction and modern, interactive learning methods. By harnessing the power of generative AI, we can create a more engaging and effective learning environment that fosters deeper understanding and retention of key vocabulary, ultimately leading to improved educational outcomes.

To implement my solution, I will use technologies such as JavaScript, HTML5, and CSS for the front-end development of the web-based application, while using AI to generate the interactive matching game. To support development, I will require access to educational resources, user feedback mechanisms. To validate market demand, I plan to conduct surveys and focus groups with teachers of my school and educational institution to gauge interest and gather insights on desired features.

The core functionalities of the application will include an intuitive interface for teachers to input lesson-specific vocabulary, an algorithm to generate interactive matching games automatically, and to return a final score based on students' performance. To ensure a positive user experience, I will focus on a clean, user-friendly design, easy navigation, and responsive feedback mechanisms during gameplay. Additionally, I will provide tutorials and support resources to assist teachers in maximizing the app's potential.

To evaluate the effectiveness of the solution, I will use performance metrics such as user engagement rates, the time taken to complete games, improvement in vocabulary retention through pre- and post-assessment tests, and teacher feedback on usability and student interaction. By continuously monitoring these metrics, I can iteratively improve the application and ensure it meets the needs of educators and enhances student learning outcomes.

body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
}

.container {
max-width: 800px;
margin: 0 auto;
}

.input-area {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

input {
padding: 10px;
margin: 5px;
border: 2px solid #ff9a8d;
border-radius: 8px;
font-size: 16px;
}

button {
padding: 10px 20px;
background-color: #82ccdd;
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s;
}

button:hover {
transform: scale(1.05);
background-color: #60a3bc;
}

#wordTable {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
background: white;
border-radius: 10px;
overflow: hidden;
}

#wordTable th, #wordTable td {
padding: 12px;
text-align: left;
border-bottom: 2px solid #f8a5c2;
}

.game-area {
display: none;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
margin-top: 20px;
}

.game-columns {
display: flex;
justify-content: space-around;
margin: 20px 0;
}

.word-card, .meaning-card {
background: #fff;
padding: 15px;
margin: 10px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
}

.delete-btn {
background-color: #ff6b6b !important;
padding: 8px 12px !important;
}

.ai-btn {
background-color: #a55eea !important;
padding: 8px 12px !important;
margin-left: 5px;
}

.print-btn {
background-color: #2d98da !important;
margin-left: 10px;
}

#wordTable th:last-child,
#wordTable td:last-child {
width: 220px;
text-align: center;
}

.selected {
border: 2px solid #78e08f;
background-color: #f8f8f8;
}

.matched {
opacity: 0.5;
pointer-events: none;
}

#scoreBoard {
text-align: center;
font-size: 24px;
color: #e55039;
margin: 20px 0;
}

.game-title {
text-align: center;
color: #e55039;
font-size: 32px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

@media print {
.input-area {
display: block !important;
}
.game-area, button, input {
display: none !important;
}
#wordTable {
box-shadow: none;
border: 2px solid #333;
}
}

let words = [];
let selectedWord = null;
let selectedMeaning = null;
let score = 0;

function addWord() {
const word = document.getElementById('wordInput').value;
const meaning = document.getElementById('meaningInput').value;

if (word && meaning) {
words.push({ word, meaning });
const table = document.getElementById('wordTable');
const row = table.insertRow();
row.innerHTML = `

`;

document.getElementById('wordInput').value = '';
document.getElementById('meaningInput').value = '';
}
}

function deleteWord(button) {
const row = button.closest('tr');
const word = row.cells[0].textContent;
const meaning = row.cells[1].textContent;

words = words.filter(w => w.word !== word || w.meaning !== meaning);
row.remove();
}

async function generateMeaning(button) {
const row = button.closest('tr');
const word = row.cells[0].textContent;

// 模拟AI生成的词意数据
const mockMeanings = {
"apple": "一种常见的水果，通常是红色或绿色的",
"run": "快速移动的动作，用双脚交替前进",
"happy": "感到或表现出愉悦和满足的情绪",
"book": "由多页纸张装订而成的阅读物",
"school": "进行系统性教育的场所"
};

// 模拟API延迟
await new Promise(resolve => setTimeout(resolve, 500));

const generatedMeaning = mockMeanings[word.toLowerCase()] || "（无法生成建议词意）";
const confirmReplace = confirm(`AI建議詞意：${generatedMeaning}\n\n是否替换当前词意？`);

if (confirmReplace) {
// 更新表格显示
row.cells[1].textContent = generatedMeaning;
// 更新内存数据
const index = words.findIndex(w => w.word === word);
if (index > -1) {
words[index].meaning = generatedMeaning;
}
}
}

function printWordList() {
window.print();
}

function startGame() {
if (words.length === 0) return;

score = 0;
document.getElementById('scoreBoard').textContent = `得分：0`;
document.querySelector('.input-area').style.display = 'none';
document.getElementById('gameArea').style.display = 'block';

const shuffledWords = [...words].sort(() => Math.random() - 0.5);
const shuffledMeanings = [...words].map(w => w.meaning).sort(() => Math.random() - 0.5);

const wordColumn = document.getElementById('wordColumn');
wordColumn.innerHTML = shuffledWords.map(word => `

`).join('');

const meaningColumn = document.getElementById('meaningColumn');
meaningColumn.innerHTML = shuffledMeanings.map(meaning => `

`).join('');

document.querySelectorAll('.word-card').forEach(card => {
card.addEventListener('click', handleWordClick);
});

document.querySelectorAll('.meaning-card').forEach(card => {
card.addEventListener('click', handleMeaningClick);
});
}

function handleWordClick(e) {
if(e.target.classList.contains('matched')) return;
document.querySelectorAll('.word-card').forEach(card => card.classList.remove('selected'));
e.target.classList.add('selected');
selectedWord = e.target.dataset.word;
checkMatch();
}

function handleMeaningClick(e) {
if(e.target.classList.contains('matched')) return;
document.querySelectorAll('.meaning-card').forEach(card => card.classList.remove('selected'));
e.target.classList.add('selected');
selectedMeaning = e.target.dataset.meaning;
checkMatch();
}

function checkMatch() {
if (selectedWord && selectedMeaning) {
const correctMeaning = words.find(w => w.word === selectedWord).meaning;

if (selectedMeaning === correctMeaning) {
score += 10;
document.querySelector('.word-card.selected').classList.add('matched');
document.querySelector('.meaning-card.selected').classList.add('matched');
} else {
score = Math.max(0, score - 10);
if(score === 0) {
setTimeout(() => gameOver(), 300);
}
}

document.getElementById('scoreBoard').textContent = `得分：${score}`;

selectedWord = null;
selectedMeaning = null;
document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));

const matchedCount = document.querySelectorAll('.matched').length;
if(matchedCount === words.length * 2 || score === 0) {
setTimeout(() => gameOver(), 500);
}
}
}

function gameOver() {
alert(`遊戲結束！最終得分：${score}`);
document.querySelector('.input-area').style.display = 'block';
document.getElementById('gameArea').style.display = 'none';
document.getElementById('wordColumn').innerHTML = '';
document.getElementById('meaningColumn').innerHTML = '';
selectedWord = null;
selectedMeaning = null;
}

My idea represents an innovative and creative solution to the challenge of engaging students with key vocabulary by transforming traditional learning methods into an interactive experience. The application utilizes generative AI to automatically create customized interactive matching games based on the vocabulary provided by teachers. This not only saves educators significant preparation time but also allows for real-time adaptations to suit the unique needs of their students.

What sets this project apart is its ability to generate game formats that are based on teacher's real-time input vocaburlary list, which cater to various teaching and learning styles and preferences. By integrating gamification elements, the application fosters a competitive yet collaborative environment, encouraging students to actively participate in their learning process. This creative approach not only enhances motivation but also reinforces vocabulary retention through engaging gameplay.

In summary, the innovative use of generative AI to create interactive learning experiences, combined with gamification, positions this project as a forward-thinking solution that effectively addresses the challenges faced by educators in engaging students with essential vocabulary. This creative approach not only enhances the learning experience but also empowers teachers to facilitate a more dynamic and responsive classroom environment.

To ensure my solution is scalable, I will design the application as a simple HTML page that can be saved and launched locally on any computer. This approach eliminates concerns about server bottlenecks and allows for easy distribution, enabling teachers to access the tool without relying on internet connectivity. As the user base grows, the simplicity of the app ensures that it can be easily shared among educators, facilitating widespread adoption without the need for extensive infrastructure.

In terms of sustainability, the app's lightweight design minimizes resource consumption, making it environmentally friendly. By allowing users to run the application locally, we reduce the reliance on data centers and cloud services, which often contribute to carbon emissions.

To foster long-term user engagement, I will incorporate features that allow for easy updates and customization of the matching game, enabling teachers to adapt the tool to their specific curriculum needs. Additionally, I will gather user feedback through surveys and focus groups to continuously refine the application, ensuring it evolves alongside user needs and educational trends. By prioritizing adaptability and user-centric design, the app will remain relevant and effective in enhancing vocabulary engagement for years to come.

My solution addresses specific social issues related to educational equity and inclusion by providing teachers with an accessible tool to enhance vocabulary learning for all students, regardless of their background. By enabling educators to create interactive vocabulary matching games easily, the application fosters a more engaging learning environment that can cater to diverse learning styles and needs. This inclusivity is essential in ensuring that every student has the opportunity to grasp key concepts and improve their language skills, ultimately enhancing their academic success.

To measure the social impact of the application, I will gather feedback from teachers and students through surveys and usability studies, focusing on engagement levels, comprehension rates, and overall satisfaction with the learning experience. Additionally, tracking metrics such as the frequency of use and the diversity of vocabulary topics covered will provide insights into how well the tool is meeting the needs of various classrooms.

To ensure responsiveness to the evolving needs of the community, I will establish a feedback loop that encourages continuous input from users. This will include regular updates to the application based on user suggestions and the changing educational landscape. By remaining adaptable and responsive, the application can better serve its primary beneficiaries—teachers and students—while contributing to broader social goals of equity and inclusion in education.

Personal Information Collection Statement (PICS):
1. The personal data collected in this form will be used for activity-organizing, record keeping and reporting only. The collected personal data will be purged within 6 years after the event.
2. Please note that it is obligatory to provide the personal data required.
3. Your personal data collected will be kept by the LTTC and will not be transferred to outside parties.
4. You have the right to request access to and correction of information held by us about you. If you wish to access or correct your personal data, please contact our staff at lttc@eduhk.hk.
5. The University’s Privacy Policy Statement can be access at https://www.eduhk.hk/en/privacy-policy.

• I have read and agree to the competition rules and privacy policy.