/STEAM-guessing-game

Primary LanguageJavaScript

Guessing Game for the STEAM Symposium at Westlake Highschool

Instructor Lesson Plan - topics to cover

Lecture/Labs

  1. Building blocks of making a web application/game (slides)
    • HTML
    • CSS
    • JavaScript
    • How do these three technologies work together at a high level?
  2. HTML (Live)
    • Some HTML syntax (headers, divs, lists)
    • 10 min LIVE CODE
      • Create an html document
      • add a header to the body
      • open the document in the browser
      • add another element and refresh browser
      • have the students experiment on their own machines for 5 min
  3. CSS (Live)
    • cover tags, ids, and classes
    • 10 min LIVE CODE
      • Add background color/image using the body tag
      • add color or center a header using an id
      • something using a class
      • connect css to html using the link tag
  4. JavaScript (Live)
    • There's no way we can cover much javascript. This is really just an introduction to programming at a high level.
    • Biggest topics for this project will be
      • basic variables
      • if else
      • functions (using them, not defining them)
  5. Introduce workshop (Live)
    • Show the final product (open from solution branch, also is hosted here) and walk through the functionality
    • Show the files they will be using, along with the workshop text.
    • Walk through at a high level the functions that they can use in game.js, and where they will write their code
    • If there is time, you can pseudocode out the checkGuess function with them (there is a flowchart in the slides and workshop)
    • All solutions are given to them as they go through the workshop, so they can continue at home.

Workshop

  • Students will:
    • Add ids and classes to html elements to add styles from the premade CSS file
    • Fill out the checkGuess function with the game behavior. This includes calling pre-made functions and using if else conditional logic

After the workshop

If students would like to keep their work, they can email themselves their files. If they finish, and want the finished product to show off--they can email the files also to their instructor, who can create a github repo and host to Github Pages.