Designing Solutions Through Programming - block 6 - September 20 2018 Lesson Notes: Difference between revisions
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...") |
Mr. MacKenty (talk | contribs) |
||
Line 10: | Line 10: | ||
<!-- ======================================================================================= --> | <!-- ======================================================================================= --> | ||
# hello class. | # hello class. | ||
# please review the following code | # please review the following code. This should be about 10 minutes. Please see below the code for further information. | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
Line 63: | Line 63: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
# 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). | |||
<syntaxhighlight lang="html"> | |||
<!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> | |||
</syntaxhighlight> | |||
<!-- ======================================================================================= --> | <!-- ======================================================================================= --> | ||
<!-- ============================== IN CLASS LEARNING ACTIVITIES ========================== --> | <!-- ============================== IN CLASS LEARNING ACTIVITIES ========================== --> |
Revision as of 20:49, 18 September 2018
What are we going to learn today?[edit]
<!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>
<!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>
|
|
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. |
|
As a computer scientist, you have:[edit]
|
|
Credits[edit] |