KA-BOOM!

Ka-boom! is a free typing game for children. The main objectives of this game are for students to have an easily accessible typing tool, and to have a fun learning experience.

Currently, there are three levels to play.

• Level One - Words need to be correctly typed within 5 seconds
• Level Two - Words need to be correctly typed within 3 seconds
• Level Three - Words need to be correctly typed within 1 second

Preview:

Technology and Languages Used:

HTML, CSS, and Javascript were used to create Kaboom!

Learning Objectives:

* Associating letters on the screen to a keyboard
* Increase students' words per minute
* Increase students' exposure to vocabulary 

Personal Tech Objectives:

- [x] Input field
- [x] "Click" function (Hitting "Enter/Return")
- [x] Timer
- [x] List of words that they can correctly type
- [x] Levels
- [ ] Connect an API

Approach and Process:

I was excited to test myself and use what I have learned in class to build Project #1. My approach in designing and creating Ka-boom! was to give myself small goals so that I would not feel overwhelmed and stressed throughout the process. I felt that by making my goals small allowed me to achieve and celebrate each small victory, which helped to keep me focused and motivated.

My thought and design process looked somewhat like this:

IDEA -> GAME NAME -> WIREFRAME -> BASIC HTML -> BASIC CSS -> JS -> HTML/CSS/JS Edits

Just like with writing a book, I feel like it will never be fully complete, and I could forever be editing it to "perfection", but I know that that would be insanity.

Issues: Solved [x] and Unsolved [ ]

- [ ] Finding an API was difficult, and once found, had limitations. Ultimately, it was inaccessible due to my lack of knowledge and understanding in knowing how to implement and API with a key and authorization into my code.
- [x] Using the same form to create more levels caused problems when the correct words were typed, but was remediated with the help of my instructor.
- [x] Reset button works, but through "onclick" in the html. Ideally would like the function to work through JS.
- [ ] The "incorrect word" sound effect carries over to the music and submit button.
- [ ] Background music will not start immediately when opening the page. In the console, it states "Uncaught (in promise) DOMException." When googling, it seems to be a common occurrence, and there is a workaround/solution that I have yet to implement.

Future Improvements/Considerations to Include

* Score & Highest Score (For this version, it was intentionally left out)
* Creating an API that aligns to PK-12 Common Core State Standards
* Ability to click through words they've collected which would link to definitions, images, and examples of usage

Credits:

Sound Effects:

• Title: Laser Canon

  • Creator: Mike Koenig
  • Website: Soundbible.com

• Title: Laser2.wav

  • Creator: Sergenious
  • Website: Freesound.org

• Title: Xylophone 1 Basic

  • Creator: SpiceProgram
  • Website: Freesound.org

Background Music:

• Title: Realm of Fantasy
  • Creator: Eric Matyas
  • Website: Soundimage.org

Background Images:

• Title: Twinkle Night 8, 2017

  • Creator: Produced by LematWorks
  • Website: lematworks.myportfolio.com

• Title: Television

  • Creator: N/A
  • Website: Kisspng.com