--- title: 'Week2 Simple Lesson_Yi Li' disqus: hackmd --- ## Week2 Simple Lesson_Yi Li ## Contents [TOC] ## Intro ![](https://i.imgur.com/71C8tEx.jpg) Bug&Duck is a cased-based online learning platform that I co-designed with my teammates from the program of Instructional Tech&Media in the last Spring semester. The goal of this project is to teach debugging to novice adult programmers, especially those with a background in humanity&arts. If you are interested in it, [click here](https://drive.google.com/a/tc.columbia.edu/file/d/16TdF0NBK3VTQSofxgF5XOsDa0jFlnvI-/view?usp=sharing) to see the demo video that we created for the Innovation Award. ## Prototype The following picture is the prototype that our team designed. There are three windows: a chatbot on the left, a source file on the top right, and a console on the bottom right. ![](https://i.imgur.com/v4O5dMp.png) ## Simple Lesson Due to the limit of time, I didn't implement the design above. Instead, I displayed a mini case in which users will be guided to read the error messages generated by the compiler. ### First... The user will see the introduction and screenshots of the website in the image slider. I used three identical images here. ### Then... If the user clicks "get started", the page will jump to the Java code. ### Next... When the user clicks "run", the error messages will be displayed. If the user is not familiar with the messages and wonder the meaning of them, then the definition of error messages will pop up. ### Finally... The goal of the last question is to check whether the user can find the bug in the program based on error messages. ## Summary I tried to follow the design of the original prototype but failed to build the window of the chatbot. So I created this version instead. It's very simple (maybe too simple 🙊), implementing only 10% of the funtions presented in the demo video. But I learned a lot from this project since I was able to actively choose the classes in bootstrap instead of testing them passively in FCC.