Coder Social home page Coder Social logo

js-toy-problems's Introduction

Concept for New Toy Problems

The intro and medium folders are just random toy problems that I have collected but are not really part of my new plan specifically. Part of my goal with this is to eliminate "advanced toy problems" and make it so every problem will have a variety of approaches and ways to optimize them.

Problem Solving

Below are steps that should be used for teaching how to solve toy problems. It is vitally important to use this on every toy problem you do from scratch. This teaches them how to break down a toy problem and identify its parts. This is also the exact same steps that should be followed when doing white board problems, Make sure the students know that! Help them to see the value in being clear with your communication and planning. Some steps seem to be not worth while but if a student is struggling with toy problems you should be able to help them see that their problem has to do with one of the steps.

Doing these steps will add extra time onto the problem so you may want to give them 10 minutes to work before you jump in.

// Step 1: Clarify - Understand the question

// Step 2: Create sample data

// Step 3: Solve Sample Data

// Step 4: Function Signature

// Step 5: List code constructs

// Step 6: Pseudo Code

// Step 7: Solve

Broken Problems

Every one of these problems do not work. With each one you can solve it by only modifying existing lines (make sure to communicate this to the students), there is no need to write more lines of code. The purpose of this is to teach the students how to become good trouble shooters and develop debugging skills/mindset. A trouble shooting mindset is more like a way of life than just a coding idea. These troubleshooting steps are universal and apply to any subject.

I recommend leaving these steps on some kind of 'note' software so it can always be visible and on top of your coding window, and you can write down your thoughts as you go along. This also help students see all the steps instead of trying to keep it in their heads.

Typically the process starts at the Observation step. You may observe, "my code does not work" and that is a viable and helpful observation. From there you need to ask questions. Questions like, what does this line really do? One of the hardest things to question is your own assumptions, and even harder is realizing you are making assumptions. The goal from here is to get confirmations of your assumptions but performing experiments that will give you hard evidence to either prove or disprove your theories.

  1. Observation

  2. Question your assumptions

  3. Form Hypothesis

  4. Experiment

  5. Analysis

  6. Conclusion

HTML

The HTML has a few sites drawn with boxes around them progressing through how to build a layout and more importantly how to think in terms of boxes and sections. If you use this I would stress that they should really just use divs and not worry about the actual content but more the layout and how to position things.

Cart

The idea of this one was to try and spend multiple days spread over a few weeks where they built something that felt more real and usable. Also this would help for when students want to build a cart and now you could have them pull up their toy problems for a starting point.

Teaching topics

This is a list of topics I want to teach and to find a toy problem that focuses on teaching each one specifically. I just felt like our toy problems most of the time end up just being the same things over and over. This ensures variety.

This is in no way a compleat or finished list. if there is a () next to the title then it is a brief description of a toy problem that could help teach that topic. We should make it clear before hand what method or words they should search so they can do the toy problem.

  • for loop to modify data (map)
  • working with an array of objects
  • for in/square brackets (loop through every property)
  • if and / or (if male and 18)
  • double for loop
  • SQL Schema

    Later in the I would like to do one or who Schema toy problem. So specifically how to build a table for the data you need. Not how to select from it. We spend enough time on how to get data, but not how to structure data.

    Purposed Toy Problem

    Week 1

    • Day 1: none
    • Day 2: 45 Minute Fizz Buzz With '8 step Walk through'
    • Day 3: Broken - Swap Case
    • Day 4: Broken - Array's and Reference(In prep for setState/immutability)
    • Day 5: None

    Week 2

    • Day 1: This and Context(In prep for props/binding)
    • Day 2: Bob Ross Family Tree (in prep for axios)
    • Day 3: Broken - Vowel Counter
    • Day 4: Cart - class setup/Remove From Cart
    • Day 5: None

    Week 3

    • Day 1: None
    • Day 2: Cart - Calculate Total
    • Day 3: Cart - Update Quantity
    • Day 4: Broken - Largest Even
    • Day 5: None

    Week 4

    • Day 1: Object.Assign(In prep for Redux)
    • Day 2: Cart - Add to Cart
    • Day 3: Average Finder
    • Day 4: Broken - Bus Tracker
    • Day 5: None

    Week 5

    • Day 1: HTML Adobe(In prep for Media Queries)
    • Day 2: Palindrome
    • Day 3: Letter Frequency
    • Day 4: None (Do the wireframe project planning for all day review)
    • Day 5: None

    Week 6

    • Day 1: None (PP kick off)
    • Day 2:
    • Day 3:
    • Day 4:
    • Day 5: None

    js-toy-problems's People

    Contributors

    dougglez avatar rasbandit avatar

    Watchers

     avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.