Designing Solutions Through Programming - block 6 - September 24 2018 Lesson Notes

From Computer Science Wiki
Revision as of 07:28, 24 September 2018 by Mr. MacKenty (talk | contribs) (Created page with " __NOTOC__ <table cellspacing="10" style="width:100%;"> <tr> <td style="width:50%; margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Class plan.png What are we going to learn today?[edit]

  1. hello class.
  2. please review the following code. This should be about 10 minutes. Please see below the code for further information.
<!doctype html>

<!-- this file is used to teach 9th grade students about input types -->
<html>
<head>
    <title>My forms</title>
    <!-- style sheet will go here eventually -->
</head>
<body>
    <p>Hi there :-) </p>

    <!-- the form element holds all the input elements -->
    <!-- don't worry about method and action yet -->
    <form action="GET" method="#">

        <!-- text input type is used when you want text :-) -->
        <p>Please enter your first name: <input type="text" name="first_name"></p>
        
        <!-- text input type is used when you want text :-) -->
        <p>Please enter your last name: <input type="text" name="last_name"></p>

        <!-- text input type is used when you want text :-) This input type has a PLACEHOLDER attribute-->
        <p>Please enter your favorite city: 
            <input type="text" name="favorite_city" placeholder="Type your city here" ></p>

        <!-- date input type is used when you want date :-)  this input typ eincludes a cool drop-down calendar-->
        <p>Please enter your favorite day ever: <input type="date" name="favorite_day"></p>

        <!-- color input type is used when you want a color. honestly, this is rarely used, but it's fun to look at. -->
        <p>Please enter your favorite color: <input type="color" name="favorite_color"></p>
        
        <!-- password input type is used when you want a password. the result is not copiable. -->
        <p>Please enter your password: <input type="password" name="password"></p>

        <!-- number input type is used when you want a number. lots of options on this one. -->
        <p>Please enter your age: <input type="number" name="my_age" min="2" max="18"></p>

        <!-- this input type confuses students because the formatting is different than other input types. This basically gives
        you a large area to type text. Like all input types, you can add attributes to this like readonly and placeholder to
        this. -->
        <p>Please type your biography:
            <textarea name="biography" cols=40 rows="10"></textarea>
        </p>
        <button type="submit">Click to submit!</button>
        <button type="reset">Click to reset</button>
<!-- always, always, alwyas close your tags!!!!!!! -->
        </form>
    </body>
</html>
  1. There are other inputs you should know about. Please paste the following code into visual studio code and view it in a browser (alt-B).


<!doctype html>

<!-- this file is used to teach 9th grade students about input types -->
<html>
<head>
    <title>My forms</title>
    <!-- style sheet will go here eventually -->
</head>
<body>
    <p>Hi there :-) </p>

    <!-- the form element holds all the input elements -->
    <!-- don't worry about method and action yet -->
    <form action="GET" method="#">

        <!-- text input type is used when you want text :-) -->
        <p>Please enter your first name: <input type="text" name="first_name"></p>
        
        <!-- text input type is used when you want text :-) -->
        <p>Please enter your last name: <input type="text" name="last_name"></p>

        <!-- text input type is used when you want text :-) This input type has a PLACEHOLDER attribute-->
        <p>Please enter your favorite city: 
            <input type="text" name="favorite_city" placeholder="Type your city here" ></p>

        <!-- date input type is used when you want date :-)  this input typ eincludes a cool drop-down calendar-->
        <p>Please enter your favorite day ever: <input type="date" name="favorite_day"></p>

        <!-- color input type is used when you want a color. honestly, this is rarely used, but it's fun to look at. -->
        <p>Please enter your favorite color: <input type="color" name="favorite_color"></p>
        
        <!-- password input type is used when you want a password. the result is not copiable. -->
        <p>Please enter your password: <input type="password" name="password"></p>

        <!-- number input type is used when you want a number. lots of options on this one. -->
        <p>Please enter your age: <input type="number" name="my_age" min="2" max="18"></p>

        <!-- this input type confuses students because the formatting is different than other input types. This basically gives
        you a large area to type text. Like all input types, you can add attributes to this like readonly and placeholder to
        this. -->
        <p>Please type your biography:
            <textarea name="biography" cols=40 rows="10"></textarea>
        </p>


<!-- the input types below are new, you should explore them. My favorite is the datatype. Please just type the letter C to 
see how this input works.  -->

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

<br />

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<fieldset>
    <legend>Choose some monster features</legend>

    <div>
        <input type="checkbox" id="scales" name="feature"
               value="scales" checked />
        <label for="scales">Scales</label>
    </div>

    <div>
        <input type="checkbox" id="horns" name="feature"
               value="horns" />
        <label for="horns">Horns</label>
    </div>

    <div>
        <input type="checkbox" id="claws" name="feature"
               value="claws" />
        <label for="claws">Claws</label>
    </div>

</fieldset>
<br />
<fieldset>
    <legend>Select a maintenance drone</legend>

    <div>
        <input type="radio" id="huey" 
               name="drone" value="huey" checked />
        <label for="huey">Huey</label>
    </div>

    <div>
        <input type="radio" id="dewey" 
               name="drone" value="dewey" />
        <label for="dewey">Dewey</label>
    </div>

    <div>
        <input type="radio" id="louie" 
               name="drone" value="louie" />
        <label for="louie">Louie</label>
    </div>

</fieldset>


<!-- always, always, alwyas close your tags!!!!!!! -->

<button type="submit">Click to submit!</button>
<button type="reset">Click to reset</button>

        </form>
    </body>
</html>


  1. please make a form that works like an application to a club.
  2. your application must use AT LEAST 4 different input types
  3. save your file as clubapplication.html
  4. part of this is to think about what questions you would want to to ask to someone who wants to join a club. There isn't a perfectly correct answer but your answer should make sense.
  5. email me the file (attach the file clubapplication.html to an email).
  6. ask a question on our class discussion board if you have any questions!!


Target.png How am I being assessed today?[edit]

I will assess you formatively today, and make a professional judgement to what extent you understand our learning material. I will use observation, your written work, answers to questions, and contribution to class discussions as data to make my decisions.

I will also ask you to complete a self-assessment which I will use to help me guage how well you think you understand our material in class.

Computer1.png As a computer scientist, you have:[edit]

  • Confidence in dealing with complexity
  • Persistence in working with difficult problems
  • Tolerance for ambiguity
  • The ability to deal with open-ended problems
  • The ability to communicate and work with others to achieve a common goal or solution

Credit.png Credits[edit]