forked from woof84/creates
-
Notifications
You must be signed in to change notification settings - Fork 2
/
c.html
359 lines (345 loc) · 25.7 KB
/
c.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
---
layout: page
---
<!-- ****** -->
<!-- Explain - the introductory/overview box -->
<!-- ****** -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded">
<!-- change to ml-auto to push right -->
<div class="section-heading mb-0">
<h2 class="mb-0">
<span class="section-heading-upper">C: Concept Map</span>
<span class="section-heading-lower">Concept Map The Introduction</span>
</h2>
<div class="mt-2" style="text-transform: none">
<p>You can learn so much about an article from the introduction! Here's a step-by-step process for getting the most out of the article intro and making an excellent concept map:</p>
<!-- Steps, Part 1 -->
<div class="card mb-3">
<!-- Step 1.1 -->
<div class="row no-gutters">
<div class="col-md-4">
<!-- Image -->
<a data-toggle="modal" data-target="#step-1-1-info" href="#"><img src="{{ '/img/c_definitions_and_summary.png' | absolute_url }}" class="card-img" alt="Abstract representation of definitions and summary"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h3>Getting Ready to Concept Map</h3>
<p><em>To make a great concept map, you will need to do a careful reading of the introduction. Here's how to do it:</em></p>
<ol>
<li>Read the introduction.</li>
<li><strong>Definitions: </strong>On a notecard or piece of paper, define key terms and any unfamiliar concepts. Check out <a href="go.galegroup.com/ps/dispBasicSearch.do?userGroup&prodId=GVRL" target="_blank">Gale Virtual Reference Library</a> or <a href="https://www.wikipedia.org/" target="_blank">Wikipedia</a> for background info on unfamiliar concepts in your article.</li>
<li><strong>Context: </strong>Write a quick summary in your own words: What do the researchers say about previously conducted research? What do the researchers say about questions or problems that have not yet been addressed?</li>
</ol>
<!-- <p class="card-text text-right"><a data-toggle="modal" data-target="#step-1-1-info" href="#"><small class="text-muted">See an example ></small></a></p>-->
</div>
</div>
</div>
</div><!-- closes out the card -->
<!-- Steps, Part 2 -->
<div class="card mb-3">
<!-- Step 1.2 -->
<div class="row no-gutters">
<div class="col-md-4">
<!-- Image -->
<a data-toggle="modal" data-target="#step-1-2-info" href="#"><img src="{{ '/img/c-annotated-article.png' | absolute_url }}" class="card-img" alt="Abstract representation of a concept map"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h3>Annotate the introduction</h3>
<ol>
<li><strong>Experimental Variables: </strong> Highlight the experimental variables mentioned in the introduction.</li>
<li><strong>Hypotheses: </strong> Circle the hypotheses or questions addressed in the article.</li>
<li><strong>Methodologies: </strong> Underline the methodologies or experimental approaches that were used to answer the questions or test the hypotheses.</li>
</ol>
<!-- <p class="card-text text-right"><a data-toggle="modal" data-target="#step-1-2-info" href="#"><small class="text-muted">See an example ></small></a></p>-->
</div>
</div>
</div>
</div><!-- closes out the card -->
<!-- Steps, Part 2 -->
<div class="card mb-3">
<!-- Step 2.1 -->
<div class="row no-gutters">
<div class="col-md-4">
<!-- Image -->
<a data-toggle="modal" data-target="#step-2-1-info" href="#"><img src="{{ '/img/c-abstract-concept-map.png' | absolute_url }}" class="card-img" alt="Abstract representation of a concept map"></a>
</div>
<div class="col-md-8">
<div class="card-body">
<h3>Draw your concept map</h3>
<p><em>"The concept map helps me organize the background knowledge and makes it easier for my brain to link the concepts through a visualization." - A successful CREATES student</em></p>
<p>Drawing a concept map helps you visualize the background information and rationale for the experiment. In other words, your concept map will help you:</p>
<ul>
<li>identify what was already known before the experiment was conducted</li>
<li>see how the relationships between these ideas</li>
<li>and, most importantly, understand why the scientists wanted to conduct the experiment</li>
</ul>
<p>Here's how to do it:</p>
<ol>
<li>Get out a large, blank piece of paper and some pens and pencils.</li>
<li>Start building your concept map by placing one to three of the largest and most general concepts at the top or in the middle of the page.</li>
<li>Select two to four subconcepts to place under each general concept.</li>
<li>Connect the concepts by lines and label the lines with one or a few linking words.</li>
<li>Make a 2nd draft</li>
<ul>
<li>Look for opportunities to reorganize concepts and redefine relationships! You may also decide to move concepts around on the page.</li>
<li>Look for relationships between concepts that run in different directions to connect ideas in different ways </li>
</ul>
</ol>
<!-- <p class="card-text text-right"><a data-toggle="modal" data-target="#step-2-1-info" href="#"><small class="text-muted">See an example ></small></a></p>-->
</div>
</div>
</div>
</div><!-- closes out the card -->
<!-- *** closing out this section *** -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- *** now this section is closed *** -->
<!-- ****** -->
<!-- Demonstrate provide at least two annotated examples - can be slideshow, h5p, ... -->
<!-- ****** -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded">
<!-- change to ml-auto to push right -->
<h2 class="section-heading mb-0">
<span class="section-heading-upper">What makes a concept map successful?</span>
<span class="section-heading-lower">Real student concept maps</span>
</h2>
</div>
</div>
<!-- tab card -->
<div class="row justify-content-center mt-5 mb-5">
<div class="col-12 col-sm-12 col-md-11 col-lg-10">
<div class="card">
<div class="card-body">
<!-- if you include something here it will be at the top of all tabs -->
<iframe src="https://uclabruinlearn.h5p.com/content/1291730768355664808/embed" width="688" height="383" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *" aria-label="Concept Map Examples"></iframe><script src="https://uclabruinlearn.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
<div class="tab-content mt-3 text-center">
<h3 class="text-center">More Concept Map Examples</h3>
<p>See below for some examples of concept maps created by two different students for the same scientific article (linked for your reference). Notice that there is no one right way to organize your thoughts!</p>
<!--Moon et al. 2020-->
<h4 class="text-center mb-4"><a href="https://pubmed.ncbi.nlm.nih.gov/32482165/" target="_blank">Moon et al. 2020</a></h4>
<div class="row align-items-center">
<div class="col-sm mb-5">
<a href="{{ '/img/examples/Moon2020-C-1.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Moon2020-C-1.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
<div class="col-sm mb-5">
<a href="{{ '/img/examples/Moon2020-C-2.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Moon2020-C-2.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
</div>
<!--Tsao et al. 2018-->
<h4 class="text-center mb-4"><a href="https://pubmed.ncbi.nlm.nih.gov/30150232/" target="_blank">Tsao et al. 2018</a></h4>
<div class="row align-items-center">
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Tsao2018-C-1.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Tsao2018-C-1.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Tsao2018-C-2.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Tsao2018-C-2.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
</div>
<!--Wang et al. 2019-->
<h4 class="text-center mb-4"><a href="https://pubmed.ncbi.nlm.nih.gov/31792408/" target="_blank">Wang et al. 2019</a></h4>
<div class="row align-items-center">
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Wang2019-C-1.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Wang2019-C-1.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Wang2019-C-2.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Wang2019-C-2.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
</div>
<!--Wright et al. 2019-->
<h4 class="text-center mb-4"><a href="https://pubmed.ncbi.nlm.nih.gov/31551330/" target="_blank">Wright et al. 2019</a></h4>
<div class="row align-items-center">
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Wright2019-C-1.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Wright2019-C-1.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Wright2019-C-2.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Wright2019-C-2.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
</div>
<!--Yuan et al. 2019-->
<h4 class="text-center mb-4"><a href="https://pubmed.ncbi.nlm.nih.gov/31551330/" target="_blank">Yuan et al. 2019</a></h4>
<div class="row align-items-center">
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Yuan2019-C-1.png' | absolute_url }}"><img src="{{ '/img/examples/Yuan2019-C-1.png' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
<div class="col-sm mb-5 align-middle">
<a href="{{ '/img/examples/Yuan2019-C-2.jpeg' | absolute_url }}"><img src="{{ '/img/examples/Yuan2019-C-2.jpeg' | absolute_url }}" width="300px" alt="Concept Map example"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /tab card -->
<!--<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<p class="mb-0">These examples show a few different successful approaches to concept mapping the introduction of a paper.</p>
<p>Take a look at the example concept maps and click on the "+" icons to learn why each concept map was successful.</p>
</div>
</div>
</div>
</div>-->
</section>
<!-- ****** -->
<!-- Guide & Enable - the introductory/overview box -->
<!-- ****** -->
<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded">
<!-- change to ml-auto to push right -->
<div class="section-heading mb-0">
<h2 class="mb-0">
<!--<span class="section-heading-upper">Guide & Enable</span>-->
<span class="section-heading-lower">Give it a try!</span>
</h2>
<div class="mt-2" style="text-transform: none">
<h3>Tips & Strategies</h3>
<blockquote class="blockquote">
<p class="mb-0">"The concept map was really helpful because it first exposed me to the overall paper before reading about the details that usually muddy my understanding."</p>
<footer class="blockquote-footer">A successful learner.</footer>
</blockquote>
<blockquote class="blockquote">
<p class="mb-0">"The most important thing I look for at this stage is that the background information, or the things we already know, are linked together in a way that leads to the main scientific problem or question the paper is addressing. <strong>Right now we are trying to understand the rationale for why the scientists are going to do the experiments.</strong>"</p>
<footer class="blockquote-footer">A CREATES teacher.</footer>
</blockquote>
<!-- todo:: find better css for quotes - ideally with a photo of person -->
<ul>
<li>There is not one right way to do concept maps, but remember that advanced maps have more branches and connections.</li>
<li>The main purpose of the introduction is often to show the relationships between current knowledge and the research question. Make sure your concept map shows this!</li>
<li>Prefer to work on a computer? Try <a href="https://cmap.ihmc.us/" target="_blank">Cmap</a>, a free concept mapping software.</li>
</ul>
<h3>Ready?</h3>
<p>Now you are ready to concept map the introduction! When you finish, use this checklist to make sure your concept map has everything it needs:</p>
<!-- todo:: is there a way to do this w/o it being an input form? -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input"> </div><span class="bg-white w-auto border px-3 rounded-right">Broadest concepts at the top or center of the paper</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input"> </div><span class="bg-white w-auto border px-3 rounded-right">Linking words connecting every concept</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input"> </div><span class="bg-white w-auto border px-3 rounded-right">First and second drafts</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- an optional image/overview can be included here -->
<!-- an image that combines expert learner/teacher quote with visual illustration of tip could be powerful -->
<!--
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="{{ 'img/placeholder.png' | absolute_url }}" alt="A placeholder image.">
-->
<!-- an optional text box to include below the image -->
<!--
<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<div class="mb-0">
<p>This is an optional box of text that you can include below the image if you want to.</p>
<p>Note that without the image, this will overlap with the text box above.</p>
</div>
</div>
</div>
-->
</div>
</div>
</section>
<!-- todo:: improve this navigation. Needs to perhaps provide more context about where you are and what is next - especially on mid/large screens. small screen nav could be very minimalist. could be done programatically as an include, perhaps? -->
<!-- navigation at bottom of page -->
<section>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="{{ 'index.html' | absolute_url }}" aria-label="Previous">
<span aria-hidden="true">« Home</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="{{ 'r/' | absolute_url }}" aria-label="Next">
<span aria-hidden="true">R »</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</section>
<!-- ********* -->
<!-- modals - these pop up to provide more info about each step -->
<!-- ********* -->
<!-- Modal 1.1 - Pop up with more information -->
<div class="modal fade" id="step-1-1-info" tabindex="-1" role="dialog" aria-labelledby="More information on step 1.1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="modal-title" id="exampleModalLabel">More information on step 1.1</h5>-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> <img src="{{ '/img/c_definitions_and_summary.png' | absolute_url }}" class="img-thumbnail img-fluid" alt="Abstract representation of definitions and summary">
<!--<p>On a sheet of paper, (1) write down definitions of key terms and unfamiliar concepts, and (2) write a brief summary describing what the researchers say about previous research and unanswered questions in the field.</p>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal 1.2 - Pop up with more information -->
<div class="modal fade" id="step-1-2-info" tabindex="-1" role="dialog" aria-labelledby="More information on step 1.2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="modal-title" id="exampleModalLabel">More information on step 1.2</h5>-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> <img src="{{ '/img/c-annotated-article.png' | absolute_url }}" class="img-thumbnail img-fluid" alt="Abstract representation of article with experimental variable highlighted, hypothesis circled, and methodology underlined.">
<!--<p>Go through the introduction of your article and label experimental variables, hypotheses, and methodologies. Feel free to make up your own annotation legend, too.</p>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal 2.1 - Pop up with more information -->
<div class="modal fade" id="step-2-1-info" tabindex="-1" role="dialog" aria-labelledby="More information on step 2.1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="modal-title" id="exampleModalLabel">More information on step 2.1</h5>-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> <img src="{{ '/img/c-abstract-concept-map.png' | absolute_url }}" class="img-thumbnail img-fluid" alt="Abstract representation of a concept map">
<!--<p>A concept map should include the broadest concept at the top or center of the page, with linking words connecting subconcepts. For best results, make first and second drafts!</p>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /modals -->