How Do Glasses Work

A learning tool that teaches young kids how do glasses work

Play with the interactive tool!


Team: Canhai Chen; Jiasi Tan

My Role: Research, Prototyping, Design, Front-end Developing

Context: CMU HCII, Tools for Online Learning Course Project

Skills: Front-End Developing, Back-End Development, Data Base, Visual Design, Learning Experience Design


This website is a place for young kids to learn how do glass work. By integrating Jigsaw method to help students with learning how do glasses work cooperatively, we hypothesized students would learn cooperatively by teaching each other and learning from each other.



Learning Experience Design

Clear guidance on how to do the cooperative learning

After logging in (first time users need to sign up), students will be briefed with the topic of the mini lecture.

  • We start the instruction by inviting students to brainstorm how to help Bred see clearer. We anticipate this could not only make the instruction more engaging, but also foster deep thinking, give the instruction is about teaching conceptual knowledge level.

  • Then, students will start to look at the instructional video with the question of how we can help with Bred. A brief introduction of the topic including high level facts about glasses will be given to all students, as well as the instruction of how students are supposed to collaborate. By doing so, we aim that all students understand the form of learning, so they won’t get confused about what to do in different activities.

  • Students will also be clearly informed that there will two instruction content parts and they will only be assigned one part, as well as the rules that students will teach their partners what they learn and will have to depend on their partners to learn the content they’re not assigned, and the final score will be the average of both team members.

Creating sense of belonging

After the introduction of the topic and instruction on the cooperation, students will be asked to join teams of two. They can join team by choosing a team mascot. By creating this little joyful moment, we aim to create a sense of belonging to the team, which we think will positively impact the cooperation. We anticipate that students will enjoy this little joyful moment and have a stronger sense of belonging.

Creating clear understanding of what each team member will learn

After joining the team, each team member will be only assigned either part A or part B. Students who are assigned part A will learn ‘how does the eye work’ and students who are assigned with part B will learn ‘How do glasses change the path of light’. While each student is only assigned one part of content, they’re clearly informed the title of content their teammates will learn, by doing so, we anticipate learners to finish their assigned content without too much confusion while also generated some questions they might want ask to the teammate which could be answered by their partners. We anticipate this could foster better cooperative learning during the teach and learn when team members meet together.

Experts discussion with check-list

After students finish their assigned learning, they will be prompted to discuss with their peers who have learned the same content. We design this activity as the expert groups discussion, with the form of video chatting.  

Practice following expert group discussion to clear misconception

At the end of the expert group discussion, there will be a quiz with feedback to each questions to help clear misconception. This way, it minimize instructor’s effort to clear misconception in all expert groups. Students are expect to fully understand each of the questions, by reading the feedback if they make mistake in any of the questions.

Checklist listing key content to teach and learn

After the practice, learners start the cooperative learning. Right before the cooperative learning, there will be a popup window remind them the content they’ll need to teach their teammate as well as the content the teammate will teach self. During the team teach and learn, students are anticipated to teach what they’re asked to teach as well as ask about the content if they realize their teammates forget to teach them some content.

Final quiz covering both parts of the content

After team teach and learn activity, students will be prompted to take a quiz. The quiz covers content that assigned to both teammates within a team. Students are expect to have similar level of understanding of both the content they were assigned and the content their teammates are assigned. The final quiz have 10 questions in total and each of the quiz provide immediate feedback.

Design consideration of immediate feedback vs. providing delayed feedback

We talked about the trade-offs in between the two options of providing feedbacks for our final quiz, and our team consensus is providing immediate feedback works better for students’ learning while delayed feedback works better for measurement. We understand measurement is an important information we want to know, however we value better learning outcome more and therefore we decided use immediately feedback for our quiz.


External Tools

Anime -

Fade Animsition -

Hamburgers -

jQuery -

Bootstrap -


Thanks for reading!