Skip to content

Latest commit

 

History

History
138 lines (111 loc) · 7.54 KB

README.md

File metadata and controls

138 lines (111 loc) · 7.54 KB

VisualCodeMOOC

Official repo of VisualCodeMOOC: A course platform for algorithms and data structures integrating a conversational agent for enhanced learning through dynamic visualizations, SoftwareX. [ScienceDirect]

Table of Contents

  1. Overview
  2. Key Features
  3. Installation
    1. VisualCodeMOOC
    2. VisualCodeChat
  4. Usage and Examples
  5. Modification and Customization
  6. Contributors
  7. Citation
  8. License
  9. Acknowledgements

Overview

This repository contains the source code for the project VisualCodeMOOC, as described in the paper "VisualCodeMOOC: A Course Platform for Algorithms and Data Structures Integrating a Conversational Agent for Enhanced Learning Through Dynamic Visualizations", submitted to the SoftwareX journal.

VisualCodeMOOC is an interactive learning platform that integrates a conversational agent, VisualCodeChat, to help students understand algorithms and data structures. It offers personalized guidance within a MOOC environment by combining visualizations and hands-on exercises, enhancing the learning experience with interactive and engaging content.

Check our deployed version at VisualCodeMOOC

description

Key Features

  • Dynamic Visualizations: Real-time interactive visualizations of algorithms and data structures based on randomly created examples during conversations, to help students understand the concepts better.
  • Personalized Guidance: Conversational agent provides personalized guidance and support to students.
  • Hands-on Exercises: Interactive exercises to practice and apply the concepts learned.
  • MOOC Integration: Seamless integration with MOOC platforms to provide a complete learning experience.

Installation

VisualCodeMOOC

  1. Install Material for MkDocs
    You may install Material for MkDocs with pip (recommended), ideally using a virtual environment.

    pip install mkdocs-material

    You can also use docker or git to download Material for MkDocs.

  2. Run the site on local machine
    Open the code file, switch to your virtual environment, you can run the site on your local machine with:

    mkdocs serve

VisualCodeChat

  • Requirements NodeJS >= 18 Docker >= 20

  1. Install Node.js and Yarn Ensure that both Node.js and Yarn are installed on your local machine. These tools are required to manage dependencies and run the development server.

  2. Configure Environment Variables Create and configure a .env.local file in the project root directory with the necessary environment variables. This file will store local configurations for development purposes.

    OPENAI_API_KEY=<your api key here>

  3. Install Dependencies and Start Development Server Run the following commands to install project dependencies and start the local development server:

    yarn install
yarn dev

    This will initialize the project and launch the server in development mode.

OpenAI API

There is a publicly available URL provided by an open-source initiative that offers free OpenAI API access. This requires only a GitHub account to obtain the API key, making it easy for anyone to access.

Usage and Examples

Usage guide

You can learn algorithms in VisualCodeMOOC by following the below procedure:

  1. Start with tutorial and short video lecture to get basic understanding of a topic
  2. Chat with VisualCodeChat VisualCodeChat will give:
    • English explanation
    • Step-by-step explanation with visualization
    • Code learning
    • Practice testing
  3. Try extra exercises

Scenarios

While chatting with VisualCodeChat, user may meet the following four phases. Example scenarios are shown in the screenshots:

  1. VisualCodeChat welcome
  2. Adaptive teaching

description

description

  1. Interactive learning

description

5. Completion of the learning

Modification and Customization

Customize Visualizations

To modify the visualizations, you need to use the files in the visualcodechat/app/visual, select the visualization you want to modify, and modify the const property in the file. To add new visualizations, you need to use the cn.tsx in the visualcodechat/app/masks to define the visualization name in the animation property. Then, design your own new visualization by creating a new file in the visualcodechat/app/visual and add the content according to the same way as the existing visualizations. After that, you need to employ the new visualization in the visualcodechat/app/components/chat.tsx. Add the new visualization const in the div element: className={styles["chat-message-item"]}. With the suitable condition setting accoriding to the animation property, you can use the new visualization in the chatbot.

Customize Courses

To modify the courses, you need to use the cn.tsx in the visualcodechat/app/masks. Specifically, if you want to modify the existing content, you can check the mask name first then modify the content in the corresponding mask component. If you want to add a new course, you can create a new mask file in the CN_MASKS and add the content according to the same way as the existing masks. For example, you can set the difficulty level of the exercise or customize the algorithm of the course.

Contributors

  • Mingyuan Li
  • Duan Wang
  • Erick Purwanto
  • Thomas Selig
  • Qing Zhang
  • Hai-Ning Liang

Citation

If you find this project useful for your research, please consider citing:

@article{LI2025102072,
title = {VisualCodeMOOC: A course platform for algorithms and data structures integrating a conversational agent for enhanced learning through dynamic visualizations},
journal = {SoftwareX},
volume = {30},
pages = {102072},
year = {2025},
issn = {2352-7110},
doi = {[https://doi.org/10.1016/j.softx.2025.102072](https://doi.org/10.1016/j.softx.2025.102072)},
url = {[https://www.sciencedirect.com/science/article/pii/S2352711025000391](https://www.sciencedirect.com/science/article/pii/S2352711025000391)},
author = {Mingyuan Li and Duan Wang and Erick Purwanto and Thomas Selig and Qing Zhang and Hai-Ning Liang}
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgements

This work is supported by the research funds XJTLU RDF-22-01-062, TDF2223-R26-219, TDF2324-R27-230, RC4AIED202406, and AoFE Implementing Computational Thinking Education in K‑12 and Higher Education Special Interest Group. We would like to thank the STEAM Centre, Ulink College of Suzhou Industrial Park for their support.