-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathassignment-4.html
124 lines (114 loc) · 6.35 KB
/
assignment-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>IML 400 Spring 2015 Assignment 4</title>
<style>
body{
background: #222;
color:#ddd;
margin:0;
}
a{
font-weight:bold;
text-decoration:none;
color:crimson;
}
a:link, a:visited, a:active{
font-weight:bold;
text-decoration:none;
color:crimson;
}
a:hover{
color:gold;
}
ol h3{
margin:0 0 10px 0;
}
#wrapper{
width: 640px;
margin:40px auto;
margin-bottom:0;
bottom:0;
}
#assignment{
font-size:21px;
}
.due-date{
color:gold;
}
strong{
color:gold;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="assignment">
<h2><a href="index.html">IML 400 Spring 2015</a></h2>
<h2>Assignment 4: Dive into Javascript</h2>
<ol>
<li>Create an interactive story that requires user input. <a href="http://en.wikipedia.org/wiki/Mad_Libs">Mad Libs</a> or <a href="http://en.wikipedia.org/wiki/Exquisite_corpse">Exquisite Corpses</a> are two directions you can take but feel free to explore your own ideas.</li>
</ol>
<p>
The following are two simple code examples that illustrate some functionality for user inputs and string manipulation.
</p>
<ol>
<li><a href="live-inputs.html">Live text input and string manipulation</a> - introducing the <a href="http://html5demos.com/contenteditable">contenteditable</a> attribute</li>
<li><a href="moving-strings">Slightly more complex string manipulation</a> - activated on click. View the source code and study the parsing techniques to build a usable structure from a plain text file. How would I go about it if I wanted to <a href="http://en.wikipedia.org/wiki/Sanitization_%28classified_information%29">redact</a> out specific words or sentences from a text? Would I need more structure? What would it take to build an interactive interface that redacts words or blocks of words on click?</li>
<li><a href="moving-strings/character-stream.html">A character stream</a> with paragraph detection</li>
</ol>
<h2>Due Date</h2>
<p>
<span class="due-date">Monday, February 23rd, 9:00am.</span>
</p>
<p>
<h2>Readings</h2>
</p>
<ol>
<!--
<li>Dan Gardner and Mike Treff - The Next Big Thing In Responsive Design - <a href="http://www.fastcodesign.com/3036091/the-next-big-thing-in-responsive-design/">http://www.fastcodesign.com/3036091/the-next-big-thing-in-responsive-design/</a></li>-->
<li>Eloquent Javascript Chapter 2: <a href="http://eloquentjavascript.net/chapter2.html">Basic JavaScript: values, variables, and control flow</a></li>
<li>Eloquent Javascript Chapter 3: <a href="http://eloquentjavascript.net/chapter3.html">Functions</a></li>
<li>Eloquent Javascript Chapter 6: - <a href="http://eloquentjavascript.net/06_object.html">The Secret Life of Objects</a></li>
<li>Eloquent Javascript Chapter 11: <a href="http://eloquentjavascript.net/chapter11.html">Web programming: A crash course</a></li>
<li><a href="http://learn.jquery.com/">Learn JQuery</a></li>
<li><a href="http://learn.jquery.com/about-jquery/how-jquery-works/">How JQuery works</a></li>
<li><a href="http://learn.jquery.com/code-organization/">JQuery Code Organization</a></li>
<li>Javascript is Sexy: <a href="http://javascriptissexy.com/javascript-objects-in-detail/">Javascript Objects in Detail</a></li>
</ol>
<p>
Please prepare a report where you compare and combine insight from all this readings to explain the following concepts: Function, object, event, and Document Object Model.
</p>
<p>
<h2>Readings Due Date</h2>
<span class="due-date">Monday, February 23rd, 9:00am.</span>
</p>
<p>
<h2>Additional Resources</h2>
<ol><h3>Javascript</h3>
<li><a href="http://www.json.org">JSON.org</a> - Introducing JSON (JavaScript Object Notation)</li>
<li><a href="http://eloquentjavascript.net/">Eloquent Javascript</a> - Free online book with interactive tutorials</li>
<li><a href="http://en.wikipedia.org/wiki/JavaScript">Javascript History</a></li>
<li><a href="http://jquery.com/">JQuery</a></li>
<li><a href="http://jqueryui.com/">JQuery UI</a></li>
<li><a href="http://jsfiddle.net/">JSFiddle</a> - Livecoding environment</li>
<li><a href="http://codepen.io/">CodePen</a> - Livecoding environment</li>
</ol>
<ol><h3>Dynamic or Interactive Stories</h3>
<li><a href="http://scottmccloud.com/1-webcomics/carl/3a/02.html">The original Carl strip</a> by Scott McCloud (from page 84 of Understanding Comics)</li>
<li><a href="http://curamag.com/issues/2014/11/30/renderings">Choose your own Carl</a> by Scott McCloud</li>
<li><a href="http://nickm.com/memslam/">Memory Slam</a> a selection of Poetry Programs</li>
<li><a href="http://curamag.com/issues/2014/11/30/renderings">The Renderings Project</a> a selection from CURA Magazine</li>
<li><a href="http://nickm.com/poems/through_the_park.html">Through the Park</a> by Nick Montfort</li>
<li><a href="http://pr-if.org/play/">Interactive Fiction Games</a> a selection from the The PR-IF</li>
<li><a href="http://storm.usc.edu/~aswenson/final2/demixnewest.html">Soothslayer Electric Tarot</a> by Alexander Swenson</li>
</ol>
</p>
<p style="text-align:center; margin:0; padding:0;">
<img src="fall-2012/images/robobaby.png" style="display:block; margin:auto;"/>
</p>
</div>
</div>
</body>
</html>