WE MADEZ A FUNNY

U PLAE TIC-TAC-TOE

BUT MAEK WIT LOLCODE
## Inspiration

It can be difficult for parents to teach and effectively communicate the importance of being independent to their children. All children should eventually be able to support themselves and have the necessary skills to be responsible. A hit Japanese TV show, “Old Enough” which was recently added to Netflix displays children of ages 2-5 years going on tasks outside the house, navigating through the different neighborhoods, and doing the errand given to them by their parents completely alone. Research has shown that these errands are of extreme importance in the development of the child’s social and problem-solving skills. As mentioned in an NPR article:

>
> "Autonomous play has been a really important part of child development throughout human evolutionary history," says behavioral scientist Dorsa Amir at the University of California, Berkeley. "And actually, it was a feature of American society until relatively recently as well."
> This inspired us to create this fun and interactive game for children to have a sort of tutorial for what to expect in the real world and for dealing with common scenarios that they might face.
>
>
>

## What it does

My First Errand is primarily intended for young children that are looking to start, well, their first errand. It helps kick start the learning process to become a responsible, independent individual. It does so in a fun, and interactive way using child-friendly graphics and characters all children are familiar with. There are four errands to complete which are “Learn Your Address”, “Stranger Danger”, “Let’s Get Groceries” and “Call Home”. These are the four most important errands and skills we felt are most important for children to learn. It helps them be safe and resolve any potential danger they can encounter.

My First Errand begins with a home screen where the four main characters of the application are presented to the child playing the game, creating a sense of familiarity and recognition for the important errands. It then transitions them to a dashboard where the child can navigate and start each of the four games.

“Learn Your Address” is a game where the child enters their home address (Obtained from a parent/guardian) and does a memory recall game through a multiple choice mini-game. “Stranger Danger” is another game where the child is informed of safe members in the community they can confidently approach for help. “Let’s Get Groceries” helps teach children how to look for items to buy in a grocery store and use basic addition to pay for the items, ultimately, teaching them how to purchase products. Finally, “Call Home” has the child input their home phone number (Which is also obtained from a parent/guardian) and they again memorize it through a multiple choice mini-game encouraging recall.

## How we built it

My First Errand was built on the React Framework. We wanted something interactive for kids to learn how to run their first errand in a way that didn’t feel like a chore. The reason why we used React was that it is good at one thing, and that is separating a piece of state and allowing us to make the application interactive with it. We used Tailwind CSS for quick prototyping of styles and React Router for navigation between pages. Lastly, Google Cloud Firebase was used for our sign-up system in the React application.

## Challenges we ran into

Of course, the initial challenge we had was thinking of an idea. It took a night of sleeping on ideas and many potential ideas bounced around but this idea was chosen because we believed it would have a great impact on children. Another challenge was technical issues with the development environment for React and GitHub but rather than being set back, the members worked on other elements of the project such as the design mockup and coding functionalities in a similar language. We also worked on merge conflicts together by utilizing the GitHub Desktop application, minimizing the overall merge conflict.

## Accomplishments that we're proud of

We are extremely proud that we came up with an idea for an application and the beginning of the app itself that can help make learning fun for kids and promote safety. We believe this will make a great impact on health, safety, and education for the youth and promote independence at a young age.

We are also proud that we were able to generate an idea, create a beautiful prototype and have the foundation for an application, in a short period of time. We reinforced our communication, collaboration, and organizational skills as well as developed our skills in JavaScript, React, Tailwind as well as Figma.

## What we learned

We learned about how difficult it is to teach such important skills that are common knowledge for adults, to children beginning to be independent. We also learned how to develop an application with React and explore the design capabilities of Figma.

## What's next for My First Errand

Due to time constraints, we weren't able to include all of the errands we had hoped to have in our mockups. The My First Errand team hopes to continue development in the near future.
## Inspiration

When struggling to learn HTML, and basic web development. The tools provided by browsers like google chrome were hidden making hard to learn of its existence. As an avid gamer, we thought that it would be a great idea to create a game involving the inspect element tool provided by browsers so that more people could learn of this nifty feature, and start their own hacks.

## What it does

The project is a series of small puzzle games that are reliant on the user to modify the webpage DOM to be able to complete. When the user reaches the objective, they are automatically redirected to the next puzzle to solve.

## How we built it

We used a game engine called craftyjs to run the game as DOM elements. These elements could be deleted and an event would be triggered so that we could handle any DOM changes.

## Challenges we ran into

Catching DOM changes from inspect element is incredibly difficult. Working with craftyjs which is in version 0.7.1 and not released therefore some built-ins e.g. collision detection, is not fully supported. Handling various events such as adding and deleting elements instead of recursively creating a ton of things recursively.

## Accomplishments that we're proud of

EVERYTHING

## What we learned

Javascript was not designed to run as a game engine with DOM elements, and modifying anything has been a struggle. We learned that canvases are black boxes and are impossible to interact with through DOM manipulation.

## What's next for We haven't thought that far yet

You give us too much credit.

But we have thought that far. We would love to do more with the inspect element tool, and in the future, if we could get support from one of the major browsers, we would love to add more puzzles based on tools provided by the inspect element option.