MAGIC Mentee Presentation

The Girls’ Middle School

May 13th, 2019

  • Jane Wyatt, 6th Grade
    • Classy Photos ( website)
  • Julia Diaz, 6th Grade
    • Coquelicot (video game)
  • Sydney, 6th Grade
    • Cryptography decoder
  • Alexa Nanevicz, 7th Grade
    • Html and Javascript website

Agenda

  • Aria Kapoor, 7th Grade
    • Did U Know(website/app)
  • Laura Chen, 8th Grade
    • Danganronpa Remix - Video Game
  • Alexis Hodgson, 10th Grade
    • The History of Cameras

The mentee names should appear in increasing order of grade, and alphabetized by the first name within a grade.

Jane Wyatt

6th Grade

Each mentee gets to present for 7-9 mins.
Please add as many slides as you want to, in addition to filling out the ones in this template.

Each slide should have bullet points, not full sentences.

You do not want to read the bullet points, instead tell your story!

Mentor photo, preferably with mentee, goes here

Ellen Blaine

  • About Ellen…

    • She works at Square

    • She is the Front-end engineer, and user

experience designer for Square

    • She is from the LA area

    • She enjoys playing Golf

Square

Front-end engineer, user experience designer

From LA area

Golf

My project outline -

Our website - Classy Photos

  • Classy Photos is a website that stores some of my favorite photos
  • It is uses html, javascript, React and css
    • One challenge we found with using all these codes was that we had to move around change or adjust to 2 new editors
      • Github/ Sandbox
      • Atom

  • Classy Photos contains:
    • A slide show
      • How did we make it?
        • Using a carsole function

import Carousel from "react-bootstrap/Carousel";

<Carousel>

<Carousel.Item>

<Carousel.Caption>

</Carousel.Caption>

</Carousel.Item>

What does our website contain? How did we make it?

    • A gallery
      • How did we make it?
        • We imported images
    • A menu bar
      • How did we make it?
        • We used a tag called <Router>

Highlights of my Magic Experience

  • Learning Javascript , html, React and css
  • Being shown the world of coding
  • Learning how to problem solve and find bugs
  • I enjoyed getting to know my Mentor and learning from her

Important lessons and challenges I overcame with Magic

  • I learned that you always need to save!
  • Learning to answer questions on my one
  • Being flexible when new challenges arise
    • Moving to different text editors

My Demo for my Website and Slideshow

Thank you!

Click to add speaker notes

Julia Diaz

6th Grade

Each mentee gets to present for 7-9 mins.
Please add as many slides as you want to, in addition to filling out the ones in this template.

Each slide should have bullet points, not full sentences.

You do not want to read the bullet points, instead tell your story!

My Mentor

  • Ranjitha Gurunath Kulkarni
    • Works at Microsoft
    • Works on speech recognition
    • Her hobbies are music, art, robotics, etc.

My Project

  • Name: Coquelicot
  • It’s an RPG (role-playing) video game
  • Inspired by Undertale
  • Motivation: I always wanted to learn to code a video game so I can make more in the future
  • Learning about python
  • Game Idea
  • Pygame
  • First Game
  • Final Game
  • Game Characters
  • My MAGICal Experience

Agenda

  • Materials
    • Let’s Learn Python Website
      • Classes, math, functions, and a lot more basics of python
    • IDLE
      • First python editor I learned about and used
      • A little slow and can’t take in huge chunks of code
    • Visual Studio Code
      • It helped in completing what you were trying to type
      • Very organized

Learning about python

  • Inspiration: Undertale
    • Gameplay
      • Puzzles
      • Fourth Wall Breaking
    • Storyline
      • Morality
      • Remembers EVERYTHING that you do
  • Own Idea
    • Gameplay
      • Puzzles
    • Characters
      • Someone who could identify as anything
      • (unincluded)Mysterious one, etc.
    • Plot
      • HUGE plot intended (lots of gameplay)
      • Role-playing game
        • Where your choices affect the ending
      • Purposeful glitches

Game Idea

  • What is Pygame?
    • Python Library
      • Easily builds games using python
    • Sprites
      • Classes that make controlling components of the game easier
      • Easy to use for collision detection
        • If the player collides with a wall, then it will know to stop
    • Images
      • Easy to load character and background images.

Pygame

  • Sample game from Pygame Library
    • Where you try to eat squirrels smaller than you
    • Avoid larger squirrels
  • Understood how pygame worked

First Game

Changed from Squirrel eat Squirrel ⇒ Chez eat Blob

+a few changes

First Game

Before

After

absolute noob

Final Game

  • Coquelicot
    • Puzzle-solving game
    • RPG
    • Move your character from room to room and interact with objects and solve puzzles.
    • Components
      • Your character
        • Can identify as anything
      • Objects
        • Puzzles
          • Give you puzzles
        • Room items
          • Give you descriptions
      • Walls
        • Can’t phase through ‘em
      • Textbox
        • Where text is displayed

Game Characters

  • Character
    • I designed this character using Procreate (a designing software)
  • Animation
    • This was difficult to incorporate in game
    • Found a tutorial online
    • For every direction I created three images
    • Kept switching everytime character moves
    • Used counter to control switching speed

My MAGICal Experience

  • Easy/Fun
    • Coming up with design
    • Coding became easier and fun as we progressed
      • Making the character move
  • Hard
    • Writing and understanding code at the beginning
  • Learning
    • Code with Python and Pygame
    • How to use IDLE and Visual Studio Code
    • Patience is key
    • How to quit your non functioning code (very frustrating times)
      • When I used IDLE, and my code had an error, it would get stuck in this infinite loop where I didn’t know how to quit it

Thank you!

Click to add speaker notes

Sydney Ernest

6th grade

Hi there my name is sydney ernest and I am currently a sixth grader at GMS

My Mentor

  • She loves dogs
  • She likes hiking, going to gym (dance classes)
  • She came from Taiwan
  • She works for Google

My mentor’s dog Caspian

What Is Cryptography?

Cryptography is the art writing or solving ciphers. It is a method of disguising a message so only the designated receiver can understand it. It is a simple method of changing each letter or word for another letter,number, symbol or word.

26

What is cryptography?

Cryptography is the art writing or solving ciphers. It is a method of disguising a message so only the designated receiver can understand it. It is a simple method of changing each letter or word for another letter,number, symbol or word.

What Is Cryptography?

Cryptography is the art writing or solving ciphers. It is a method of disguising a message so that only the designated receiver can understand it. It is a simple method of changing each letter or word for another letter,number, symbol or word.

My Project: Cryptography decoder

27

    • I am very interested in cryptography and ciphers

    • I learned a new cipher and I have learned debugging tricks

    • I hope to keep on learning python

My project, cryptography decoder

I chose this project because i am very interested in ciphers and encryption

We analyzed the letter frequency in a paragraph and plotted it as a bar graph.

According to the bar graph, The letter E appears 100+ times in the paragraph we used.

Climate change occurs when changes in Earth's climate system result in new weather patterns that last for at least a few decades, and maybe for millions of years. The climate system is comprised of five interacting parts, the atmosphere (air), hydrosphere (water), cryosphere (ice and permafrost), biosphere (living things), and lithosphere (earth's crust and upper mantle). The climate system receives nearly all of its energy from the sun, with a relatively tiny amount from earth's interior. The climate system also gives off energy to outer space. The balance of incoming and outgoing energy, and the passage of the energy through the climate system, determines Earth's energy budget. When the incoming energy is greater than the outgoing energy, earth's energy budget is positive and the climate system is warming. If more energy goes out, the energy budget is negative and earth experiences cooling.

Paragraph From Wikipedia

Frequency analysis

We analyzed the letter frequency in a paragraph and plotted it as a bar graph.

As you can see the letter E appears many more times than all the other letters do which makes sense because E is the most commonly used letter in the English language. The least common letters used in English are Q, J, Z and X which as you can see in this chart those letters were barely used. However if you where to use a shorter sentence or paragraph this analysis would definitely not be as accurate because English is rather inconsistent. However if you enter a paragraph like we did here, you will notice patterns like these

The Caesar Cipher

Original plotting (no shift)

Shift of -3 (same text)

The Caesar cipher is one of the earliest known and simplest methods of encryption. It is a type of substitution in which each letter in the text is 'shifted' a certain number of places down the alphabet. For example, with a shift of -3, D would be replaced by A, E would become B, and so on. This cipher was invented by Julius caesar in around 58 BC but was eventually cracked due to the unstable frequency of letters.

Polyalphabetic Cipher

The polyalphabetic cipher is essentially the same as the caesar cipher but instead of applying one shift you apply multiple shifts. In order for this to work, the people sharing the message would first need to agree on a shift word. Say Snake. In this case s (the first letter of the code word) is the 19th letter of the alphabet n is the 13th letter in the alphabet and so forth. Then the person who wants to encrypt the message would add the shift of each letter to the message they want to encrypt now the person decrypting would subtract the shifts according to the code word. This cipher was also commonly known as vignette.

The One Time Pad

The Caesar Cipher

The One Time Pad

Uniform Frequency

This cipher evolved into the one time pad cipher. A cipher so powerful that even if granted with all the computing power in the world this cipher could not be cracked. The one time pad is a method of encryption that uses randomness to encrypt the message. First off the two people sharing the message would have to agree on a long sequence of random shifts. (generated by rolling a 26 sided dice) then the person encrypting the message would apply that sequence of random shifts and send it openly to the other person without fear it would be cracked.

Demo!

For this project I used a tool called Google Colab. Its a program that allows you to write, execute code and share. I will be demoing my colab creation at my table

What I learned: How to make a bar chart

This piece of code creates the bar graph. It takes the data on how many letters there are in the text and plots it into this graph

You might recognize this graph from before but you might be wondering, how did we make this? The code shown above was written by us. This piece of code creates the bar graph. It takes the data on how many letters there are in the text and plots it into the graph you see here.

What I learned: Range

This piece of code makes sure that when you type your code and shift it, the shifted letters stay in the range of a-z because even though this might seem obvious, some letters if shifted would become an emoji or strange symbol

This piece of code makes sure that when you type your code and shift it, the shifted letters stay in the range of a-z because even though this might seem obvious, some letters if shifted would become an emoji or strange symbol because its out of the A-Z range

Resources

~ Khan academy

~ Code academy

~ How To Think Like A Computer Scientist

I liked khan academy because it had these really comprehensive videos that anyone can understand (favorite)

I liked code academy because it showed me how to code step by step (Okay)

I liked how to think like a computer scientist because it explained the for loop very well (ish)

Thank You!!!

Alexa Nanevicz

7th Grade

Each mentee gets to present for 7-9 mins.
Please add as many slides as you want to, in addition to filling out the ones in this template.

Each slide should have bullet points, not full sentences.

You do not want to read the bullet points, instead tell your story!

My Mentor

  • Juhi Bhatnagar
    • Juhi works at microsoft
    • She lives in…
    • Some of her hobbies are...

Hello! My mentor’s name is Juhi, she went to Rice university and has a masters degree in CS, she has been working at microsoft for a few months, she currently lives in Seattle, and she likes to compose poems, sing, and play the guitar. This is also her second time mentoring with MAGIC

My Project

  • My project is coding a website using HTML, CSS, and Javascript
  • Small website using HTML
  • Different functions in Javascript
  • Js demo
  • Html/CSS/Javascript slideshow

For my project I have made a website where I put photos that I have taken. To start I began the website with html and some CSS to make it look good. Then, I started to learn how to use JavaScript and I made a little demo to test out buttons. Then, I added the code I had learned to the rest of the website. Then, I learned how to make a slideshow using html CSS and JavaScript for the pictures in my website.

  • My experience...
    • I have enjoyed getting to know my mentor
    • I have also enjoyed learning Javascript and more html
  • Somethings I have learned are...
    • The first time you code something it probably won’t work
    • Patience is key

My Experience

I have had a wonderful experience this year; learning about my mentor, and studying html, Javascript, and Css. As you may know, coding is not just write it out and it is done, in some cases it is, but in most cases it is a process of coding and debugging and coding and debugging. This is why it is very important to be patient and to stay relaxed. I learned this when I was having trouble fixing the size on a picture and I got really frustrated, so I relaxed myself and kept trying without getting upset when it didn’t work.

Alright so here is my website I am just going to be taking you through it and explaining what is going on. So first I have my home page which has my Javascript buttons and the html navigation bar. Next, I have my first category which is my animal category, the code is almost the same for my three categories except they have different titles and pictures. Then I have my flower photos code and my scenery code. After that I have my About Me page which just has a little bit of who I am on it. Then, I have my Css and Javascript. Ok so now here is the not code part of my website. As you can see I have my nav bar and my buttons *pause* and then I have my animal photo category *pause* and my plant photo category *pause* and my scenery photo category. And Lastly, here is my About Me page.

Thank you!

Thank you

Aria Kapoor

7th Grade

Each mentee gets to present for 7-9 mins.
Please add as many slides as you want to, in addition to filling out the ones in this template.

Each slide should have bullet points, not full sentences.

You do not want to read the bullet points, instead tell your story!

My Mentor

  • Himica Khurana
    • Works at Spry Health
    • Writes code for medical devices
    • From India, lives in Palo Alto
    • Read, bike, listen to music, watch movies, camp, and go to the beach

My Project

  • My project is about educating people on problems in the world, but in a fun way!
    • Called Did You Know
    • A website and an app
    • Trivia game
    • This project helps people to get educated about world problems.
    • Using HTML and JavaScript.
    • Website supports login|sign up page
    • Game has 4 categories: Rights, Guns, LGBTQ, Ocean
    • Website has a calculator to do addition, subtraction, multiplication and division.

    • Fun making my own project using HTML and javascript
    • Designing my project
    • First milestone: HTML calculator
    • Debugging websites with console
    • Creating arrays
    • Running loops
    • Displaying information from JSON
    • Writing if - else conditions
    • Creating logo

My MAGICal Experience

Guess The Calculation

Elements + Console

Homepage + Website

http://didyouknow.wiki

Sign up

Login

Thank you!

Click to add speaker notes

Laura Chen

8th Grade

Each mentee gets to present for 7-9 mins.
Please add as many slides as you want to, in addition to filling out the ones in this template.

Each slide should have bullet points, not full sentences.

You do not want to read the bullet points, instead tell your story!

My Mentor

  • My mentor is Anne!
    • She works for Google as a software engineer
    • She’s from China 7 years ago.
    • She attended the University of Washington. She double majored in Human Computer Interaction and Psychology.
    • She likes to read, swim, and solve logic puzzles!

My Project

  • What is my project?
    • It is called Danganronpa Remix
    • It is a game played on a website
    • Inspired by Danganronpa ->

  • I chose it because:
    • I wanted to make a more accessible version of a game
    • I wanted to improve my website coding skills

  • Debugging:
    • Save your code
    • Define a function before you use it
    • Don’t forget your semicolons!
    • Use console.log()
    • Look for typos and silly mistakes
    • Keep trying and be patient even when it’s hard

  • It gets easier after a while!


My MAGICal Experience

  • Ideas/Concepts:
    • HTML
    • CSS
    • jQuery
    • Arrays/Lists
    • Conditionals
    • Document Object Model
    • Variables and Functions
    • Loops (for, while)
    • Classes and IDs
    • And/Or statements

My Demo

Thank you!

Click to add speaker notes

Alexis Hodgson

Grade 10

Monte Vista High School

Each mentee gets to present for 7-9 mins.
Please add as many slides as you want to, in addition to filling out the ones in this template.

Each slide should have bullet points, not full sentences.

You do not want to read the bullet points, instead tell your story!

My Mentor

  • About my mentor, Theresa Chong:
    • Freelance Multimedia Tech Journalist
    • Her tech videos and articles have been featured in USA TODAY, Architectural Digest, IEEE Spectrum, and Scientific American
    • She also created a fun food video series and blog, called Chewable Structures
    • Theresa is Canadian and has lived in Chicago, New York City, and now the San Francisco Bay Area

My Project

  • “The History of Cameras”
    • Explanatory of the history of cameras
    • How cameras are used in STEM
  • I selected this project because
    • Cameras play a major role in the STEM
    • Go into depth on how cameras were developed
    • How cameras are useful

My Project

About the Video

    • Ideation
    • Interviewing
    • Creative process
    • Final product (differences, similarities, visions)

In the future, I would like to continue to work on fun videos such as this one

    • I enjoyed working with Theresa and improving my video skills and knowledge
    • Going out and retrieving the footage
    • Setting up interviews
    • How to use editing software to create the videos to my image

My MAGICal Experience-Highlights

    • Exploring new editing softwares such as Adobe Premiere Pro CC
    • Learning about new video language, lighting, and set up
    • Developing time management skills
    • Organizing an outline of the video called a “shot list”

My MAGICal Experience-Lessons Learned

While working on this project with my mentor, I did not have many challenges. The only challenges I went through were finding some footage and setting up time frames to schedule interviews and get new footage.

Additionally, time management was difficult, but it taught me to teach myself about it and how to manage it.

My MAGICal Experience-Challenges

The Final Video

  • In the video you will see:
    • How I used the rule of thirds
    • Camera angling
    • A-roll and B-roll
    • Lower third text box

History of Cameras

Thank you!

MAGIC-Mentee-Presentation 2018-19 (GMS) - Google Slides