-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
412 lines (359 loc) · 22.4 KB
/
index.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>R511 Task 6</title>
<link rel="stylesheet" href="style.css">
<!-- box icons -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- header design -->
<header class="header">
<a href="#" class="logo">IST R511 <span class="animate" style="--i:1;"></span></a>
<div class="bx bx-menu" id="menu-icon"><span class="animate" style="--i:2;"></span></div>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#history">History</a>
<a href="#people">People</a>
<a href="#models">Models</a>
<a href="#theories">Theories</a>
<a href="#concepts">Concepts</a>
<a href="#reference">Reference</a>
<span class="active-nav"></span>
<span class="animate" style="--i:2;"></span>
</nav>
</header>
<!-- home section design -->
<section class="home show-animate" id="home">
<div class="home-content">
<h1>Hi, we're <span>Tian Zheng and Ayman Elbarbary</span><span class="animate" style="--i:2;"></span></h1>
<div class="text-animate">
<h3>IST & HPT</h3>
<span class="animate" style="--i:3;"></span>
</div>
<p>Here is our site for class R511 at Indiana University. This is a site
that introduces intro ideas in Instructional Technology and Human
Performance Technology. If you have suggestions on the content or
format, please submit a Pull Request on GitHub.
<span class="animate" style="--i:4;"></span>
</p>
<div class="btn-box">
<a href="#about" class="btn">Learn More</a>
<a href="#" class="btn">Contribute</a>
<span class="animate" style="--i:5;"></span>
</div>
</div>
<div class="home-sci">
<a href="#"><i class='bx bxl-facebook'></i></a>
<a href="#"><i class='bx bxl-twitter'></i></a>
<a href="#"><i class='bx bxl-linkedin'></i></a>
<span class="animate" style="--i:6;"></span>
</div>
<div class="home-imgHover"></div>
<span class="animate home-img" style="--i:7;"></span>
</section>
<!-- about section design -->
<section class="about" id="about">
<h2 class="heading">Learn <span>More</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="about-content">
<h3>Let's look into the definition.<span class="animate scroll" style="--i:3;"></span></h3>
<p>Instructional Technology (IT) involves creating, developing, managing, improving, and evaluating
learning resources for educational purposes within educational settings. These settings can be
formal (i.e., schools or higher education institutions) or informal (i.e., MOOCs,
micro-credentials, videos for training or educational purposes).
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
Human Performance Technology (HPT) is a systematic process of improving people’s performance.
It is important to evaluate the people’s performance before starting the process to create a
systematic plan that meets their needs.
<span class="animate scroll" style="--i:4;"></span>
</p>
</div>
</section>
<!-- history section design -->
<section class="about" id="history">
<h2 class="heading">IST & HPT <span>History</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="about-content">
<h3>IST History<span class="animate scroll" style="--i:3;"></span></h3>
<p>
Gagne (1987) states that in the 1800s, German educator John Herbart proposed that educational instructional practices should be based on scientific research. Josef Mayer Rice, an American educator, conducted many studies in the American school systems in the 1890s. During the 1920s, there was a huge interest in empirical methods to help solve problems in education. W.W. Charters and Franklin Bobbitt were pioneers in job-task analysis and objective specification. After that, the Great Depression and the progressive educational movement helped to develop the field. When the US joined World War II, it needed to train many people quickly; many psychologists conducted experimental research to develop training materials. These training materials were derived from research and theory of instructions. After World War II, specifically in the mid-1950s, two factors helped develop the systems approach concept: the programmed instruction movement and the refinement of task analysis procedures. Then, in the early 1960s, another factor helped to develop the systems approach concept, which was the emergence of criterion-referenced testing. At the same time, the concepts of task analysis, objectives, specifications, and criterion-referenced testing were brought together in articles by many scholars, especially Gagne. These scholars helped to develop the terms: “systems development,” “systematic instructions,” and “instructional system” to describe systems approach like what we have today.
<span class="animate scroll" style="--i:4;"></span>
</p>
<h3>HPT history <span class="animate scroll" style="--i:3;"></span></h3>
<p>
Stolovitch et al. (1999) state that the roots of Human Performance Technology go back to Skinner's work on how small-step instruction and extensive feedback could significantly enhance learning. They add that Skinner’s cause-and-effect discoveries developed the field (e.g., machine teaching (in the 1950s), instructional design process (in the 1960s), and computer-assisted instruction (in the 1960s). They highlighted that developing research and theory in other fields helped develop the Human Performance Technology (HPT) field (e.g., systems theory, learning psychology, instructional systems design, cognitive engineering, information technology, ergonomics and human factors engineering, psychometrics, feedback systems, and organizational development. They add that some practitioners who came from other fields and served as managers helped develop the field with new ideas.
<span class="animate scroll" style="--i:4;"></span>
</p>
<div style="text-align: center;">
<img width="800" src="images/history1.png">
</div>
<div style="text-align: center;">
<img width="800" src="images/history2.png">
</div>
</div>
</section>
<!-- people section design -->
<section class="education" id="people">
<h2 class="heading">Influential <span>People</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="education-row">
<div class="education-column">
<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 1904 - 1990</div>
<h3>B.F. Skinner </h3>
<p>A prominent psychologist, Skinner's work in operant conditioning
laid the groundwork for programmed instruction and teaching
machines, offering a systematic method to deliver education using
reinforcement principles.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 1916 - 2002</div>
<h3>Robert M. Gagné</h3>
<p>Gagné's "Conditions of Learning" theory revolutionized instructional
design. He identified the different stages through which the learning
process occurs and proposed nine instructional events to support these
stages, fostering effective learning strategies.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 1927 - 1995</div>
<h3>Thomas F. Gilbert</h3>
<p>Gilbert was a pivotal figure in performance improvement, distinguishing
between what he called “behavioral engineering” and “worthy performance.”
His work emphasized the importance of environmental factors in enhancing
human performance.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 1946 - 2023</div>
<h3>Roger Schank</h3>
<p>An artificial intelligence theorist and cognitive psychologist, Schank's work
on learning theory and its application in e-learning has been influential. His
emphasis on storytelling and the importance of cognitive understanding in learning
has been seminal.</p>
</div>
</div>
<span class="animate scroll" style="--i:3;"></span>
</div>
</div>
</div>
</section>
<!-- models section design -->
<section class="about" id="models">
<h2 class="heading">IST <span>Models</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="about-content">
<h3>Here are some IST Models<span class="animate scroll" style="--i:3;"></span></h3>
<p><b>ADDIE Model</b>: It is an acronym for Analysis, Design, Development, Implementation, and Evaluation. Reigeluth and An (2021) state that ADDIE shows the generic, essential steps of the ID process.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>The Morrison, Ross, and Kemp Model</b>: Introduced by Marrison, Ross, and Kemp (2010) and has nine elements:
1. Instructional Problems
2. Learner Characteristics
3. Task Analysis
4. Instructional Objectives
5. Content Sequencing
6. Instructional Strategies
7. Designing the Message
8. Development of Instruction
9. Evaluation Instruments
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>The Dick and Carey Systems Approach Model</b>: Introduced by Dick and Carey (2014) According to Reigeluth and An (2021), this model is viewed as a system that includes the learners, instructors, instructional materials, and learning environments that interact with each other.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Rapid Prototyping</b>: According to Reigeluth and An (2021), it was proposed in response to the criticism that the ID models were too linear. The Rapid Prototyping was effective for large-scale technology projects.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Design Layering</b>: Seven design layers of instructional design introduced by Gibbons and Rogers (2009):
1. Content layer
2. Strategy layer
3. Message layer
4. Control layer
5. Representation layer
6. Media-logic layer
7. Data management layer
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>The Pebble-in-the-Pond Model</b>: Developed by David Merrill (2002) to cast a pebble in the design pond. It consists of a series of expanding activities.
1. Specify a problem.
2. Progression of problems.
3. Component analysis.
4. Instructional strategy.
5. Interface design.
6. Production.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Holistic: 4D Model</b>: Introduced by Reigeluth and An (2021) and consists of three levels of design:
1. Top-level (fuzzy vision)
2. Mid-level
3. Lower-level
4D stands for (Define- Design- Develop- Deploy).
<span class="animate scroll" style="--i:4;"></span>
</p>
</div>
</section>
<!-- theories section design -->
<section class="education" id="theories">
<h2 class="heading">Learning <span>Theories</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="education-row">
<div class="education-column">
<h3 class="title">Theory<span class="animate scroll" style="--i:2;"></span></h3>
<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> John B. Watson, B.F. Skinner</div>
<h3>Behaviorism </h3>
<p>Learning is viewed as a change in behavior, and the environment shapes behavior through reinforcement.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> Jean Piaget, Jerome Bruner, David Ausubel</div>
<h3>Cognitivism</h3>
<p>Learning is a process of acquiring and organizing knowledge, emphasizing internal mental processes.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> Lev Vygotsky, John Dewey</div>
<h3>Constructivism</h3>
<p>Learners actively construct their own understanding and knowledge of the world, through experiencing things and reflecting on those experiences.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i>George Siemens</div>
<h3>Connectivism</h3>
<p>Learning is a process of connecting specialized nodes or information sources; it is more important to navigate and grow these connections than to simply know content.</p>
</div>
</div>
<span class="animate scroll" style="--i:3;"></span>
</div>
</div>
</div>
</section>
<!-- concepts section design -->
<section class="about" id="concepts">
<h2 class="heading">Important <span>Concepts</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="about-content">
<h3>Here are some important concepts from task 5 and we would like to include them on the website.<span class="animate scroll" style="--i:3;"></span></h3>
<p>
<b>Analysis</b>: The systematic process of examining learning needs and goals, and determining the appropriate strategies and resources.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Content analysis</b>: The process of choosing the content to be included in the design.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Context analysis</b>: Identifying all the aspects that may affect the instruction design.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p><b>Education</b>: an interactive process of teaching, and learning at school, university, or home.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Educational/ Instructional Technology</b>: The theory of and systematic practice to design, develop, and evaluate any processes and resources for learning.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>E-Learning</b>: To use digital resources on formalized teaching and learning.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Game-based learning</b>: Using games in educational settings to improve the effectiveness and efficiency of learning.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Gamification</b>: Using game-design elements and game principles in non-game contexts.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Human Performance Technology</b>: The field that uses a set of methods and strategy for realizing opportunities related to the performance of people.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Instruction</b>: a set of cooperative tasks with certain learning objectives that aims to facilitate the learning process and acquiring certain information.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Instructional Design</b>: The process of translating theories of instruction and learning into instructional plans and learning activities.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Instructional Systems Design</b>: The field of creating instructional experiences that make the acquisition of knowledge and skill more efficient, effective, and appealing.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Learner analysis</b>: A method to know the learners’ prior knowledge, characteristics, and level to facilitate the design.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Learning Management System</b>: A software for administering, documenting, and delivering of educational courses, learning and development programs.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Training</b>: the process of gaining certain skills or information for a particular task or job.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
<b>Technology in Education</b>: Using technology to facilitate and enhance the learning process and help learners to achieve the target goals.
<span class="animate scroll" style="--i:4;"></span>
</p>
</div>
</section>
<!-- reference section design -->
<section class="about" id="reference">
<h2 class="heading"><span>Reference</span><span class="animate scroll" style="--i:1;"></span></h2>
<div class="about-content">
<p> McElwain, C. A. (2012). Considering the impact of change when using a Human Performance Technology (HPT) approach with an existing instructional coaching intervention (Order No. 3508901).
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
Reigeluth, C. M., & An, Y. (2021). Merging the instructional design process with learner-centered theory: The holistic 4D model. Routledge.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
Anglin, G. (2011). Instructional technology: Past, present, and future. Libraries Unlimited.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>
Stolovitch, H. D., Keeps, E. J., Stolovitch, H. D., Erica J., & Rodrigue, D. (1999). Human Performance Technology. In Handbook of Human Performance Technology: Improving individual and organizational performance worldwide. essay, Jossey-Bass/Pfeiffer.
<span class="animate scroll" style="--i:4;"></span>
</p>
<p>Gagné, R. M. (1987). Instructional Technology: Foundations. Erlbaum.
<span class="animate scroll" style="--i:4;"></span>
</p>
</div>
</section>
<!-- footer design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2023 | Designed based on Nishat Mahmud | Maintained by Tian Zheng and Ayman Elbarbary | All
Rights Reserved</p>
<span class="animate scroll" style="--i:1;"></span>
</div>
<div class="footer-iconTop">
<a href="#"><i class='bx bx-up-arrow-alt'></i></a>
<span class="animate scroll" style="--i:3;"></span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>